mirror of
https://github.com/romancm/gamebrary
synced 2024-11-24 20:23:06 +00:00
replace toggle switch
This commit is contained in:
Gamebrary dev team
parent
a439a21eb1
commit
8fbb257918
5 changed files with 62 additions and 252 deletions
|
|
@ -48,28 +48,24 @@
|
|||
/>
|
||||
</b-form-group>
|
||||
|
||||
<section v-if="localList.view === 'grid'">
|
||||
<h4>Compact grid view</h4>
|
||||
|
||||
<toggle-switch
|
||||
id="gameInfo"
|
||||
@change="save"
|
||||
v-model="localList.hideGameInfo"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section
|
||||
:class="{disabled: !localList.hideGameInfo }"
|
||||
v-if="localList.view === 'grid' || localList.view === 'masonry'"
|
||||
<b-form-checkbox
|
||||
v-if="localList.view === 'grid'"
|
||||
switch
|
||||
v-model="localList.hideGameInfo"
|
||||
@change="save"
|
||||
>
|
||||
<h4>Hide game info on top of game covers</h4>
|
||||
Compact grid view
|
||||
</b-form-checkbox>
|
||||
|
||||
<toggle-switch
|
||||
id="hideGameInfoOnCover"
|
||||
@change="save"
|
||||
v-model="localList.hideGameInfoOnCover"
|
||||
/>
|
||||
</section>
|
||||
<b-form-checkbox
|
||||
v-if="localList.view === 'grid' || localList.view === 'masonry'"
|
||||
switch
|
||||
v-model="localList.hideGameInfoOnCover"
|
||||
:disabled="!localList.hideGameInfo"
|
||||
@change="save"
|
||||
>
|
||||
Hide game info on top of game covers
|
||||
</b-form-checkbox>
|
||||
|
||||
<section>
|
||||
<h4>Move list</h4>
|
||||
|
|
@ -94,25 +90,22 @@
|
|||
</b-button>
|
||||
</section>
|
||||
|
||||
<section :class="{ disabled: localList.view === 'masonry' }">
|
||||
<h4>Hide game ratings</h4>
|
||||
<b-form-checkbox
|
||||
switch
|
||||
v-model="localList.hideGameRatings"
|
||||
:disabled="localList.view === 'masonry'"
|
||||
@change="save"
|
||||
>
|
||||
Hide game ratings
|
||||
</b-form-checkbox>
|
||||
|
||||
<toggle-switch
|
||||
id="gameRatings"
|
||||
@change="save"
|
||||
v-model="localList.hideGameRatings"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Hide days until release</h4>
|
||||
|
||||
<toggle-switch
|
||||
id="releaseDates"
|
||||
@change="save"
|
||||
v-model="localList.hideReleaseDates"
|
||||
/>
|
||||
</section>
|
||||
<b-form-checkbox
|
||||
switch
|
||||
v-model="localList.hideReleaseDates"
|
||||
@change="save"
|
||||
>
|
||||
Hide days until release
|
||||
</b-form-checkbox>
|
||||
|
||||
<footer>
|
||||
<modal
|
||||
|
|
@ -148,13 +141,11 @@
|
|||
|
||||
<script>
|
||||
import Modal from '@/components/Modal';
|
||||
import ToggleSwitch from '@/components/ToggleSwitch';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Modal,
|
||||
ToggleSwitch,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -176,11 +167,11 @@ export default {
|
|||
{ text: 'text', value: 'text' },
|
||||
],
|
||||
sortingOptions: [
|
||||
{ text: 'sortByName', value: 'sortByName' },
|
||||
{ text: 'sortByRating', value: 'sortByRating' },
|
||||
{ text: 'sortByReleaseDate', value: 'sortByReleaseDate' },
|
||||
{ text: 'sortByProgress', value: 'sortByProgress' },
|
||||
{ text: 'sortByCustom', value: 'sortByCustom' },
|
||||
{ text: 'Custom', value: 'sortByCustom' },
|
||||
{ text: 'Name', value: 'sortByName' },
|
||||
{ text: 'Rating', value: 'sortByRating' },
|
||||
{ text: 'Release date', value: 'sortByReleaseDate' },
|
||||
{ text: 'Progress', value: 'sortByProgress' },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,11 +2,14 @@
|
|||
<section>
|
||||
<!-- <div class="setting">
|
||||
<i class="fas fa-users" />
|
||||
<h5>{{ $t('settings.public') }}</h5>
|
||||
|
||||
<toggle-switch
|
||||
id="public"
|
||||
v-model="value[platform.code].public"
|
||||
<b-form-checkbox
|
||||
switch
|
||||
v-model="value[platform.code].public"
|
||||
@change="save"
|
||||
>
|
||||
$t('settings.public')
|
||||
</b-form-checkbox>
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
|
|
@ -44,28 +47,23 @@
|
|||
</b-form-select>
|
||||
</div>
|
||||
|
||||
<div class="setting">
|
||||
<i class="fas fa-shapes" />
|
||||
<h5>Border Radius</h5>
|
||||
|
||||
<toggle-switch
|
||||
id="borderRadius"
|
||||
@change="$emit('save')"
|
||||
v-model="value[platform.code].borderRadius"
|
||||
/>
|
||||
</div>
|
||||
<b-form-checkbox
|
||||
switch
|
||||
v-model="value[platform.code].borderRadius"
|
||||
@change="$emit('save')"
|
||||
>
|
||||
Border radius
|
||||
</b-form-checkbox>
|
||||
|
||||
<h3>Gameboard</h3>
|
||||
<div class="setting">
|
||||
<i class="fas fa-heading" />
|
||||
<h5>Show amount of games next to list title</h5>
|
||||
|
||||
<toggle-switch
|
||||
id="showGameCount"
|
||||
@change="$emit('save')"
|
||||
v-model="value[platform.code].showGameCount"
|
||||
/>
|
||||
</div>
|
||||
<b-form-checkbox
|
||||
switch
|
||||
v-model="value[platform.code].showGameCount"
|
||||
@change="$emit('save')"
|
||||
>
|
||||
Show game count
|
||||
</b-form-checkbox>
|
||||
|
||||
<div class="setting">
|
||||
<i class="fas fa-exclamation-triangle" />
|
||||
|
|
@ -96,13 +94,11 @@ import themes from '@/themes';
|
|||
import positions from '@/positions';
|
||||
import Modal from '@/components/Modal';
|
||||
import WallpaperUpload from '@/components/WallpaperUpload';
|
||||
import ToggleSwitch from '@/components/ToggleSwitch';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
WallpaperUpload,
|
||||
Modal,
|
||||
ToggleSwitch,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
<template lang="html">
|
||||
<section>
|
||||
<h3>Platform page</h3>
|
||||
|
||||
<div
|
||||
v-if="hasLists"
|
||||
class="setting"
|
||||
>
|
||||
<i class="fas fa-user-check" />
|
||||
<h5>{{ $t('settings.ownedLists') }}</h5>
|
||||
|
||||
<toggle-switch
|
||||
id="ownedListsOnly"
|
||||
v-model="value.ownedListsOnly"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="setting">
|
||||
<i class="fas fa-sort-alpha-down" />
|
||||
<h5>{{ $t('settings.sortPlatforms') }}</h5>
|
||||
|
||||
<toggle-switch
|
||||
id="sortListsAlphabetically"
|
||||
v-model="value.sortListsAlphabetically"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ToggleSwitch from '@/components/ToggleSwitch';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ToggleSwitch,
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['gameLists']),
|
||||
|
||||
// TODO: use getter instead
|
||||
hasLists() {
|
||||
return Object.keys(this.gameLists).length > 0;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -49,14 +49,12 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exclusive-toggle">
|
||||
<b-form-checkbox
|
||||
switch
|
||||
v-model="exclusive"
|
||||
>
|
||||
Exclusive to {{ platform.name }}
|
||||
|
||||
<toggle-switch
|
||||
id="global"
|
||||
v-model="exclusive"
|
||||
/>
|
||||
</div>
|
||||
</b-form-checkbox>
|
||||
|
||||
<div class="tag-actions">
|
||||
<b-button
|
||||
|
|
@ -113,7 +111,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ToggleSwitch from '@/components/ToggleSwitch';
|
||||
import Swatches from 'vue-swatches';
|
||||
import Tag from '@/components/Tag';
|
||||
import Modal from '@/components/Modal';
|
||||
|
|
@ -124,7 +121,6 @@ export default {
|
|||
components: {
|
||||
Tag,
|
||||
Modal,
|
||||
ToggleSwitch,
|
||||
Swatches,
|
||||
},
|
||||
|
||||
|
|
@ -276,11 +272,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.exclusive-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,113 +0,0 @@
|
|||
<template lang="html">
|
||||
<span class="toggle-switch">
|
||||
<p v-if="label">{{ label }}</p>
|
||||
|
||||
<input
|
||||
:id="id"
|
||||
v-model="localValue"
|
||||
@change="$emit('change')"
|
||||
type="checkbox"
|
||||
>
|
||||
|
||||
<label :for="id" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
localValue: null,
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(value) {
|
||||
if (value) {
|
||||
this.localValue = JSON.parse(JSON.stringify(this.value));
|
||||
}
|
||||
},
|
||||
|
||||
localValue(value) {
|
||||
this.$emit('input', value);
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.value !== undefined) {
|
||||
this.localValue = JSON.parse(JSON.stringify(this.value));
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
@import "~styles/styles";
|
||||
|
||||
.toggle-switch {
|
||||
display: inline-flex;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type=checkbox]{
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&:checked + label {
|
||||
background: var(--success-background);
|
||||
}
|
||||
|
||||
&:checked + label:after {
|
||||
left: calc(100% - 3px);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
text-indent: -9999px;
|
||||
width: 34px;
|
||||
height: 20px;
|
||||
background: grey;
|
||||
display: block;
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #fff;
|
||||
border-radius: 90px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue