Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-12-19 15:53:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

more modal clean up

Browse source
This commit is contained in:
Gamebrary 2020-10-14 14:48:27 -07:00
parent d5183d432d
commit cef5446b50
8 changed files with 87 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/Board/AddList.vue
View file

@ -3,11 +3,11 @@
v-b-modal="modalId" v-b-modal="modalId"
:title="$t('board.addList.title')" :title="$t('board.addList.title')"
size="sm" size="sm"
variant="light" variant="primary"
v-b-tooltip.hover.left v-b-tooltip.hover.left
ref="addList" ref="addList"
> >
<icon name="plus" /> <icon name="plus" white />
<b-modal <b-modal
:id="modalId" :id="modalId"
@ -18,21 +18,14 @@
:body-text-variant="nightMode ? 'white' : null" :body-text-variant="nightMode ? 'white' : null"
:footer-bg-variant="nightMode ? 'dark' : null" :footer-bg-variant="nightMode ? 'dark' : null"
:footer-text-variant="nightMode ? 'white' : null" :footer-text-variant="nightMode ? 'white' : null"
footer-class="d-flex justify-content-between"
@show="reset" @show="reset"
> >
<template v-slot:modal-header="{ close }"> <template v-slot:modal-header="{ close }">
<modal-header <modal-header
:title="$t('board.addList.title')" :title="$t('board.addList.title')"
header-class="border-0" @close="close"
> />
<b-button
variant="light"
size="sm"
@click="close"
>
<icon name="x" />
</b-button>
</modal-header>
</template> </template>
<form ref="addListForm" @submit.stop.prevent="submit"> <form ref="addListForm" @submit.stop.prevent="submit">
@ -53,7 +46,7 @@
</form> </form>
<template v-slot:modal-footer="{ cancel }"> <template v-slot:modal-footer="{ cancel }">
<b-button @click="cancel"> <b-button @click="cancel" variant="light">
{{ $t('global.cancel') }} {{ $t('global.cancel') }}
</b-button> </b-button>

17
src/components/Lists/ListPreferences.vue
View file

@ -5,20 +5,14 @@
<b-modal <b-modal
:id="modalId" :id="modalId"
footer-class="d-flex justify-content-between"
@show="getSettings" @show="getSettings"
> >
<template v-slot:modal-header="{ close }"> <template v-slot:modal-header="{ close }">
<modal-header <modal-header
:title="$t('board.list.settings')" :title="$t('board.list.settings')"
> @close="close"
<b-button />
variant="light"
size="sm"
@click="close"
>
<icon name="x" />
</b-button>
</modal-header>
</template> </template>
<form ref="renameListForm" @submit.stop.prevent="save"> <form ref="renameListForm" @submit.stop.prevent="save">
@ -78,7 +72,10 @@
</form> </form>
<template v-slot:modal-footer="{ cancel }"> <template v-slot:modal-footer="{ cancel }">
<b-button @click="cancel"> <b-button
variant="light"
@click="cancel"
>
Cancel Cancel
</b-button> </b-button>

8
src/components/Lists/ListSettings.vue
View file

@ -1,5 +1,11 @@
<template lang="html"> <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> <template v-slot:button-content>
<icon name="triangle-down" small /> <icon name="triangle-down" small />
</template> </template>

17
src/components/Lists/RenameList.vue
View file

@ -11,20 +11,14 @@
:body-text-variant="nightMode ? 'white' : null" :body-text-variant="nightMode ? 'white' : null"
:footer-bg-variant="nightMode ? 'dark' : null" :footer-bg-variant="nightMode ? 'dark' : null"
:footer-text-variant="nightMode ? 'white' : null" :footer-text-variant="nightMode ? 'white' : null"
footer-class="d-flex justify-content-between"
@show="getListName" @show="getListName"
> >
<template v-slot:modal-header="{ close }"> <template v-slot:modal-header="{ close }">
<modal-header <modal-header
:title="$t('board.list.renameList')" :title="$t('board.list.renameList')"
> @close="close"
<b-button />
variant="light"
size="sm"
@click="close"
>
<icon name="x" />
</b-button>
</modal-header>
</template> </template>
<form ref="renameListForm" @submit.stop.prevent="submit"> <form ref="renameListForm" @submit.stop.prevent="submit">
@ -46,7 +40,10 @@
</form> </form>
<template v-slot:modal-footer="{ cancel }"> <template v-slot:modal-footer="{ cancel }">
<b-button @click="cancel"> <b-button
variant="light"
@click="cancel"
>
{{ $t('global.cancel') }} {{ $t('global.cancel') }}
</b-button> </b-button>

40
src/components/Lists/SortList.vue
View file

@ -5,27 +5,26 @@
<b-modal <b-modal
:id="modalId" :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" @show="getSortValue"
> >
<template v-slot:modal-header="{ close }"> <template v-slot:modal-header="{ close }">
<modal-header <modal-header
:title="$t('board.list.sortList')" :title="$t('board.list.sortList')"
> @close="close"
<b-button />
variant="light"
size="sm"
@click="close"
>
<icon name="x" />
</b-button>
</modal-header>
</template> </template>
<form ref="renameListForm" @submit.stop.prevent="save"> <form ref="renameListForm" @submit.stop.prevent="save">
<b-form-radio-group <b-form-radio-group
v-model="sortOrder" v-model="sortOrder"
buttons buttons
stacked
variant="primary" variant="primary"
:options="sortingOptions" :options="sortingOptions"
/> />
@ -41,8 +40,11 @@
</form> </form>
<template v-slot:modal-footer="{ cancel }"> <template v-slot:modal-footer="{ cancel }">
<b-button @click="cancel"> <b-button
Cancel variant="light"
@click="cancel"
>
{{ $t('global.cancel') }}
</b-button> </b-button>
<b-button <b-button
@ -51,7 +53,7 @@
@click="save" @click="save"
> >
<b-spinner small v-if="saving" /> <b-spinner small v-if="saving" />
<span v-else>Save</span> <span v-else>{{ $t('global.save') }}</span>
</b-button> </b-button>
</template> </template>
</b-modal> </b-modal>
@ -59,6 +61,8 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex';
export default { export default {
props: { props: {
listIndex: Number, listIndex: Number,
@ -70,16 +74,18 @@ export default {
sortOrder: null, sortOrder: null,
saving: false, saving: false,
sortingOptions: [ sortingOptions: [
{ text: 'Custom', value: 'sortByCustom' }, { text: this.$t('board.list.sortByCustom'), value: 'sortByCustom' },
{ text: 'Name', value: 'sortByName' }, { text: this.$t('board.list.sortByName'), value: 'sortByName' },
{ text: 'Rating', value: 'sortByRating' }, { text: this.$t('board.list.sortByRating'), value: 'sortByRating' },
{ text: this.$t('board.list.sortByProgress'), value: 'sortByProgress' },
// { text: 'Release date', value: 'sortByReleaseDate' }, // { text: 'Release date', value: 'sortByReleaseDate' },
{ text: 'Progress', value: 'sortByProgress' },
], ],
}; };
}, },
computed: { computed: {
...mapGetters(['nightMode']),
modalId() { modalId() {
return `sort-list-${this.listIndex}`; return `sort-list-${this.listIndex}`;
}, },

19
src/components/ModalHeader.vue
View file

@ -5,18 +5,31 @@
<small>{{ subtitle }}</small> <small>{{ subtitle }}</small>
</div> </div>
<div class="actions"> <slot />
<slot />
</div> <b-button
:variant="nightMode ? 'dark' : 'light'"
size="sm"
class="ml-auto"
@click="$emit('close')"
>
<icon name="x" />
</b-button>
</header> </header>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex';
export default { export default {
props: { props: {
title: String, title: String,
subtitle: String, subtitle: String,
}, },
computed: {
...mapGetters(['nightMode']),
},
}; };
</script> </script>

12
src/components/SessionExpired.vue
View file

@ -1,3 +1,4 @@
<!-- TODO: translate -->
<template lang="html"> <template lang="html">
<b-modal <b-modal
centered centered
@ -14,15 +15,8 @@
<template v-slot:modal-header="{ close }"> <template v-slot:modal-header="{ close }">
<modal-header <modal-header
title="Uh oh!" title="Uh oh!"
> @close="close"
<b-button />
variant="light"
size="sm"
@click="close"
>
<icon name="x" />
</b-button>
</modal-header>
</template> </template>
Your session has expired. Your session has expired.

40
src/components/Settings/BoardSettings.vue
View file

@ -12,7 +12,6 @@
<b-modal <b-modal
id="board-settings" id="board-settings"
title="Board settings"
size="lg" size="lg"
:header-bg-variant="nightMode ? 'dark' : null" :header-bg-variant="nightMode ? 'dark' : null"
:header-text-variant="nightMode ? 'white' : null" :header-text-variant="nightMode ? 'white' : null"
@ -20,27 +19,20 @@
:body-text-variant="nightMode ? 'white' : null" :body-text-variant="nightMode ? 'white' : null"
:footer-bg-variant="nightMode ? 'dark' : null" :footer-bg-variant="nightMode ? 'dark' : null"
:footer-text-variant="nightMode ? 'white' : null" :footer-text-variant="nightMode ? 'white' : null"
footer-class="d-flex justify-content-between"
@show="init" @show="init"
@hide="hide" @hide="hide"
> >
<template v-slot:modal-header="{ close }"> <template v-slot:modal-header="{ close }">
<modal-header <modal-header
title="Board settings" :title="$t('board.settings.title')"
header-class="border-0" @close="close"
> />
<b-button
variant="light"
size="sm"
@click="close"
>
<icon name="x" />
</b-button>
</modal-header>
</template> </template>
<form ref="boardSettingsForm" @submit.stop.prevent="submit"> <form ref="boardSettingsForm" @submit.stop.prevent="submit">
<b-form-group <b-form-group
label="Board name" :label="$t('board.settings.nameLabel')"
label-for="name" label-for="name"
> >
<b-form-input <b-form-input
@ -51,7 +43,7 @@
</b-form-group> </b-form-group>
<b-form-group <b-form-group
label="Board description" :label="$t('board.settings.descriptionLabel')"
label-for="description" label-for="description"
> >
<b-form-textarea <b-form-textarea
@ -96,14 +88,14 @@
v-if="wallpaper" v-if="wallpaper"
@click="removeWallpaper" @click="removeWallpaper"
> >
Remove wallpaper {{ $t('board.settings.removeWallpaper') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
variant="primary" variant="primary"
v-b-modal:wallpapers v-b-modal:wallpapers
> >
Upload wallpaper {{ $t('board.settings.uploadWallpaper') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
@ -122,10 +114,12 @@
</b-form-group> </b-form-group>
<div v-else> <div v-else>
No wallpapers uploaded yet. {{ $t('board.settings.noWallpapers') }}
<b-button v-b-modal:wallpapers>Manage files</b-button>
</div>
<b-button v-b-modal:wallpapers>
{{ $t('board.settings.managefiles') }}
</b-button>
</div>
<b-img <b-img
v-if="wallpaper && wallpaperUrl" v-if="wallpaper && wallpaperUrl"
@ -135,7 +129,9 @@
fluid 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"> <b-collapse id="platforms" class="mt-2">
<platform-picker v-model="board.platforms" /> <platform-picker v-model="board.platforms" />
@ -147,7 +143,7 @@
variant="danger" variant="danger"
@click="confirmDelete" @click="confirmDelete"
> >
Delete board {{ $t('board.settings.deleteBoard') }}
</b-button> </b-button>
<b-button <b-button
@ -156,7 +152,7 @@
@click="saveSettings" @click="saveSettings"
> >
<b-spinner small v-if="saving" /> <b-spinner small v-if="saving" />
<span v-else>Save</span> <span v-else>{{ $t('global.save') }}</span>
</b-button> </b-button>
</template> </template>
</b-modal> </b-modal>