julien/vaquant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 (account card) better color contrast

Browse Source
This commit is contained in:
Julien Calixte
2020-04-25 01:06:05 +02:00
parent 8698d94acb
commit 7414608ed8
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/AccountCard.vue
View File

@@ -6,7 +6,7 @@
> >
<router-link <router-link
:class="{ 'is-primary': !account.color, 'is-white': account.color }" :class="{ 'is-primary': !account.color, 'is-white': account.color }"
:style="`color: ${findContrastColor(account.color || '')}`" :style="`color: ${findDarkValue(account.color || '')}`"
:to="{ name: 'account', params: { id: account._id } }" :to="{ name: 'account', params: { id: account._id } }"
>{{ account.name }}</router-link >{{ account.name }}</router-link
> >
@@ -20,7 +20,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator' import { Component, Prop, Vue } from 'vue-property-decorator'
import { findContrastColor, findDarkValue, findLightValue } from '@/utils' import { findDarkValue, findLightValue } from '@/utils'
import bus, { SYNC } from '@/utils/bus-event' import bus, { SYNC } from '@/utils/bus-event'
import accountService from '@/services/AccountService' import accountService from '@/services/AccountService'
import IAccount from '@/models/IAccount' import IAccount from '@/models/IAccount'
@@ -45,8 +45,8 @@ export default class AccountCard extends Vue {
) )
} }
public findContrastColor(color: string): string | null { public findDarkValue(color: string): string | null {
return findContrastColor(color) return findDarkValue(color)
} }
public goToAccount(id: string): void { public goToAccount(id: string): void {
@@ -62,7 +62,7 @@ export default class AccountCard extends Vue {
background: GRADIENT background: GRADIENT
? `linear-gradient(135deg, ${color}, ${findLightValue(color)})` ? `linear-gradient(135deg, ${color}, ${findLightValue(color)})`
: color, : color,
color: this.findContrastColor(color) color: findDarkValue(color)
} }
} }