From 90becada86b4b1f7442d2390f328b9ad9c0c3a2f Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Sat, 12 Mar 2022 18:31:21 +0100 Subject: [PATCH] fixed SVG icons in tab headers - fixes #5926 --- .../src/components/profileIcon.component.pug | 9 +++++++++ .../src/components/profileIcon.component.scss | 10 ++++++++++ .../src/components/profileIcon.component.ts | 18 ++++++++++++++++++ .../src/components/selectorModal.component.pug | 12 +++--------- .../src/components/selectorModal.component.ts | 4 ---- .../src/components/tabHeader.component.pug | 6 +++--- .../src/components/tabHeader.component.scss | 5 ++--- tabby-core/src/index.ts | 3 +++ .../components/editProfileModal.component.pug | 5 ++++- .../profilesSettingsTab.component.pug | 11 +++-------- .../profilesSettingsTab.component.scss | 4 ++-- .../profilesSettingsTab.component.ts | 4 ---- 12 files changed, 57 insertions(+), 34 deletions(-) create mode 100644 tabby-core/src/components/profileIcon.component.pug create mode 100644 tabby-core/src/components/profileIcon.component.scss create mode 100644 tabby-core/src/components/profileIcon.component.ts diff --git a/tabby-core/src/components/profileIcon.component.pug b/tabby-core/src/components/profileIcon.component.pug new file mode 100644 index 00000000..6e5ec137 --- /dev/null +++ b/tabby-core/src/components/profileIcon.component.pug @@ -0,0 +1,9 @@ +i.icon( + class='fa-fw {{icon}}', + [style.color]='color', + *ngIf='!isHTML' +) +.icon( + [fastHtmlBind]='icon', + *ngIf='isHTML' +) diff --git a/tabby-core/src/components/profileIcon.component.scss b/tabby-core/src/components/profileIcon.component.scss new file mode 100644 index 00000000..257652d1 --- /dev/null +++ b/tabby-core/src/components/profileIcon.component.scss @@ -0,0 +1,10 @@ +:host { + display: flex; + align-items: center; + max-width: 1.25rem; +} + +::ng-deep img { + max-width: 100%; + max-height: 100%; +} diff --git a/tabby-core/src/components/profileIcon.component.ts b/tabby-core/src/components/profileIcon.component.ts new file mode 100644 index 00000000..c7bf0649 --- /dev/null +++ b/tabby-core/src/components/profileIcon.component.ts @@ -0,0 +1,18 @@ +/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ +import { Component, Input } from '@angular/core' +import { BaseComponent } from './base.component' + +/** @hidden */ +@Component({ + selector: 'profile-icon', + template: require('./profileIcon.component.pug'), + styles: [require('./profileIcon.component.scss')], +}) +export class ProfileIconComponent extends BaseComponent { + @Input() icon?: string + @Input() color?: string + + get isHTML (): boolean { + return this.icon?.startsWith('<') ?? false + } +} diff --git a/tabby-core/src/components/selectorModal.component.pug b/tabby-core/src/components/selectorModal.component.pug index 20d292b0..e4d359c8 100644 --- a/tabby-core/src/components/selectorModal.component.pug +++ b/tabby-core/src/components/selectorModal.component.pug @@ -17,15 +17,9 @@ (click)='selectOption(option)', [class.active]='selectedIndex == i' ) - i.icon( - class='fa-fw {{option.icon}}', - style='color: {{option.color}}', - *ngIf='!iconIsSVG(option.icon)' - ) - .icon( - [fastHtmlBind]='option.icon', - style='color: {{option.color}}', - *ngIf='iconIsSVG(option.icon)' + profile-icon( + [icon]='option.icon', + [color]='option.color' ) .title.mr-2 {{getOptionText(option)}} .description.no-wrap.text-muted {{option.description}} diff --git a/tabby-core/src/components/selectorModal.component.ts b/tabby-core/src/components/selectorModal.component.ts index 02da460a..a50d4284 100644 --- a/tabby-core/src/components/selectorModal.component.ts +++ b/tabby-core/src/components/selectorModal.component.ts @@ -84,8 +84,4 @@ export class SelectorModalComponent { close (): void { this.modalInstance.dismiss() } - - iconIsSVG (icon?: string): boolean { - return icon?.startsWith('<') ?? false - } } diff --git a/tabby-core/src/components/tabHeader.component.pug b/tabby-core/src/components/tabHeader.component.pug index d71f85f6..9a6a91dc 100644 --- a/tabby-core/src/components/tabHeader.component.pug +++ b/tabby-core/src/components/tabHeader.component.pug @@ -5,10 +5,10 @@ .index(*ngIf='!config.store.terminal.hideTabIndex && hostApp.platform === Platform.macOS', cdkDragHandle) {{index + 1}} .index(*ngIf='!config.store.terminal.hideTabIndex && hostApp.platform !== Platform.macOS') {{index + 1}} -.icon( +profile-icon( *ngIf='config.store.terminal.showTabProfileIcon && tab.icon', - [ngClass]='tab.icon', - [style.color]='tab.color' + [icon]='tab.icon', + [color]='tab.color' ) .name( diff --git a/tabby-core/src/components/tabHeader.component.scss b/tabby-core/src/components/tabHeader.component.scss index bc664d98..f09eff52 100644 --- a/tabby-core/src/components/tabHeader.component.scss +++ b/tabby-core/src/components/tabHeader.component.scss @@ -26,8 +26,7 @@ $tabs-height: 38px; height: $tabs-height; } - .index, - .icon { + .index { flex: none; font-weight: bold; -webkit-app-region: no-drag; @@ -41,7 +40,7 @@ $tabs-height: 38px; margin-top: 1px; } - .icon { + profile-icon { font-size: 13px; margin: 1px 4px 0 0; } diff --git a/tabby-core/src/index.ts b/tabby-core/src/index.ts index 252e3b48..d5092b5b 100644 --- a/tabby-core/src/index.ts +++ b/tabby-core/src/index.ts @@ -29,6 +29,7 @@ import { SplitTabPaneLabelComponent } from './components/splitTabPaneLabel.compo import { UnlockVaultModalComponent } from './components/unlockVaultModal.component' import { WelcomeTabComponent } from './components/welcomeTab.component' import { TransfersMenuComponent } from './components/transfersMenu.component' +import { ProfileIconComponent } from './components/profileIcon.component' import { AutofocusDirective } from './directives/autofocus.directive' import { AlwaysVisibleTypeaheadDirective } from './directives/alwaysVisibleTypeahead.directive' @@ -128,6 +129,7 @@ const PROVIDERS = [ TransfersMenuComponent, DropZoneDirective, CdkAutoDropGroup, + ProfileIconComponent, ], entryComponents: [ PromptModalComponent, @@ -150,6 +152,7 @@ const PROVIDERS = [ DragDropModule, TranslateModule, CdkAutoDropGroup, + ProfileIconComponent, ], }) export default class AppModule { // eslint-disable-line @typescript-eslint/no-extraneous-class diff --git a/tabby-settings/src/components/editProfileModal.component.pug b/tabby-settings/src/components/editProfileModal.component.pug index 5e19c22e..a81a5d28 100644 --- a/tabby-settings/src/components/editProfileModal.component.pug +++ b/tabby-settings/src/components/editProfileModal.component.pug @@ -40,7 +40,10 @@ ) .input-group-append .input-group-text - i([class]='"fa-fw " + profile.icon') + profile-icon( + [icon]='profile.icon', + [color]='profile.color' + ) ng-template(#rt,let-r='result',let-t='term') i([class]='"fa-fw " + r') diff --git a/tabby-settings/src/components/profilesSettingsTab.component.pug b/tabby-settings/src/components/profilesSettingsTab.component.pug index 705f111a..6062a050 100644 --- a/tabby-settings/src/components/profilesSettingsTab.component.pug +++ b/tabby-settings/src/components/profilesSettingsTab.component.pug @@ -58,14 +58,9 @@ ul.nav-tabs(ngbNav, #nav='ngbNav') [class.list-group-item-action]='!profile.isBuiltin', (click)='profile.isBuiltin ? null : editProfile(profile)' ) - i.icon( - class='fa-fw {{profile.icon}}', - [style.color]='profile.color', - *ngIf='!iconIsSVG(profile.icon)' - ) - .icon( - [fastHtmlBind]='profile.icon', - *ngIf='iconIsSVG(profile.icon)' + profile-icon( + [icon]='profile.icon', + [color]='profile.color' ) .no-wrap {{profile.name}} diff --git a/tabby-settings/src/components/profilesSettingsTab.component.scss b/tabby-settings/src/components/profilesSettingsTab.component.scss index ec1f9eaa..ed7f7623 100644 --- a/tabby-settings/src/components/profilesSettingsTab.component.scss +++ b/tabby-settings/src/components/profilesSettingsTab.component.scss @@ -1,8 +1,8 @@ -.icon { +profile-icon { width: 1.25rem; margin-right: 0.25rem; } -.icon + * { +profile-icon + * { margin-left: 10px; } diff --git a/tabby-settings/src/components/profilesSettingsTab.component.ts b/tabby-settings/src/components/profilesSettingsTab.component.ts index 9174d24d..33405328 100644 --- a/tabby-settings/src/components/profilesSettingsTab.component.ts +++ b/tabby-settings/src/components/profilesSettingsTab.component.ts @@ -225,10 +225,6 @@ export class ProfilesSettingsTabComponent extends BaseComponent { return !this.filter || (profile.name + '$' + (this.getDescription(profile) ?? '')).toLowerCase().includes(this.filter.toLowerCase()) } - iconIsSVG (icon?: string): boolean { - return icon?.startsWith('<') ?? false - } - getDescription (profile: PartialProfile): string|null { return this.profilesService.getDescription(profile) }