chore: merge pull request #32 from antonreshetov:dev

.github/workflows/main.yml

@@ -29,12 +29,19 @@ jobs:
       - name: Build
         run: yarn run build
 
-      - name: Upload Mac artifacts
+      - name: Upload Mac artifacts (zip)
         uses: actions/upload-artifact@v1
         if: startsWith(matrix.os, 'macOS')
         with:
-          name: mac
+          name: mac-zip
           path: build/massCode-${{ env.TAG }}-mac.zip
+
+      - name: Upload Mac artifacts (dmg)
+        uses: actions/upload-artifact@v1
+        if: startsWith(matrix.os, 'macOS')
+        with:
+          name: mac-dmg
+          path: build/massCode-${{ env.TAG }}.dmg
 
       - name: Upload Linux artifacts
         uses: actions/upload-artifact@v1
@@ -74,10 +81,15 @@ jobs:
           draft: true
           prerelease: false
 
-      - name: Dowload Mac Artifact
+      - name: Dowload Mac Artifact (zip)
+        uses: actions/download-artifact@v1
+        with:
+          name: mac-zip
+
+      - name: Dowload Mac Artifact (dmg)
         uses: actions/download-artifact@v1
         with:
-          name: mac
+          name: mac-dmg
 
       - name: Dowload Linux Artifact
         uses: actions/download-artifact@v1
@@ -89,16 +101,26 @@ jobs:
         with:
           name: win
 
-      - name: Upload Release Mac Asset
+      - name: Upload Release Mac Asset (zip)
         uses: actions/upload-release-asset@v1.0.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
-          asset_path: mac/massCode-${{ env.TAG }}-mac.zip
+          asset_path: mac-zip/massCode-${{ env.TAG }}-mac.zip
           asset_name: massCode-${{ env.TAG }}-mac.zip
           asset_content_type: application/zip
 
+      - name: Upload Release Mac Asset (dmg)
+        uses: actions/upload-release-asset@v1.0.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: mac-dmg/massCode-${{ env.TAG }}.dmg
+          asset_name: massCode-${{ env.TAG }}.dmg
+          asset_content_type: application/x-apple-diskimage
+
       - name: Upload Release Linux Asset
         uses: actions/upload-release-asset@v1.0.1
         env:

src/main/lib/main-menu.js

@@ -169,6 +169,13 @@ export default mainWindow => {
         click () {
           mainWindow.webContents.send('menu:copy-snippet')
         }
+      },
+      {
+        label: 'Format',
+        accelerator: 'Shift+CommandOrControl+F',
+        click () {
+          mainWindow.webContents.send('menu:format-snippet')
+        }
       }
     ]
   }
@@ -207,20 +214,34 @@ export default mainWindow => {
         }
       },
       {
-        label: 'GitHub',
+        label: 'Release Notes',
+        click () {
+          shell.openExternal('https://masscode.io/releases')
+        }
+      },
+      {
+        label: 'View in GitHub',
         click () {
           shell.openExternal('https://github.com/antonreshetov/massCode')
         }
       },
       {
-        label: 'Donate',
+        label: 'Report Issue',
         click () {
-          shell.openExternal('https://masscode.io/donate')
+          shell.openExternal(
+            'https://github.com/antonreshetov/massCode/issues/new'
+          )
         }
       },
       {
         type: 'separator'
       },
+      {
+        label: 'Donate',
+        click () {
+          shell.openExternal('https://masscode.io/donate')
+        }
+      },
       {
         label: 'About',
         click () {

src/main/store/module/preferences.js

@@ -34,6 +34,12 @@ const preferences = new Store({
     insertSpaces: {
       default: true
     },
+    prettierSemi: {
+      default: false
+    },
+    prettierQuotes: {
+      default: true
+    },
     allowAnalytics: {
       default: true
     }

src/renderer/App.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    id="app"
-    :data-theme="app.theme"
-  >
+  <div id="app">
     <div class="app-title-bar" />
     <KeepAlive>
       <RouterView />
@@ -34,8 +31,15 @@ export default {
     ...mapGetters('snippets', ['snippetsBySort'])
   },
 
+  watch: {
+    'app.theme' (v) {
+      document.body.setAttribute('data-theme', v)
+    }
+  },
+
   created () {
     this.initState()
+    document.body.setAttribute('data-theme', this.app.theme)
   },
 
   methods: {

src/renderer/assets/scss/base.scss

@@ -1,5 +1,6 @@
 body {
   font-family: var(--font-primary);
+  background-color: var(--color-bg);
 }
 
 #app {

src/renderer/assets/scss/variables.scss

@@ -7,6 +7,7 @@
   --snippet-tab-header-height: 40px;
   --snippet-tab-height: 30px;
   --title-bar-height: 20px;
+  --menu-header: 80px;
 
   --spacing-unit: 4px;
   --spacing-xs: calc(var(--spacing-unit) * 2);

src/renderer/components/editor/MonacoEditor.vue

@@ -30,6 +30,7 @@ import { menu } from '@@/lib'
 import { mapState, mapGetters } from 'vuex'
 import languages from './languages'
 import { track } from '@@/lib/analytics'
+import prettier from 'prettier'
 
 export default {
   name: 'MonacoEditor',
@@ -67,7 +68,7 @@ export default {
 
   computed: {
     ...mapState(['app', 'preferences']),
-    ...mapGetters('snippets', ['searchQuery']),
+    ...mapGetters('snippets', ['searchQuery', 'selected']),
     languagesMenu () {
       return languages
         .map(i => {
@@ -101,13 +102,39 @@ export default {
         }
       }
       return style
+    },
+    isFormatAvailable () {
+      const available = [
+        'css',
+        'graphql',
+        'html',
+        'javascript',
+        'json',
+        'less',
+        'markdown',
+        'scss',
+        'typescript',
+        'yaml'
+      ]
+      return available.includes(this.language)
     }
   },
 
   watch: {
     'app.theme' () {
       this.setTheme()
     },
+    'app.snippetListWidth' () {
+      this.updateLayout()
+    },
+    'app.sidebarWidth' () {
+      this.updateLayout()
+    },
+    selected () {
+      this.$nextTick(() => {
+        this.updateLayout()
+      })
+    },
     'preferences.renderWhitespace' (v) {
       this.editor.updateOptions({ renderWhitespace: v })
     },
@@ -128,6 +155,12 @@ export default {
     }
   },
 
+  created () {
+    this.$bus.$on('menu:format-snippet', () => {
+      this.format()
+    })
+  },
+
   mounted () {
     this.init()
     this.searchHighlight(this.searchQuery)
@@ -149,6 +182,12 @@ export default {
       const footerHeight = 30
       this.editor.layout({ width, height: height - footerHeight - 60 })
     }
+    this.updateLayout()
+    window.addEventListener('resize', this.updateLayout)
+  },
+
+  beforeDestroy () {
+    window.removeEventListener('resize', this.updateLayout)
   },
 
   methods: {
@@ -167,7 +206,6 @@ export default {
           verticalScrollbarSize: 5,
           horizontalScrollbarSize: 5
         },
-        automaticLayout: true,
         contextmenu: false,
         scrollBeyondLastLine: false,
         renderWhitespace: this.preferences.renderWhitespace,
@@ -252,13 +290,6 @@ export default {
     onClickLanguage () {
       menu.popup(this.languagesMenu)
     },
-    calculateHeight () {
-      window.addEventListener('resize', () => {
-        const { height, width } = this.$refs.editor.getBoundingClientRect()
-        const footerHeight = 0
-        this.editor.layout({ width, height: height - footerHeight })
-      })
-    },
     searchHighlight (query) {
       const model = this.editor.getModel()
       const matches = model.findMatches(query, false, true, false)
@@ -272,6 +303,32 @@ export default {
         this.decorations,
         newDecorations
       )
+    },
+    format () {
+      if (!this.isFormatAvailable) return
+
+      let parser = this.language
+
+      if (this.language === 'javascript') parser = 'babel'
+      if (this.language === 'html') parser = 'vue'
+
+      const formated = prettier.format(this.value, {
+        parser,
+        semi: this.preferences.prettierSemi,
+        tabWidth: this.preferences.tabSize,
+        useTabs: !this.preferences.insertSpaces,
+        singleQuote: this.preferences.prettierQuotes
+      })
+      this.$emit('input', formated)
+    },
+    updateLayout () {
+      const snippetListWidth = this.app.snippetListWidth
+      const sidebarWidth = this.app.sidebarWidth
+      const editorHeight = this.$refs.editor.getBoundingClientRect().height
+      const width = window.innerWidth - snippetListWidth - sidebarWidth
+      const height = editorHeight
+
+      this.editor.layout({ width, height })
     }
   }
 }

src/renderer/components/preferences/Editor.vue

@@ -1,5 +1,6 @@
 <template>
   <AppForm>
+    <h4>Editor</h4>
     <AppFormItem label="Tab size">
       <AppInput v-model="tabSize" />
       <div class="desc">
@@ -33,6 +34,23 @@
         Controls how lines should wrap.
       </div>
     </AppFormItem>
+    <h4>Format</h4>
+    <AppFormItem label="Semicolons">
+      <AppCheckbox v-model="prettierSemi">
+        Enable
+      </AppCheckbox>
+      <div class="desc">
+        Print semicolons at the ends of statements.
+      </div>
+    </AppFormItem>
+    <AppFormItem label="Quotes">
+      <AppCheckbox v-model="prettierQuotes">
+        Enable
+      </AppCheckbox>
+      <div class="desc">
+        Use single quotes instead of double quotes.
+      </div>
+    </AppFormItem>
   </AppForm>
 </template>
 
@@ -94,9 +112,31 @@ export default {
       set (v) {
         this.$store.dispatch('preferences/setInsertSpaces', JSON.parse(v))
       }
+    },
+    prettierSemi: {
+      get () {
+        return this.preferences.prettierSemi
+      },
+      set (v) {
+        this.$store.dispatch('preferences/setPrettierSemi', v)
+      }
+    },
+    prettierQuotes: {
+      get () {
+        return this.preferences.prettierQuotes
+      },
+      set (v) {
+        this.$store.dispatch('preferences/setPrettierQuotes', v)
+      }
     }
   }
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+h4 {
+  &:first-of-type {
+    margin-top: 0;
+  }
+}
+</style>

src/renderer/components/uikit/AppInputTags.vue

@@ -54,6 +54,7 @@ export default {
 
   computed: {
     ...mapGetters('tags', ['tags']),
+    ...mapGetters('snippets', ['selected']),
     isResult () {
       return this.autocomplete.length > 0
     }
@@ -66,6 +67,11 @@ export default {
       } else {
         this.showPopper = false
       }
+    },
+    selected () {
+      this.$nextTick(() => {
+        this.checkTagsHeight()
+      })
     }
   },