Merge pull request #63 from agileseason/61-add-monospace-font-preference

Add monospace font preference for markdown editor
agileseason · Nov 6, 2021 · b3ec2b7 · b3ec2b7
2 parents c487ab1 + 3d93385
commit b3ec2b7
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 8 deletions.
diff --git a/src/app.vue b/src/app.vue
@@ -11,7 +11,8 @@ export default {
   name: 'App',
   created() {
     loadFonts([
-      'Roboto:300,400,500'
+      'Roboto:300,400,500',
+      'Roboto Mono:300',
     ]);
   }
 };

diff --git a/src/components/board/issues/markdown_editor.vue b/src/components/board/issues/markdown_editor.vue
@@ -6,6 +6,7 @@
         :value='modelValue'
         :disabled='isUploading'
         :placeholder='placeholder'
+        :class='markdownEditorFont'
         ref='textarea'
         @input='onInput'
         @keydown='onKeyDown'
@@ -91,7 +92,8 @@ export default {
   }),
   computed: {
     ...get([
-      'board/mentionIssues'
+      'board/mentionIssues',
+      'user/markdownEditorFont'
     ]),
     filteredItems() {
       const items = this.key === '@' ? this.assignableUsers : this.mentionIssues;
@@ -380,6 +382,11 @@ textarea
   resize: none
   width: 100%
 
+  &.mono
+    //font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace
+    font-family: 'Roboto Mono',
+    font-weight: 300
+
   &::placeholder
     color: #9fa8da
     opacity: 1

diff --git a/src/store/modules/user.js b/src/store/modules/user.js
@@ -20,7 +20,8 @@ export default {
   state: {
     ...DEFAULT_STATE,
     rememberToken: CookieStore.get(NAMESPACE, 'rememberToken', null),
-    issueModalStyle: CookieStore.get(NAMESPACE, 'issueModalStyle', 'center')
+    issueModalStyle: CookieStore.get(NAMESPACE, 'issueModalStyle', 'center'),
+    markdownEditorFont: CookieStore.get(NAMESPACE, 'markdownEditorFont', 'default')
   },
 
   getters: {
@@ -62,6 +63,12 @@ export default {
 
       commit('UPDATE_ISSUE_MODAL_STYLE', issueModalStyle);
     },
+    updateMarkdownEditorFont({ commit }, { isMono }) {
+      console.log(isMono);
+      if (isMono == null) { return; }
+      const markdownEditorFont = isMono ? 'mono' : 'default';
+      commit('UPDATE_MARKDOWN_EDITOR_FONT', markdownEditorFont);
+    },
   },
 
   mutations: {
@@ -94,6 +101,10 @@ export default {
     UPDATE_ISSUE_MODAL_STYLE(state, issueModalStyle) {
       state.issueModalStyle = issueModalStyle;
       saveCookies('issueModalStyle', state.issueModalStyle);
+    },
+    UPDATE_MARKDOWN_EDITOR_FONT(state, markdownEditorFont) {
+      state.markdownEditorFont = markdownEditorFont;
+      saveCookies('markdownEditorFont', state.markdownEditorFont);
     }
   }
 };
diff --git a/src/views/settings.vue b/src/views/settings.vue
@@ -9,7 +9,8 @@
     @select='selectTab'
   />
   <article v-if='active === "Appearance"' class='body'>
-    <h2 class='subtitle'>Issue modal position</h2>
+    <h2 class='subtitle'>Issue view preference</h2>
+    <p>Select the preferred position of the modal view</p>
     <div
       v-for='item in issueModalStyles'
       class='radio-item'
@@ -22,10 +23,27 @@
         :id='item'
       />
       <label :for='item'>
-        {{ item }}
+        {{ issueModalStyleLabels[item] }}
         <span class='note'>{{issueModalStyleNotes[item]}}</span>
       </label>
     </div>
+
+    <br>
+    <br>
+
+    <h2 class='subtitle'>Markdown editor font preference</h2>
+    <p>
+      Font preference for plain text editors that support Markdown
+      styling (e.g. pull request and issue descriptions, comments.)
+    </p>
+    <label class='checkbox'>
+      <input
+        v-model='isMonoSelected'
+        type='checkbox'
+        @change='updateIsMono'
+      />
+      Use a fixed-width (monospace) font when editing Markdown
+    </label>
   </article>
 </template>
 
@@ -51,15 +69,21 @@ export default {
       'center',
       'right',
     ],
+    issueModalStyleLabels: {
+      center: 'Center',
+      right: 'Right',
+    },
     issueModalStyleNotes: {
       center: 'Best for laptop (default)',
       right: 'Best for wide monitor',
     },
     selectedIssueModalStyle: undefined,
+    isMonoSelected: undefined
   }),
   computed: {
     isLoaded: get('user/isLoaded'),
     issueModalStyle: get('user/issueModalStyle'),
+    markdownEditorFont: get('user/markdownEditorFont'),
     token: get('user/token'),
     boards: get('user/boards')
   },
@@ -69,22 +93,29 @@ export default {
     }
   },
   async created() {
+    this.selectedIssueModalStyle = this.issueModalStyle;
+    this.isMonoSelected = this.markdownEditorFont === 'mono';
+
     const user = await this.fetchProfile();
     if (user == null) {
       this.$router.push({ name: 'home' });
     } else if (user.boards.length === 0) {
       this.$router.push({ name: 'board_new' });
     }
-    this.selectedIssueModalStyle = this.issueModalStyle;
   },
   methods: {
     ...call([
       'user/fetchProfile',
-      'user/updateIssueModelStyle'
+      'user/updateIssueModelStyle',
+      'user/updateMarkdownEditorFont'
     ]),
     selectTab(item) {
       this.active = item;
     },
+    updateIsMono(e) {
+      this.isMonoSelected = e.target.checked;
+      this.updateMarkdownEditorFont({ isMono: this.isMonoSelected });
+    }
   }
 }
 </script>
@@ -116,13 +147,23 @@ article
     cursor: pointer
 
   input
-    margin: 0 4px 0 0
+    margin: 0 6px 0 0
 
   label
     text-transform: capitalize
+    font-weight: 500
 
   .note
     color: #9E9E9E
     margin-left: 4px
     text-transform: none
+    font-weight: 400
+
+label.checkbox
+  display: flex
+  align-items: center
+  font-weight: 500
+
+  input
+    margin: 0 6px 0 0
 </style>