diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index f08085ec0..03732998b 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -1,5 +1,5 @@
<template>
-<div class="ui-card" :class="{ shadow: $store.state.settings.useShadow }">
+<div class="ui-card" :class="{ shadow: $store.state.device.useShadow }">
<header>
<slot name="title"></slot>
</header>
diff --git a/src/client/app/common/views/deck/deck.column.vue b/src/client/app/common/views/deck/deck.column.vue
index 17baa0ea3..d4497f1a7 100644
--- a/src/client/app/common/views/deck/deck.column.vue
+++ b/src/client/app/common/views/deck/deck.column.vue
@@ -1,6 +1,5 @@
<template>
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }"
- :data-mobile="$root.isMobile"
@dragover.prevent.stop="onDragover"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
@@ -327,13 +326,6 @@ export default Vue.extend({
box-shadow var(--shadow)
overflow hidden
- &[data-mobile]
- border-radius 0
- box-shadow none
-
- > header
- box-shadow none
-
&.draghover
box-shadow 0 0 0 2px var(--primaryAlpha08)
diff --git a/src/client/app/common/views/deck/deck.vue b/src/client/app/common/views/deck/deck.vue
index 5a2b84ed7..8ffb3223f 100644
--- a/src/client/app/common/views/deck/deck.vue
+++ b/src/client/app/common/views/deck/deck.vue
@@ -1,6 +1,6 @@
<template>
<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">
<div v-if="ids.length > 1" class="folder">
<template v-for="id, i in ids">
@@ -332,15 +332,8 @@ export default Vue.extend({
overflow-y hidden
-webkit-overflow-scrolling touch
- &[data-mobile]
- padding 0
-
- > div
- margin-right 0
-
- &.folder
- > *:not(:last-child)
- margin-bottom 0
+ @media (max-width 500px)
+ padding 8px 0 8px 8px
> div
margin-right 8px
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 1c0bc9929..8e88e35c3 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -387,13 +387,13 @@ export default Vue.extend({
},
useShadow: {
- get() { return this.$store.state.settings.useShadow; },
- set(value) { this.$store.dispatch('settings/set', { key: 'useShadow', value }); }
+ get() { return this.$store.state.device.useShadow; },
+ set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
},
roundedCorners: {
- get() { return this.$store.state.settings.roundedCorners; },
- set(value) { this.$store.dispatch('settings/set', { key: 'roundedCorners', value }); }
+ get() { return this.$store.state.device.roundedCorners; },
+ set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
},
lineWidth: {
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 1845187ed..14a732155 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -61,7 +61,7 @@ export default Vue.extend({
computed: {
style(): any {
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'
};
}
},
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index fa1147f2b..1b0055c7d 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -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 shadowRight = '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('--shadowRight', shadowRight);
document.documentElement.style.setProperty('--shadowLeft', shadowLeft);
}
os.store.watch(s => {
- return s.settings.useShadow;
+ return s.device.useShadow;
}, v => {
document.documentElement.style.setProperty('--shadow', v ? shadow : '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
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 => {
- return s.settings.roundedCorners;
+ return s.device.roundedCorners;
}, v => {
document.documentElement.style.setProperty('--round', v ? round : '0');
});
diff --git a/src/client/app/mobile/views/components/ui-container.vue b/src/client/app/mobile/views/components/ui-container.vue
index 3ccff58b7..29f3ce045 100644
--- a/src/client/app/mobile/views/components/ui-container.vue
+++ b/src/client/app/mobile/views/components/ui-container.vue
@@ -1,5 +1,5 @@
<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">
<div class="title"><slot name="header"></slot></div>
<slot name="func"></slot>
@@ -36,9 +36,6 @@ export default Vue.extend({
},
},
inject: {
- inDeck: {
- default: false
- },
inNakedDeckColumn: {
default: false
}
@@ -60,13 +57,12 @@ export default Vue.extend({
.ukygtjoj
overflow hidden
- &.inDeck
- box-shadow none !important
-
&:not(.inNakedDeckColumn)
background var(--face)
border-radius 8px
- box-shadow 0 4px 16px rgba(#000, 0.1)
+
+ &.shadow
+ box-shadow 0 4px 16px rgba(#000, 0.1)
& + .ukygtjoj
margin-top 16px
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 17f9f6588..bdf515dd0 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -15,6 +15,8 @@
<section>
<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>
<section>
<header>{{ $t('@.line-width') }}</header>
@@ -214,6 +216,16 @@ export default Vue.extend({
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: {
get() { return this.$store.state.device.useOsDefaultEmojis; },
set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index eee4a4d7c..a02011734 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -17,8 +17,6 @@ const defaultSettings = {
showPostFormOnTopOfTl: false,
suggestRecentHashtags: true,
showClockOnHeader: true,
- useShadow: true,
- roundedCorners: false,
circleIcons: true,
contrastedAcct: true,
showFullAcct: false,
@@ -48,6 +46,8 @@ const defaultDeviceSettings = {
deckMode: false,
deckColumnAlign: 'center',
deckColumnWidth: 'normal',
+ useShadow: true,
+ roundedCorners: false,
reduceMotion: false,
autoPopout: false,
darkmode: false,