mirror of
https://github.com/romancm/gamebrary
synced 2024-12-18 15:23:14 +00:00
more modal clean up
This commit is contained in:
Gamebrary
parent
d5183d432d
commit
cef5446b50
8 changed files with 87 additions and 85 deletions
|
|
@ -3,11 +3,11 @@
|
|||
v-b-modal="modalId"
|
||||
:title="$t('board.addList.title')"
|
||||
size="sm"
|
||||
variant="light"
|
||||
variant="primary"
|
||||
v-b-tooltip.hover.left
|
||||
ref="addList"
|
||||
>
|
||||
<icon name="plus" />
|
||||
<icon name="plus" white />
|
||||
|
||||
<b-modal
|
||||
:id="modalId"
|
||||
|
|
@ -18,21 +18,14 @@
|
|||
:body-text-variant="nightMode ? 'white' : null"
|
||||
:footer-bg-variant="nightMode ? 'dark' : null"
|
||||
:footer-text-variant="nightMode ? 'white' : null"
|
||||
footer-class="d-flex justify-content-between"
|
||||
@show="reset"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
:title="$t('board.addList.title')"
|
||||
header-class="border-0"
|
||||
>
|
||||
<b-button
|
||||
variant="light"
|
||||
size="sm"
|
||||
@click="close"
|
||||
>
|
||||
<icon name="x" />
|
||||
</b-button>
|
||||
</modal-header>
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<form ref="addListForm" @submit.stop.prevent="submit">
|
||||
|
|
@ -53,7 +46,7 @@
|
|||
</form>
|
||||
|
||||
<template v-slot:modal-footer="{ cancel }">
|
||||
<b-button @click="cancel">
|
||||
<b-button @click="cancel" variant="light">
|
||||
{{ $t('global.cancel') }}
|
||||
</b-button>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,20 +5,14 @@
|
|||
|
||||
<b-modal
|
||||
:id="modalId"
|
||||
footer-class="d-flex justify-content-between"
|
||||
@show="getSettings"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
:title="$t('board.list.settings')"
|
||||
>
|
||||
<b-button
|
||||
variant="light"
|
||||
size="sm"
|
||||
@click="close"
|
||||
>
|
||||
<icon name="x" />
|
||||
</b-button>
|
||||
</modal-header>
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<form ref="renameListForm" @submit.stop.prevent="save">
|
||||
|
|
@ -78,7 +72,10 @@
|
|||
</form>
|
||||
|
||||
<template v-slot:modal-footer="{ cancel }">
|
||||
<b-button @click="cancel">
|
||||
<b-button
|
||||
variant="light"
|
||||
@click="cancel"
|
||||
>
|
||||
Cancel
|
||||
</b-button>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<template lang="html">
|
||||
<b-dropdown size="sm" class="m-1" right variant="transparent" no-caret>
|
||||
<b-dropdown
|
||||
size="sm"
|
||||
class="m-1"
|
||||
right
|
||||
variant="transparent"
|
||||
no-caret
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<icon name="triangle-down" small />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -11,20 +11,14 @@
|
|||
:body-text-variant="nightMode ? 'white' : null"
|
||||
:footer-bg-variant="nightMode ? 'dark' : null"
|
||||
:footer-text-variant="nightMode ? 'white' : null"
|
||||
footer-class="d-flex justify-content-between"
|
||||
@show="getListName"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
:title="$t('board.list.renameList')"
|
||||
>
|
||||
<b-button
|
||||
variant="light"
|
||||
size="sm"
|
||||
@click="close"
|
||||
>
|
||||
<icon name="x" />
|
||||
</b-button>
|
||||
</modal-header>
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<form ref="renameListForm" @submit.stop.prevent="submit">
|
||||
|
|
@ -46,7 +40,10 @@
|
|||
</form>
|
||||
|
||||
<template v-slot:modal-footer="{ cancel }">
|
||||
<b-button @click="cancel">
|
||||
<b-button
|
||||
variant="light"
|
||||
@click="cancel"
|
||||
>
|
||||
{{ $t('global.cancel') }}
|
||||
</b-button>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,27 +5,26 @@
|
|||
|
||||
<b-modal
|
||||
:id="modalId"
|
||||
:header-bg-variant="nightMode ? 'dark' : null"
|
||||
:header-text-variant="nightMode ? 'white' : null"
|
||||
:body-bg-variant="nightMode ? 'dark' : null"
|
||||
:body-text-variant="nightMode ? 'white' : null"
|
||||
:footer-bg-variant="nightMode ? 'dark' : null"
|
||||
:footer-text-variant="nightMode ? 'white' : null"
|
||||
footer-class="d-flex justify-content-between"
|
||||
@show="getSortValue"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
:title="$t('board.list.sortList')"
|
||||
>
|
||||
<b-button
|
||||
variant="light"
|
||||
size="sm"
|
||||
@click="close"
|
||||
>
|
||||
<icon name="x" />
|
||||
</b-button>
|
||||
</modal-header>
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<form ref="renameListForm" @submit.stop.prevent="save">
|
||||
<b-form-radio-group
|
||||
v-model="sortOrder"
|
||||
buttons
|
||||
stacked
|
||||
variant="primary"
|
||||
:options="sortingOptions"
|
||||
/>
|
||||
|
|
@ -41,8 +40,11 @@
|
|||
</form>
|
||||
|
||||
<template v-slot:modal-footer="{ cancel }">
|
||||
<b-button @click="cancel">
|
||||
Cancel
|
||||
<b-button
|
||||
variant="light"
|
||||
@click="cancel"
|
||||
>
|
||||
{{ $t('global.cancel') }}
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
|
|
@ -51,7 +53,7 @@
|
|||
@click="save"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
<span v-else>Save</span>
|
||||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button>
|
||||
</template>
|
||||
</b-modal>
|
||||
|
|
@ -59,6 +61,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
listIndex: Number,
|
||||
|
|
@ -70,16 +74,18 @@ export default {
|
|||
sortOrder: null,
|
||||
saving: false,
|
||||
sortingOptions: [
|
||||
{ text: 'Custom', value: 'sortByCustom' },
|
||||
{ text: 'Name', value: 'sortByName' },
|
||||
{ text: 'Rating', value: 'sortByRating' },
|
||||
{ text: this.$t('board.list.sortByCustom'), value: 'sortByCustom' },
|
||||
{ text: this.$t('board.list.sortByName'), value: 'sortByName' },
|
||||
{ text: this.$t('board.list.sortByRating'), value: 'sortByRating' },
|
||||
{ text: this.$t('board.list.sortByProgress'), value: 'sortByProgress' },
|
||||
// { text: 'Release date', value: 'sortByReleaseDate' },
|
||||
{ text: 'Progress', value: 'sortByProgress' },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['nightMode']),
|
||||
|
||||
modalId() {
|
||||
return `sort-list-${this.listIndex}`;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,18 +5,31 @@
|
|||
<small>{{ subtitle }}</small>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<b-button
|
||||
:variant="nightMode ? 'dark' : 'light'"
|
||||
size="sm"
|
||||
class="ml-auto"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<icon name="x" />
|
||||
</b-button>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
subtitle: String,
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['nightMode']),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<!-- TODO: translate -->
|
||||
<template lang="html">
|
||||
<b-modal
|
||||
centered
|
||||
|
|
@ -14,15 +15,8 @@
|
|||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
title="Uh oh!"
|
||||
>
|
||||
<b-button
|
||||
variant="light"
|
||||
size="sm"
|
||||
@click="close"
|
||||
>
|
||||
<icon name="x" />
|
||||
</b-button>
|
||||
</modal-header>
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
Your session has expired.
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
|
||||
<b-modal
|
||||
id="board-settings"
|
||||
title="Board settings"
|
||||
size="lg"
|
||||
:header-bg-variant="nightMode ? 'dark' : null"
|
||||
:header-text-variant="nightMode ? 'white' : null"
|
||||
|
|
@ -20,27 +19,20 @@
|
|||
:body-text-variant="nightMode ? 'white' : null"
|
||||
:footer-bg-variant="nightMode ? 'dark' : null"
|
||||
:footer-text-variant="nightMode ? 'white' : null"
|
||||
footer-class="d-flex justify-content-between"
|
||||
@show="init"
|
||||
@hide="hide"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
title="Board settings"
|
||||
header-class="border-0"
|
||||
>
|
||||
<b-button
|
||||
variant="light"
|
||||
size="sm"
|
||||
@click="close"
|
||||
>
|
||||
<icon name="x" />
|
||||
</b-button>
|
||||
</modal-header>
|
||||
:title="$t('board.settings.title')"
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<form ref="boardSettingsForm" @submit.stop.prevent="submit">
|
||||
<b-form-group
|
||||
label="Board name"
|
||||
:label="$t('board.settings.nameLabel')"
|
||||
label-for="name"
|
||||
>
|
||||
<b-form-input
|
||||
|
|
@ -51,7 +43,7 @@
|
|||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
label="Board description"
|
||||
:label="$t('board.settings.descriptionLabel')"
|
||||
label-for="description"
|
||||
>
|
||||
<b-form-textarea
|
||||
|
|
@ -96,14 +88,14 @@
|
|||
v-if="wallpaper"
|
||||
@click="removeWallpaper"
|
||||
>
|
||||
Remove wallpaper
|
||||
{{ $t('board.settings.removeWallpaper') }}
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item
|
||||
variant="primary"
|
||||
v-b-modal:wallpapers
|
||||
>
|
||||
Upload wallpaper
|
||||
{{ $t('board.settings.uploadWallpaper') }}
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item
|
||||
|
|
@ -122,10 +114,12 @@
|
|||
</b-form-group>
|
||||
|
||||
<div v-else>
|
||||
No wallpapers uploaded yet.
|
||||
<b-button v-b-modal:wallpapers>Manage files</b-button>
|
||||
</div>
|
||||
{{ $t('board.settings.noWallpapers') }}
|
||||
|
||||
<b-button v-b-modal:wallpapers>
|
||||
{{ $t('board.settings.managefiles') }}
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<b-img
|
||||
v-if="wallpaper && wallpaperUrl"
|
||||
|
|
@ -135,7 +129,9 @@
|
|||
fluid
|
||||
/>
|
||||
|
||||
<b-button v-b-toggle.platforms>Change board platforms</b-button>
|
||||
<b-button v-b-toggle.platforms>
|
||||
{{ $t('board.settings.changePlatform') }}
|
||||
</b-button>
|
||||
|
||||
<b-collapse id="platforms" class="mt-2">
|
||||
<platform-picker v-model="board.platforms" />
|
||||
|
|
@ -147,7 +143,7 @@
|
|||
variant="danger"
|
||||
@click="confirmDelete"
|
||||
>
|
||||
Delete board
|
||||
{{ $t('board.settings.deleteBoard') }}
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
|
|
@ -156,7 +152,7 @@
|
|||
@click="saveSettings"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
<span v-else>Save</span>
|
||||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button>
|
||||
</template>
|
||||
</b-modal>
|
||||
|
|
|
|||
Loading…
Reference in a new issue