Settings styles; close #228

Former-commit-id: b564ba4e357b2d4b18c7f9407395894eb5e18159 [formerly 84ef220a2b10b8ed501c4499ef03d99acc148546] [formerly 00056633e5c2e947201a2dd1ad3bb937821edf61 [formerly e3212cd07675750e18c55516c51d669118b9f023]]
Former-commit-id: 866b84d788a5f8a9767affdef17806dbac984db6 [formerly a22d95ba5726dd5ea757410249bef37654213a68]
Former-commit-id: 4600591829c0a41c5de9defc3e30fbac28815e25

assets/src/views/Layout.vue

@@ -6,7 +6,7 @@
     <site-header></site-header>
     <sidebar></sidebar>
     <main>
-      <router-view v-on:css-updated="updateCSS"></router-view>
+      <router-view @css="$emit('update:css')"></router-view>
     </main>
     <prompts></prompts>
   </div>
@@ -34,23 +34,10 @@ export default {
     }
   },
   mounted () {
-    this.updateCSS()
+    this.$emit('update:css')
   },
-  methods: {
-    updateCSS () {
-      let css = this.$store.state.user.css
-
-      let style = document.querySelector('style[title="user-css"]')
-      if (style !== undefined && style !== null) {
-        style.parentElement.removeChild(style)
-      }
-
-      style = document.createElement('style')
-      style.title = 'user-css'
-      style.type = 'text/css'
-      style.appendChild(document.createTextNode(css))
-      document.head.appendChild(style)
-    }
+  beforeDestroy () {
+    this.$emit('clean:css')
   }
 }
 </script>

assets/src/views/Settings.vue

@@ -6,7 +6,7 @@
       <li :class="{ active: $route.path === '/settings/users' }"><router-link to="/settings/users">{{ $t('settings.userManagement') }}</router-link></li>
     </ul>
 
-    <router-view></router-view>
+    <router-view @css="$emit('css')"></router-view>
   </div>
 </template>
 

assets/src/views/settings/Global.vue

@@ -40,10 +40,17 @@
 
       <div class="card-content">
         <p class="small">{{ $t('settings.commandsHelp') }}</p>
-        <template v-for="command in commands">
-          <h3>{{ capitalize(command.name) }}</h3>
-          <textarea v-model.trim="command.value"></textarea>
-        </template>
+
+        <div v-for="command in commands" :key="command.name" class="collapsible">
+          <input :id="command.name" type="checkbox">
+          <label :for="command.name">
+            <p>{{ capitalize(command.name) }}</p>
+            <i class="material-icons">arrow_drop_down</i>
+          </label>
+          <div class="collapse">
+            <textarea v-model.trim="command.value"></textarea>
+          </div>
+        </div>
       </div>
 
       <div class="card-action">
@@ -73,6 +80,7 @@ export default {
   created () {
     getSettings()
       .then(settings => {
+        console.log(settings)
         if (this.$store.state.staticGen.length > 0) {
           this.parseStaticGen(settings.staticGen)
         }
@@ -120,9 +128,8 @@ export default {
       updateSettings(this.css, 'css')
         .then(() => {
           this.$showSuccess(this.$t('settings.settingsUpdated'))
-          let style = document.querySelector('style[title="global-css"]')
-          style.innerHTML = ''
-          style.appendChild(document.createTextNode(this.css))
+          this.$store.commit('setCSS', this.css)
+          this.$emit('css')
         })
         .catch(this.$showError)
     },

assets/src/views/settings/Profile.vue

@@ -98,7 +98,7 @@ export default {
 
       updateUser(user, 'partial').then(location => {
         this.$store.commit('setUser', user)
-        this.$emit('css-updated')
+        this.$emit('css')
         this.$showSuccess(this.$t('settings.settingsUpdated'))
       }).catch(e => {
         this.$showError(e)