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