Added ability to align horizontal title-text.

MairwunNx · Jan 18, 2019 · 4649340 · 4649340
1 parent 7a23f79
commit 4649340
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 4 deletions.
diff --git a/src/options.ts b/src/options.ts
@@ -44,7 +44,12 @@ export interface TitlebarConstructorOptions {
    * Set the order of the elements on the title bar.
    * *The default value is normal*
    */
-  order?: ('normal' | 'reverse' | 'firstButtons');
+  order?: "normal" | "reverse" | "firstButtons";
+  /**
+   * Set horizontal alignment of the window title.
+   * *The default value is center*
+   */
+  titleHorizontalAlignment?: "left" | "center" | "right";
   /**
    * The background color when the mouse is over the item
    */

diff --git a/src/sass/titlebar.scss b/src/sass/titlebar.scss
@@ -35,9 +35,8 @@
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		margin-left: auto;
-		margin-right: auto;
 		padding-top: 3px;
+		width: 100%;
 		zoom: 1;
   }
 

diff --git a/src/titlebar.ts b/src/titlebar.ts
@@ -7,6 +7,7 @@ import { TitlebarConstructorOptions } from './options';
 import { GlobalTitlebar } from './global';
 
 const Color = require('color');
+const allowAlign = ['left', 'center', 'right'];
 
 export class Titlebar extends GlobalTitlebar {
   private currentWindow: BrowserWindow;
@@ -20,7 +21,8 @@ export class Titlebar extends GlobalTitlebar {
     maximizable: true,
     closeable: true,
     order: 'normal',
-    menuItemHoverColor: 'rgba(0, 0, 0, .14)'
+    menuItemHoverColor: 'rgba(0, 0, 0, .14)',
+    titleHorizontalAlignment: 'center'
   };
 
   /**
@@ -59,6 +61,26 @@ export class Titlebar extends GlobalTitlebar {
 
     titlebarChildren.push(this.$('.window-appicon'));
 
+    if (allowAlign.some(x => x === this.options.titleHorizontalAlignment)) {
+      if (this.options.icon === null) {
+        if (this.options.titleHorizontalAlignment == 'left' && this.options.order !== "reverse") {
+          titlebarChildren.push(this.$('.window-title', { 'style': `text-align: left; padding-left: 15px` }))
+        } else if (this.options.titleHorizontalAlignment == 'right' && this.options.order == "reverse" || this.options.order == "firstButtons") {
+          titlebarChildren.push(this.$('.window-title', { 'style': `text-align: right; padding-right: 15px` }))
+        } else {
+          titlebarChildren.push(this.$('.window-title', { 'style': `text-align: ${this.options.titleHorizontalAlignment};` }))
+        }
+      } else {
+        if (this.options.titleHorizontalAlignment == 'right' && this.options.order == "firstButtons") {
+          titlebarChildren.push(this.$('.window-title', { 'style': `text-align: right; padding-right: 15px` }))
+        } else {
+          titlebarChildren.push(this.$('.window-title', { 'style': `text-align: ${this.options.titleHorizontalAlignment};` }))
+        }
+      }
+    } else {
+      titlebarChildren.push(this.$('.window-title', { 'style': 'text-align: center;' }))
+    }
+
     if (this.options.menu) {
       titlebarChildren.push(this.$('.menubar', { 'role': 'menubar' }));
     }
@@ -239,6 +261,38 @@ export class Titlebar extends GlobalTitlebar {
     }
   }
 
+  /**
+  * set horizontal alignment of the window title
+  */
+  setHorizontalAlignment(side: String) {
+    let wTitle = document.querySelector(".window-title") as HTMLElement;
+
+    if (wTitle) {
+      if (allowAlign.some(x => x === side)) {
+        if (this.options.icon === null) {
+          if (side == "left" && this.options.order !== "reverse") {
+            wTitle.style.textAlign = "left";
+            wTitle.style.paddingLeft = "15px";
+          } else if ((side == "right" && this.options.order == "reverse") || this.options.order == "firstButtons") {
+            wTitle.style.textAlign = "right";
+            wTitle.style.paddingRight = "15px";
+          } else {
+            wTitle.style.textAlign = String(side);
+          }
+        } else {
+          if (this.options.titleHorizontalAlignment == "right" && this.options.order == "firstButtons") {
+            wTitle.style.textAlign = "right";
+            wTitle.style.paddingRight = "15px";
+          } else {
+            wTitle.style.textAlign = String(side);
+          }
+        }
+      } else {
+        wTitle.style.textAlign = "center";
+      }
+    }
+  }
+
   /**
    * Format a label
    * @param label Label to format