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 result?: T
icon?: string icon?: string
freeInputPattern?: string freeInputPattern?: string
color?: string
callback?: (string?) => void callback?: (string?) => void
} }

View File

@ -7,7 +7,7 @@
(ngModelChange)='onFilterChange()' (ngModelChange)='onFilterChange()'
) )
.list-group(*ngIf='filteredOptions.length') div(*ngIf='filteredOptions.length')
a.list-group-item.list-group-item-action.d-flex.align-items-center( a.list-group-item.list-group-item-action.d-flex.align-items-center(
#item, #item,
(click)='selectOption(option)', (click)='selectOption(option)',
@ -16,10 +16,12 @@
) )
i.icon( i.icon(
class='fa-fw {{option.icon}}', class='fa-fw {{option.icon}}',
style='color: {{option.color}}',
*ngIf='!iconIsSVG(option.icon)' *ngIf='!iconIsSVG(option.icon)'
) )
.icon( .icon(
[fastHtmlBind]='option.icon', [fastHtmlBind]='option.icon',
style='color: {{option.color}}',
*ngIf='iconIsSVG(option.icon)' *ngIf='iconIsSVG(option.icon)'
) )
.title.mr-2 {{getOptionText(option)}} .title.mr-2 {{getOptionText(option)}}

View File

@ -84,8 +84,9 @@ export class ProfilesService {
selectorOptionForProfile <P extends Profile, T> (profile: PartialProfile<P>): SelectorOption<T> { selectorOptionForProfile <P extends Profile, T> (profile: PartialProfile<P>): SelectorOption<T> {
const fullProfile = this.getConfigProxyForProfile(profile) const fullProfile = this.getConfigProxyForProfile(profile)
return { return {
icon: profile.icon,
name: profile.group ? `${fullProfile.group} / ${fullProfile.name}` : fullProfile.name, name: profile.group ? `${fullProfile.group} / ${fullProfile.name}` : fullProfile.name,
icon: profile.icon,
color: profile.color,
description: this.providerForProfile(fullProfile)?.getDescription(fullProfile), description: this.providerForProfile(fullProfile)?.getDescription(fullProfile),
} }
} }
@ -99,6 +100,7 @@ export class ProfilesService {
let options: SelectorOption<void>[] = recentProfiles.map(p => ({ let options: SelectorOption<void>[] = recentProfiles.map(p => ({
...this.selectorOptionForProfile(p), ...this.selectorOptionForProfile(p),
icon: 'fas fa-history', icon: 'fas fa-history',
color: p.color,
callback: async () => { callback: async () => {
if (p.id) { if (p.id) {
p = (await this.getProfiles()).find(x => x.id === p.id) ?? p 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; background: transparent;
border-color: rgba(0, 0, 0, 0.2); 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-item-padding-x: 1rem;
$list-group-hover-bg: $table-bg-hover; $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-color: $component-active-color;
$list-group-active-border-color: translate; $list-group-active-border-color: translate;