This commit is contained in:
syuilo 2019-02-26 14:02:23 +09:00
parent e7032363d7
commit 8db8d3f39e
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
9 changed files with 31 additions and 38 deletions

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="ui-card" :class="{ shadow: $store.state.settings.useShadow }"> <div class="ui-card" :class="{ shadow: $store.state.device.useShadow }">
<header> <header>
<slot name="title"></slot> <slot name="title"></slot>
</header> </header>

View file

@ -1,6 +1,5 @@
<template> <template>
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }" <div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }"
:data-mobile="$root.isMobile"
@dragover.prevent.stop="onDragover" @dragover.prevent.stop="onDragover"
@dragleave="onDragleave" @dragleave="onDragleave"
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
@ -327,13 +326,6 @@ export default Vue.extend({
box-shadow var(--shadow) box-shadow var(--shadow)
overflow hidden overflow hidden
&[data-mobile]
border-radius 0
box-shadow none
> header
box-shadow none
&.draghover &.draghover
box-shadow 0 0 0 2px var(--primaryAlpha08) box-shadow 0 0 0 2px var(--primaryAlpha08)

View file

@ -1,6 +1,6 @@
<template> <template>
<mk-ui :class="$style.root"> <mk-ui :class="$style.root">
<div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-mobile="$root.isMobile" ref="body" :style="style" :class="`${$store.state.device.deckColumnAlign} ${$store.state.device.deckColumnWidth}`" v-hotkey.global="keymap"> <div class="qlvquzbjribqcaozciifydkngcwtyzje" ref="body" :style="style" :class="`${$store.state.device.deckColumnAlign} ${$store.state.device.deckColumnWidth}`" v-hotkey.global="keymap">
<template v-for="ids in layout"> <template v-for="ids in layout">
<div v-if="ids.length > 1" class="folder"> <div v-if="ids.length > 1" class="folder">
<template v-for="id, i in ids"> <template v-for="id, i in ids">
@ -332,15 +332,8 @@ export default Vue.extend({
overflow-y hidden overflow-y hidden
-webkit-overflow-scrolling touch -webkit-overflow-scrolling touch
&[data-mobile] @media (max-width 500px)
padding 0 padding 8px 0 8px 8px
> div
margin-right 0
&.folder
> *:not(:last-child)
margin-bottom 0
> div > div
margin-right 8px margin-right 8px

View file

@ -387,13 +387,13 @@ export default Vue.extend({
}, },
useShadow: { useShadow: {
get() { return this.$store.state.settings.useShadow; }, get() { return this.$store.state.device.useShadow; },
set(value) { this.$store.dispatch('settings/set', { key: 'useShadow', value }); } set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
}, },
roundedCorners: { roundedCorners: {
get() { return this.$store.state.settings.roundedCorners; }, get() { return this.$store.state.device.roundedCorners; },
set(value) { this.$store.dispatch('settings/set', { key: 'roundedCorners', value }); } set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
}, },
lineWidth: { lineWidth: {

View file

@ -61,7 +61,7 @@ export default Vue.extend({
computed: { computed: {
style(): any { style(): any {
return { return {
'box-shadow': this.$store.state.settings.useShadow ? '0 0px 8px rgba(0, 0, 0, 0.2)' : 'none' 'box-shadow': this.$store.state.device.useShadow ? '0 0px 8px rgba(0, 0, 0, 0.2)' : 'none'
}; };
} }
}, },

View file

@ -405,13 +405,13 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)'; const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
const shadowRight = '4px 0 4px rgba(0, 0, 0, 0.1)'; const shadowRight = '4px 0 4px rgba(0, 0, 0, 0.1)';
const shadowLeft = '-4px 0 4px rgba(0, 0, 0, 0.1)'; const shadowLeft = '-4px 0 4px rgba(0, 0, 0, 0.1)';
if (os.store.state.settings.useShadow) { if (os.store.state.device.useShadow) {
document.documentElement.style.setProperty('--shadow', shadow); document.documentElement.style.setProperty('--shadow', shadow);
document.documentElement.style.setProperty('--shadowRight', shadowRight); document.documentElement.style.setProperty('--shadowRight', shadowRight);
document.documentElement.style.setProperty('--shadowLeft', shadowLeft); document.documentElement.style.setProperty('--shadowLeft', shadowLeft);
} }
os.store.watch(s => { os.store.watch(s => {
return s.settings.useShadow; return s.device.useShadow;
}, v => { }, v => {
document.documentElement.style.setProperty('--shadow', v ? shadow : 'none'); document.documentElement.style.setProperty('--shadow', v ? shadow : 'none');
document.documentElement.style.setProperty('--shadowRight', v ? shadowRight : 'none'); document.documentElement.style.setProperty('--shadowRight', v ? shadowRight : 'none');
@ -421,9 +421,9 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
//#region rounded corners //#region rounded corners
const round = '6px'; const round = '6px';
if (os.store.state.settings.roundedCorners) document.documentElement.style.setProperty('--round', round); if (os.store.state.device.roundedCorners) document.documentElement.style.setProperty('--round', round);
os.store.watch(s => { os.store.watch(s => {
return s.settings.roundedCorners; return s.device.roundedCorners;
}, v => { }, v => {
document.documentElement.style.setProperty('--round', v ? round : '0'); document.documentElement.style.setProperty('--round', v ? round : '0');
}); });

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="ukygtjoj" :class="{ naked, inDeck, inNakedDeckColumn, hideHeader: !showHeader }"> <div class="ukygtjoj" :class="{ naked, inNakedDeckColumn, hideHeader: !showHeader, shadow: $store.state.device.useShadow }">
<header v-if="showHeader"> <header v-if="showHeader">
<div class="title"><slot name="header"></slot></div> <div class="title"><slot name="header"></slot></div>
<slot name="func"></slot> <slot name="func"></slot>
@ -36,9 +36,6 @@ export default Vue.extend({
}, },
}, },
inject: { inject: {
inDeck: {
default: false
},
inNakedDeckColumn: { inNakedDeckColumn: {
default: false default: false
} }
@ -60,13 +57,12 @@ export default Vue.extend({
.ukygtjoj .ukygtjoj
overflow hidden overflow hidden
&.inDeck
box-shadow none !important
&:not(.inNakedDeckColumn) &:not(.inNakedDeckColumn)
background var(--face) background var(--face)
border-radius 8px border-radius 8px
box-shadow 0 4px 16px rgba(#000, 0.1)
&.shadow
box-shadow 0 4px 16px rgba(#000, 0.1)
& + .ukygtjoj & + .ukygtjoj
margin-top 16px margin-top 16px

View file

@ -15,6 +15,8 @@
<section> <section>
<ui-switch v-model="darkmode">{{ $t('dark-mode') }}</ui-switch> <ui-switch v-model="darkmode">{{ $t('dark-mode') }}</ui-switch>
<ui-switch v-model="useShadow">{{ $t('use-shadow') }}</ui-switch>
<ui-switch v-model="roundedCorners">{{ $t('rounded-corners') }}</ui-switch>
<ui-switch v-model="circleIcons">{{ $t('circle-icons') }}</ui-switch> <ui-switch v-model="circleIcons">{{ $t('circle-icons') }}</ui-switch>
<section> <section>
<header>{{ $t('@.line-width') }}</header> <header>{{ $t('@.line-width') }}</header>
@ -214,6 +216,16 @@ export default Vue.extend({
set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); } set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
}, },
useShadow: {
get() { return this.$store.state.device.useShadow; },
set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
},
roundedCorners: {
get() { return this.$store.state.device.roundedCorners; },
set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
},
useOsDefaultEmojis: { useOsDefaultEmojis: {
get() { return this.$store.state.device.useOsDefaultEmojis; }, get() { return this.$store.state.device.useOsDefaultEmojis; },
set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); } set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }

View file

@ -17,8 +17,6 @@ const defaultSettings = {
showPostFormOnTopOfTl: false, showPostFormOnTopOfTl: false,
suggestRecentHashtags: true, suggestRecentHashtags: true,
showClockOnHeader: true, showClockOnHeader: true,
useShadow: true,
roundedCorners: false,
circleIcons: true, circleIcons: true,
contrastedAcct: true, contrastedAcct: true,
showFullAcct: false, showFullAcct: false,
@ -48,6 +46,8 @@ const defaultDeviceSettings = {
deckMode: false, deckMode: false,
deckColumnAlign: 'center', deckColumnAlign: 'center',
deckColumnWidth: 'normal', deckColumnWidth: 'normal',
useShadow: true,
roundedCorners: false,
reduceMotion: false, reduceMotion: false,
autoPopout: false, autoPopout: false,
darkmode: false, darkmode: false,