mirror of
https://github.com/romancm/gamebrary
synced 2024-12-18 15:23:14 +00:00
simplify modals
This commit is contained in:
Gamebrary
parent
3f87019aa5
commit
ab463adbe1
7 changed files with 61 additions and 86 deletions
|
|
@ -14,21 +14,15 @@
|
|||
: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="resetBoard"
|
||||
@hidden="resetBoard"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
title="Create board"
|
||||
>
|
||||
<b-button
|
||||
variant="light"
|
||||
size="sm"
|
||||
@click="close"
|
||||
>
|
||||
<icon name="x" />
|
||||
</b-button>
|
||||
</modal-header>
|
||||
:title="$t('boards.create')"
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<form ref="createBoardForm" @submit.stop.prevent="submit">
|
||||
|
|
@ -85,7 +79,7 @@
|
|||
</form>
|
||||
|
||||
<template v-slot:modal-footer="{ cancel }">
|
||||
<b-button @click="cancel">
|
||||
<b-button @click="cancel" variant="light">
|
||||
Cancel
|
||||
</b-button>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@
|
|||
size="lg"
|
||||
footer-class="p-2 justify-content-center"
|
||||
header-class="align-items-center pb-0 border-0"
|
||||
: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"
|
||||
@show="load"
|
||||
@hidden="reset"
|
||||
>
|
||||
|
|
@ -15,38 +21,27 @@
|
|||
<modal-header
|
||||
:title="game.name"
|
||||
:subtitle="gameModalData.list.name"
|
||||
header-class="border-0"
|
||||
>
|
||||
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
|
||||
<b-button-group class="mr-2">
|
||||
<b-button
|
||||
size="sm"
|
||||
variant="light"
|
||||
:disabled="prevDisabled"
|
||||
@click="previousGame"
|
||||
>
|
||||
<icon name="triangle-left" />
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
size="sm"
|
||||
variant="light"
|
||||
:disabled="nextDisabled"
|
||||
@click="nextGame"
|
||||
>
|
||||
<icon name="triangle-right" />
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
@close="close"
|
||||
/>
|
||||
<b-button-group>
|
||||
<b-button
|
||||
size="sm"
|
||||
:variant="nightMode ? 'dark' : 'light'"
|
||||
:disabled="prevDisabled"
|
||||
@click="previousGame"
|
||||
>
|
||||
<icon name="triangle-left" />
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
variant="light"
|
||||
size="sm"
|
||||
@click="close"
|
||||
:variant="nightMode ? 'dark' : 'light'"
|
||||
:disabled="nextDisabled"
|
||||
@click="nextGame"
|
||||
>
|
||||
<icon name="x" />
|
||||
<icon name="triangle-right" />
|
||||
</b-button>
|
||||
</b-button-toolbar>
|
||||
</modal-header>
|
||||
</b-button-group>
|
||||
</template>
|
||||
|
||||
<b-container v-if="game.name" class="m-0 p-0">
|
||||
|
|
@ -151,7 +146,7 @@
|
|||
|
||||
<script>
|
||||
import moment from 'moment';
|
||||
import { mapState } from 'vuex';
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
import GameDetailPlaceholder from '@/components/Game/GameDetailPlaceholder';
|
||||
import GameDetails from '@/components/Game/GameDetails';
|
||||
import GameNotesTab from '@/components/Game/GameNotesTab';
|
||||
|
|
@ -190,6 +185,7 @@ export default {
|
|||
computed: {
|
||||
// TODO: rename gameModalData
|
||||
...mapState(['gameModalData', 'games', 'platform', 'progresses', 'tags']),
|
||||
...mapGetters(['nightMode']),
|
||||
|
||||
releaseDate() {
|
||||
const releaseDate = this.game
|
||||
|
|
|
|||
|
|
@ -17,20 +17,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="show"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
title="Game notes"
|
||||
>
|
||||
<b-button
|
||||
variant="light"
|
||||
size="sm"
|
||||
@click="close"
|
||||
>
|
||||
<icon name="x" />
|
||||
</b-button>
|
||||
</modal-header>
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<b-form-textarea
|
||||
|
|
@ -46,24 +40,35 @@
|
|||
</a>
|
||||
</b-form-text>
|
||||
|
||||
<template v-slot:modal-footer>
|
||||
<template v-slot:modal-footer="{ cancel }">
|
||||
<b-button
|
||||
variant="danger"
|
||||
:disabled="deleting"
|
||||
:disabled="deleting || !notes[game.id]"
|
||||
@click="deleteNote"
|
||||
>
|
||||
<b-spinner small v-if="deleting" />
|
||||
<span v-else>{{ $t('global.delete') }}</span>
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
variant="primary"
|
||||
:disabled="saving"
|
||||
@click="saveNote"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button>
|
||||
<div>
|
||||
<b-button
|
||||
variant="light"
|
||||
class="mx-2"
|
||||
:disabled="saving"
|
||||
@click="cancel"
|
||||
>
|
||||
{{ $t('global.cancel') }}
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
variant="primary"
|
||||
:disabled="saving"
|
||||
@click="saveNote"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button>
|
||||
</div>
|
||||
</template>
|
||||
</b-modal>
|
||||
</b-button>
|
||||
|
|
|
|||
|
|
@ -15,20 +15,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="show"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
title="Set game progress"
|
||||
>
|
||||
<b-button
|
||||
variant="light"
|
||||
size="sm"
|
||||
@click="close"
|
||||
>
|
||||
<icon name="x" />
|
||||
</b-button>
|
||||
</modal-header>
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<b-input-group :prepend="`${localProgress}%`" class="mb-4" size="lg">
|
||||
|
|
|
|||
|
|
@ -25,15 +25,8 @@
|
|||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
:title="game.name"
|
||||
>
|
||||
<b-button
|
||||
variant="light"
|
||||
size="sm"
|
||||
@click="close"
|
||||
>
|
||||
<icon name="x" />
|
||||
</b-button>
|
||||
</modal-header>
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<b-carousel
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default {
|
|||
computed: {
|
||||
...mapState(['settings', 'games', 'tags', 'notes', 'progresses', 'board']),
|
||||
// TODO: remove getter
|
||||
...mapGetters(['gameTags']),
|
||||
...mapGetters(['gameTags', 'nightMode']),
|
||||
|
||||
showCompletedBadge() {
|
||||
return this.gameProgress && Number(this.gameProgress) === 100;
|
||||
|
|
|
|||
|
|
@ -17,15 +17,8 @@
|
|||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
:title="$t('board.addGame.title')"
|
||||
>
|
||||
<b-button
|
||||
variant="light"
|
||||
size="sm"
|
||||
@click="close"
|
||||
>
|
||||
<icon name="x" />
|
||||
</b-button>
|
||||
</modal-header>
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<b-form @submit.prevent="search" class="mb-2">
|
||||
|
|
|
|||
Loading…
Reference in a new issue