From 633ef9e791317557ce2294a93852d0fc17573fd9 Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Thu, 27 Apr 2017 19:16:17 +0200 Subject: [PATCH] . --- .../src/components/appRoot.component.pug | 20 ++-- .../src/components/appRoot.component.scss | 9 +- .../src/components/appRoot.component.ts | 3 + .../src/components/tabHeader.component.pug | 7 +- .../src/components/tabHeader.component.scss | 94 +++++++++---------- terminus-core/src/theme.scss | 82 +++++----------- .../terminalSettingsTab.component.ts | 2 +- webpack.config.js | 1 + 8 files changed, 91 insertions(+), 127 deletions(-) diff --git a/terminus-core/src/components/appRoot.component.pug b/terminus-core/src/components/appRoot.component.pug index 05771624..cda1195f 100644 --- a/terminus-core/src/components/appRoot.component.pug +++ b/terminus-core/src/components/appRoot.component.pug @@ -1,21 +1,12 @@ -title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appearance.dock == "off"') +//title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appearance.dock == "off"') .content( [class.tabs-on-top]='config.store.appearance.tabsOnTop' ) .tab-bar(*ngIf='app.tabs.length > 0') - button.btn.btn-secondary( - *ngFor='let button of getLeftToolbarButtons()', - [title]='button.title', - (click)='button.click()', - ) - i.fa([class]='"fa fa-" + button.icon') - .tabs tab-header( *ngFor='let tab of app.tabs; let idx = index', - [class.pre-selected]='idx == app.tabs.indexOf(app.activeTab) - 1', - [class.post-selected]='idx == app.tabs.indexOf(app.activeTab) + 1', [index]='idx', [tab]='tab', [active]='tab == app.activeTab', @@ -24,6 +15,15 @@ title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appeara (click)='app.selectTab(tab)', (closeClicked)='app.closeTab(tab)', ) + + button.btn.btn-secondary( + *ngFor='let button of getLeftToolbarButtons()', + [title]='button.title', + (click)='button.click()', + ) + i.fa([class]='"fa fa-" + button.icon') + + .drag-space button.btn.btn-secondary( *ngFor='let button of getRightToolbarButtons()', diff --git a/terminus-core/src/components/appRoot.component.scss b/terminus-core/src/components/appRoot.component.scss index 01a4b7ba..fb3ca236 100644 --- a/terminus-core/src/components/appRoot.component.scss +++ b/terminus-core/src/components/appRoot.component.scss @@ -47,8 +47,15 @@ $tab-border-radius: 4px; } &>.tabs { - flex: auto; + flex: 0 1 auto; display: flex; + min-width: 0; + } + + &>.drag-space { + min-width: 100px; + flex: 1 0 25%; + -webkit-app-region: drag; } } diff --git a/terminus-core/src/components/appRoot.component.ts b/terminus-core/src/components/appRoot.component.ts index f71f8456..dae42779 100644 --- a/terminus-core/src/components/appRoot.component.ts +++ b/terminus-core/src/components/appRoot.component.ts @@ -23,16 +23,19 @@ import { AppService, IToolbarButton, ToolbarButtonProvider } from '../api' trigger('animateTab', [ state('in', style({ 'flex-grow': '1000', + 'flex-basis': '200px', })), transition(':enter', [ style({ 'flex-grow': '1', + 'flex-basis': '1px', }), animate('250ms ease-in-out') ]), transition(':leave', [ animate('250ms ease-in-out', style({ 'flex-grow': '1', + 'flex-basis': '1px', })) ]) ]) diff --git a/terminus-core/src/components/tabHeader.component.pug b/terminus-core/src/components/tabHeader.component.pug index 2a252cb6..b9d37d5e 100644 --- a/terminus-core/src/components/tabHeader.component.pug +++ b/terminus-core/src/components/tabHeader.component.pug @@ -1,4 +1,3 @@ -.wrapper - .index {{index + 1}} - .name {{(tab.title$ || "Terminal") | async}} - button((click)='closeClicked.emit()') × +.index {{index + 1}} +.name {{(tab.title$ || "Terminal") | async}} +button((click)='closeClicked.emit()') × diff --git a/terminus-core/src/components/tabHeader.component.scss b/terminus-core/src/components/tabHeader.component.scss index 62bd2ed2..1728795d 100644 --- a/terminus-core/src/components/tabHeader.component.scss +++ b/terminus-core/src/components/tabHeader.component.scss @@ -4,67 +4,61 @@ $tabs-height: 40px; line-height: $tabs-height - 2px; cursor: pointer; - flex: auto; - flex-basis: 0; - flex-grow: 1000; + flex: 1000 1 200px; + width: 200px; display: flex; + flex-direction: row; + min-width: 0; + overflow: hidden; - min-width: 0; transition: 0.25s ease-out all; - .wrapper { - display: flex; - flex-direction: row; - flex: auto; - min-width: 0; + border-top: 1px solid transparent; + + .index { + flex: none; + font-weight: bold; + + margin-left: 10px; + width: 20px; + border-radius: 10px; + line-height: 38px; + text-align: center; transition: 0.25s all; - border-top: 1px solid transparent; + } - .index { - flex: none; - font-weight: bold; + .name { + flex: auto; + margin: 0 1px 0 10px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + min-width: 0; + } - margin-left: 10px; - width: 20px; - border-radius: 10px; - line-height: 38px; - text-align: center; - transition: 0.25s all; - } + button { + display: block; + flex: none; + background: transparent; + opacity: 0; - .name { - flex: auto; - margin: 0 1px 0 10px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - min-width: 0; - } + $button-size: $tabs-height * 0.6; + width: $button-size; + height: $button-size; + border-radius: $button-size / 2; + line-height: $button-size * 0.8; + margin-top: ($tabs-height - $button-size) * 0.4; + margin-right: 10px; - button { - display: block; - flex: none; - background: transparent; - opacity: 0; + text-align: center; + font-size: 20px; + } - $button-size: $tabs-height * 0.6; - width: $button-size; - height: $button-size; - border-radius: $button-size / 2; - line-height: $button-size * 0.8; - margin-top: ($tabs-height - $button-size) * 0.4; - margin-right: 10px; - - text-align: center; - font-size: 20px; - } - - &:hover button { - transition: 0.25s opacity; - display: block; - opacity: 1; - } + &:hover button { + transition: 0.25s opacity; + display: block; + opacity: 1; } } diff --git a/terminus-core/src/theme.scss b/terminus-core/src/theme.scss index 8296910e..9eed8186 100644 --- a/terminus-core/src/theme.scss +++ b/terminus-core/src/theme.scss @@ -98,75 +98,47 @@ app-root { } } + .drag-space { + background: $body-bg2; + } + &>.tabs { &:empty { background: $body-bg2; } tab-header { - background: $body-bg; + background: $body-bg2; - .wrapper { - background: $body-bg2; + .index { + color: #555; + } - .index { - color: #555; - } + button { + color: $body-color; + border: none; + transition: 0.25s all; - button { - color: $body-color; - border: none; - transition: 0.25s all; - - &:hover { background: $button-hover-bg !important; } - &:active { background: $button-active-bg !important; } - } + &: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); - } - */ + background: $body-bg; } } } } &.tabs-on-top .tab-bar { - margin-top: 5px; - tab-header { - .wrapper { - border-top: 1px solid transparent; - border-top-left-radius: $tab-border-radius; - border-top-right-radius: $tab-border-radius; - } + border-top: 1px solid transparent; - &.pre-selected .wrapper { - border-bottom-right-radius: $tab-border-radius; - } - - &.post-selected .wrapper { - border-bottom-left-radius: $tab-border-radius; - } - - &.active .wrapper { + &.active { border-top: 1px solid $teal; } - &.has-activity:not(.active) .wrapper { + &.has-activity:not(.active) { border-top: 1px solid $green; } } @@ -176,25 +148,13 @@ app-root { margin-bottom: 3px; tab-header { - .wrapper { - border-bottom: 1px solid transparent; - border-bottom-left-radius: $tab-border-radius; - border-bottom-right-radius: $tab-border-radius; - } + border-bottom: 1px solid transparent; - &.pre-selected .wrapper { - border-top-right-radius: $tab-border-radius; - } - - &.post-selected .wrapper { - border-top-left-radius: $tab-border-radius; - } - - &.active .wrapper { + &.active { border-bottom: 1px solid $teal; } - &.has-activity:not(.active) .wrapper { + &.has-activity:not(.active) { border-bottom: 1px solid $green; } } diff --git a/terminus-terminal/src/components/terminalSettingsTab.component.ts b/terminus-terminal/src/components/terminalSettingsTab.component.ts index 40af0bf7..dcf1eadc 100644 --- a/terminus-terminal/src/components/terminalSettingsTab.component.ts +++ b/terminus-terminal/src/components/terminalSettingsTab.component.ts @@ -45,7 +45,7 @@ export class TerminalSettingsTabComponent { } if (this.hostApp.platform == Platform.Linux) { exec('fc-list :spacing=mono').then(([stdout, _]) => { - this.fonts = stdout + this.fonts = stdout.toString() .split('\n') .filter(x => !!x) .map(x => x.split(':')[1].trim()) diff --git a/webpack.config.js b/webpack.config.js index 1c89c069..d566f6aa 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,5 +5,6 @@ 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-plugin-manager/webpack.config.js'), require('./terminus-theme-hype/webpack.config.js'), ]