oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

18
src/client/pages/preferences/index.vue
View file

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