From e0e24878e249592fba53df6a54cf5e1db919e565 Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Thu, 9 Aug 2018 15:13:31 +0200 Subject: [PATCH] SVG icons --- .pug-lintrc.js | 2 + package.json | 2 + .../src/api/toolbarButtonProvider.ts | 4 +- .../src/components/appRoot.component.pug | 10 +-- .../src/components/appRoot.component.scss | 12 ++- .../src/components/appRoot.component.ts | 5 ++ terminus-core/src/icons/gift.svg | 1 + terminus-core/webpack.config.js | 1 + terminus-core/yarn.lock | 4 + terminus-settings/src/buttonProvider.ts | 4 +- terminus-settings/src/icons/cog.svg | 1 + terminus-settings/webpack.config.js | 1 + terminus-ssh/src/buttonProvider.ts | 4 +- terminus-ssh/src/icons/globe.svg | 1 + terminus-ssh/webpack.config.js | 1 + terminus-terminal/src/buttonProvider.ts | 4 +- terminus-terminal/src/icons/plus.svg | 1 + terminus-terminal/webpack.config.js | 1 + yarn.lock | 78 +++++++++++++++---- 19 files changed, 114 insertions(+), 23 deletions(-) create mode 100644 .pug-lintrc.js create mode 100644 terminus-core/src/icons/gift.svg create mode 100644 terminus-settings/src/icons/cog.svg create mode 100644 terminus-ssh/src/icons/globe.svg create mode 100644 terminus-terminal/src/icons/plus.svg diff --git a/.pug-lintrc.js b/.pug-lintrc.js new file mode 100644 index 00000000..02fafc76 --- /dev/null +++ b/.pug-lintrc.js @@ -0,0 +1,2 @@ +module.export = { +} diff --git a/package.json b/package.json index c662d8c2..4d53faa0 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "npx": "^9.7.1", "pug": "^2.0.3", "pug-html-loader": "1.0.9", + "pug-lint": "^2.5.0", "pug-loader": "^2.4.0", "pug-static-loader": "0.0.1", "raven-js": "3.16.0", @@ -35,6 +36,7 @@ "shelljs": "0.7.7", "source-sans-pro": "2.0.10", "style-loader": "0.13.1", + "svg-inline-loader": "^0.8.0", "to-string-loader": "1.1.5", "tslint": "5.1.0", "tslint-config-standard": "5.0.2", diff --git a/terminus-core/src/api/toolbarButtonProvider.ts b/terminus-core/src/api/toolbarButtonProvider.ts index 48adb20e..80199a63 100644 --- a/terminus-core/src/api/toolbarButtonProvider.ts +++ b/terminus-core/src/api/toolbarButtonProvider.ts @@ -1,5 +1,7 @@ +import { SafeHtml } from '@angular/platform-browser' + export interface IToolbarButton { - icon: string + icon: SafeHtml title: string touchBarTitle?: string weight?: number diff --git a/terminus-core/src/components/appRoot.component.pug b/terminus-core/src/components/appRoot.component.pug index e398256e..8d05f2f9 100644 --- a/terminus-core/src/components/appRoot.component.pug +++ b/terminus-core/src/components/appRoot.component.pug @@ -36,8 +36,8 @@ title-bar( *ngFor='let button of leftToolbarButtons', [title]='button.title', (click)='button.click()', + [innerHTML]='button.icon', ) - i.fa([class]='"fa fa-" + button.icon') .drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS') @@ -46,15 +46,15 @@ title-bar( *ngFor='let button of rightToolbarButtons', [title]='button.title', (click)='button.click()', + [innerHTML]='button.icon', ) - i.fa([class]='"fa fa-" + button.icon') - button.btn.btn-secondary.btn-tab-bar( + + button.btn.btn-secondary.btn-tab-bar.btn-update( *ngIf='appUpdate', title='Update available', (click)='updateApp()', + [innerHTML]='updateIcon' ) - i.fa.fa-arrow-up.text-info - span.text-info Update window-controls.background( *ngIf='config.store.appearance.frame == "thin" && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)', diff --git a/terminus-core/src/components/appRoot.component.scss b/terminus-core/src/components/appRoot.component.scss index 7a0d9e16..510cf5fe 100644 --- a/terminus-core/src/components/appRoot.component.scss +++ b/terminus-core/src/components/appRoot.component.scss @@ -35,6 +35,7 @@ $tab-border-radius: 4px; line-height: $tabs-height + 2px; cursor: pointer; + display: flex; padding: 0 15px; flex: 0 0 auto; border-bottom: 2px solid transparent; @@ -46,7 +47,6 @@ $tab-border-radius: 4px; color: #aaa; border: none; border-radius: 0; - } &>.tabs { @@ -87,3 +87,13 @@ hotkey-hint { right: 0; max-width: 300px; } + +::ng-deep .btn-tab-bar svg { + height: 16px; + fill: white; + fill-opacity: 0.75; +} + +::ng-deep .btn-update svg { + fill: cyan; +} diff --git a/terminus-core/src/components/appRoot.component.ts b/terminus-core/src/components/appRoot.component.ts index c9dffa91..283411d7 100644 --- a/terminus-core/src/components/appRoot.component.ts +++ b/terminus-core/src/components/appRoot.component.ts @@ -1,5 +1,6 @@ import { Component, Inject, Input, HostListener, HostBinding } from '@angular/core' import { trigger, style, animate, transition, state } from '@angular/animations' +import { DomSanitizer, SafeHtml } from '@angular/platform-browser' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { ElectronService } from '../services/electron.service' @@ -58,6 +59,7 @@ export class AppRootComponent { @HostBinding('class') hostClass = `platform-${process.platform}` tabsDragging = false unsortedTabs: BaseTabComponent[] = [] + updateIcon: SafeHtml private logger: Logger private appUpdate: Update @@ -74,6 +76,7 @@ export class AppRootComponent { @Inject(ToolbarButtonProvider) private toolbarButtonProviders: ToolbarButtonProvider[], log: LogService, ngbModal: NgbModal, + domSanitizer: DomSanitizer, _themes: ThemesService, ) { this.logger = log.create('main') @@ -82,6 +85,8 @@ export class AppRootComponent { this.leftToolbarButtons = this.getToolbarButtons(false) this.rightToolbarButtons = this.getToolbarButtons(true) + this.updateIcon = domSanitizer.bypassSecurityTrustHtml(require('../icons/gift.svg')), + this.hotkeys.matchedHotkey.subscribe((hotkey) => { if (hotkey.startsWith('tab-')) { let index = parseInt(hotkey.split('-')[1]) diff --git a/terminus-core/src/icons/gift.svg b/terminus-core/src/icons/gift.svg new file mode 100644 index 00000000..3e1b4cce --- /dev/null +++ b/terminus-core/src/icons/gift.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/terminus-core/webpack.config.js b/terminus-core/webpack.config.js index 76f2ce90..c95dac73 100644 --- a/terminus-core/webpack.config.js +++ b/terminus-core/webpack.config.js @@ -39,6 +39,7 @@ module.exports = { { test: /\.css$/, use: ['to-string-loader', 'css-loader'], include: /component\.css/ }, { test: /\.css$/, use: ['style-loader', 'css-loader'], exclude: /component\.css/ }, { test: /\.yaml$/, use: ['json-loader', 'yaml-loader'] }, + { test: /\.svg/, use: ['svg-inline-loader'] }, ] }, externals: [ diff --git a/terminus-core/yarn.lock b/terminus-core/yarn.lock index 8219282c..fad8337c 100644 --- a/terminus-core/yarn.lock +++ b/terminus-core/yarn.lock @@ -185,6 +185,10 @@ ms@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" +ng2-dnd@^5.0.2: + version "5.0.2" + resolved "https://registry.yarnpkg.com/ng2-dnd/-/ng2-dnd-5.0.2.tgz#862278ac7dedfa14f5783bbf34014d5d73dfefb4" + ngx-perfect-scrollbar@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-6.0.0.tgz#92b51957c04ed6a6d416beca2707bab005667b68" diff --git a/terminus-settings/src/buttonProvider.ts b/terminus-settings/src/buttonProvider.ts index 3ac20614..eae7b3e5 100644 --- a/terminus-settings/src/buttonProvider.ts +++ b/terminus-settings/src/buttonProvider.ts @@ -1,4 +1,5 @@ import { Injectable } from '@angular/core' +import { DomSanitizer } from '@angular/platform-browser' import { ToolbarButtonProvider, IToolbarButton, AppService, HostAppService } from 'terminus-core' import { SettingsTabComponent } from './components/settingsTab.component' @@ -8,6 +9,7 @@ export class ButtonProvider extends ToolbarButtonProvider { constructor ( hostApp: HostAppService, private app: AppService, + private domSanitizer: DomSanitizer, ) { super() hostApp.preferencesMenu$.subscribe(() => this.open()) @@ -15,7 +17,7 @@ export class ButtonProvider extends ToolbarButtonProvider { provide (): IToolbarButton[] { return [{ - icon: 'sliders', + icon: this.domSanitizer.bypassSecurityTrustHtml(require('./icons/cog.svg')), title: 'Settings', touchBarTitle: '⚙️', weight: 10, diff --git a/terminus-settings/src/icons/cog.svg b/terminus-settings/src/icons/cog.svg new file mode 100644 index 00000000..d80e2a4d --- /dev/null +++ b/terminus-settings/src/icons/cog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/terminus-settings/webpack.config.js b/terminus-settings/webpack.config.js index 45eaf2b8..b4f90155 100644 --- a/terminus-settings/webpack.config.js +++ b/terminus-settings/webpack.config.js @@ -36,6 +36,7 @@ module.exports = { { test: /\.pug$/, use: ['apply-loader', 'pug-loader'] }, { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] }, { test: /\.css$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] }, + { test: /\.svg/, use: ['svg-inline-loader'] }, ] }, externals: [ diff --git a/terminus-ssh/src/buttonProvider.ts b/terminus-ssh/src/buttonProvider.ts index 44e37eae..666d08ed 100644 --- a/terminus-ssh/src/buttonProvider.ts +++ b/terminus-ssh/src/buttonProvider.ts @@ -1,4 +1,5 @@ import { Injectable } from '@angular/core' +import { DomSanitizer } from '@angular/platform-browser' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { HotkeysService, ToolbarButtonProvider, IToolbarButton } from 'terminus-core' import { SSHModalComponent } from './components/sshModal.component' @@ -7,6 +8,7 @@ import { SSHModalComponent } from './components/sshModal.component' export class ButtonProvider extends ToolbarButtonProvider { constructor ( private ngbModal: NgbModal, + private domSanitizer: DomSanitizer, hotkeys: HotkeysService, ) { super() @@ -23,7 +25,7 @@ export class ButtonProvider extends ToolbarButtonProvider { provide (): IToolbarButton[] { return [{ - icon: 'globe', + icon: this.domSanitizer.bypassSecurityTrustHtml(require('./icons/globe.svg')), weight: 5, title: 'SSH connections', touchBarTitle: 'SSH', diff --git a/terminus-ssh/src/icons/globe.svg b/terminus-ssh/src/icons/globe.svg new file mode 100644 index 00000000..509eaba6 --- /dev/null +++ b/terminus-ssh/src/icons/globe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/terminus-ssh/webpack.config.js b/terminus-ssh/webpack.config.js index e58e00a7..aacc6f78 100644 --- a/terminus-ssh/webpack.config.js +++ b/terminus-ssh/webpack.config.js @@ -34,6 +34,7 @@ module.exports = { }, { test: /\.pug$/, use: ['apply-loader', 'pug-loader'] }, { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] }, + { test: /\.svg/, use: ['svg-inline-loader'] }, ] }, externals: [ diff --git a/terminus-terminal/src/buttonProvider.ts b/terminus-terminal/src/buttonProvider.ts index 3d6623ba..4438051c 100644 --- a/terminus-terminal/src/buttonProvider.ts +++ b/terminus-terminal/src/buttonProvider.ts @@ -2,6 +2,7 @@ import * as fs from 'mz/fs' import * as path from 'path' import { first } from 'rxjs/operators' import { Injectable } from '@angular/core' +import { DomSanitizer } from '@angular/platform-browser' import { HotkeysService, ToolbarButtonProvider, IToolbarButton, ConfigService, HostAppService, ElectronService } from 'terminus-core' import { TerminalService } from './services/terminal.service' @@ -10,6 +11,7 @@ import { TerminalService } from './services/terminal.service' export class ButtonProvider extends ToolbarButtonProvider { constructor ( private terminal: TerminalService, + private domSanitizer: DomSanitizer, private config: ConfigService, hostApp: HostAppService, electron: ElectronService, @@ -51,7 +53,7 @@ export class ButtonProvider extends ToolbarButtonProvider { provide (): IToolbarButton[] { return [{ - icon: 'plus', + icon: this.domSanitizer.bypassSecurityTrustHtml(require('./icons/plus.svg')), title: 'New terminal', touchBarTitle: 'New', click: async () => { diff --git a/terminus-terminal/src/icons/plus.svg b/terminus-terminal/src/icons/plus.svg new file mode 100644 index 00000000..e4774d87 --- /dev/null +++ b/terminus-terminal/src/icons/plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/terminus-terminal/webpack.config.js b/terminus-terminal/webpack.config.js index efc17f80..e556bf4a 100644 --- a/terminus-terminal/webpack.config.js +++ b/terminus-terminal/webpack.config.js @@ -36,6 +36,7 @@ module.exports = { { test: /\.pug$/, use: ['apply-loader', 'pug-loader'] }, { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] }, { test: /\.css$/, use: ['to-string-loader', 'css-loader'] }, + { test: /\.svg/, use: ['svg-inline-loader'] }, { test: /\.(ttf|eot|otf|woff|woff2|ogg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: { diff --git a/yarn.lock b/yarn.lock index 202efcda..6c0a9dee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -209,7 +209,7 @@ acorn@^3.1.0, acorn@~3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a" -acorn@^4.0.4, acorn@~4.0.2: +acorn@^4.0.1, acorn@^4.0.4, acorn@~4.0.2: version "4.0.13" resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787" @@ -2095,6 +2095,10 @@ css-loader@0.28.0: postcss-modules-values "^1.1.0" source-list-map "^0.1.7" +css-selector-parser@^1.1.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.3.0.tgz#5f1ad43e2d8eefbfdc304fcd39a521664943e3eb" + css-selector-tokenizer@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86" @@ -2543,7 +2547,7 @@ electron-rebuild@^1.7.3: debug "^2.6.3" detect-libc "^1.0.3" fs-extra "^3.0.1" - node-abi "^2.4.1" + node-abi "^2.0.0" node-gyp "^3.6.0" ora "^1.2.0" rimraf "^2.6.1" @@ -2900,6 +2904,10 @@ find-cache-dir@^1.0.0: make-dir "^1.0.0" pkg-dir "^2.0.0" +find-line-column@^0.5.2: + version "0.5.2" + resolved "https://registry.yarnpkg.com/find-line-column/-/find-line-column-0.5.2.tgz#db00238ff868551a182e74a103416d295a98c8ca" + find-up@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f" @@ -4426,7 +4434,7 @@ loader-runner@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2" -loader-utils@0.2.x, loader-utils@^0.2.14, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@~0.2.6: +loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.14, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@~0.2.6: version "0.2.17" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348" dependencies: @@ -4954,6 +4962,12 @@ no-case@^2.2.0: dependencies: lower-case "^1.1.1" +node-abi@^2.0.0: + version "2.4.3" + resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.4.3.tgz#43666b7b17e57863e572409edbb82115ac7af28b" + dependencies: + semver "^5.4.1" + node-abi@^2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.4.1.tgz#7628c4d4ec4e9cd3764ceb3652f36b2e7f8d4923" @@ -6060,6 +6074,14 @@ public-encrypt@^4.0.0: parse-asn1 "^5.0.0" randombytes "^2.0.1" +pug-attrs@^2.0.1, pug-attrs@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/pug-attrs/-/pug-attrs-2.0.3.tgz#a3095f970e64151f7bdad957eef55fb5d7905d15" + dependencies: + constantinople "^3.0.1" + js-stringify "^1.0.1" + pug-runtime "^2.0.4" + pug-attrs@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/pug-attrs/-/pug-attrs-2.0.2.tgz#8be2b2225568ffa75d1b866982bff9f4111affcb" @@ -6068,14 +6090,6 @@ pug-attrs@^2.0.2: js-stringify "^1.0.1" pug-runtime "^2.0.3" -pug-attrs@^2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/pug-attrs/-/pug-attrs-2.0.3.tgz#a3095f970e64151f7bdad957eef55fb5d7905d15" - dependencies: - constantinople "^3.0.1" - js-stringify "^1.0.1" - pug-runtime "^2.0.4" - pug-code-gen@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/pug-code-gen/-/pug-code-gen-2.0.0.tgz#96aea39a9e62f1ec5d2b6a5b42a29d528c70b43d" @@ -6102,7 +6116,7 @@ pug-code-gen@^2.0.1: void-elements "^2.0.1" with "^5.0.0" -pug-error@^1.3.2: +pug-error@^1.3.0, pug-error@^1.3.2: version "1.3.2" resolved "https://registry.yarnpkg.com/pug-error/-/pug-error-1.3.2.tgz#53ae7d9d29bb03cf564493a026109f54c47f5f26" @@ -6137,6 +6151,14 @@ pug-html-loader@1.0.9: loader-utils "^0.2.14" pug "^2.0.0-beta6" +pug-lexer@^2.0.1: + version "2.3.2" + resolved "https://registry.yarnpkg.com/pug-lexer/-/pug-lexer-2.3.2.tgz#68b19d96ea5dc0e4a86148b01cb966c17815a614" + dependencies: + character-parser "^2.1.1" + is-expression "^3.0.0" + pug-error "^1.3.2" + pug-lexer@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/pug-lexer/-/pug-lexer-3.1.0.tgz#fd087376d4a675b4f59f8fef422883434e9581a2" @@ -6167,6 +6189,24 @@ pug-linker@^3.0.5: pug-error "^1.3.2" pug-walk "^1.1.7" +pug-lint@^2.5.0: + version "2.5.0" + resolved "https://registry.yarnpkg.com/pug-lint/-/pug-lint-2.5.0.tgz#4419ee301aeca45f54061b0eca4a9a471f3aa9a9" + dependencies: + acorn "^4.0.1" + commander "^2.9.0" + css-selector-parser "^1.1.0" + find-line-column "^0.5.2" + glob "^7.0.3" + minimatch "^3.0.3" + path-is-absolute "^1.0.0" + pug-attrs "^2.0.1" + pug-error "^1.3.0" + pug-lexer "^2.0.1" + resolve "^1.1.7" + strip-json-comments "^2.0.1" + void-elements "^2.0.1" + pug-load@^2.0.11: version "2.0.11" resolved "https://registry.yarnpkg.com/pug-load/-/pug-load-2.0.11.tgz#e648e57ed113fe2c1f45d57858ea2bad6bc01527" @@ -7038,6 +7078,10 @@ signal-exit@^3.0.0, signal-exit@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" +simple-html-tokenizer@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe" + single-line-log@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/single-line-log/-/single-line-log-1.1.2.tgz#c2f83f273a3e1a16edb0995661da0ed5ef033364" @@ -7401,7 +7445,7 @@ strip-indent@^1.0.1: dependencies: get-stdin "^4.0.1" -strip-json-comments@~2.0.1: +strip-json-comments@^2.0.1, strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" @@ -7452,6 +7496,14 @@ supports-color@^5.3.0: dependencies: has-flag "^3.0.0" +svg-inline-loader@^0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/svg-inline-loader/-/svg-inline-loader-0.8.0.tgz#7e9d905d80d0b4e68d2df21afcd08ee9e9a3ea6e" + dependencies: + loader-utils "^0.2.11" + object-assign "^4.0.1" + simple-html-tokenizer "^0.1.1" + svgo@^0.7.0: version "0.7.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"