🎨 (App)

This commit is contained in:
Julien Calixte
2019-11-23 10:56:06 +01:00
parent 9d9ab393d9
commit 73b7f178e0
2 changed files with 52 additions and 21 deletions

View File

@@ -7,23 +7,35 @@
<h3 class="subtitle is-3">Nom</h3>
<div class="field">
<div class="control">
<input type="text" class="input" maxlength="30" v-model="name" required />
<input
type="text"
class="input"
maxlength="30"
v-model="name"
required
/>
</div>
<p
class="help is-primary"
>{{ $tc('validation.max_char', 30 - name.length, { max: 30 - name.length }) }}</p>
<p class="help is-primary">
{{
$tc('validation.max_char', 30 - name.length, {
max: 30 - name.length
})
}}
</p>
</div>
</div>
<div class="column is-half">
<h3 class="subtitle is-3" v-t="'account.main_currency'"></h3>
<div class="control">
<div class="select is-fullwidth">
<select name="main-currency" id="main-currency" v-model="mainCurrency">
<option
v-for="(cur, k) in currencies"
:key="k"
:value="cur"
>{{ cur.name }} {{ cur.symbol }}</option>
<select
name="main-currency"
id="main-currency"
v-model="mainCurrency"
>
<option v-for="(cur, k) in currencies" :key="k" :value="cur"
>{{ cur.name }} {{ cur.symbol }}</option
>
</select>
</div>
</div>
@@ -38,9 +50,15 @@
class="switch"
v-model="isPublic"
/>
<label for="is-public">Compte {{ isPublic ? 'public' : 'privé' }}</label>
<p class="help is-danger" v-if="isPublic" v-t="'account.publicInformation'"></p>
<p class="help is-primary" v-else v-t="'account.privateInformation'"></p>
<label for="is-public">{{ isPublic ? 'public' : 'privé' }}</label>
<p
class="help is-primary"
v-t="
isPublic
? 'account.publicInformation'
: 'account.privateInformation'
"
></p>
</div>
</div>
<div class="column is-half">
@@ -52,15 +70,26 @@
<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" />
<awe-icon
icon="chevron-right"
:rotation="currencyShow ? 90 : undefined"
/>
</div>
{{ $tc('account.used_currencies', accountCurrencies.length, { count: accountCurrencies.length }) }}
{{
$tc('account.used_currencies', accountCurrencies.length, {
count: accountCurrencies.length
})
}}
</h3>
<transition name="fade">
<div class="currency-list" v-if="currencyShow">
<div class="field">
<div class="columns is-multiline">
<div class="column is-half" v-for="(currency, k) in currencies" :key="k">
<div
class="column is-half"
v-for="(currency, k) in currencies"
:key="k"
>
<input
class="is-checkradio is-block is-medium"
type="checkbox"
@@ -70,9 +99,11 @@
:value="currency"
:disabled="currency.code === mainCurrency.code"
/>
<label
:for="`cur-${currency.code}`"
>{{ currency.name }} ({{ currency.symbol || currency.code }})</label>
<label :for="`cur-${currency.code}`"
>{{ currency.name }} ({{
currency.symbol || currency.code
}})</label
>
</div>
</div>
</div>