#1191

4 files changed, 38 insertions, 3 deletions

diff --git a/src/web/app/common/mios.ts b/src/web/app/common/mios.ts
index bbe28960fd..cbb4400a73 100644
--- a/src/web/app/common/mios.ts
+++ b/src/web/app/common/mios.ts
@@ -289,7 +289,8 @@ export default class MiOS extends EventEmitter {
 				me.client_settings = Object.assign({
 					fetchOnScroll: true,
 					showMaps: true,
-					showPostFormOnTopOfTl: false
+					showPostFormOnTopOfTl: false,
+					gradientWindowHeader: false
 				}, me.client_settings);
 
 				// ローカルストレージにキャッシュ
diff --git a/src/web/app/desktop/views/components/settings.vue b/src/web/app/desktop/views/components/settings.vue
index 3e2d6850b7..d09b325323 100644
--- a/src/web/app/desktop/views/components/settings.vue
+++ b/src/web/app/desktop/views/components/settings.vue
@@ -34,6 +34,7 @@
 			<mk-switch v-model="os.i.client_settings.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
 				<span>位置情報が添付された投稿のマップを自動的に展開します。</span>
 			</mk-switch>
+			<mk-switch v-model="os.i.client_settings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -258,6 +259,12 @@ export default Vue.extend({
 				value: v
 			});
 		},
+		onChangeGradientWindowHeader(v) {
+			(this as any).api('i/update_client_setting', {
+				name: 'gradientWindowHeader',
+				value: v
+			});
+		},
 		onChangeDisableViaMobile(v) {
 			(this as any).api('i/update_client_setting', {
 				name: 'disableViaMobile',
diff --git a/src/web/app/desktop/views/components/widget-container.vue b/src/web/app/desktop/views/components/widget-container.vue
index 7b4e1f55f0..c08e58e218 100644
--- a/src/web/app/desktop/views/components/widget-container.vue
+++ b/src/web/app/desktop/views/components/widget-container.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-widget-container" :class="{ naked }">
-	<header v-if="showHeader">
+	<header :class="{ withGradient }" v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
 	</header>
@@ -20,6 +20,15 @@ export default Vue.extend({
 			type: Boolean,
 			default: false
 		}
+	},
+	computed: {
+		withGradient(): boolean {
+			return (this as any).os.isSignedIn
+				? (this as any).os.i.client_settings.gradientWindowHeader != null
+					? (this as any).os.i.client_settings.gradientWindowHeader
+					: false
+				: false;
+		}
 	}
 });
 </script>
@@ -69,4 +78,8 @@ export default Vue.extend({
 			&:active
 				color #999
 
+		&.withGradient
+			> .title
+				background linear-gradient(to bottom, #fff, #ececec)
+				box-shadow 0 1px rgba(#000, 0.11)
 </style>
diff --git a/src/web/app/desktop/views/components/window.vue b/src/web/app/desktop/views/components/window.vue
index a92cfd0b6b..f525d6962c 100644
--- a/src/web/app/desktop/views/components/window.vue
+++ b/src/web/app/desktop/views/components/window.vue
@@ -3,7 +3,10 @@
 	<div class="bg" ref="bg" v-show="isModal" @click="onBgClick"></div>
 	<div class="main" ref="main" tabindex="-1" :data-is-modal="isModal" @mousedown="onBodyMousedown" @keydown="onKeydown" :style="{ width, height }">
 		<div class="body">
-			<header ref="header" @contextmenu.prevent="() => {}" @mousedown.prevent="onHeaderMousedown">
+			<header ref="header"
+				:class="{ withGradient }"
+				@contextmenu.prevent="() => {}" @mousedown.prevent="onHeaderMousedown"
+			>
 				<h1><slot name="header"></slot></h1>
 				<div>
 					<button class="popout" v-if="popoutUrl" @mousedown.stop="() => {}" @click="popout" title="ポップアウト">%fa:R window-restore%</button>
@@ -75,6 +78,13 @@ export default Vue.extend({
 		},
 		canResize(): boolean {
 			return !this.isFlexible;
+		},
+		withGradient(): boolean {
+			return (this as any).os.isSignedIn
+				? (this as any).os.i.client_settings.gradientWindowHeader != null
+					? (this as any).os.i.client_settings.gradientWindowHeader
+					: false
+				: false;
 		}
 	},
 
@@ -537,6 +547,10 @@ export default Vue.extend({
 				border-radius 6px 6px 0 0
 				box-shadow 0 1px 0 rgba(#000, 0.1)
 
+				&.withGradient
+					background linear-gradient(to bottom, #fff, #ececec)
+					box-shadow 0 1px 0 rgba(#000, 0.15)
+
 				&, *
 					user-select none