User-defined titlebar settings (#721)

src/main/preference.js

@@ -1,6 +1,7 @@
 import fs from 'fs'
 import path from 'path'
 import { ipcMain, BrowserWindow } from 'electron'
+import { isOsx } from './config'
 import appWindow from './window'
 import { getPath, hasSameKeys, log, ensureDir } from './utils'
 
@@ -18,18 +19,23 @@ class Preference {
   }
 
   init () {
-    // If the preference.md is not existed or can not load json from it.
-    // Rebuild the preference.md
     const { userDataPath, staticPath } = this
+    const defaultSettings = this.loadJson(staticPath)
     let userSetting = null
+
+    // Try to load settings or write default settings if file doesn't exists.
     if (!fs.existsSync(userDataPath) || !this.loadJson(userDataPath)) {
       ensureDir(getPath('userData'))
       const content = fs.readFileSync(staticPath, 'utf-8')
       fs.writeFileSync(userDataPath, content, 'utf-8')
-    } else {
-      const defaultSettings = this.loadJson(staticPath)
+
       userSetting = this.loadJson(userDataPath)
       this.validateSettings(userSetting)
+    } else {
+      userSetting = this.loadJson(userDataPath)
+      this.validateSettings(userSetting)
+
+      // Update outdated settings
       const requiresUpdate = !hasSameKeys(defaultSettings, userSetting)
       if (requiresUpdate) {
         // remove outdated settings
@@ -48,7 +54,13 @@ class Preference {
           .catch(log)
       }
     }
-    if (!userSetting) userSetting = this.loadJson(userDataPath)
+
+    if (!userSetting) {
+      console.error('ERROR: Cannot load settings.')
+      userSetting = defaultSettings
+      this.validateSettings(userSetting)
+    }
+
     this.cache = userSetting
   }
 
@@ -108,18 +120,27 @@ class Preference {
     }
 
     let brokenSettings = false
-    if (!settings.theme || (settings.theme && !/dark|light/.test(settings.theme))) {
+    if (!settings.theme || (settings.theme && !/^(dark|light)$/.test(settings.theme))) {
       brokenSettings = true
       settings.theme = 'light'
     }
     if (!settings.bulletListMarker ||
-      (settings.bulletListMarker && !/\+|-|\*/.test(settings.bulletListMarker))) {
+      (settings.bulletListMarker && !/^(\+|-|\*)$/.test(settings.bulletListMarker))) {
       brokenSettings = true
       settings.bulletListMarker = '-'
     }
+    if (!settings.titleBarStyle || !/^(native|csd|custom)$/.test(settings.titleBarStyle)) {
+      settings.titleBarStyle = 'csd'
+    }
     if (brokenSettings) {
       log('Broken settings detected; fallback to default value(s).')
     }
+
+    // Currently no CSD is available on Linux and Windows (GH#690)
+    const titleBarStyle = settings.titleBarStyle.toLowerCase()
+    if (!isOsx && titleBarStyle === 'csd') {
+      settings.titleBarStyle = 'custom'
+    }
   }
 }
 

src/main/window.js

@@ -57,6 +57,16 @@ class AppWindow {
 
     const { x, y, width, height } = this.ensureWindowPosition(mainWindowState)
     const winOpt = Object.assign({ x, y, width, height }, defaultWinOptions, options)
+
+    // Enable native or custom window
+    const { titleBarStyle } = userPreference.getAll()
+    if (titleBarStyle === 'custom') {
+      winOpt.titleBarStyle = ''
+    } else if (titleBarStyle === 'native') {
+      winOpt.frame = true
+      winOpt.titleBarStyle = ''
+    }
+
     const win = new BrowserWindow(winOpt)
     windows.set(win.id, {
       win,

src/renderer/components/titleBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="title-bar"
-    :class="[{ 'active': active }, theme, { 'frameless': platform !== 'darwin' }]"
+    :class="[{ 'active': active }, theme, { 'frameless': titleBarStyle === 'custom' }, { 'isOsx': platform === 'darwin' }]"
   >
     <div class="title">
       <span v-if="!filename">Mark Text</span>
@@ -15,27 +15,33 @@
             <use xlink:href="#icon-arrow-right"></use>
           </svg>
         </span>
-        <span @click="rename" class="filename">{{ filename }}</span>
+        <span
+          class="filename"
+          :class="{'isOsx': platform === 'darwin'}"
+          @click="rename"
+        >
+          {{ filename }}
+        </span>
         <span class="save-dot" :class="{'show': !isSaved}"></span>
       </span>
     </div>
-    <div :class="platform !== 'darwin' ? 'left-toolbar title-no-drag' : 'right-toolbar'">
+    <div :class="titleBarStyle === 'custom' ? 'left-toolbar title-no-drag' : 'right-toolbar'">
       <div
-        v-if="platform !== 'darwin'"
+        v-if="titleBarStyle === 'custom'"
         class="frameless-titlebar-menu title-no-drag"
         @click.stop="handleMenuClick"
       >&#9776;</div>
       <div
         v-if="wordCount"
         class="word-count"
-        :class="[{ 'title-no-drag': platform !== 'darwin' }]"
+        :class="[{ 'title-no-drag': titleBarStyle === 'custom' }]"
         @click.stop="handleWordClick"
       >{{ `${HASH[show]} ${wordCount[show]}` }}</div>
     </div>
     <div
-      v-if="platform !== 'darwin'"
+      v-if="titleBarStyle === 'custom'"
       class="right-toolbar"
-      :class="[{ 'title-no-drag': platform !== 'darwin' }]"
+      :class="[{ 'title-no-drag': titleBarStyle === 'custom' }]"
     >
       <div class="frameless-titlebar-button frameless-titlebar-close" @click.stop="handleCloseClick">
         <div>
@@ -65,6 +71,7 @@
 
 <script>
   import { remote } from 'electron'
+  import { mapState } from 'vuex'
   import { minimizePath, restorePath, maximizePath, closePath } from '../assets/window-controls.js'
 
   export default {
@@ -101,6 +108,9 @@
       isSaved: Boolean
     },
     computed: {
+      ...mapState({
+        'titleBarStyle': state => state.preferences.titleBarStyle,
+      }),
       paths () {
         if (!this.pathname) return []
         const pathnameToken = this.pathname.split('/').filter(i => i)
@@ -215,7 +225,7 @@
     }
   }
 
-  .title-bar:not(.frameless) .title .filename:hover {
+  .title-bar .title .filename.isOsx:hover {
     color: var(--primary);
   }
 

src/renderer/store/preferences.js

@@ -19,6 +19,7 @@ const state = {
   autoPairQuote: true,
   tabSize: 4,
   hideQuickInsertHint: false,
+  titleBarStyle: 'csd',
   // edit modes (they are not in preference.md, but still put them here)
   typewriter: false, // typewriter mode
   focus: false, // focus mode

static/preference.md

@@ -12,6 +12,8 @@ Edit and save to update preferences. You can only change the JSON below!
 
 - **textDirection**: *String* `ltr` or `rtl`
 
+- **titleBarStyle**: *String* `csd` (macOS only), `custom` or `native`
+
 ```json
 {
   "fontSize": "16px",
@@ -32,7 +34,8 @@ Edit and save to update preferences. You can only change the JSON below!
   "autoPairQuote": true,
   "endOfLine": "default",
   "tabSize": 4,
-  "textDirection": "ltr"
+  "textDirection": "ltr",
+  "titleBarStyle": "csd"
 }
 ```