mirror of
https://github.com/Eugeny/tabby
synced 2024-11-14 17:07:15 +00:00
fixed SVG icons in tab headers - fixes #5926
This commit is contained in:
parent
d4fb56b30b
commit
90becada86
12 changed files with 57 additions and 34 deletions
9
tabby-core/src/components/profileIcon.component.pug
Normal file
9
tabby-core/src/components/profileIcon.component.pug
Normal file
|
@ -0,0 +1,9 @@
|
|||
i.icon(
|
||||
class='fa-fw {{icon}}',
|
||||
[style.color]='color',
|
||||
*ngIf='!isHTML'
|
||||
)
|
||||
.icon(
|
||||
[fastHtmlBind]='icon',
|
||||
*ngIf='isHTML'
|
||||
)
|
10
tabby-core/src/components/profileIcon.component.scss
Normal file
10
tabby-core/src/components/profileIcon.component.scss
Normal file
|
@ -0,0 +1,10 @@
|
|||
:host {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 1.25rem;
|
||||
}
|
||||
|
||||
::ng-deep img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
18
tabby-core/src/components/profileIcon.component.ts
Normal file
18
tabby-core/src/components/profileIcon.component.ts
Normal file
|
@ -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
|
||||
}
|
||||
}
|
|
@ -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}}
|
||||
|
|
|
@ -84,8 +84,4 @@ export class SelectorModalComponent<T> {
|
|||
close (): void {
|
||||
this.modalInstance.dismiss()
|
||||
}
|
||||
|
||||
iconIsSVG (icon?: string): boolean {
|
||||
return icon?.startsWith('<') ?? false
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
.icon {
|
||||
profile-icon {
|
||||
width: 1.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.icon + * {
|
||||
profile-icon + * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
|
@ -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<Profile>): string|null {
|
||||
return this.profilesService.getDescription(profile)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue