feat(editor): add highlightGutter & highlightLine settings (#45)

massCodeIO · Apr 19, 2022 · 52f8455 · 52f8455
1 parent c7d8c58
commit 52f8455
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 17 deletions.
diff --git a/src/main/store/module/preferences.ts b/src/main/store/module/preferences.ts
@@ -24,7 +24,9 @@ export default new Store<PreferencesStore>({
       trailingComma: 'none',
       semi: false,
       singleQuote: true,
-      theme: 'github'
+      theme: 'chrome',
+      highlightLine: false,
+      highlightGutter: false
     }
   }
 })
diff --git a/src/renderer/components/editor/TheEditor.vue b/src/renderer/components/editor/TheEditor.vue
@@ -115,7 +115,9 @@ const init = async () => {
     printMargin: false,
     tabSize: appStore.editor.tabSize,
     wrap: appStore.editor.wrap,
-    showInvisibles: appStore.editor.showInvisibles
+    showInvisibles: appStore.editor.showInvisibles,
+    highlightGutterLine: appStore.editor.highlightGutter,
+    highlightActiveLine: appStore.editor.highlightLine
   })
 
   setValue()

diff --git a/src/renderer/components/preferences/EditorPreferences.vue b/src/renderer/components/preferences/EditorPreferences.vue
@@ -31,6 +31,18 @@
           name="showInvisibles"
         />
       </AppFormItem>
+      <AppFormItem label="Highlight Line">
+        <AppCheckbox
+          v-model="appStore.editor.highlightLine"
+          name="showInvisibles"
+        />
+      </AppFormItem>
+      <AppFormItem label="Highlight Gutter">
+        <AppCheckbox
+          v-model="appStore.editor.highlightGutter"
+          name="showInvisibles"
+        />
+      </AppFormItem>
       <h4>Prettier</h4>
       <AppFormItem label="Trailing Comma">
         <AppSelect

diff --git a/src/renderer/components/ui/form/AppForm.vue b/src/renderer/components/ui/form/AppForm.vue
@@ -12,5 +12,6 @@
   display: flex;
   flex-flow: column;
   gap: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
 }
 </style>
diff --git a/src/renderer/components/ui/form/AppFormItem.vue b/src/renderer/components/ui/form/AppFormItem.vue
@@ -28,7 +28,7 @@ defineProps<Props>()
 <style lang="scss" scoped>
 .form-item {
   display: grid;
-  grid-template-columns: 120px 1fr;
+  grid-template-columns: 150px 1fr;
   .inner {
     display: flex;
     flex-flow: column;

diff --git a/src/renderer/components/ui/menu/AppMenu.vue b/src/renderer/components/ui/menu/AppMenu.vue
@@ -64,7 +64,6 @@ provide('items', items.value)
 <style lang="scss" scoped>
 .menu {
   width: 100%;
-  height: 300px;
   display: grid;
   grid-template-columns: 150px 1fr;
   gap: var(--spacing-sm);

diff --git a/src/renderer/store/app.ts b/src/renderer/store/app.ts
@@ -16,7 +16,9 @@ const EDITOR_DEFAULTS: EditorSettings = {
   trailingComma: 'none',
   semi: false,
   singleQuote: true,
-  theme: 'chrome'
+  theme: 'chrome',
+  highlightLine: false,
+  highlightGutter: false
 }
 
 export const useAppStore = defineStore('app', {

diff --git a/src/shared/types/main/store.d.ts b/src/shared/types/main/store.d.ts
@@ -1,3 +1,5 @@
+import type { EditorSettings } from '../renderer/store/app'
+
 export interface AppStore {
   bounds: object
   selectedFolderId?: string
@@ -10,20 +12,9 @@ export interface AppStore {
   notifySupport: boolean
 }
 
-interface Editor {
-  fontFamily: string
-  fontSize: number
-  showInvisibles: boolean
-  tabSize: number
-  wrap: string
-  trailingComma: 'all' | 'none' | 'es5'
-  semi: boolean
-  singleQuote: boolean
-  theme: string
-}
 export interface PreferencesStore {
   storagePath: string
   backupPath: string
-  editor: Editor
+  editor: EditorSettings
   theme: string
 }
diff --git a/src/shared/types/renderer/store/app.d.ts b/src/shared/types/renderer/store/app.d.ts
@@ -42,6 +42,8 @@ export interface EditorSettings {
   semi: boolean
   singleQuote: boolean
   theme: ThemeEditor
+  highlightLine: boolean
+  highlightGutter: boolean
 }
 
 export interface State {