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

Change position of toolbar and buttons in Edit mode and add search

Browse Source
This commit is contained in:
Bubka 2022-12-14 14:00:33 +01:00
parent 88195a6afb
commit f661a0bc17
6 changed files with 368 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
resources/js/components/Footer.vue
View File

@ -7,18 +7,23 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="$route.meta.showAbout === true" class="content has-text-centered is-size-6"> <div v-if="editMode" class="content has-text-centered">
<router-link :to="{ name: 'about' }" class="has-text-grey"> <button id="lnkExitEdit" class="button is-ghost is-like-text" @click="exitEdit">{{ $t('commons.done') }}</button>
2FAuth – <span class="has-text-weight-bold">v{{ appVersion }}</span>
</router-link>
</div> </div>
<div v-else class="content has-text-centered"> <div v-else class="content has-text-centered">
<router-link id="lnkSettings" :to="{ name: 'settings.options' }" class="has-text-grey"> <div v-if="$route.meta.showAbout === true" class="is-size-6">
{{ $t('settings.settings') }}<span v-if="$root.appSettings.latestRelease && $root.appSettings.checkForUpdate" class="release-flag"></span> <router-link :to="{ name: 'about' }" class="has-text-grey">
</router-link> 2FAuth – <span class="has-text-weight-bold">v{{ appVersion }}</span>
<span v-if="!this.$root.appConfig.proxyAuth || (this.$root.appConfig.proxyAuth && this.$root.appConfig.proxyLogoutUrl)"> </router-link>
- <button id="lnkSignOut" class="button is-text is-like-text has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</button> </div>
</span> <div v-else>
<router-link id="lnkSettings" :to="{ name: 'settings.options' }" class="has-text-grey">
{{ $t('settings.settings') }}<span v-if="$root.appSettings.latestRelease && $root.appSettings.checkForUpdate" class="release-flag"></span>
</router-link>
<span v-if="!this.$root.appConfig.proxyAuth || (this.$root.appConfig.proxyAuth && this.$root.appConfig.proxyLogoutUrl)">
- <button id="lnkSignOut" class="button is-text is-like-text has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</button>
</span>
</div>
</div> </div>
</footer> </footer>
</template> </template>
@ -34,6 +39,7 @@
props: { props: {
showButtons: true, showButtons: true,
editMode: false,
}, },
methods: { methods: {
@ -42,6 +48,10 @@
this.appLogout() this.appLogout()
} }
},
exitEdit() {
this.$emit('exit-edit')
} }
} }
}; };

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

@ -63,67 +63,7 @@
<!-- header --> <!-- header -->
<div class="header has-background-black-ter" v-if="this.showAccounts || this.showGroupSwitch"> <div class="header has-background-black-ter" v-if="this.showAccounts || this.showGroupSwitch">
<div class="columns is-gapless is-mobile is-centered"> <div class="columns is-gapless is-mobile is-centered">
<div v-if="editMode" class="column"> <div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<!-- toolbar -->
<div class="toolbar has-text-centered">
<div class="field is-grouped is-justify-content-center has-text-grey mb-2">
<!-- selected label -->
<p class="control mr-1">
{{ selectedAccounts.length }}&nbsp;{{ $t('commons.selected') }}
</p>
<!-- deselect all -->
<p class="control mr-4">
<button @click="clearSelected" class="clear-selection delete" :style="{visibility: selectedAccounts.length > 0 ? 'visible' : 'hidden'}" :title="$t('commons.clear_selection')"></button>
</p>
<!-- select all button -->
<p class="control mr-5">
<button @click="selectAll" class="button has-line-height p-1 is-ghost has-background-black-ter has-text-grey" :title="$t('commons.select_all')">
<span>{{ $t('commons.all') }}</span>
<font-awesome-icon class="ml-1" :icon="['fas', 'check-square']" />
</button>
</p>
<!-- sort asc/desc buttons -->
<p class="control">
<button @click="sortAsc" class="button has-line-height p-1 is-ghost has-background-black-ter has-text-grey" :title="$t('commons.sort_ascending')">
<font-awesome-icon :icon="['fas', 'sort-alpha-down']" />
</button>
</p>
<p class="control">
<button @click="sortDesc" class="button has-line-height p-1 is-ghost has-background-black-ter has-text-grey" :title="$t('commons.sort_descending')">
<font-awesome-icon :icon="['fas', 'sort-alpha-up']" />
</button>
</p>
</div>
<div class="field is-grouped is-justify-content-center pb-2">
<!-- Change group button -->
<div v-if="selectedAccounts.length > 0" class="control">
<div tabindex="0" role="button" class="tag-button tag-button-link tags are-medium has-addons is-clickable" @click="showGroupSelector = true" @keyup.enter="showGroupSelector = true">
<span class="tag is-dark mb-0">
{{ $t('groups.change_group') }}&nbsp;&nbsp;
<font-awesome-icon :icon="['fas', 'layer-group']" />
</span>
</div>
</div>
<!-- export selected button -->
<div v-if="selectedAccounts.length > 0" class="control">
<div tabindex="0" role="button" class="tag-button tags are-medium has-addons is-clickable" @click="exportAccounts" @keyup.enter="exportAccounts">
<span class="tag is-dark mb-0">
<font-awesome-icon :icon="['fas', 'file-download']" />
</span>
</div>
</div>
<!-- delete selected button -->
<div v-if="selectedAccounts.length > 0" class="control">
<div tabindex="0" role="button" class="tag-button tag-button-danger tags are-medium has-addons is-clickable" @click="destroyAccounts" @keyup.enter="destroyAccounts">
<span class="tag is-dark mb-0">
<font-awesome-icon :icon="['fas', 'trash']" />
</span>
</div>
</div>
</div>
</div>
</div>
<div v-else class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<!-- search --> <!-- search -->
<div role="search" class="field"> <div role="search" class="field">
<div class="control has-icons-right"> <div class="control has-icons-right">
@ -134,8 +74,31 @@
</span> </span>
</div> </div>
</div> </div>
<!-- toolbar -->
<div v-if="editMode" class="toolbar has-text-centered">
<div class="columns">
<div class="column">
<!-- selected label -->
<span class="mr-1">{{ selectedAccounts.length }}&nbsp;{{ $t('commons.selected') }}</span>
<!-- deselect all -->
<button @click="clearSelected" class="clear-selection delete mr-4" :style="{visibility: selectedAccounts.length > 0 ? 'visible' : 'hidden'}" :title="$t('commons.clear_selection')"></button>
<!-- select all button -->
<button @click="selectAll" class="button mr-5 has-line-height p-1 is-ghost has-background-black-ter has-text-grey" :title="$t('commons.select_all')">
<span>{{ $t('commons.all') }}</span>
<font-awesome-icon class="ml-1" :icon="['fas', 'check-square']" />
</button>
<!-- sort asc/desc buttons -->
<button @click="sortAsc" class="button has-line-height p-1 is-ghost has-background-black-ter has-text-grey" :title="$t('commons.sort_ascending')">
<font-awesome-icon :icon="['fas', 'sort-alpha-down']" />
</button>
<button @click="sortDesc" class="button has-line-height p-1 is-ghost has-background-black-ter has-text-grey" :title="$t('commons.sort_descending')">
<font-awesome-icon :icon="['fas', 'sort-alpha-up']" />
</button>
</div>
</div>
</div>
<!-- group switch toggle --> <!-- group switch toggle -->
<div class="has-text-centered"> <div v-else class="has-text-centered">
<div class="columns"> <div class="columns">
<div class="column" v-if="!showGroupSwitch"> <div class="column" v-if="!showGroupSwitch">
<button :title="$t('groups.show_group_selector')" tabindex="1" class="button is-text is-like-text" @click.stop="toggleGroupSwitch"> <button :title="$t('groups.show_group_selector')" tabindex="1" class="button is-text is-like-text" @click.stop="toggleGroupSwitch">
@ -207,7 +170,7 @@
</transition-group> </transition-group>
</draggable> </draggable>
<!-- </vue-pull-refresh> --> <!-- </vue-pull-refresh> -->
<vue-footer :showButtons="true"> <vue-footer :showButtons="true" :editMode="editMode" v-on:exit-edit="setEditModeTo(false)">
<!-- New item buttons --> <!-- New item buttons -->
<p class="control" v-if="!editMode"> <p class="control" v-if="!editMode">
<button class="button is-link is-rounded is-focus" @click="start"> <button class="button is-link is-rounded is-focus" @click="start">
@ -221,13 +184,33 @@
<p class="control" v-if="!editMode"> <p class="control" v-if="!editMode">
<button class="button is-dark is-rounded" @click="setEditModeTo(true)">{{ $t('commons.manage') }}</button> <button class="button is-dark is-rounded" @click="setEditModeTo(true)">{{ $t('commons.manage') }}</button>
</p> </p>
<!-- Done button --> <!-- move button -->
<p class="control" v-if="editMode"> <p class="control" v-if="editMode">
<button class="button is-success is-rounded" @click="setEditModeTo(false)"> <button
<span>{{ $t('commons.done') }}</span> :disabled='selectedAccounts.length == 0' class="button is-outlined is-rounded"
<span class="icon is-small"> :class="selectedAccounts.length > 0 ? 'is-link' : 'is-dark'"
<font-awesome-icon :icon="['fas', 'check']" /> @click="showGroupSelector = true"
</span> :title="$t('groups.move_selected_to_group')" >
{{ $t('commons.move') }}
</button>
</p>
<!-- delete button -->
<p class="control" v-if="editMode">
<button
:disabled='selectedAccounts.length == 0' class="button is-outlined is-rounded"
:class="selectedAccounts.length > 0 ? 'is-link' : 'is-dark'"
@click="destroyAccounts" >
{{ $t('commons.delete') }}
</button>
</p>
<!-- export button -->
<p class="control" v-if="editMode">
<button
:disabled='selectedAccounts.length == 0' class="button is-outlined is-rounded"
:class="selectedAccounts.length > 0 ? 'is-link' : 'is-dark'"
@click="exportAccounts"
:title="$t('twofaccounts.export_selected_to_json')" >
{{ $t('commons.export') }}
</button> </button>
</p> </p>
</vue-footer> </vue-footer>
@ -599,15 +582,8 @@
* Toggle the accounts list between View mode and Edit mode * Toggle the accounts list between View mode and Edit mode
*/ */
setEditModeTo(state) { setEditModeTo(state) {
if( state === false ) { this.selectedAccounts = []
this.selectedAccounts = []
}
else {
this.search = '';
}
this.editMode = state this.editMode = state
this.$parent.showToolbar = state
}, },
/** /**

1
resources/lang/en/commons.php
View File

@ -37,6 +37,7 @@ return [
'new' => 'New', 'new' => 'New',
'back' => 'Back', 'back' => 'Back',
'move' => 'Move', 'move' => 'Move',
'export' => 'Export',
'all' => 'All', 'all' => 'All',
'select_all' => 'Select all', 'select_all' => 'Select all',
'clear_selection' => 'Clear selection', 'clear_selection' => 'Clear selection',

1
resources/lang/en/groups.php
View File

@ -23,6 +23,7 @@ return [
'manage_groups_legend' => 'You can create groups to organize your accounts the way you want. All accounts remain visible in the pseudo group named \'All\', regardless of the group they belong to.', 'manage_groups_legend' => 'You can create groups to organize your accounts the way you want. All accounts remain visible in the pseudo group named \'All\', regardless of the group they belong to.',
'deleting_group_does_not_delete_accounts' => 'Deleting a group does not delete accounts', 'deleting_group_does_not_delete_accounts' => 'Deleting a group does not delete accounts',
'move_selected_to' => 'Move selected to', 'move_selected_to' => 'Move selected to',
'move_selected_to_group' => 'Move selected into a group',
'no_group' => 'No group', 'no_group' => 'No group',
'change_group' => 'Change group', 'change_group' => 'Change group',
'group_successfully_created' => 'Group successfully created', 'group_successfully_created' => 'Group successfully created',

1
resources/lang/en/twofaccounts.php
View File

@ -30,6 +30,7 @@ return [
'account_updated' => 'Account successfully updated', 'account_updated' => 'Account successfully updated',
'accounts_deleted' => 'Account(s) successfully deleted', 'accounts_deleted' => 'Account(s) successfully deleted',
'accounts_moved' => 'Account(s) successfully moved', 'accounts_moved' => 'Account(s) successfully moved',
'export_selected_to_json' => 'Download a json export of selected accounts',
'forms' => [ 'forms' => [
'service' => [ 'service' => [
'placeholder' => 'Google, Twitter, Apple', 'placeholder' => 'Google, Twitter, Apple',

483
resources/sass/app.scss vendored
View File

File diff suppressed because one or more lines are too long