From 61ea2c77c8ad2672e4e7e9cd899419af253baa3e Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Thu, 29 Jul 2021 21:07:22 +0200 Subject: [PATCH] config sync ui updates --- .../configSyncSettingsTab.component.pug | 27 +++++++++++-------- .../configSyncSettingsTab.component.ts | 10 ++++++- .../src/components/settingsTab.component.pug | 4 +-- 3 files changed, 27 insertions(+), 14 deletions(-) diff --git a/tabby-settings/src/components/configSyncSettingsTab.component.pug b/tabby-settings/src/components/configSyncSettingsTab.component.pug index a326ee81..e114b753 100644 --- a/tabby-settings/src/components/configSyncSettingsTab.component.pug +++ b/tabby-settings/src/components/configSyncSettingsTab.component.pug @@ -8,11 +8,15 @@ ul.nav-tabs(ngbNav, #nav='ngbNav') .header .title Sync host - input.form-control( - type='text', - [(ngModel)]='config.store.configSync.host', - (ngModelChange)='config.save()', - ) + .input-group.w-50 + input.form-control( + type='text', + [(ngModel)]='config.store.configSync.host', + (ngModelChange)='config.save()', + ) + .input-group-append(*ngIf='config.store.configSync.host') + button.btn.btn-secondary((click)='platform.openExternal("http://" + config.store.configSync.host)') + i.fas.fa-external-link-alt .form-line .header @@ -49,23 +53,24 @@ ul.nav-tabs(ngbNav, #nav='ngbNav') .list-group-light .list-group-item.d-flex.align-items-center( *ngFor='let cfg of configs', - [class.active]='cfg.id === config.store.configSync.configID', + [class.active]='isActiveConfig(cfg)', ) i.fas.fa-fw.fa-file .ml-2.d-flex.flex-column.align-items-start div {{cfg.name}} small.text-muted Modified on {{cfg.modified_at|date:'medium'}} - .badge.badge-info(*ngIf='cfg.id === config.store.configSync.configID') ACTIVE + .badge.badge-info(*ngIf='isActiveConfig(cfg)') ACTIVE .mr-auto button.btn.btn-link.ml-1( (click)='uploadAndSync(cfg)', - [class.hover-reveal]='cfg.id !== config.store.configSync.configID' + [class.hover-reveal]='!isActiveConfig(cfg)' ) i.fas.fa-arrow-up - span.ml-2 Upload + span.ml-2(*ngIf='isActiveConfig(cfg)') Upload + span.ml-2(*ngIf='!isActiveConfig(cfg)') Replace button.btn.btn-link.ml-1( (click)='downloadAndSync(cfg)', - [class.hover-reveal]='cfg.id !== config.store.configSync.configID' + [class.hover-reveal]='!isActiveConfig(cfg)' ) i.fas.fa-arrow-down span.ml-2 Download @@ -76,7 +81,7 @@ ul.nav-tabs(ngbNav, #nav='ngbNav') i.fas.fa-fw.fa-cloud-upload-alt .ml-2 Upload as a new config - ng-container(*ngIf='config.store.configSync.configID') + ng-container(*ngIf='hasMatchingRemoteConfig()') .form-line .header .title Sync automatically diff --git a/tabby-settings/src/components/configSyncSettingsTab.component.ts b/tabby-settings/src/components/configSyncSettingsTab.component.ts index 7532a8d1..a61ab243 100644 --- a/tabby-settings/src/components/configSyncSettingsTab.component.ts +++ b/tabby-settings/src/components/configSyncSettingsTab.component.ts @@ -17,10 +17,10 @@ export class ConfigSyncSettingsTabComponent extends BaseComponent { constructor ( public config: ConfigService, + public platform: PlatformService, private configSync: ConfigSyncService, private hostApp: HostAppService, private ngbModal: NgbModal, - private platform: PlatformService, private notifications: NotificationsService, ) { super() @@ -96,4 +96,12 @@ export class ConfigSyncSettingsTabComponent extends BaseComponent { await this.configSync.download() this.notifications.info('Config downloaded') } + + hasMatchingRemoteConfig () { + return !!this.configs?.find(c => this.isActiveConfig(c)) + } + + isActiveConfig (c: Config) { + return c.id === this.config.store.configSync.configID + } } diff --git a/tabby-settings/src/components/settingsTab.component.pug b/tabby-settings/src/components/settingsTab.component.pug index 2abd916c..85da2ecf 100644 --- a/tabby-settings/src/components/settingsTab.component.pug +++ b/tabby-settings/src/components/settingsTab.component.pug @@ -29,7 +29,7 @@ button.btn.btn-warning.btn-block(*ngIf='config.restartRequested', '(click)'='res i.fas.fa-book span What's new - button.btn.btn-secondary( + button.btn.btn-secondary.mr-3.mb-2( *ngIf='!updateAvailable && hostApp.platform !== Platform.Web', (click)='checkForUpdates()', [disabled]='checkingForUpdate' @@ -39,7 +39,7 @@ button.btn.btn-warning.btn-block(*ngIf='config.restartRequested', '(click)'='res ) span Check for updates - button.btn.btn-info( + button.btn.btn-info.mr-3.mb-2( *ngIf='updateAvailable', (click)='updater.update()', )