feat: updated icons to Nucleo

2017-06-18 18:35:33 -04:00
parent 1cb1c5acf9
commit 5312f5320a
34 changed files with 23389 additions and 1549 deletions
--- a/client/js/components/editor-codeblock.vue
+++ b/client/js/components/editor-codeblock.vue
@@ -27,100 +27,102 @@
 </template>

 <script>
-  let codeEditor
-  let ace
+let codeEditor
+let ace

-  export default {
-    name: 'editor-codeblock',
-    data () {
-      return {
-        modes: [],
-        modeSelected: 'text',
-        modelistLoaded: [],
-        isLoading: false
-      }
+export default {
+  name: 'editor-codeblock',
+  data() {
+    return {
+      modes: [],
+      modeSelected: 'text',
+      modelistLoaded: [],
+      isLoading: false
+    }
+  },
+  computed: {
+    content() {
+      return this.$store.state.editorCodeblock.content
    },
-    computed: {
-      content () {
-        return this.$store.state.editorCodeblock.content
-      },
-      isShown () {
-        return this.$store.state.editorCodeblock.shown
-      }
-    },
-    watch: {
-      modeSelected(val, oldVal) {
-        this.loadMode(val)
-      }
-    },
-    methods: {
-      init () {
-        let self = this
-        self._.delay(() => {
-          codeEditor = ace.edit('codeblock-editor')
-          codeEditor.setTheme('ace/theme/tomorrow_night')
-          codeEditor.getSession().setMode('ace/mode/' + self.modeSelected)
-          codeEditor.setOption('fontSize', '14px')
-          codeEditor.setOption('hScrollBarAlwaysVisible', false)
-          codeEditor.setOption('wrap', true)
-          codeEditor.setOption('showPrintMargin', false)
+    isShown() {
+      return this.$store.state.editorCodeblock.shown
+    }
+  },
+  watch: {
+    modeSelected(val, oldVal) {
+      this.loadMode(val)
+    }
+  },
+  methods: {
+    init() {
+      let self = this
+      self._.delay(() => {
+        codeEditor = ace.edit('codeblock-editor')
+        codeEditor.setTheme('ace/theme/tomorrow_night')
+        codeEditor.getSession().setMode('ace/mode/' + self.modeSelected)
+        codeEditor.setOption('fontSize', '14px')
+        codeEditor.setOption('hScrollBarAlwaysVisible', false)
+        codeEditor.setOption('wrap', true)
+        codeEditor.setOption('useSoftTabs', true)
+        codeEditor.setOption('tabSize', 2)
+        codeEditor.setOption('showPrintMargin', false)

-          codeEditor.setValue(self.content)
+        codeEditor.setValue(self.content)

-          codeEditor.focus()
-          codeEditor.renderer.updateFull()
-        }, 100)
-      },
-      loadMode (m) {
-        let self = this
-        if (self._.includes(self.modelistLoaded, m)) {
-          codeEditor.getSession().setMode('ace/mode/' + m)
-        } else {
-          self.isLoading = true
-          self.$http.get('/js/ace/mode-' + m + '.js').then(resp => {
-            if(resp.ok) {
-              eval(resp.bodyText)
-              self.modelistLoaded.push(m)
-              ace.acequire('ace/mode/' + m)
-              codeEditor.getSession().setMode('ace/mode/' + m)
-              self._.delay(() => { self.isLoading = false }, 500)
-            } else {
-              this.$store.dispatch('alert', {
-                style: 'red',
-                icon: 'square-cross',
-                msg: self.$t('editor.codeblockloadingerror')
-              })
-            }
-          }).catch(err => {
-            his.$store.dispatch('alert', {
+        codeEditor.focus()
+        codeEditor.renderer.updateFull()
+      }, 100)
+    },
+    loadMode(m) {
+      let self = this
+      if (self._.includes(self.modelistLoaded, m)) {
+        codeEditor.getSession().setMode('ace/mode/' + m)
+      } else {
+        self.isLoading = true
+        self.$http.get('/js/ace/mode-' + m + '.js').then(resp => {
+          if (resp.ok) {
+            eval(resp.bodyText)
+            self.modelistLoaded.push(m)
+            ace.acequire('ace/mode/' + m)
+            codeEditor.getSession().setMode('ace/mode/' + m)
+            self._.delay(() => { self.isLoading = false }, 500)
+          } else {
+            this.$store.dispatch('alert', {
              style: 'red',
              icon: 'square-cross',
-              msg: 'Error: ' + err.body.msg
+              msg: self.$t('editor.codeblockloadingerror')
            })
+          }
+        }).catch(err => {
+          his.$store.dispatch('alert', {
+            style: 'red',
+            icon: 'square-cross',
+            msg: 'Error: ' + err.body.msg
          })
-        }
-      },
-      cancel () {
-        codeEditor.destroy()
-        this.$store.dispatch('editorCodeblock/close')
-      },
-      insertCode () {
-        let codeBlockText = '\n```' + this.modeSelected + '\n' + codeEditor.getValue() + '\n```\n'
-        this.$store.dispatch('editor/insert', codeBlockText)
-        this.$store.dispatch('alert', {
-          style: 'blue',
-          icon: 'inbox',
-          msg: this.$t('editor.codeblocksuccess')
        })
-        this.cancel()
      }
    },
-    mounted() {
-      FuseBox.import('/js/ace/ace.js', (acePkg) => {
-        ace = acePkg
-        this.modes = ace.acequire('ace/ext/modelist').modesByName
+    cancel() {
+      codeEditor.destroy()
+      this.$store.dispatch('editorCodeblock/close')
+    },
+    insertCode() {
+      let codeBlockText = '\n```' + this.modeSelected + '\n' + codeEditor.getValue() + '\n```\n'
+      this.$store.dispatch('editor/insert', codeBlockText)
+      this.$store.dispatch('alert', {
+        style: 'blue',
+        icon: 'inbox',
+        msg: this.$t('editor.codeblocksuccess')
      })
-      this.$root.$on('editorCodeblock/init', this.init)
+      this.cancel()
    }
+  },
+  mounted() {
+    FuseBox.import('/js/ace/ace.js', (acePkg) => {
+      ace = acePkg
+      this.modes = ace.acequire('ace/ext/modelist').modesByName
+    })
+    this.$root.$on('editorCodeblock/init', this.init)
  }
+}
 </script>
--- a/client/js/components/editor-file.vue
+++ b/client/js/components/editor-file.vue
@@ -13,15 +13,15 @@
                i
            .modal-toolbar.is-green
              a.button(@click='newFolder')
-                i.icon-folder2
+                i.nc-icon-outline.files_folder-14
                span {{ $t('editor.newfolder') }}
              a.button#btn-editor-file-upload
-                i.icon-cloud-upload
+                i.nc-icon-outline.arrows-1_cloud-upload-94
                span {{ (mode === 'file') ? $t('editor.fileupload') : $t('editor.imageupload') }}
                label
                  input(type='file', multiple, :disabled='isLoading', ref='editorFileUploadInput')
              a.button(v-if='mode === "image"', @click='fetchFromUrl')
-                i.icon-cloud-download
+                i.nc-icon-outline.arrows-1_cloud-download-93
                span Fetch from URL
            section.is-gapless
              .columns.is-stretched
@@ -30,7 +30,7 @@
                  ul.model-sidebar-list
                    li(v-for='fld in folders')
                      a(@click='selectFolder(fld)', :class='{ "is-active": currentFolder === fld }')
-                        i.icon-folder2
+                        i.nc-icon-outline.files_folder-17
                        span / {{ fld }}
                  .model-sidebar-header(v-if='mode === "image"') Alignment
                  .model-sidebar-content(v-if='mode === "image"')
--- a/client/js/components/editor.component.js
+++ b/client/js/components/editor.component.js
@@ -81,37 +81,37 @@ export default {
            name: 'heading-1',
            action: SimpleMDE.toggleHeading1,
            className: 'icon-header fa-header-x fa-header-1',
-            title: 'Big Heading'
+            title: 'Header (Level 1)'
          },
          {
            name: 'heading-2',
            action: SimpleMDE.toggleHeading2,
            className: 'icon-header fa-header-x fa-header-2',
-            title: 'Medium Heading'
+            title: 'Header (Level 2)'
          },
          {
            name: 'heading-3',
            action: SimpleMDE.toggleHeading3,
            className: 'icon-header fa-header-x fa-header-3',
-            title: 'Small Heading'
+            title: 'Header (Level 3)'
          },
          {
            name: 'quote',
            action: SimpleMDE.toggleBlockquote,
-            className: 'icon-quote-left',
+            className: 'nc-icon-outline text_quote',
            title: 'Quote'
          },
          '|',
          {
            name: 'unordered-list',
            action: SimpleMDE.toggleUnorderedList,
-            className: 'icon-th-list',
+            className: 'nc-icon-outline text_list-bullet',
            title: 'Bullet List'
          },
          {
            name: 'ordered-list',
            action: SimpleMDE.toggleOrderedList,
-            className: 'icon-list-ol',
+            className: 'nc-icon-outline text_list-numbers',
            title: 'Numbered List'
          },
          '|',
@@ -121,7 +121,7 @@ export default {
              window.alert('Coming soon!')
              // todo
            },
-            className: 'icon-link2',
+            className: 'nc-icon-outline ui-2_link-68',
            title: 'Insert Link'
          },
          {
@@ -129,7 +129,7 @@ export default {
            action: (editor) => {
              self.$store.dispatch('editorFile/open', { mode: 'image' })
            },
-            className: 'icon-image',
+            className: 'nc-icon-outline design_image',
            title: 'Insert Image'
          },
          {
@@ -137,7 +137,7 @@ export default {
            action: (editor) => {
              self.$store.dispatch('editorFile/open', { mode: 'file' })
            },
-            className: 'icon-paper',
+            className: 'nc-icon-outline files_zip-54',
            title: 'Insert File'
          },
          {
@@ -145,7 +145,7 @@ export default {
            action: (editor) => {
              self.$store.dispatch('editorVideo/open')
            },
-            className: 'icon-video-camera2',
+            className: 'nc-icon-outline media-1_video-64',
            title: 'Insert Video Player'
          },
          '|',
@@ -165,7 +165,7 @@ export default {
              })
              editor.codemirror.doc.replaceSelections(curSel)
            },
-            className: 'icon-terminal',
+            className: 'nc-icon-outline arrows-4_enlarge-46',
            title: 'Inline Code'
          },
          {
@@ -175,7 +175,7 @@ export default {
                initialContent: (mde.codemirror.doc.somethingSelected()) ? mde.codemirror.doc.getSelection() : ''
              })
            },
-            className: 'icon-code',
+            className: 'nc-icon-outline design_code',
            title: 'Code Block'
          },
          '|',
@@ -185,13 +185,13 @@ export default {
              window.alert('Coming soon!')
              // todo
            },
-            className: 'icon-table',
+            className: 'nc-icon-outline ui-2_grid-square',
            title: 'Insert Table'
          },
          {
            name: 'horizontal-rule',
            action: SimpleMDE.drawHorizontalRule,
-            className: 'icon-minus2',
+            className: 'nc-icon-outline design_distribute-vertical',
            title: 'Horizontal Rule'
          }
        ],