mirror/tabby
2
0
Fork 0
mirror of https://github.com/Eugeny/tabby.git synced 2024-12-09 06:20:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fixed SVG icons in tab headers - fixes #5926

Browse Source
This commit is contained in:
Eugene Pankov 2022-03-12 18:31:21 +01:00
parent d4fb56b30b
commit 90becada86
No known key found for this signature in database
GPG Key ID: 5896FCBBDD1CF4F4
12 changed files with 57 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
tabby-core/src/components/profileIcon.component.pug Normal file
View 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
View 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
View 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
}
}

12
tabby-core/src/components/selectorModal.component.pug
View File

@ -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}}

4
tabby-core/src/components/selectorModal.component.ts
View File

@ -84,8 +84,4 @@ export class SelectorModalComponent<T> {
close (): void {
this.modalInstance.dismiss()
}
iconIsSVG (icon?: string): boolean {
return icon?.startsWith('<') ?? false
}
}

6
tabby-core/src/components/tabHeader.component.pug
View File

@ -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(

5
tabby-core/src/components/tabHeader.component.scss
View File

@ -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;
}

3
tabby-core/src/index.ts
View File

@ -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

5
tabby-settings/src/components/editProfileModal.component.pug
View File

@ -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')

11
tabby-settings/src/components/profilesSettingsTab.component.pug
View File

@ -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}}

4
tabby-settings/src/components/profilesSettingsTab.component.scss
View File

@ -1,8 +1,8 @@
.icon {
profile-icon {
width: 1.25rem;
margin-right: 0.25rem;
}
.icon + * {
profile-icon + * {
margin-left: 10px;
}

4
tabby-settings/src/components/profilesSettingsTab.component.ts
View File

@ -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)
}