refactor(): theming system refactored

Author: marhi

src/app/services/config.service.ts

@@ -2,15 +2,18 @@ import { Injectable, Provider, Inject } from '@angular/core';
 import { XtermService, Terminal } from './xterm.service';
 import * as os from 'os';
 import * as fs from 'fs';
+import { CssBuilder } from '../../utils';
 
 @Injectable()
 export class ConfigService {
   homeDir: string;
   configPath: string;
   config: any;
   watcher: any;
+  css: CssBuilder;
 
-  constructor(@Inject(XtermService) private hterm: XtermService) {
+  constructor(@Inject(XtermService) private xterm: XtermService) {
+    this.css = new CssBuilder();
     this.homeDir = os.homedir();
     this.configPath = `${this.homeDir}/.bterm.json`;
 
@@ -29,28 +32,21 @@ export class ConfigService {
     let bottomBar: HTMLElement = doc.querySelector('.window-bottom-container') as HTMLElement;
     let sidebar: HTMLElement = doc.querySelector('.sidebar') as HTMLElement;
 
-    this.hterm.terminals.forEach((term: Terminal) => {
-      /*
-      term.term.prefs_.set('font-family', this.config.settings.font);
-      term.term.prefs_.set('font-size', this.config.settings.font_size);
-      term.term.prefs_.set('background-color', this.config.style.background);
-      term.term.prefs_.set('foreground-color', this.config.style.color);
-      term.term.prefs_.set('cursor-color', this.config.style.cursor);
-      term.term.prefs_.set('color-palette-overrides', this.config.style.colors);
-*/
-      let el = term.el as HTMLElement;
-      el.style.background = this.config.style.background;
-      if (term.active) {
-        el.classList.add('active');
-      } else {
-        el.classList.remove('active');
-      }
+    this.css.clear();
+
+    this.config.style.colors.forEach( (color: string, index: number) => {
+      this.css.add(`.xterm-color-${index + 1}`, `color: ${color} !important;`);
     });
 
+    this.css.add('.terminal-cursor', `background: ${this.config.style.cursor} !important; color: ${this.config.style.cursor} !important;`);
+    this.css.add('.terminal-instance .active', `font-size: ${this.config.settings.font_size}px !important;`);
+    this.css.add('.xterm-rows', `color: ${this.config.style.color} !important; font-family: ${this.config.settings.font} !important;`);
+    this.css.inject();
+
     terminal.style.padding = this.config.settings.windowPadding;
 
-    doc.style.fontFamily = this.config.style.font;
-    doc.style.fontSize = this.config.style.font_size;
+    doc.style.fontFamily = this.config.settings.font;
+    doc.style.fontSize = this.config.settings.font_size + 'px';
     terminal.style.background = this.config.style.background;
     topBar.style.background = this.config.style['top_bar_background'];
     bottomBar.style.background = this.config.style['bottom_bar_background'];
@@ -61,6 +57,21 @@ export class ConfigService {
       title.style.color = this.config.style.color;
     });
 
+    this.xterm.terminals.forEach((term: Terminal) => {
+      let el = term.el as HTMLElement;
+      el.style.background = this.config.style.background;
+      if (term.active) {
+        el.classList.add('active');
+      } else {
+        el.classList.remove('active');
+      }
+
+      setTimeout(() => {
+        term.term.fit();
+        if (term.active) { term.term.focus(); }
+      });
+    });
+
     setTimeout(() => {
       let folderIcon = bottomBar.querySelector('.icon-folder > svg > path') as SVGPathElement;
       let folderText = bottomBar.querySelector('.current-folder-text') as HTMLElement;

src/app/services/pty.service.ts

@@ -22,7 +22,7 @@ export class PTYService {
     this.user = os.userInfo({ encoding: 'utf8' });
     switch (os.platform()) {
       case 'win32':
-        this.shell = 'bash.exe';
+        this.shell = 'cmd.exe';
         this.args = [];
         break;
       case 'darwin':

src/app/services/xterm.service.ts

@@ -123,7 +123,7 @@ export class XtermService {
         terminal.title = splitted[0].trim();
         terminal.dir = splitted[1].trim();
       } catch (e) {
-        terminal.title = title;
+        terminal.title = title || 'Shell';
       }
 
       let index = this.terminals.findIndex(t => t.term === terminal.term);
@@ -138,7 +138,7 @@ export class XtermService {
   }
 
   fitTerminal() {
-    this.terminals.forEach( (terminal: Terminal) => { terminal.term.fit(); }); 
+    this.terminals.forEach( (terminal: Terminal) => { terminal.term.fit(); });
     this.focusCurrent();
   }
 
@@ -164,7 +164,7 @@ export class XtermService {
   }
 
   focusCurrent(): void {
-     setTimeout(() => this.terminals[this.currentIndex].term.focus());
+    setTimeout(() => this.terminals[this.currentIndex].term.focus());
   }
 
 }

src/utils.ts

@@ -14,3 +14,70 @@ export function checkNewVersion(options: string): Promise<string> {
     });
   });
 }
+
+interface ICSSRule {
+  selector: string;
+  rule: string;
+};
+
+export class CssBuilder {
+  css: string;
+  rules: ICSSRule[];
+  styleEl: HTMLStyleElement;
+
+  constructor() {
+    this.rules = [];
+  }
+
+  has(selector: string): boolean {
+    return this.rules.filter((rule: ICSSRule) => rule.selector === selector).length > 0;
+  }
+
+  find(selector: string): number {
+    let index: number = -1;
+    [].forEach.call(this.rules, (rule: ICSSRule, i: number) => {
+      if (rule.selector === selector) { index = i; }
+    });
+
+    return index;
+  }
+
+  clear(): CssBuilder { this.rules = []; return this; }
+
+  remove(selector: string): void {
+    let pos: number = this.find(selector);
+    if (!pos) { return; }
+
+    this.rules.splice(pos, 1);
+  }
+
+  add(selector: string, rule: string): CssBuilder {
+    let newRule: ICSSRule = { selector: selector, rule: rule };
+    this.rules.push(newRule);
+    return this;
+  }
+
+  build(): void {
+    this.css = '';
+    this.rules.forEach((rule: ICSSRule) => {
+      this.css += `${rule.selector} { ${rule.rule} }` + '\n';
+    });
+  }
+
+  toString() {
+    this.build();
+    return this.css;
+  }
+
+  inject(): void {
+    this.build();
+    if (this.styleEl) { this.styleEl.remove(); }
+
+    this.styleEl = document.createElement('style') as HTMLStyleElement;
+    this.styleEl.setAttribute('type', 'text/css');
+    this.styleEl.innerHTML = this.css;
+
+    console.log(this.styleEl);
+    setTimeout(() => document.querySelector('head').appendChild(this.styleEl));
+  }
+}

yarn.lock

@@ -2076,10 +2076,6 @@ hosted-git-info@^2.1.4, hosted-git-info@^2.4.2:
   version "2.4.2"
   resolved "http://morose.bleenco.io/hosted-git-info/-/hosted-git-info-2.4.2.tgz#0076b9f46a270506ddbaaea56496897460612a67"
 
-[email protected]:
-  version "0.0.1"
-  resolved "http://morose.bleenco.io/hterm/-/hterm-0.0.1.tgz#50519959a3696e5fd7784d2842324a45cefdc670"
-
 html-comment-regex@^1.1.0:
   version "1.1.1"
   resolved "http://morose.bleenco.io/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
@@ -3982,7 +3978,7 @@ rx@^4.1.0:
   version "4.1.0"
   resolved "http://morose.bleenco.io/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
 
-rxjs@5.3.1, rxjs@^5.1.1:
+rxjs@^5.1.1, rxjs@^5.3.1:
   version "5.3.1"
   resolved "http://morose.bleenco.io/rxjs/-/rxjs-5.3.1.tgz#9ecc9e722247e4f4490d30a878577a3740fd0cb7"
   dependencies: