extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-06-26 15:01:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Toolbar within edit mode

Browse Source
This commit is contained in:
Bubka 2020-01-31 11:44:45 +01:00
parent 1c55e7e2e1
commit 0dbbb979dc
3 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/js/components/App.vue
View File

@ -1,6 +1,21 @@
<template> <template>
<div class="main-section"> <div>
<router-view></router-view> <!-- toolbar -->
<header class="toolbar has-background-black-bis" v-if="showToolbar">
<div class="container">
<div class="columns is-mobile is-centered">
<div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<a class="button is-dark">
Delete
</a>
</div>
</div>
</div>
</header>
<!-- main content -->
<main class="main-section">
<router-view :showToolbar="showToolbar"></router-view>
</main>
</div> </div>
</template> </template>
@ -10,7 +25,7 @@
data(){ data(){
return { return {
showToolbar: false
} }
} }
} }

19
resources/js/views/Accounts.vue
View File

@ -16,7 +16,7 @@
</div> </div>
</div> </div>
<!-- accounts --> <!-- accounts -->
<div class="columns is-multiline is-centered"> <div class="accounts columns is-multiline is-centered">
<div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts"> <div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts">
<div class="tfa-container"> <div class="tfa-container">
<div class="tfa-checkbox" v-if="editMode"> <div class="tfa-checkbox" v-if="editMode">
@ -37,14 +37,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <span v-if="editMode">
<router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark">
<font-awesome-icon :icon="['fas', 'edit']" />
</router-link>
<a class="tag is-dark" v-on:click="deleteAccount(account.id)">
<font-awesome-icon :icon="['fas', 'trash']" />
</a>
</span> -->
</div> </div>
</div> </div>
<!-- No account --> <!-- No account -->
@ -73,8 +65,8 @@
</router-link> </router-link>
</p> </p>
<p class="control"> <p class="control">
<a class="button is-dark is-rounded" @click="editMode = true" v-if="!editMode">{{ $t('twofaccounts.manage') }}</a> <a class="button is-dark is-rounded" @click="setEditModeTo(true)" v-if="!editMode">{{ $t('twofaccounts.manage') }}</a>
<a class="button is-success is-rounded" @click="editMode = false" v-if="editMode"> <a class="button is-success is-rounded" @click="setEditModeTo(false)" v-if="editMode">
<span>{{ $t('twofaccounts.done') }}</span> <span>{{ $t('twofaccounts.done') }}</span>
<span class="icon is-small"> <span class="icon is-small">
<font-awesome-icon :icon="['fas', 'check']" /> <font-awesome-icon :icon="['fas', 'check']" />
@ -190,6 +182,11 @@
this.$router.go('/login'); this.$router.go('/login');
} }
},
setEditModeTo(state) {
this.editMode = state
this.$parent.showToolbar = state
} }
}, },

17
resources/sass/app.scss vendored
View File

@ -13,14 +13,25 @@
padding: 1.5rem 1rem 8rem 1rem; padding: 1.5rem 1rem 8rem 1rem;
} }
.search {
margin-bottom: 0 !important;
}
.accounts {
margin-top: 0.75rem;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.main-section { .main-section {
padding: 0.75rem 1rem 8rem 1rem; padding: 0.75rem 1rem 8rem 1rem;
} }
}
.search { .toolbar {
margin-bottom: 0.75rem !important; position: fixed;
} width: 100%;
z-index: 30;
padding: 0.75rem 0;
} }
.form-column { .form-column {