From 6cb70d91ae6eec59d1f3e091d9b51dceb58b942a Mon Sep 17 00:00:00 2001
From: Julien Calixte <jcalixte@isep.fr>
Date: Fri, 23 Aug 2019 10:41:40 +0200
Subject: [PATCH] style: more colors.

---
 src/components/AccountShare.vue       |  2 +-
 src/components/TransactionCreate.vue  | 14 ++++++++++++--
 src/data/colors.ts                    | 24 +++++++++++++++++++++++-
 src/models/IColor.ts                  |  1 +
 src/utils/index.ts                    | 10 ++++++++++
 src/views/accounts/AccountNew.vue     |  2 +-
 src/views/accounts/AccountSetting.vue |  2 +-
 7 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/components/AccountShare.vue b/src/components/AccountShare.vue
index 77c3ca6..1cc401a 100644
--- a/src/components/AccountShare.vue
+++ b/src/components/AccountShare.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="account-share message is-success is-medium" v-if="show && user">
+  <article class="account-share message is-success is-medium" v-if="show">
     <div class="message-header">
       <p>Partagez le compte</p>
       <button class="delete" v-if="canClose" aria-label="close" @click="hide"></button>
diff --git a/src/components/TransactionCreate.vue b/src/components/TransactionCreate.vue
index f98db45..1c6a967 100644
--- a/src/components/TransactionCreate.vue
+++ b/src/components/TransactionCreate.vue
@@ -148,7 +148,7 @@
         </div>
       </div>
     </div>
-    <fab-button @valid="submitTransaction" :margin="true">
+    <fab-button @valid="submitTransaction" :margin="true" :button-style="backgroundColor">
       <awe-icon icon="check" />
     </fab-button>
   </div>
@@ -170,7 +170,7 @@ import transactionService from '@/services/TransactionService'
 import formatDate from '@/utils/format-date'
 import notif from '@/utils/notif'
 import { money } from '@/utils/filters'
-import { confirmation, alertMessage } from '@/utils'
+import { confirmation, alertMessage, findDarkValue } from '@/utils'
 
 const today: Date = new Date()
 
@@ -296,6 +296,16 @@ export default class TransactionCreate extends Vue {
     return this.payFor.filter((p, index) => p.weight > 0)
   }
 
+  public get backgroundColor(): any | null {
+    if (!this.account || !this.account.color) {
+      return null
+    }
+    return {
+      backgroundColor: this.account.color,
+      color: findDarkValue(this.account.color) || 'black'
+    }
+  }
+
   @Watch('payBy')
   public onPayByChange(payBy: string, oldPayBy: string) {
     if (
diff --git a/src/data/colors.ts b/src/data/colors.ts
index 253d071..caff9f6 100644
--- a/src/data/colors.ts
+++ b/src/data/colors.ts
@@ -2,6 +2,7 @@ import IColor from '@/models/IColor'
 import lightness from 'lightness'
 
 const dark = -70
+const light = dark * -1
 
 export default [
   {
@@ -47,10 +48,31 @@ export default [
   {
     label: 'Rouge sombre pastel',
     value: '#c03b22'
+  },
+  {
+    label: `Perle d'eau`,
+    value: '#76c5bf'
+  },
+  {
+    label: 'Expresso',
+    value: '#ab7642'
+  },
+  {
+    label: 'Menthe',
+    value: '#b3ffe1'
+  },
+  {
+    label: 'Neige',
+    value: '#fff6f6'
+  },
+  {
+    label: 'Rose lavande',
+    value: '#eea1eb'
   }
 ].map(
   (color: IColor): IColor => ({
     ...color,
-    darkValue: lightness(color.value, dark).toLowerCase()
+    darkValue: lightness(color.value, dark).toLowerCase(),
+    lightValue: lightness(color.value, light).toLowerCase()
   })
 )
diff --git a/src/models/IColor.ts b/src/models/IColor.ts
index 5248797..a01d785 100644
--- a/src/models/IColor.ts
+++ b/src/models/IColor.ts
@@ -2,4 +2,5 @@ export default interface IColor {
   label: string | null
   value: string | null
   darkValue?: string | null
+  lightValue?: string | null
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index bc90bd2..2ab9ad7 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -50,6 +50,16 @@ export const findDarkValue = (value: string): string | null => {
   return find && find.darkValue ? find.darkValue : null
 }
 
+export const findLightValue = (value: string): string | null => {
+  if (!value) {
+    return null
+  }
+  const find: IColor | undefined = colors.find(
+    (color: IColor) => color.value === value
+  )
+  return find && find.lightValue ? find.lightValue : null
+}
+
 export const toHex = (text: string): string => {
   return (
     [...text]
diff --git a/src/views/accounts/AccountNew.vue b/src/views/accounts/AccountNew.vue
index 22f9358..1e83045 100644
--- a/src/views/accounts/AccountNew.vue
+++ b/src/views/accounts/AccountNew.vue
@@ -133,7 +133,7 @@ export default class AccountNew extends Vue {
       user.alias ? user.alias.toLowerCase() : ''
     )
     if (aliases.length === 0) {
-      notif.alert('Au moins une personne doit être créée.')
+      notif.alert('Au moins une personne doit être ajoutée au compte.')
       return false
     }
     if (aliases.length !== new Set(aliases).size) {
diff --git a/src/views/accounts/AccountSetting.vue b/src/views/accounts/AccountSetting.vue
index a39b7f8..80f8fe8 100644
--- a/src/views/accounts/AccountSetting.vue
+++ b/src/views/accounts/AccountSetting.vue
@@ -42,7 +42,7 @@
         <account-share :account="account" :can-close="false" />
       </div>
       <div class="column is-one-third">
-        <article class="message is-primary">
+        <article class="message is-primary is-medium">
           <div class="message-header">
             <p>Actions</p>
           </div>