show icon colors in profile selector - fixes #4405

This commit is contained in:
Eugene Pankov 2021-08-14 23:14:14 +02:00
parent bf5d037cff
commit 81663f351a
No known key found for this signature in database
GPG Key ID: 5896FCBBDD1CF4F4
5 changed files with 9 additions and 4 deletions

View File

@ -4,5 +4,6 @@ export interface SelectorOption<T> {
result?: T
icon?: string
freeInputPattern?: string
color?: string
callback?: (string?) => void
}

View File

@ -7,7 +7,7 @@
(ngModelChange)='onFilterChange()'
)
.list-group(*ngIf='filteredOptions.length')
div(*ngIf='filteredOptions.length')
a.list-group-item.list-group-item-action.d-flex.align-items-center(
#item,
(click)='selectOption(option)',
@ -16,10 +16,12 @@
)
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)'
)
.title.mr-2 {{getOptionText(option)}}

View File

@ -84,8 +84,9 @@ export class ProfilesService {
selectorOptionForProfile <P extends Profile, T> (profile: PartialProfile<P>): SelectorOption<T> {
const fullProfile = this.getConfigProxyForProfile(profile)
return {
icon: profile.icon,
name: profile.group ? `${fullProfile.group} / ${fullProfile.name}` : fullProfile.name,
icon: profile.icon,
color: profile.color,
description: this.providerForProfile(fullProfile)?.getDescription(fullProfile),
}
}
@ -99,6 +100,7 @@ export class ProfilesService {
let options: SelectorOption<void>[] = recentProfiles.map(p => ({
...this.selectorOptionForProfile(p),
icon: 'fas fa-history',
color: p.color,
callback: async () => {
if (p.id) {
p = (await this.getProfiles()).find(x => x.id === p.id) ?? p

View File

@ -230,7 +230,7 @@ hotkey-input-modal {
}
}
.list-group.list-group-flush .list-group-item:not(.list-group-item-action) {
.list-group.list-group-flush {
background: transparent;
border-color: rgba(0, 0, 0, 0.2);

View File

@ -88,7 +88,7 @@ $list-group-item-padding-y: 0.8rem;
$list-group-item-padding-x: 1rem;
$list-group-hover-bg: $table-bg-hover;
$list-group-active-bg: rgba(255,255,255,.2);
$list-group-active-bg: rgba(255,255,255,.05);
$list-group-active-color: $component-active-color;
$list-group-active-border-color: translate;