🎨 (Account) Change new account page style

src/components/AccountCard.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="account-card box" :style="getColor(account.color)" @click="goToAccount(account._id)">
+    <router-link
+      :class="{ 'is-primary': !account.color, 'is-white': account.color }"
+      :style="`color: ${findDarkValue(account.color)}`"
+      :to="{ name: 'account', params: { id: account._id } }"
+    >{{ account.name }}</router-link>
+    <div v-if="account.isPublic">
+      <awe-icon icon="users" />
+    </div>
+    <br />
+    {{ account.users && account.users.map(u => u.alias).join(', ') }}
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { findDarkValue } from '@/utils'
+import bus, { SYNC } from '@/utils/bus-event'
+import accountService from '@/services/AccountService'
+import IAccount from '@/models/IAccount'
+import IColor from '@/models/IColor'
+import FabButton from '@/components/FabButton.vue'
+
+@Component
+export default class AccountCard extends Vue {
+  @Prop({ type: Object, required: true })
+  public account!: IAccount
+
+  public getColor(color: string | null): any | null {
+    if (!color) {
+      return null
+    }
+    return {
+      backgroundColor: color,
+      color: this.findDarkValue(color)
+    }
+  }
+
+  public findDarkValue(color: string): string | null {
+    return findDarkValue(color)
+  }
+
+  public goToAccount(id: string): void {
+    this.$router.push({ name: 'account', params: { id } })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/variables';
+
+.box {
+  border-radius: 8px;
+  word-wrap: break-word;
+  hyphens: auto;
+
+  a {
+    font-size: 1.2rem;
+    color: $main;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>

src/components/AccountList.vue

@@ -1,19 +1,8 @@
 <template>
   <div class="account-list">
     <div class="columns is-centered is-multiline" v-if="accounts.length">
-      <div class="column is-2" v-for="(account, k) in accounts" :key="k">
-        <div class="box" :style="getColor(account.color)" @click="goToAccount(account._id)">
-          <router-link
-            :class="{ 'is-primary': !account.color, 'is-white': account.color }"
-            :style="`color: ${findDarkValue(account.color)}`"
-            :to="{ name: 'account', params: { id: account._id } }"
-          >{{ account.name }}</router-link>
-          <div v-if="account.isPublic">
-            <awe-icon icon="users" />
-          </div>
-          <hr v-else />
-          {{ account.users && account.users.map(u => u.alias).join(', ') }}
-        </div>
+      <div class="column is-3" v-for="(account, k) in accounts" :key="k">
+        <account-card :account="account" />
       </div>
     </div>
     <div v-else-if="fetched">
@@ -35,10 +24,12 @@ import IAccount from '@/models/IAccount'
 import IColor from '@/models/IColor'
 import IUser from '@/models/IUser'
 import FabButton from '@/components/FabButton.vue'
+import AccountCard from '@/components/AccountCard.vue'
 
 @Component({
   components: {
-    'fab-button': FabButton
+    'fab-button': FabButton,
+    'account-card': AccountCard
   }
 })
 export default class AccountList extends Vue {
@@ -59,51 +50,14 @@ export default class AccountList extends Vue {
     this.accounts = await accountService.getAll(this.archived)
     this.fetched = true
   }
-
-  public getColor(color: string | null): any | null {
-    if (!color) {
-      return null
-    }
-    return {
-      backgroundColor: color,
-      color: this.findDarkValue(color)
-    }
-  }
-
-  public findDarkValue(color: string): string | null {
-    return findDarkValue(color)
-  }
-
-  public goToAccount(id: string): void {
-    this.$router.push({ name: 'account', params: { id } })
-  }
 }
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/variables';
-
-.box {
-  border-radius: 8px;
-  word-wrap: break-word;
-  hyphens: auto;
-
-  a {
-    font-size: 1.2rem;
-    color: $main;
-  }
-}
-
 li {
   margin-bottom: 10px;
   &:last-child {
     margin-bottom: 0;
   }
 }
-
-.box {
-  &:hover {
-    cursor: pointer;
-  }
-}
 </style>

src/components/UserNew.vue

@@ -14,7 +14,7 @@
         </div>
       </div>
     </div>
-    <div class="column is-5" v-if="newUser">
+    <div class="column is-6" v-if="newUser">
       <div class="field is-horizontal">
         <div class="field-label is-normal">
           <label class="label" v-t="'user.alias'"></label>
@@ -39,8 +39,10 @@
         </div>
       </div>
     </div>
-    <div class="column is-2" v-if="!isMainUser">
-      <button class="button is-danger" @click="$emit('remove')">supprimer</button>
+    <div class="column is-1" v-if="!isMainUser">
+      <button class="button is-danger" @click="$emit('remove')">
+        <awe-icon icon="trash" />
+      </button>
     </div>
   </div>
 </template>

src/styles/index.scss

@@ -18,6 +18,10 @@ html {
 .app {
   color: $main;
   text-align: center;
+
+  .field-body {
+    flex-grow: 3;
+  }
 }
 
 nav {

src/utils/icons.ts

@@ -33,7 +33,8 @@ import {
   faUsers,
   faUserLock,
   faTimes,
-  faTheaterMasks
+  faTheaterMasks,
+  faTrash
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
@@ -64,6 +65,7 @@ library.add(
   faPenSquare,
   faPlus,
   faTag,
+  faTrash,
   faSignal,
   faSyncAlt,
   faUser,

src/views/accounts/AccountNew.vue

@@ -3,7 +3,7 @@
     <h1 class="title is-1" v-t="'account.create'"></h1>
     <form @submit.prevent="submitAccount">
       <div class="columns is-multiline">
-        <div class="column is-one-third">
+        <div class="column is-half">
           <h3 class="subtitle is-3">Nom</h3>
           <div class="field">
             <div class="control">
@@ -14,7 +14,7 @@
             >{{ $tc('validation.max_char', 30 - name.length, { max: 30 - name.length }) }}</p>
           </div>
         </div>
-        <div class="column is-one-third">
+        <div class="column is-half">
           <h3 class="subtitle is-3" v-t="'account.main_currency'"></h3>
           <div class="control">
             <div class="select is-fullwidth">
@@ -28,7 +28,7 @@
             </div>
           </div>
         </div>
-        <div class="column is-one-third">
+        <div class="column is-half">
           <h3 class="subtitle is-3">Compte privé / public</h3>
           <div class="field">
             <input
@@ -43,13 +43,13 @@
             <p class="help is-primary" v-else v-t="'account.privateInformation'"></p>
           </div>
         </div>
-        <div class="column is-one-third">
+        <div class="column is-half">
           <color-picker v-model="color" />
         </div>
-        <div class="column is-one-third">
+        <div class="column is-half">
           <account-user-new v-model="users" />
         </div>
-        <div class="column is-one-third">
+        <div class="column is-half">
           <h3 class="subtitle is-3 title-currency" @click="toggleCurrencyShow">
             <div class="icon-container">
               <awe-icon icon="chevron-right" :rotation="currencyShow ? 90 : undefined" />
@@ -81,7 +81,7 @@
         </div>
       </div>
       <div class="columns is-centered">
-        <div class="column is-one-third">
+        <div class="column is-half">
           <button type="submit" class="button is-primary is-fullwidth is-large">
             <awe-icon icon="check" />
           </button>