feat: updated icons to Nucleo

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>