diff --git a/terminus-core/src/components/appRoot.component.pug b/terminus-core/src/components/appRoot.component.pug index b12dabe4..587c375d 100644 --- a/terminus-core/src/components/appRoot.component.pug +++ b/terminus-core/src/components/appRoot.component.pug @@ -16,37 +16,39 @@ title-bar(*ngIf='config.store.appearance.frame == "full" && config.store.appeara (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') + .btn-group + button.btn.btn-secondary.btn-tab-bar( + *ngFor='let button of getLeftToolbarButtons()', + [title]='button.title', + (click)='button.click()', + ) + i.fa([class]='"fa fa-" + button.icon') .drag-space + + .btn-group + button.btn.btn-secondary.btn-tab-bar( + *ngFor='let button of getRightToolbarButtons()', + [title]='button.title', + (click)='button.click()', + ) + i.fa([class]='"fa fa-" + button.icon') - button.btn.btn-secondary( - *ngFor='let button of getRightToolbarButtons()', - [title]='button.title', - (click)='button.click()', - ) - i.fa([class]='"fa fa-" + button.icon') - - button.btn.btn-secondary.btn-minimize( + .btn-group.window-controls( *ngIf='config.store.appearance.frame == "thin"', - (click)='hostApp.minimize()', ) - i.fa.fa-window-minimize - button.btn.btn-secondary.btn-maximize( - *ngIf='config.store.appearance.frame == "thin"', - (click)='hostApp.toggleMaximize()', - ) - i.fa.fa-window-maximize - button.btn.btn-secondary.btn-close( - *ngIf='config.store.appearance.frame == "thin"', - (click)='hostApp.quit()', - ) - i.fa.fa-close + button.btn.btn-secondary.btn-minimize.btn-tab-bar( + (click)='hostApp.minimize()', + ) + i.fa.fa-window-minimize + button.btn.btn-secondary.btn-maximize.btn-tab-bar( + (click)='hostApp.toggleMaximize()', + ) + i.fa.fa-window-maximize + button.btn.btn-secondary.btn-close.btn-tab-bar( + (click)='hostApp.quit()', + ) + i.fa.fa-close start-page(*ngIf='app.tabs.length == 0') diff --git a/terminus-core/src/components/appRoot.component.scss b/terminus-core/src/components/appRoot.component.scss index 40bc2d33..7ce9492f 100644 --- a/terminus-core/src/components/appRoot.component.scss +++ b/terminus-core/src/components/appRoot.component.scss @@ -5,6 +5,7 @@ flex-direction: column; overflow: hidden; -webkit-user-select: none; + -webkit-user-drag: none; -webkit-font-smoothing: antialiased; cursor: default; animation: 0.5s ease-out fadeIn; @@ -29,7 +30,7 @@ $tab-border-radius: 4px; height: $tabs-height; display: flex; - &>button { + .btn-tab-bar { line-height: $tabs-height + 2px; cursor: pointer; @@ -48,7 +49,7 @@ $tab-border-radius: 4px; &.btn-minimize { margin-left: 10px; } - + &.btn-minimize, &.btn-maximize { font-size: 8px; } @@ -69,6 +70,10 @@ $tab-border-radius: 4px; flex: 1 0 25%; -webkit-app-region: drag; } + + &.window-controls { + flex: 0 0 none; + } } .tabs-content { diff --git a/terminus-core/src/theme.scss b/terminus-core/src/theme.scss index 9724fd00..04535ae1 100644 --- a/terminus-core/src/theme.scss +++ b/terminus-core/src/theme.scss @@ -82,13 +82,14 @@ title-bar { } } +$border-color: #141414; app-root { &> .content { background: $body-bg2; .tab-bar { - &>button { + .btn-tab-bar { &:not(:hover):not(:active) { background: $body-bg2; } @@ -105,6 +106,9 @@ app-root { tab-header { background: $body-bg2; + border-left: 1px solid transparent; + border-right: 1px solid transparent; + margin-bottom: -1px; .index { color: #555; @@ -121,6 +125,8 @@ app-root { &.active { background: $body-bg; + border-left: 1px solid $border-color; + border-right: 1px solid $border-color; } } } @@ -129,15 +135,21 @@ app-root { &.tabs-on-top .tab-bar { tab-header { border-top: 1px solid transparent; + border-bottom: 1px solid $border-color; &.active { border-top: 1px solid $teal; + border-bottom: 1px solid transparent; } &.has-activity:not(.active) { border-top: 1px solid $green; } } + + &>.btn-group, .drag-space { + border-bottom: 1px solid $border-color; + } } &:not(.tabs-on-top) .tab-bar { @@ -145,15 +157,21 @@ app-root { tab-header { border-bottom: 1px solid transparent; + border-top: 1px solid $border-color; &.active { border-bottom: 1px solid $teal; + border-top: 1px solid transparent; } &.has-activity:not(.active) { border-bottom: 1px solid $green; } } + + &>.btn-group, .drag-space { + border-top: 1px solid $border-color; + } } } } diff --git a/webpack.config.js b/webpack.config.js index d566f6aa..3c98e18a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,6 +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-plugin-manager/webpack.config.js'), require('./terminus-theme-hype/webpack.config.js'), ]