From 3e5330a92bc19f0b0e6ff6dd1a4c4670b508dbf3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 22 Sep 2018 20:39:12 +0900
Subject: [PATCH] :art:

---
 locales/ja-JP.yml                             |  2 ++
 .../app/desktop/views/components/calendar.vue |  3 ++-
 .../desktop/views/components/note-detail.vue  |  3 ++-
 .../app/desktop/views/components/settings.vue | 12 +++++++++++
 .../app/desktop/views/components/timeline.vue |  4 +++-
 .../desktop/views/components/ui.header.vue    | 11 ++++++++--
 .../views/components/widget-container.vue     |  3 ++-
 .../pages/user/user.followers-you-know.vue    |  3 ++-
 .../desktop/views/pages/user/user.friends.vue |  3 ++-
 .../desktop/views/pages/user/user.header.vue  |  3 ++-
 .../desktop/views/pages/user/user.photos.vue  |  3 ++-
 .../desktop/views/pages/user/user.profile.vue |  3 ++-
 .../views/pages/user/user.timeline.vue        |  3 ++-
 .../app/desktop/views/pages/user/user.vue     | 10 +++++-----
 .../app/desktop/views/pages/welcome.vue       |  2 +-
 src/client/app/init.ts                        | 20 +++++++++++++++++++
 src/client/app/store.ts                       |  2 ++
 17 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 11dd76d0e6..6ae38d45fd 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -779,6 +779,8 @@ desktop/views/components/settings.vue:
   choose-wallpaper: "壁紙を選択"
   delete-wallpaper: "壁紙を削除"
   dark-mode: "ダークモード"
+  use-shadow: "UIに影を使用"
+  rounded-corners: "UIの角を丸める"
   circle-icons: "円形のアイコンを使用"
   contrasted-acct: "ユーザー名にコントラストを付ける"
   gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index 0280f07a61..e71983f821 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -133,7 +133,8 @@ export default Vue.extend({
 root(isDark)
 	color isDark ? #c5ced6 : #777
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 	overflow hidden
 
 	&[data-melt]
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 670be422fe..80faae0d42 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -231,7 +231,8 @@ root(isDark)
 	overflow hidden
 	text-align left
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 
 	> .read-more
 		display block
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 312a7ed56e..cf10ea0f56 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -60,6 +60,8 @@
 				<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
 				<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
 				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
+				<mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/>
+				<mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/>
 				<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
 				<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/>
 				<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
@@ -316,6 +318,16 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
 		},
 
+		useShadow: {
+			get() { return this.$store.state.settings.useShadow; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'useShadow', value }); }
+		},
+
+		roundedCorners: {
+			get() { return this.$store.state.settings.roundedCorners; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'roundedCorners', value }); }
+		},
+
 		fetchOnScroll: {
 			get() { return this.$store.state.settings.fetchOnScroll; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 75324c6b1d..c008c175de 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -179,7 +179,9 @@ export default Vue.extend({
 
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
+	overflow hidden
 
 	> header
 		padding 0 8px
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index c8b9bdb2a2..bec0ee37ad 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="header">
+<div class="header" :style="style">
 	<p class="warn" v-if="env != 'production'">%i18n:common.do-not-use-in-production%</p>
 	<mk-special-message/>
 	<div class="main" ref="main">
@@ -54,6 +54,14 @@ 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'
+			};
+		}
+	},
+
 	mounted() {
 		this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
 
@@ -124,7 +132,6 @@ root(isDark)
 	top 0
 	z-index 1000
 	width 100%
-	box-shadow 0 0px 8px rgba(#000, 0.2)
 
 	> .warn
 		display block
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index f9f07a919c..fbf7691cd3 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -36,7 +36,8 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 	overflow hidden
 
 	&.naked
diff --git a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
index 1c848000b2..0965d801c9 100644
--- a/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
+++ b/src/client/app/desktop/views/pages/user/user.followers-you-know.vue
@@ -38,7 +38,8 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 
 	> .title
 		z-index 1
diff --git a/src/client/app/desktop/views/pages/user/user.friends.vue b/src/client/app/desktop/views/pages/user/user.friends.vue
index 499a276bfe..de37dc95c9 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -42,7 +42,8 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 	overflow hidden
 
 	> .title
diff --git a/src/client/app/desktop/views/pages/user/user.header.vue b/src/client/app/desktop/views/pages/user/user.header.vue
index ac7057d3b4..f727910e77 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -104,7 +104,8 @@ export default Vue.extend({
 
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 	overflow hidden
 
 	&[data-is-dark-background]
diff --git a/src/client/app/desktop/views/pages/user/user.photos.vue b/src/client/app/desktop/views/pages/user/user.photos.vue
index fd4e5813b2..591edfd829 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -41,7 +41,8 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 	overflow hidden
 
 	> .title
diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue
index 7674df3884..1ea242270a 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -87,7 +87,8 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 
 	> *:first-child
 		border-top none !important
diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue
index 54221380a7..be6adaac93 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -116,12 +116,13 @@ export default Vue.extend({
 
 root(isDark)
 	background isDark ? #282C37 : #fff
+	border-radius var(--round)
+	overflow hidden
 
 	> header
 		padding 0 8px
 		z-index 10
 		background isDark ? #313543 : #fff
-		border-radius 6px 6px 0 0
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
 		> span
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index 89e7dbd47b..b1ebe2392e 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -88,17 +88,16 @@ root(isDark)
 		margin-bottom 16px
 		padding 14px 16px
 		font-size 14px
-		border-radius 6px
+		box-shadow var(--shadow)
+		border-radius var(--round)
 
 		&.is-suspended
 			color isDark ? #ffb4b4 : #570808
 			background isDark ? #611d1d : #ffdbdb
-			border solid 1px isDark ? #d64a4a : #e09696
 
 		&.is-remote
 			color isDark ? #ffbd3e : #573c08
 			background isDark ? #42321c : #fff0db
-			border solid 1px isDark ? #90733c : #dcbb7b
 
 		> a
 			font-weight bold
@@ -118,7 +117,7 @@ root(isDark)
 			margin-right 16px
 
 			> .timeline
-				box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+				box-shadow var(--shadow)
 
 		> .side
 			width 275px
@@ -137,7 +136,8 @@ root(isDark)
 				font-size 12px
 				color #aaa
 				background isDark ? #21242f : #fff
-				box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+				box-shadow var(--shadow)
+				border-radius var(--round)
 
 				a
 					color #999
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 913fa6b21b..baa27dd8df 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -355,7 +355,7 @@ root(isDark)
 		.block
 			color isDark ? #fff : #444
 			background isDark ? #282C37 : #fff
-			box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+			box-shadow var(--shadow)
 			//border-radius 8px
 			overflow auto
 
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 3a03f8492e..4e1d1b70c7 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -125,6 +125,26 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 			});
 			//#endregion
 
+			//#region shadow
+			const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
+			if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow);
+			os.store.watch(s => {
+				return s.settings.useShadow;
+			}, v => {
+				document.documentElement.style.setProperty('--shadow', v ? shadow : 'none');
+			});
+			//#endregion
+
+			//#region rounded corners
+			const round = '6px';
+			if (os.store.state.settings.roundedCorners) document.documentElement.style.setProperty('--round', round);
+			os.store.watch(s => {
+				return s.settings.roundedCorners;
+			}, v => {
+				document.documentElement.style.setProperty('--round', v ? round : '0');
+			});
+			//#endregion
+
 			Vue.mixin({
 				data() {
 					return {
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 171620ae30..00c08409a6 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -16,6 +16,8 @@ const defaultSettings = {
 	showPostFormOnTopOfTl: false,
 	suggestRecentHashtags: true,
 	showClockOnHeader: true,
+	useShadow: true,
+	roundedCorners: false,
 	circleIcons: true,
 	contrastedAcct: true,
 	showFullAcct: false,