From c3cc57f8977e2f4fe060ceb2a360fb70fb939a12 Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Fri, 14 Apr 2017 18:29:49 +0200 Subject: [PATCH] . --- terminus-core/@angular/animations.ts | 1 - terminus-core/@angular/common.ts | 1 - terminus-core/@angular/compiler.ts | 1 - terminus-core/@angular/core.ts | 1 - terminus-core/@angular/forms.ts | 1 - .../@angular/platform-browser-dynamic.ts | 1 - terminus-core/@angular/platform-browser.ts | 1 - terminus-core/@ng-bootstrap/ng-bootstrap.ts | 1 - terminus-core/src/api/index.ts | 1 + terminus-core/src/api/theme.ts | 5 + terminus-core/src/components/appRoot.ts | 6 +- terminus-core/src/components/tabHeader.scss | 2 +- terminus-core/src/components/titleBar.scss | 2 - terminus-core/src/defaultConfigValues.yaml | 1 + terminus-core/src/global.scss | 97 ------------------- terminus-core/src/index.ts | 7 +- terminus-core/src/overrides.scss | 3 - terminus-core/src/services/themes.ts | 40 ++++++++ terminus-core/src/theme.scss | 13 ++- terminus-core/src/theme.ts | 10 ++ terminus-core/src/variables.scss | 1 - terminus-core/webpack.config.js | 4 +- .../src/components/settingsTab.pug | 18 +++- .../src/components/settingsTab.ts | 5 +- 24 files changed, 92 insertions(+), 131 deletions(-) delete mode 100644 terminus-core/@angular/animations.ts delete mode 100644 terminus-core/@angular/common.ts delete mode 100644 terminus-core/@angular/compiler.ts delete mode 100644 terminus-core/@angular/core.ts delete mode 100644 terminus-core/@angular/forms.ts delete mode 100644 terminus-core/@angular/platform-browser-dynamic.ts delete mode 100644 terminus-core/@angular/platform-browser.ts delete mode 100644 terminus-core/@ng-bootstrap/ng-bootstrap.ts create mode 100644 terminus-core/src/api/theme.ts delete mode 100644 terminus-core/src/global.scss delete mode 100644 terminus-core/src/overrides.scss create mode 100644 terminus-core/src/services/themes.ts create mode 100644 terminus-core/src/theme.ts delete mode 100644 terminus-core/src/variables.scss diff --git a/terminus-core/@angular/animations.ts b/terminus-core/@angular/animations.ts deleted file mode 100644 index 7d60b27e..00000000 --- a/terminus-core/@angular/animations.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@angular/animations' diff --git a/terminus-core/@angular/common.ts b/terminus-core/@angular/common.ts deleted file mode 100644 index a632305e..00000000 --- a/terminus-core/@angular/common.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@angular/common' diff --git a/terminus-core/@angular/compiler.ts b/terminus-core/@angular/compiler.ts deleted file mode 100644 index eeea4358..00000000 --- a/terminus-core/@angular/compiler.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@angular/compiler' diff --git a/terminus-core/@angular/core.ts b/terminus-core/@angular/core.ts deleted file mode 100644 index c84ba0c1..00000000 --- a/terminus-core/@angular/core.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@angular/core' diff --git a/terminus-core/@angular/forms.ts b/terminus-core/@angular/forms.ts deleted file mode 100644 index e360776f..00000000 --- a/terminus-core/@angular/forms.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@angular/forms' diff --git a/terminus-core/@angular/platform-browser-dynamic.ts b/terminus-core/@angular/platform-browser-dynamic.ts deleted file mode 100644 index 9ff6a3ea..00000000 --- a/terminus-core/@angular/platform-browser-dynamic.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@angular/platform-browser-dynamic' diff --git a/terminus-core/@angular/platform-browser.ts b/terminus-core/@angular/platform-browser.ts deleted file mode 100644 index 97121280..00000000 --- a/terminus-core/@angular/platform-browser.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@angular/platform-browser' diff --git a/terminus-core/@ng-bootstrap/ng-bootstrap.ts b/terminus-core/@ng-bootstrap/ng-bootstrap.ts deleted file mode 100644 index c7937101..00000000 --- a/terminus-core/@ng-bootstrap/ng-bootstrap.ts +++ /dev/null @@ -1 +0,0 @@ -export * from '@ng-bootstrap/ng-bootstrap' diff --git a/terminus-core/src/api/index.ts b/terminus-core/src/api/index.ts index 34210705..a88f1848 100644 --- a/terminus-core/src/api/index.ts +++ b/terminus-core/src/api/index.ts @@ -4,6 +4,7 @@ export { ToolbarButtonProvider, IToolbarButton } from './toolbarButtonProvider' export { ConfigProvider } from './configProvider' export { HotkeyProvider, IHotkeyDescription } from './hotkeyProvider' export { DefaultTabProvider } from './defaultTabProvider' +export { Theme } from './theme' export { AppService } from '../services/app' export { ConfigService } from '../services/config' diff --git a/terminus-core/src/api/theme.ts b/terminus-core/src/api/theme.ts new file mode 100644 index 00000000..9f9792ed --- /dev/null +++ b/terminus-core/src/api/theme.ts @@ -0,0 +1,5 @@ +export abstract class Theme { + name: string + css: string + terminalBackground: string +} diff --git a/terminus-core/src/components/appRoot.ts b/terminus-core/src/components/appRoot.ts index 35cb8ab1..5607f0d4 100644 --- a/terminus-core/src/components/appRoot.ts +++ b/terminus-core/src/components/appRoot.ts @@ -10,13 +10,10 @@ import { QuitterService } from '../services/quitter' import { ConfigService } from '../services/config' import { DockingService } from '../services/docking' import { TabRecoveryService } from '../services/tabRecovery' +import { ThemesService } from '../services/themes' import { AppService, IToolbarButton, ToolbarButtonProvider } from '../api' -import 'angular2-toaster/toaster.css' -import 'overrides.scss' -import 'theme.scss' - @Component({ selector: 'app-root', @@ -55,6 +52,7 @@ export class AppRootComponent { public app: AppService, @Inject(ToolbarButtonProvider) private toolbarButtonProviders: ToolbarButtonProvider[], log: LogService, + _themes: ThemesService, _quitter: QuitterService, ) { (console).timeStamp('AppComponent ctor') diff --git a/terminus-core/src/components/tabHeader.scss b/terminus-core/src/components/tabHeader.scss index 79250cbd..3a6a20c5 100644 --- a/terminus-core/src/components/tabHeader.scss +++ b/terminus-core/src/components/tabHeader.scss @@ -1,4 +1,4 @@ -@import '~variables.scss'; +$tabs-height: 40px; :host { line-height: $tabs-height - 2px; diff --git a/terminus-core/src/components/titleBar.scss b/terminus-core/src/components/titleBar.scss index b194b51b..ef3ac7ac 100644 --- a/terminus-core/src/components/titleBar.scss +++ b/terminus-core/src/components/titleBar.scss @@ -1,5 +1,3 @@ -@import '~variables.scss'; - $titlebar-height: 30px; :host { diff --git a/terminus-core/src/defaultConfigValues.yaml b/terminus-core/src/defaultConfigValues.yaml index 08cdfe93..2b958e89 100644 --- a/terminus-core/src/defaultConfigValues.yaml +++ b/terminus-core/src/defaultConfigValues.yaml @@ -3,6 +3,7 @@ appearance: dockScreen: 'current' dockFill: 50 tabsOnTop: true + theme: 'Standard' useNativeFrame: false hotkeys: close-tab: diff --git a/terminus-core/src/global.scss b/terminus-core/src/global.scss deleted file mode 100644 index 1adf2b6a..00000000 --- a/terminus-core/src/global.scss +++ /dev/null @@ -1,97 +0,0 @@ -html.platform-win32 { - body.focused { - //border: 1px solid #9c9c00 !important; - } -} - -body { - border: 1px solid #131313; - transition: 0.5s border; - overflow: hidden; - min-height: 100vh; - cursor: default; -} - -.no-drag, a, button, checkbox, .form-control, #toast-container { - -webkit-app-region: no-drag; - outline: 0 !important; - - * { - outline: 0 !important; - -webkit-app-region: no-drag; - } -} - -.window-resizer { - -webkit-app-region: no-drag; - position: fixed; - width: 10px; - height: 10px; -} - -.window-resizer-tl { - left: 0; - top: 0; -} - - - -.no-wrap { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -.word-wrap { - word-wrap: break-word; - word-break: break-all; -} - - -#toast-container.toast-top-full-width { - width: 100%; - top: 50px; - - > div { - width: 100%; - border-radius: 0; - box-shadow: 0 0 2px rgba(0,0,0,.75); - opacity: 1; - filter: none; - } -} - - -.btn { - i + * { - margin-left: 5px; - } -} - -.list-group-item { - margin: none; - - > .btn { - float: right; - margin: -7px -11px 0 0; - background: transparent; - box-shadow: none; - - &:hover { - background: rgba(0,0,0,.25); - } - } -} - - -ngb-typeahead-window { - max-height: 200px; - overflow-y: auto; - - >button { - display: block; - width: 100%; - -webkit-appearance: none; - //border-bottom: 1px solid @dark-border; - } -} diff --git a/terminus-core/src/index.ts b/terminus-core/src/index.ts index 86d7d631..d3a2de1f 100644 --- a/terminus-core/src/index.ts +++ b/terminus-core/src/index.ts @@ -17,6 +17,7 @@ import { PluginsService } from './services/plugins' import { QuitterService } from './services/quitter' import { DockingService } from './services/docking' import { TabRecoveryService } from './services/tabRecovery' +import { ThemesService } from './services/themes' import { AppRootComponent } from './components/appRoot' import { TabBodyComponent } from './components/tabBody' @@ -24,6 +25,9 @@ import { TabHeaderComponent } from './components/tabHeader' import { TitleBarComponent } from './components/titleBar' import { HotkeyProvider } from './api/hotkeyProvider' +import { Theme } from './api/theme' + +import { StandardTheme } from './theme' const PROVIDERS = [ @@ -37,8 +41,10 @@ const PROVIDERS = [ NotifyService, PluginsService, TabRecoveryService, + ThemesService, QuitterService, { provide: HotkeyProvider, useClass: AppHotkeyProvider, multi: true }, + { provide: Theme, useClass: StandardTheme, multi: true }, ] @@ -50,7 +56,6 @@ const PROVIDERS = [ ToasterModule, NgbModule, ], - providers: PROVIDERS, declarations: [ AppRootComponent, TabBodyComponent, diff --git a/terminus-core/src/overrides.scss b/terminus-core/src/overrides.scss deleted file mode 100644 index e9b7a962..00000000 --- a/terminus-core/src/overrides.scss +++ /dev/null @@ -1,3 +0,0 @@ -.form-group label { - margin-bottom: 2px; -} diff --git a/terminus-core/src/services/themes.ts b/terminus-core/src/services/themes.ts new file mode 100644 index 00000000..9ffc2c41 --- /dev/null +++ b/terminus-core/src/services/themes.ts @@ -0,0 +1,40 @@ +import { Inject, Injectable } from '@angular/core' +import { ConfigService } from '../services/config' +import { Theme } from '../api/theme' + + +@Injectable() +export class ThemesService { + private styleElement: HTMLElement = null + + constructor ( + private config: ConfigService, + @Inject(Theme) private themes: Theme[], + ) { + this.applyCurrentTheme() + config.change.subscribe(() => { + this.applyCurrentTheme() + }) + } + + findTheme (name: string): Theme { + return this.themes.find(x => x.name === name) + } + + applyTheme (theme: Theme): void { + if (!this.styleElement) { + this.styleElement = document.createElement('style') + this.styleElement.setAttribute('id', 'theme') + document.querySelector('head').appendChild(this.styleElement) + } + this.styleElement.textContent = theme.css + } + + applyCurrentTheme (): void { + let theme = this.findTheme(this.config.full().appearance.theme) + if (!theme) { + theme = this.findTheme('Standard') + } + this.applyTheme(theme) + } +} diff --git a/terminus-core/src/theme.scss b/terminus-core/src/theme.scss index d2316517..f685af1f 100644 --- a/terminus-core/src/theme.scss +++ b/terminus-core/src/theme.scss @@ -1,3 +1,8 @@ +$tab-border-radius: 5px; +$button-hover-bg: rgba(0, 0, 0, .25); +$button-active-bg: rgba(0, 0, 0, .5); + + $white: #fff !default; $black: #000 !default; $red: #d9534f !default; @@ -73,10 +78,6 @@ ngb-tabset .tab-content { background: $blue; } -$tab-border-radius: 5px; -$button-hover-bg: rgba(0, 0, 0, .25); -$button-active-bg: rgba(0, 0, 0, .5); - title-bar { background: $body-bg2; @@ -291,3 +292,7 @@ hotkey-input-modal { } } } + +.form-group label { + margin-bottom: 2px; +} diff --git a/terminus-core/src/theme.ts b/terminus-core/src/theme.ts new file mode 100644 index 00000000..73bea1ab --- /dev/null +++ b/terminus-core/src/theme.ts @@ -0,0 +1,10 @@ +import { Injectable } from '@angular/core' +import { Theme } from './api' + + +@Injectable() +export class StandardTheme extends Theme { + name = 'Standard' + css = require('./theme.scss') + terminalBackground = '#1D272D' +} diff --git a/terminus-core/src/variables.scss b/terminus-core/src/variables.scss deleted file mode 100644 index fb8115fe..00000000 --- a/terminus-core/src/variables.scss +++ /dev/null @@ -1 +0,0 @@ -$tabs-height: 40px; diff --git a/terminus-core/webpack.config.js b/terminus-core/webpack.config.js index d0836b86..b335fd2a 100644 --- a/terminus-core/webpack.config.js +++ b/terminus-core/webpack.config.js @@ -29,9 +29,7 @@ module.exports = { } }, { test: /\.pug$/, use: ['apply-loader', 'pug-loader'] }, - { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], exclude: /components\// }, - { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'], include: /components\// }, - { test: /\.css$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] }, + { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] }, { test: /\.yaml$/, use: ['json-loader', 'yaml-loader'] }, ] }, diff --git a/terminus-settings/src/components/settingsTab.pug b/terminus-settings/src/components/settingsTab.pug index 3a478acf..4bb4a17e 100644 --- a/terminus-settings/src/components/settingsTab.pug +++ b/terminus-settings/src/components/settingsTab.pug @@ -1,17 +1,20 @@ button.btn.btn-outline-warning.btn-block(*ngIf='config.restartRequested', '(click)'='restartApp()') Restart the app to apply changes ngb-tabset.vertical(type='tabs') - ngb-tab(*ngFor='let provider of settingsProviders') - template(ngbTabTitle) - | {{provider.title}} - template(ngbTabContent) - settings-tab-body([provider]='provider') ngb-tab template(ngbTabTitle) | Application template(ngbTabContent) .row .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}} + .form-group label Show tabs br @@ -144,3 +147,8 @@ ngb-tabset.vertical(type='tabs') td multi-hotkey-input('[(model)]'='config.store.hotkeys[hotkey.id]') + ngb-tab(*ngFor='let provider of settingsProviders') + template(ngbTabTitle) + | {{provider.title}} + template(ngbTabContent) + settings-tab-body([provider]='provider') diff --git a/terminus-settings/src/components/settingsTab.ts b/terminus-settings/src/components/settingsTab.ts index c078bbf5..ee6df258 100644 --- a/terminus-settings/src/components/settingsTab.ts +++ b/terminus-settings/src/components/settingsTab.ts @@ -1,5 +1,5 @@ import { Component, Inject } from '@angular/core' -import { ElectronService, DockingService, ConfigService, IHotkeyDescription, HotkeyProvider, BaseTabComponent } from 'terminus-core' +import { ElectronService, DockingService, ConfigService, IHotkeyDescription, HotkeyProvider, BaseTabComponent, Theme } from 'terminus-core' import { SettingsTabProvider } from '../api' @@ -21,7 +21,8 @@ export class SettingsTabComponent extends BaseTabComponent { private electron: ElectronService, public docking: DockingService, @Inject(HotkeyProvider) hotkeyProviders: HotkeyProvider[], - @Inject(SettingsTabProvider) public settingsProviders: SettingsTabProvider[] + @Inject(SettingsTabProvider) public settingsProviders: SettingsTabProvider[], + @Inject(Theme) public themes: Theme[], ) { super() this.hotkeyDescriptions = hotkeyProviders.map(x => x.hotkeys).reduce((a, b) => a.concat(b)) -- GitLab