refreshed settings UI (fixes #314)

terminus-core/src/components/checkbox.component.pug

@@ -0,0 +1,4 @@
+.icon((click)='click()', tabindex='0', [class.active]='model', (keyup.space)='click()')
+    i.fa.fa-square-o.off
+    i.fa.fa-check-square.on
+.text((click)='click()') {{text}}

terminus-core/src/components/checkbox.component.scss

@@ -0,0 +1,51 @@
+:host {
+    cursor: pointer;
+    margin: 5px 0;
+
+    &:focus {
+        background: rgba(255,255,255,.05);
+        border-radius: 5px;
+    }
+
+    &:active {
+        background: rgba(255,255,255,.1);
+        border-radius: 3px;
+    }
+
+    &[disabled] {
+        opacity: 0.5;
+    }
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .icon {
+        position: relative;
+        flex: none;
+        width: 14px;
+        height: 14px;
+
+        i {
+            position: absolute;
+            left: 0;
+            top: -2px;
+            transition: 0.25s opacity;
+            display: block;
+            font-size: 18px;
+        }
+
+        i.on, &.active i.off {
+            opacity: 0;
+        }
+
+        i.off, &.active i.on {
+            opacity: 1;
+        }
+    }
+
+    .text {
+        flex: auto;
+        margin-left: 8px;
+    }
+}

terminus-core/src/components/checkbox.component.ts

@@ -0,0 +1,45 @@
+import { NgZone, Component, Input } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+
+@Component({
+    selector: 'checkbox',
+    template: require('./checkbox.component.pug'),
+    styles: [require('./checkbox.component.scss')],
+    providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true },
+    ]
+})
+export class CheckboxComponent implements ControlValueAccessor {
+    @Input() model: boolean
+    @Input() disabled: boolean
+    @Input() text: string
+    private changed = new Array<(val: boolean) => void>()
+
+    click () {
+        NgZone.assertInAngularZone()
+        if (this.disabled) {
+            return
+        }
+
+        this.model = !this.model
+        for (let fx of this.changed) {
+            fx(this.model)
+        }
+    }
+
+    writeValue (obj: any) {
+        this.model = obj
+    }
+
+    registerOnChange (fn: any): void {
+        this.changed.push(fn)
+    }
+
+    registerOnTouched (fn: any): void {
+        this.changed.push(fn)
+    }
+
+    setDisabledState (isDisabled: boolean) {
+        this.disabled = isDisabled
+    }
+}

terminus-core/src/index.ts

@@ -18,6 +18,7 @@ import { TouchbarService } from './services/touchbar.service'
 import { UpdaterService } from './services/updater.service'
 
 import { AppRootComponent } from './components/appRoot.component'
+import { CheckboxComponent } from './components/checkbox.component'
 import { TabBodyComponent } from './components/tabBody.component'
 import { SafeModeModalComponent } from './components/safeModeModal.component'
 import { StartPageComponent } from './components/startPage.component'
@@ -65,6 +66,7 @@ const PROVIDERS = [
     ],
     declarations: [
         AppRootComponent,
+        CheckboxComponent,
         StartPageComponent,
         TabBodyComponent,
         TabHeaderComponent,
@@ -76,6 +78,9 @@ const PROVIDERS = [
     entryComponents: [
         RenameTabModalComponent,
         SafeModeModalComponent,
+    ],
+    exports: [
+        CheckboxComponent
     ]
 })
 export default class AppModule {

terminus-core/src/theme.scss

@@ -47,6 +47,7 @@ $input-color-placeholder:        #333;
 $input-border-color:             #344;
 //$input-box-shadow:               inset 0 1px 1px rgba($black,.075);
 $input-border-radius:            0;
+$custom-select-border-radius: 0;
 $input-bg-focus:                 $input-bg;
 //$input-border-focus:             lighten($brand-primary, 25%);
 //$input-box-shadow-focus:         $input-box-shadow, rgba($input-border-focus, .6);
@@ -83,6 +84,8 @@ $alert-danger-bg: $body-bg2;
 $alert-danger-text: $red;
 $alert-danger-border: $red;
 
+$headings-font-weight: lighter;
+$headings-color: #eee;
 
 @import '~bootstrap/scss/bootstrap.scss';
 
@@ -147,6 +150,7 @@ app-root  {
                     }
 
                     &.active {
+                        color: white;
                         background: $body-bg;
                         border-left: 1px solid $border-color;
                         border-right: 1px solid $border-color;
@@ -328,3 +332,15 @@ ngb-tabset .tab-content {
         margin-left: 10px;
     }
 }
+
+select.form-control {
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
+  background-position: 100% 50%;
+  background-repeat: no-repeat;
+  padding-right: 30px;
+}
+
+checkbox i.on {
+  color: $blue;
+}