.

Makefile

@@ -14,13 +14,6 @@ lint:
 build:
 	DEV=1 ./node_modules/.bin/webpack --progress --display-modules
 
-build-plugins:
-	cd terminus-core; npm run build
-	cd terminus-settings; npm run build
-	cd terminus-terminal; npm run build
-	cd terminus-community-color-schemes; npm run build
-	cd terminus-clickable-links; npm run build
-
 watch:
 	DEV=1 ./node_modules/.bin/webpack --progress -w
 

app/assets/toaster-custom.scss

@@ -1,23 +0,0 @@
-app > toaster-container > #toast-container {
-    width: 100% !important;
-    left: 0 !important;
-    right: 0 !important;
-    top: 50px !important;
-
-    .toast {
-        box-shadow: none !important;
-        text-shadow: none !important;
-        opacity: 1 !important;
-        border-radius: 0 !important;
-        width: 100% !important;
-        padding: 10px !important;
-
-        .toaster-icon {
-            display: none !important;
-        }
-
-        .toast-title {
-            font-weight: normal !important;
-        }
-    }
-}

app/src/app.module.ts

@@ -12,6 +12,7 @@ let plugins = [
     (<any>global).require(projectRoot + 'terminus-terminal').default,
     (<any>global).require(projectRoot + 'terminus-clickable-links').default,
     (<any>global).require(projectRoot + 'terminus-community-color-schemes').default,
+    (<any>global).require(projectRoot + 'terminus-theme-hype').default,
 ]
 
 const core = (<any>global).require(projectRoot + 'terminus-core')

app/src/entry.preload.ts

@@ -1,3 +1,2 @@
 import 'source-sans-pro'
 import 'font-awesome/css/font-awesome.css'
-import '../assets/toaster-custom.scss'

terminus-core/src/components/appRoot.pug

@@ -3,7 +3,7 @@ title-bar(*ngIf='!config.full().appearance.useNativeFrame && config.full().appea
 .content(
     [class.tabs-on-top]='config.full().appearance.tabsOnTop'    
 )
-    .tabs
+    .tab-bar
         button.btn.btn-secondary(
             *ngFor='let button of getLeftToolbarButtons()',
             [title]='button.title',
@@ -11,7 +11,7 @@ title-bar(*ngIf='!config.full().appearance.useNativeFrame && config.full().appea
         )
             i.fa([class]='"fa fa-" + button.icon')
                 
-        .tabs-container
+        .tabs
             tab-header(
                 *ngFor='let tab of app.tabs; let idx = index',
                 [class.pre-selected]='idx == app.tabs.indexOf(app.activeTab) - 1',
@@ -32,15 +32,12 @@ title-bar(*ngIf='!config.full().appearance.useNativeFrame && config.full().appea
         )
             i.fa([class]='"fa fa-" + button.icon')
 
-    .tabs-content
-        tab-body(
-            *ngFor='let tab of app.tabs; trackBy: tab?.id', 
-            [active]='tab == app.activeTab',
-            [tab]='tab',
-            [class.scrollable]='tab.scrollable',
-        )
+    tab-body(
+        *ngFor='let tab of app.tabs; trackBy: tab?.id', 
+        [active]='tab == app.activeTab',
+        [tab]='tab',
+        [class.scrollable]='tab.scrollable',
+    )
 
 toaster-container([toasterconfig]="toasterconfig")
 ng-template(ngbModalContainer)
-
-div.window-resizer.window-resizer-tl

terminus-core/src/components/appRoot.scss

@@ -1,7 +1,7 @@
 :host {
     display: flex;
-    width: calc(100vw - 2px);
-    height: calc(100vh - 2px);
+    width: 100vw;
+    height: 100vh;
     flex-direction: column;
     overflow: hidden;
     -webkit-user-select: none;
@@ -23,7 +23,7 @@ $tab-border-radius: 4px;
     }
 }
 
-.tabs {
+.tab-bar {
     flex: none;
     height: $tabs-height;
     display: flex;
@@ -45,7 +45,7 @@ $tab-border-radius: 4px;
         border-radius: 0;
     }
 
-    &>.tabs-container {
+    &>.tabs {
         flex: auto;
         display: flex;
     }

terminus-core/src/components/tabHeader.pug

@@ -1,4 +1,4 @@
-.content-wrapper
+.wrapper
     .index {{index + 1}}
     .name {{(tab.title$ || "Terminal") | async}}
     button((click)='closeClicked.emit()') ×

terminus-core/src/components/tabHeader.scss

@@ -13,9 +13,8 @@ $tabs-height: 40px;
 
     min-width: 0;
     transition: 0.25s all;
-    //.button-states();
 
-    .content-wrapper {
+    .wrapper {
         display: flex;
         flex-direction: row;
         flex: auto;
@@ -47,11 +46,9 @@ $tabs-height: 40px;
         }
 
         button {
-            flex: none;
-
-            background: transparent;
-
             display: block;
+            flex: none;
+            background: transparent;
             opacity: 0;
 
             $button-size: $tabs-height * 0.6;
@@ -64,8 +61,6 @@ $tabs-height: 40px;
 
             text-align: center;
             font-size: 20px;
-
-            //.button-states();
         }
 
         &:hover button {
@@ -74,7 +69,4 @@ $tabs-height: 40px;
             opacity: 1;
         }
     }
-
-    //border-bottom: 2px solid transparent;
-    transition: 0.25s all;
 }

terminus-core/src/theme.scss

@@ -94,7 +94,7 @@ app-root  {
     &> .content {
         background: $body-bg2;
 
-        .tabs {
+        .tab-bar {
             background: $body-bg;
 
             &>button {
@@ -103,105 +103,103 @@ app-root  {
                 }
             }
 
-            tab-header {
-                background: $body-bg;
-
-                .content-wrapper {
+            &>.tabs {
+                &:empty {
                     background: $body-bg2;
-
-                    .index {
-                        color: #555;
-                    }
-
-                    button {
-                        color: $body-color;
-                        border: none;
-                        transition: 0.25s all;
-
-                        &:hover { background: $button-hover-bg !important; }
-                        &:active { background: $button-active-bg !important; }
-                    }
                 }
 
-                &.active {
-                    background: $body-bg2;
+                tab-header {
+                    background: $body-bg;
 
-                    .content-wrapper {
-                        background: $body-bg;
-                    }
-                }
+                    .wrapper {
+                        background: $body-bg2;
 
-                &.has-activity:not(.active) {
-                    /*
-                    .content-wrapper .index {
-                        background: $blue;
-                        color: white;
-                        text-shadow: 0 1px 1px rgba(0,0,0,.95);
+                        .index {
+                            color: #555;
+                        }
+
+                        button {
+                            color: $body-color;
+                            border: none;
+                            transition: 0.25s all;
+
+                            &:hover { background: $button-hover-bg !important; }
+                            &:active { background: $button-active-bg !important; }
+                        }
+                    }
+
+                    &.active {
+                        background: $body-bg2;
+
+                        .wrapper {
+                            background: $body-bg;
+                        }
+                    }
+
+                    &.has-activity:not(.active) {
+                        /*
+                        .wrapper .index {
+                            background: $blue;
+                            color: white;
+                            text-shadow: 0 1px 1px rgba(0,0,0,.95);
+                        }
+                        */
                     }
-                    */
                 }
             }
         }
 
-        &.tabs-on-top .tabs {
+        &.tabs-on-top .tab-bar {
             margin-top: 3px;
 
             tab-header {
-                &.pre-selected {
-                    .content-wrapper {
-                        border-bottom-right-radius: $tab-border-radius;
-                    }
-                }
-
-                &.post-selected {
-                    .content-wrapper {
-                        border-bottom-left-radius: $tab-border-radius;
-                    }
-                }
-
-                .content-wrapper {
+                .wrapper {
                     border-top: 1px solid transparent;
-                }
-
-                &.active .content-wrapper {
-                    border-top: 1px solid $teal;
                     border-top-left-radius: $tab-border-radius;
                     border-top-right-radius: $tab-border-radius;
                 }
 
-                &.has-activity:not(.active) .content-wrapper {
+                &.pre-selected .wrapper {
+                    border-bottom-right-radius: $tab-border-radius;
+                }
+
+                &.post-selected .wrapper {
+                    border-bottom-left-radius: $tab-border-radius;
+                }
+
+                &.active .wrapper {
+                    border-top: 1px solid $teal;
+                }
+
+                &.has-activity:not(.active) .wrapper {
                     border-top: 1px solid $green;
                 }
             }
         }
 
-        &:not(.tabs-on-top) .tabs {
+        &:not(.tabs-on-top) .tab-bar {
             margin-bottom: 3px;
 
             tab-header {
-                &.pre-selected {
-                    .content-wrapper {
-                        border-top-right-radius: $tab-border-radius;
-                    }
-                }
-
-                &.post-selected {
-                    .content-wrapper {
-                        border-top-left-radius: $tab-border-radius;
-                    }
-                }
-
-                .content-wrapper {
+                .wrapper {
                     border-bottom: 1px solid transparent;
-                }
-
-                &.active .content-wrapper {
-                    border-bottom: 1px solid $teal;
                     border-bottom-left-radius: $tab-border-radius;
                     border-bottom-right-radius: $tab-border-radius;
                 }
 
-                &.has-activity:not(.active) .content-wrapper {
+                &.pre-selected .wrapper {
+                    border-top-right-radius: $tab-border-radius;
+                }
+
+                &.post-selected .wrapper {
+                    border-top-left-radius: $tab-border-radius;
+                }
+
+                &.active .wrapper {
+                    border-bottom: 1px solid $teal;
+                }
+
+                &.has-activity:not(.active) .wrapper {
                     border-bottom: 1px solid $green;
                 }
             }

terminus-settings/src/components/settingsTab.pug

@@ -9,11 +9,11 @@ ngb-tabset.vertical(type='tabs')
                 .col.col-lg-6
                     .form-group
                         label Theme
-                            select.form-control(
-                                '[(ngModel)]'='config.store.appearance.theme',
-                                (ngModelChange)='config.save()',
-                            )
-                                option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}
+                        select.form-control(
+                            '[(ngModel)]'='config.store.appearance.theme',
+                            (ngModelChange)='config.save()',
+                        )
+                            option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}
 
                     .form-group
                         label Show tabs

terminus-theme-hype/.gitignore

@@ -0,0 +1 @@
+dist

terminus-theme-hype/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "terminus-theme-hype",
+  "version": "0.0.1",
+  "description": "Hyper inspired theme for Terminus",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "webpack --progress --color",
+    "watch": "webpack --progress --color --watch"
+  },
+  "author": "Eugene Pankov",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/core": "4.0.1",
+    "terminus-core": "*"
+  },
+  "devDependencies": {
+    "@types/webpack-env": "1.13.0",
+    "node-sass": "^4.5.0",
+    "bootstrap": "4.0.0-alpha.6",
+    "sass-loader": "^6.0.3",
+    "css-loader": "0.26.1",
+    "typescript": "~2.1.0",
+    "to-string-loader": "^1.1.5",
+    "awesome-typescript-loader": "3.1.2",
+    "raw-loader": "0.5.1",
+    "webpack": "2.3.3"
+  }
+}

terminus-theme-hype/src/index.ts

@@ -0,0 +1,18 @@
+import { NgModule, Injectable } from '@angular/core'
+import { Theme } from 'terminus-core'
+
+
+@Injectable()
+class HypeTheme extends Theme {
+    name = 'Hype'
+    css = require('./theme.scss')
+    terminalBackground = '#1D272D'
+}
+
+
+@NgModule({
+    providers: [
+        { provide: Theme, useClass: HypeTheme, multi: true },
+    ],
+})
+export default class HypeThemeModule { }

terminus-theme-hype/src/theme.scss

@@ -0,0 +1,269 @@
+$window-border: #313131;
+$body-bg: #010101;
+$body-bg2: #010101;
+$body-bg3: #111;
+
+
+$tab-border-radius: 3px;
+$button-hover-bg: rgba(255, 255, 255, .05);
+$button-active-bg: rgba(255, 255, 255, .1);
+
+
+$white:  #fff !default;
+$black:  #000 !default;
+$red:    #d9534f !default;
+$orange: #f0ad4e !default;
+$yellow: #ffd500 !default;
+$green:  #5cb85c !default;
+$blue:   #0275d8 !default;
+$teal:   #5bc0de !default;
+$pink:   #ff5b77 !default;
+$purple: #613d7c !default;
+
+
+$body-color: #aaa;
+$font-family-sans-serif: "Source Sans Pro";
+$font-size-base: 14rem / 16;
+
+$btn-secondary-color:            #ccc;
+$btn-secondary-bg:               #222;
+$btn-secondary-border:           #444;
+
+//$btn-warning-bg:                 rgba($orange, .5);
+
+
+$nav-tabs-border-color:                       $body-bg2;
+$nav-tabs-border-width:                       1px;
+$nav-tabs-border-radius:                      0;
+$nav-tabs-link-hover-border-color:            $body-bg2;
+$nav-tabs-active-link-hover-color:            $white;
+$nav-tabs-active-link-hover-bg:               $blue;
+$nav-tabs-active-link-hover-border-color:     darken($blue, 30%);
+
+$input-bg:                       #111;
+$input-bg-disabled:              #333;
+
+$input-color:                    $body-color;
+//$input-border-color:             rgba($black,.15);
+//$input-box-shadow:               inset 0 1px 1px rgba($black,.075);
+
+$input-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);
+$input-color-focus:              $input-color;
+
+$modal-content-bg:               $body-bg;
+$modal-content-border-color:     $body-bg2;
+$modal-header-border-color:      $body-bg2;
+$modal-footer-border-color:      $body-bg2;
+
+$popover-bg:                     $body-bg2;
+
+
+@import '~bootstrap/scss/bootstrap.scss';
+
+.nav-tabs {
+    background: $btn-secondary-bg;
+    .nav-link {
+        transition: 0.25s all;
+        border-bottom-color: $nav-tabs-border-color;
+    }
+}
+
+ngb-tabset .tab-content {
+    padding-top: 20px;
+}
+
+[ngbradiogroup] > label.active {
+    background: $blue;
+}
+
+title-bar {
+    background: $body-bg2;
+
+    button {
+        &:hover { background: $button-hover-bg !important; }
+        &:active { background: $button-active-bg !important; }
+    }
+}
+
+
+app-root  {
+    background: $body-bg;
+    border: 1px solid $window-border;
+
+    &> .content {
+        .tab-bar {
+            &>button {
+                &:hover { background: $button-hover-bg !important; }
+                &:active { background: $button-active-bg !important; }
+
+                &:not(:hover):not(:active) {
+                    background: $body-bg2;
+                }
+            }
+
+            &>.tabs {
+                tab-header {
+                    .wrapper {
+                        .index {
+                            color: #555;
+                        }
+
+                        .name {
+                            text-align: center;
+                        }
+
+                        button {
+                            color: $body-color;
+                            border: none;
+                            transition: 0.25s all;
+                        }
+                    }
+                }
+            }
+        }
+
+        &.tabs-on-top .tab-bar {
+            margin-top: 3px;
+
+            &>button {
+                border-bottom: 1px solid $window-border;
+            }
+
+            tab-header {
+                .wrapper {
+                    border: 1px solid transparent;
+                    border-bottom: 1px solid $window-border;
+                    border-top-left-radius: $tab-border-radius;
+                    border-top-right-radius: $tab-border-radius;
+                }
+
+                &.active .wrapper {
+                    border: 1px solid $window-border;
+                    border-bottom: 1px solid transparent;
+                }
+
+                &.has-activity:not(.active) .wrapper {
+                    border-top: 1px solid $green;
+                }
+            }
+        }
+
+        &:not(.tabs-on-top) .tab-bar {
+            margin-bottom: 3px;
+
+            &>button {
+                border-top: 1px solid $window-border;
+            }
+
+            tab-header {
+                .wrapper {
+                    border: 1px solid transparent;
+                    border-top: 1px solid $window-border;
+                    border-bottom-left-radius: $tab-border-radius;
+                    border-bottom-right-radius: $tab-border-radius;
+                }
+
+                &.active .wrapper {
+                    border: 1px solid $window-border;
+                    border-top: 1px solid transparent;
+                }
+
+                &.has-activity:not(.active) .wrapper {
+                    border-bottom: 1px solid $green;
+                }
+            }
+        }
+    }
+}
+
+tab-body {
+    background: $body-bg;
+}
+
+settings-tab > ngb-tabset {
+    border-right: 1px solid $body-bg2;
+
+    & > .nav {
+        background: $body-bg3;
+
+        & > .nav-item > .nav-link {
+            border-left: none;
+            border-right: none;
+            border-top: 1px solid transparent;
+            border-bottom: 1px solid transparent;
+            padding: 10px 50px 10px 20px;
+            font-size: 14px;
+
+            &.active {
+                border-top-color: $nav-tabs-active-link-hover-border-color;
+                border-bottom-color: $nav-tabs-active-link-hover-border-color;
+            }
+        }
+    }
+}
+
+multi-hotkey-input {
+    .item {
+        background: $body-bg3;
+        border: 1px solid $blue;
+        border-radius: 3px;
+        margin-right: 5px;
+
+        .body {
+            padding: 3px 0 2px;
+
+            .stroke {
+                padding: 0 6px;
+                border-right: 1px solid $body-bg;
+            }
+        }
+
+        .remove {
+            padding: 3px 8px 2px;
+        }
+    }
+
+    .add {
+        color: #777;
+        padding: 4px 10px 0;
+    }
+
+    .add, .item .body, .item .remove {
+        &:hover { background: darken($body-bg3, 5%); }
+        &:active { background: darken($body-bg3, 15%); }
+    }
+}
+
+hotkey-input-modal {
+    .input {
+        background: $input-bg;
+        padding: 10px;
+        font-size: 24px;
+        line-height: 27px;
+        height: 55px;
+
+        .stroke {
+            background: $body-bg3;
+            border: 1px solid $blue;
+            border-radius: 3px;
+            margin-right: 10px;
+            padding: 3px 10px;
+        }
+    }
+
+    .timeout {
+        background: $input-bg;
+
+        div {
+            background: $blue;
+        }
+    }
+}
+
+.form-group label {
+    margin-bottom: 2px;
+}

terminus-theme-hype/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "module": "commonjs",
+    "target": "es5",
+    "declaration": false,
+    "noImplicitAny": false,
+    "removeComments": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "es2015",
+      "es7"
+    ],
+    "paths": {
+      "*": ["../../app/node_modules/*"],
+      "terminus-*": ["../../terminus-*"]
+    }
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

terminus-theme-hype/webpack.config.js

@@ -0,0 +1,38 @@
+const path = require('path')
+
+module.exports = {
+  target: 'node',
+  entry: 'src/index.ts',
+  devtool: 'source-map',
+  context: __dirname,
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js',
+    pathinfo: true,
+    libraryTarget: 'umd',
+  },
+  resolve: {
+    modules: ['.', 'src', 'node_modules', '../app/node_modules'].map(x => path.join(__dirname, x)),
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.ts$/,
+        loader: 'awesome-typescript-loader',
+        options: {
+          paths: {
+            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
+            "*": [path.resolve(__dirname, '../app/node_modules/*')],
+          }
+        }
+      },
+      { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] },
+    ]
+  },
+  externals: [
+    /^@angular/,
+    /^@ng-bootstrap/,
+    /^terminus-/,
+  ]
+}

webpack.config.js

@@ -5,4 +5,5 @@ module.exports = [
   require('./terminus-terminal/webpack.config.js'),
   require('./terminus-clickable-links/webpack.config.js'),
   require('./terminus-community-color-schemes/webpack.config.js'),
+  require('./terminus-theme-hype/webpack.config.js'),
 ]