Add range component, 音量設定で使用する (#6146)

* add range component, use range component at volume setting

* refactor

* refactor 2

* Update range.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
Oni-Men 2020-03-20 14:30:37 +09:00 committed by GitHub
parent 5bbd4ae703
commit b0151afa9a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 152 additions and 4 deletions

View file

@ -0,0 +1,138 @@
<template>
<div class="timctyfi" :class="{ focused, disabled }">
<div class="icon"><slot name="icon"></slot></div>
<span class="title"><slot name="title"></slot></span>
<input
type="range"
ref="input"
v-model="v"
:disabled="disabled"
:min="min"
:max="max"
:step="step"
:autofocus="autofocus"
@focus="focused = true"
@blur="focused = false"
@input="$emit('input', $event.target.value)"
/>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
props: {
value: {
type: Number,
required: false,
default: 0
},
disabled: {
type: Boolean,
required: false,
default: false
},
min: {
type: String,
required: false,
default: "0"
},
max: {
type: String,
required: false,
default: "100"
},
step: {
type: String,
required: false,
default: "1"
},
autofocus: {
type: Boolean,
required: false
}
},
data() {
return {
v: this.value,
focused: false
};
},
watch: {
value(v) {
this.v = parseFloat(v);
}
},
mounted() {
if (this.autofocus) {
this.$nextTick(() => {
this.$refs.input.focus();
});
}
}
});
</script>
<style lang="scss" scoped>
.timctyfi {
position: relative;
margin: 8px;
> .icon {
display: inline-block;
width: 24px;
text-align: center;
}
> .title {
pointer-events: none;
font-size: 16px;
color: var(--inputLabel);
overflow: hidden;
}
> input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: var(--xxubwiul);
height: 7px;
margin: 0 8px;
outline: 0;
border: 0;
border-radius: 7px;
&.disabled {
opacity: 0.6;
cursor: not-allowed;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
width: 20px;
height: 20px;
display: block;
border-radius: 50%;
border: none;
background: var(--accent);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
box-sizing: content-box;
}
&::-moz-range-thumb {
-moz-appearance: none;
appearance: none;
cursor: pointer;
width: 20px;
height: 20px;
display: block;
border-radius: 50%;
border: none;
background: var(--accent);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
}
}
</style>

View file

@ -8,8 +8,10 @@
<section class="_card"> <section class="_card">
<div class="_title"><fa :icon="faMusic"/> {{ $t('sounds') }}</div> <div class="_title"><fa :icon="faMusic"/> {{ $t('sounds') }}</div>
<div class="_content"> <div class="_content">
{{ $t('volume') }} <mk-range v-model="sfxVolume" min="0" max="1" step="0.1">
<input type="range" v-model="sfxVolume" min="0" max="1" step="0.1"/> <fa slot="icon" :icon="volumeIcon"/>
<span slot="title">{{ $t('volume') }}</span>
</mk-range>
</div> </div>
<div class="_content"> <div class="_content">
<mk-select v-model="sfxNote"> <mk-select v-model="sfxNote">
@ -85,12 +87,13 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { faImage, faCog, faMusic, faPlay } from '@fortawesome/free-solid-svg-icons'; import { faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute } from '@fortawesome/free-solid-svg-icons';
import MkInput from '../../components/ui/input.vue'; import MkInput from '../../components/ui/input.vue';
import MkButton from '../../components/ui/button.vue'; import MkButton from '../../components/ui/button.vue';
import MkSwitch from '../../components/ui/switch.vue'; import MkSwitch from '../../components/ui/switch.vue';
import MkSelect from '../../components/ui/select.vue'; import MkSelect from '../../components/ui/select.vue';
import MkRadio from '../../components/ui/radio.vue'; import MkRadio from '../../components/ui/radio.vue';
import MkRange from '../../components/ui/range.vue';
import XTheme from './theme.vue'; import XTheme from './theme.vue';
import i18n from '../../i18n'; import i18n from '../../i18n';
import { langs } from '../../config'; import { langs } from '../../config';
@ -128,6 +131,7 @@ export default Vue.extend({
MkSwitch, MkSwitch,
MkSelect, MkSelect,
MkRadio, MkRadio,
MkRange
}, },
data() { data() {
@ -136,7 +140,7 @@ export default Vue.extend({
lang: localStorage.getItem('lang'), lang: localStorage.getItem('lang'),
fontSize: localStorage.getItem('fontSize'), fontSize: localStorage.getItem('fontSize'),
sounds, sounds,
faImage, faCog, faMusic, faPlay faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute
} }
}, },
@ -210,6 +214,12 @@ export default Vue.extend({
get() { return this.$store.state.device.sfxAntenna; }, get() { return this.$store.state.device.sfxAntenna; },
set(value) { this.$store.commit('device/set', { key: 'sfxAntenna', value }); } set(value) { this.$store.commit('device/set', { key: 'sfxAntenna', value }); }
}, },
volumeIcon: {
get() {
return this.sfxVolume === 0 ? faVolumeMute : faVolumeUp;
}
}
}, },
watch: { watch: {