optimize icon experience in dark mode

This commit is contained in:
MaysWind
2020-12-20 17:42:34 +08:00
parent a37de5a496
commit 4e0ef42278
10 changed files with 55 additions and 18 deletions
+18 -6
View File
@@ -84,7 +84,9 @@
<f7-list-item :title="$t('Account Icon')" link="#"
@click="account.showIconSelectionSheet = true">
<f7-icon slot="after" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
<f7-icon slot="after"
:icon="account.icon | accountIcon"
:style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
<icon-selection-sheet :all-icon-infos="allAccountIcons"
:show.sync="account.showIconSelectionSheet"
:color="account.color"
@@ -94,7 +96,9 @@
<f7-list-item :title="$t('Account Color')" link="#"
@click="account.showColorSelectionSheet = true">
<f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
<f7-icon slot="after"
f7="app_fill"
:style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
<color-selection-sheet :all-color-infos="allAccountColors"
:show.sync="account.showColorSelectionSheet"
v-model="account.color"
@@ -156,7 +160,9 @@
<f7-list-item :title="$t('Account Icon')" link="#"
@click="account.showIconSelectionSheet = true">
<f7-icon slot="after" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }"></f7-icon>
<f7-icon slot="after"
:icon="account.icon | accountIcon"
:style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
<icon-selection-sheet :all-icon-infos="allAccountIcons"
:show.sync="account.showIconSelectionSheet"
:color="account.color"
@@ -166,7 +172,9 @@
<f7-list-item :title="$t('Account Color')" link="#"
@click="account.showColorSelectionSheet = true">
<f7-icon slot="after" f7="app_fill" :style="{ color: '#' + account.color }"></f7-icon>
<f7-icon slot="after"
f7="app_fill"
:style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }"></f7-icon>
<color-selection-sheet :all-color-infos="allAccountColors"
:show.sync="account.showColorSelectionSheet"
v-model="account.color"
@@ -210,7 +218,9 @@
<f7-list-item :title="$t('Sub Account Icon')" link="#"
@click="subAccount.showIconSelectionSheet = true">
<f7-icon slot="after" :icon="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }"></f7-icon>
<f7-icon slot="after"
:icon="subAccount.icon | accountIcon"
:style="{ color: (subAccount.color && subAccount.color !== '000000' ? '#' + subAccount.color : 'var(--default-icon-color)') }"></f7-icon>
<icon-selection-sheet :all-icon-infos="allAccountIcons"
:show.sync="subAccount.showIconSelectionSheet"
:color="subAccount.color"
@@ -220,7 +230,9 @@
<f7-list-item :title="$t('Sub Account Color')" link="#"
@click="subAccount.showColorSelectionSheet = true">
<f7-icon slot="after" f7="app_fill" :style="{ color: '#' + subAccount.color }"></f7-icon>
<f7-icon slot="after"
f7="app_fill"
:style="{ color: (subAccount.color && subAccount.color !== '000000' ? '#' + subAccount.color : 'var(--default-icon-color)') }"></f7-icon>
<color-selection-sheet :all-color-infos="allAccountColors"
:show.sync="subAccount.showColorSelectionSheet"
v-model="subAccount.color"
+4 -2
View File
@@ -87,7 +87,8 @@
>
<f7-block slot="title" class="no-padding">
<div class="display-flex padding-top-half padding-bottom-half">
<f7-icon slot="media" :icon="account.icon | accountIcon" :style="{ color: '#' + account.color }">
<f7-icon slot="media" :icon="account.icon | accountIcon"
:style="{ color: (account.color && account.color !== '000000' ? '#' + account.color : 'var(--default-icon-color)') }">
<f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
<f7-icon f7="eye_slash_fill"></f7-icon>
</f7-badge>
@@ -101,7 +102,8 @@
:title="subAccount.name" :after="accountBalance(subAccount) | currency(subAccount.currency)"
link="#"
>
<f7-icon slot="media" :icon="subAccount.icon | accountIcon" :style="{ color: '#' + subAccount.color }">
<f7-icon slot="media" :icon="subAccount.icon | accountIcon"
:style="{ color: (subAccount.color && subAccount.color !== '000000' ? '#' + subAccount.color : 'var(--default-icon-color)') }">
<f7-badge color="gray" class="right-bottom-icon" v-if="subAccount.hidden">
<f7-icon f7="eye_slash_fill"></f7-icon>
</f7-badge>