From 5be4a12ee56333af12e1ffba6b0f03ddda07c801 Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Wed, 8 Dec 2021 23:25:46 +0100 Subject: [PATCH] theme updates --- .../components/selectorModal.component.pug | 1 + .../components/selectorModal.component.scss | 2 + .../src/components/startPage.component.pug | 2 +- tabby-core/src/services/homeBase.service.ts | 4 + tabby-core/src/theme.scss | 13 ++- tabby-core/src/theme.vars.scss | 8 +- .../profilesSettingsTab.component.pug | 4 +- .../src/components/settingsTab.component.pug | 83 +++++++++++-------- .../src/components/settingsTab.component.scss | 18 ++++ .../src/components/sftpPanel.component.pug | 2 +- 10 files changed, 92 insertions(+), 45 deletions(-) diff --git a/tabby-core/src/components/selectorModal.component.pug b/tabby-core/src/components/selectorModal.component.pug index a45ce96a..20d292b0 100644 --- a/tabby-core/src/components/selectorModal.component.pug +++ b/tabby-core/src/components/selectorModal.component.pug @@ -29,3 +29,4 @@ ) .title.mr-2 {{getOptionText(option)}} .description.no-wrap.text-muted {{option.description}} + .no-wrap.badge.badge-secondary.text-muted.ml-auto(*ngIf='selectedIndex == i') Enter diff --git a/tabby-core/src/components/selectorModal.component.scss b/tabby-core/src/components/selectorModal.component.scss index f63a475e..f312a359 100644 --- a/tabby-core/src/components/selectorModal.component.scss +++ b/tabby-core/src/components/selectorModal.component.scss @@ -7,6 +7,7 @@ overflow: auto; border-top-left-radius: 0; border-top-right-radius: 0; + padding: 0 15px; } .group-header { @@ -30,4 +31,5 @@ input { border-radius: 0; + border: none; } diff --git a/tabby-core/src/components/startPage.component.pug b/tabby-core/src/components/startPage.component.pug index b4d412fe..fbacf475 100644 --- a/tabby-core/src/components/startPage.component.pug +++ b/tabby-core/src/components/startPage.component.pug @@ -3,7 +3,7 @@ div h1.tabby-title Tabby sup α - .list-group.list-group-light.mb-4 + .list-group.mb-4 a.list-group-item.list-group-item-action.d-flex( *ngFor='let button of getButtons(); trackBy: buttonsTrackBy', (click)='button.click()', diff --git a/tabby-core/src/services/homeBase.service.ts b/tabby-core/src/services/homeBase.service.ts index 05235bce..3b0043e1 100644 --- a/tabby-core/src/services/homeBase.service.ts +++ b/tabby-core/src/services/homeBase.service.ts @@ -27,6 +27,10 @@ export class HomeBaseService { this.platform.openExternal('https://github.com/Eugeny/tabby') } + openDiscussions (): void { + this.platform.openExternal('https://github.com/Eugeny/tabby/discussions') + } + reportBug (): void { let body = `Version: ${this.appVersion}\n` body += `Platform: ${this.hostApp.platform} ${process.arch} ${this.platform.getOSRelease()}\n` diff --git a/tabby-core/src/theme.scss b/tabby-core/src/theme.scss index 3ad0e63e..dd6a9177 100644 --- a/tabby-core/src/theme.scss +++ b/tabby-core/src/theme.scss @@ -223,7 +223,7 @@ hotkey-input-modal { } .list-group-item { - transition: 0.0625s background; + // transition: 0.0625s background ease; i + * { margin-left: 10px; @@ -232,7 +232,7 @@ hotkey-input-modal { .list-group.list-group-flush .list-group-item { background: transparent; - border-color: rgba(0, 0, 0, 0.2); + border: none; &:not(:last-child) { border-bottom: none; @@ -247,11 +247,16 @@ hotkey-input-modal { .list-group-light { .list-group-item { - border: none; + border: none !important; + outline: none !important; + background: transparent; + border-radius: $border-radius; + margin: 0 !important; &.list-group-item-action { &:hover, &.active { - background: $list-group-hover-bg; + background: $component-active-bg; + color: $component-active-color; } } } diff --git a/tabby-core/src/theme.vars.scss b/tabby-core/src/theme.vars.scss index a98a7174..8ec97130 100644 --- a/tabby-core/src/theme.vars.scss +++ b/tabby-core/src/theme.vars.scss @@ -78,11 +78,11 @@ $link-color: $gray-400; $link-hover-color: $white; $link-hover-decoration: none; -$component-active-color: $white; -$component-active-bg: #2f3a42; +$component-active-color: #4fadff; +$component-active-bg: #0059a559; $list-group-bg: $table-bg; -$list-group-border-color: $table-border-color; +$list-group-border-color: transparent; $list-group-item-padding-y: 0.8rem; $list-group-item-padding-x: 1rem; @@ -197,3 +197,5 @@ $progress-height: 3px; $alert-bg-level: 9; $alert-border-level: 5; $alert-color-level: -5; + +$text-muted: rgba(255, 255, 255, 0.5); diff --git a/tabby-settings/src/components/profilesSettingsTab.component.pug b/tabby-settings/src/components/profilesSettingsTab.component.pug index c18df516..68009192 100644 --- a/tabby-settings/src/components/profilesSettingsTab.component.pug +++ b/tabby-settings/src/components/profilesSettingsTab.component.pug @@ -32,7 +32,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav') i.fas.fa-fw.fa-plus | New profile - .list-group.list-group-light.mt-3.mb-3 + .list-group.mt-3.mb-3 ng-container(*ngFor='let group of profileGroups') ng-container(*ngIf='isGroupVisible(group)') .list-group-item.list-group-item-action.d-flex.align-items-center( @@ -118,7 +118,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav') .title Default profile settings .description These apply to all profiles of a given type - .list-group.list-group-light.mt-3.mb-3 + .list-group.mt-3.mb-3 a.list-group-item.list-group-item-action( (click)='editDefaults(provider)', *ngFor='let provider of profileProviders' diff --git a/tabby-settings/src/components/settingsTab.component.pug b/tabby-settings/src/components/settingsTab.component.pug index e66484ec..353c7991 100644 --- a/tabby-settings/src/components/settingsTab.component.pug +++ b/tabby-settings/src/components/settingsTab.component.pug @@ -6,45 +6,60 @@ | Application ng-template(ngbNavContent) .content-box - .tabby-logo.mt-3 - h1.tabby-title Tabby - sup α + .row + .col-12.col-md-6 + .logo-area + .tabby-logo.mt-3 - .text-center - .text-muted {{homeBase.appVersion}} + h1.tabby-title Tabby + sup α + .text-muted {{homeBase.appVersion}} - .mb-5.mt-3 - button.btn.btn-secondary.mr-3.mb-2((click)='homeBase.openGitHub()') - i.fab.fa-github - span GitHub - - button.btn.btn-secondary.mr-3.mb-2((click)='homeBase.reportBug()') - i.fas.fa-bug - span Report a problem - - button.btn.btn-secondary.mr-3.mb-2( - (click)='showReleaseNotes()', - ) - i.fas.fa-book - span What's new - - button.btn.btn-secondary.mr-3.mb-2( - *ngIf='!updateAvailable && hostApp.platform !== Platform.Web', - (click)='checkForUpdates()', - [disabled]='checkingForUpdate' - ) - i.fas.fa-sync( - [class.fa-spin]='checkingForUpdate' + button.btn.btn-secondary.mt-3.mb-2( + *ngIf='!updateAvailable && hostApp.platform !== Platform.Web', + (click)='checkForUpdates()', + [disabled]='checkingForUpdate' ) - span Check for updates + i.fas.fa-sync( + [class.fa-spin]='checkingForUpdate' + ) + span Check for updates - button.btn.btn-info.mr-3.mb-2( - *ngIf='updateAvailable', - (click)='updater.update()', - ) - i.fas.fa-sync - span Update + button.btn.btn-info.mt-3.mb-2( + *ngIf='updateAvailable', + (click)='updater.update()', + ) + i.fas.fa-sync + span Update + .col-12.col-md-6 + .list-group.list-group-light.mb-5 + button.list-group-item.list-group-item-action.link-card((click)='homeBase.reportBug()') + i.fas.fa-fw.fa-bug + div + div Report a problem + small.text-muted Generate a pre-filled GitHub issue + + button.list-group-item.list-group-item-action.link-card((click)='homeBase.openDiscussions()') + i.fas.fa-fw.fa-comments + div + div Ask a question + small.text-muted On GitHub Discussions + + button.list-group-item.list-group-item-action.link-card((click)='homeBase.openGitHub()') + i.fab.fa-fw.fa-github + div + div GitHub + small.text-muted Source code + + button.list-group-item.list-group-item-action.link-card((click)='showReleaseNotes()') + i.fas.fa-fw.fa-book + div + div What's new + small.text-muted Show release notes + + + h3 Application settings .form-line(*ngIf='platform.isShellIntegrationSupported()') .header .title Shell integration diff --git a/tabby-settings/src/components/settingsTab.component.scss b/tabby-settings/src/components/settingsTab.component.scss index 01c06bda..d0a98a7c 100644 --- a/tabby-settings/src/components/settingsTab.component.scss +++ b/tabby-settings/src/components/settingsTab.component.scss @@ -9,6 +9,24 @@ flex: none; } + .logo-area { + .tabby-logo { + margin: 0 0 0 -8px; + width: 60px; + height: 60px; + } + + .tabby-title { + text-align: left; + } + } + + .link-card { + display: flex; + line-height: 1; + align-items: center; + } + > .content { display: flex; min-height: 0; diff --git a/tabby-ssh/src/components/sftpPanel.component.pug b/tabby-ssh/src/components/sftpPanel.component.pug index a0526b37..54df59f9 100644 --- a/tabby-ssh/src/components/sftpPanel.component.pug +++ b/tabby-ssh/src/components/sftpPanel.component.pug @@ -16,7 +16,7 @@ div(*ngIf='!sftp') Connecting div(*ngIf='sftp') div(*ngIf='fileList === null') Loading - .list-group.list-group-flush(*ngIf='fileList !== null') + .list-group.list-group-light(*ngIf='fileList !== null') .list-group-item.list-group-item-action.d-flex.align-items-center( *ngIf='path !== "/"', (click)='goUp()'