From 7b8a2aef0f9ed4d848d749769fd9dc6774b1e65a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 14:52:10 +0900
Subject: [PATCH] wip
---
locales/ja-JP.yml | 1 -
.../app/desktop/views/components/settings.vue | 8 +-------
.../views/components/widget-container.vue | 20 +++----------------
.../app/desktop/views/components/window.vue | 15 ++++----------
.../desktop/views/pages/deck/deck.column.vue | 2 +-
.../pages/user/user.followers-you-know.vue | 2 +-
.../desktop/views/pages/user/user.friends.vue | 2 +-
.../desktop/views/pages/user/user.photos.vue | 2 +-
src/client/app/store.ts | 1 -
src/client/theme/dark.json | 3 +++
src/client/theme/light.json | 3 +++
11 files changed, 18 insertions(+), 41 deletions(-)
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index db2a155221..f5d0a180d8 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -784,7 +784,6 @@ desktop/views/components/settings.vue:
rounded-corners: "UIの角を丸める"
circle-icons: "円形のアイコンを使用"
contrasted-acct: "ユーザー名にコントラストを付ける"
- gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
show-clock-on-header: "右上に時計を表示する"
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 4efaa75c4b..e95e7a735d 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -66,7 +66,6 @@
<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
- <ui-switch v-model="gradientWindowHeader">%i18n:@gradient-window-header%</ui-switch>
<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
</div>
<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
@@ -421,12 +420,7 @@ export default Vue.extend({
disableViaMobile: {
get() { return this.$store.state.settings.disableViaMobile; },
set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
- },
-
- gradientWindowHeader: {
- get() { return this.$store.state.settings.gradientWindowHeader; },
- set(value) { this.$store.dispatch('settings/set', { key: 'gradientWindowHeader', value }); }
- },
+ }
},
created() {
(this as any).os.getMeta().then(meta => {
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index 156823799f..cfcb2785c5 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -1,6 +1,6 @@
<template>
<div class="mk-widget-container" :class="{ naked }">
- <header :class="{ withGradient }" v-if="showHeader">
+ <header v-if="showHeader">
<div class="title"><slot name="header"></slot></div>
<slot name="func"></slot>
</header>
@@ -20,15 +20,6 @@ export default Vue.extend({
type: Boolean,
default: false
}
- },
- computed: {
- withGradient(): boolean {
- return this.$store.getters.isSignedIn
- ? this.$store.state.settings.gradientWindowHeader != null
- ? this.$store.state.settings.gradientWindowHeader
- : false
- : false;
- }
}
});
</script>
@@ -54,7 +45,7 @@ root(isDark)
line-height 42px
font-size 0.9em
font-weight bold
- color isDark ? #e3e5e8 : #888
+ color var(--faceHeaderText)
box-shadow 0 1px rgba(#000, 0.07)
> [data-fa]
@@ -78,12 +69,7 @@ root(isDark)
color var(--faceTextButtonHover)
&:active
- color isDark ? #b2c1d5 : #999
-
- &.withGradient
- > .title
- background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
- box-shadow 0 1px rgba(#000, 0.11)
+ color var(--faceTextButtonActive)
.mk-widget-container[data-darkmode]
root(true)
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 15aa158073..5547445537 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -4,7 +4,6 @@
<div class="main" ref="main" tabindex="-1" :data-is-modal="isModal" @mousedown="onBodyMousedown" @keydown="onKeydown" :style="{ width, height }">
<div class="body">
<header ref="header"
- :class="{ withGradient: $store.state.settings.gradientWindowHeader }"
@contextmenu.prevent="() => {}" @mousedown.prevent="onHeaderMousedown"
>
<h1><slot name="header"></slot></h1>
@@ -463,8 +462,6 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-
-
root(isDark)
display block
@@ -582,10 +579,6 @@ root(isDark)
border-radius 6px 6px 0 0
box-shadow 0 1px 0 rgba(#000, 0.1)
- &.withGradient
- background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
- box-shadow 0 1px 0 rgba(#000, 0.15)
-
&, *
user-select none
@@ -600,7 +593,7 @@ root(isDark)
font-size 1em
line-height $header-height
font-weight normal
- color isDark ? #e3e5e8 : #666
+ color var(--desktopWindowTitle)
> div:last-child
position absolute
@@ -615,16 +608,16 @@ root(isDark)
padding 0
cursor pointer
font-size 1em
- color isDark ? #9baec8 : rgba(#000, 0.4)
+ color var(--faceTextButton)
border none
outline none
background transparent
&:hover
- color isDark ? #b2c1d5 : rgba(#000, 0.6)
+ color var(--faceTextButtonHover)
&:active
- color isDark ? #b2c1d5 : darken(#000, 30%)
+ color var(--faceTextButtonActive)
> [data-fa]
padding 0
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index fb521db25b..2dba7d2522 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -317,7 +317,7 @@ root(isDark)
line-height $header-height
padding 0 16px
font-size 14px
- color isDark ? #e3e5e8 : #888
+ color var(--faceHeaderText)
background var(--faceHeader)
box-shadow 0 1px rgba(#000, 0.15)
cursor pointer
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 212e21a7a9..b90d0a831e 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
@@ -48,7 +48,7 @@ root(isDark)
line-height 42px
font-size 0.9em
font-weight bold
- color isDark ? #e3e5e8 : #888
+ color var(--faceHeaderText)
box-shadow 0 1px rgba(#000, 0.07)
> i
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 0a329b3d8e..9b466053f7 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -54,7 +54,7 @@ root(isDark)
font-size 0.9em
font-weight bold
background isDark ? #313543 : inherit
- color isDark ? #e3e5e8 : #888
+ color var(--faceHeaderText)
box-shadow 0 1px rgba(#000, 0.07)
> i
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 99e064446d..6e9d09e79f 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -53,7 +53,7 @@ root(isDark)
font-size 0.9em
font-weight bold
background: isDark ? #313543 : inherit
- color isDark ? #e3e5e8 : #888
+ color var(--faceHeaderText)
box-shadow 0 1px rgba(#000, 0.07)
> i
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 00c08409a6..fbcc53d7be 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -21,7 +21,6 @@ const defaultSettings = {
circleIcons: true,
contrastedAcct: true,
showFullAcct: false,
- gradientWindowHeader: false,
showReplyTarget: true,
showMyRenotes: true,
showRenotedMyNotes: true,
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 88bde9d684..d563409564 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -12,9 +12,11 @@
"scrollbarHandleHover": "#535660",
"face": "#282c37",
"faceHeader": "#313543",
+ "faceHeaderText": "#e3e5e8",
"faceDivider": "rgba(0, 0, 0, 0.3)",
"faceTextButton": "#9baec8",
"faceTextButtonHover": "#b2c1d5",
+ "faceTextButtonActive": "#b2c1d5",
"popupBg": "#2c303c",
"popupFg": "#d6dce2",
"subNoteBg": "rgba(0, 0, 0, 0.18)",
@@ -53,6 +55,7 @@
"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
"desktopTimelineSrc": "@faceTextButton",
"desktopTimelineSrcHover": "@faceTextButtonHover",
+ "desktopWindowTitle": "@faceHeaderText",
"mobileSignedInAsBg": "#273c34",
"mobileSignedInAsFg": "#49ab63",
"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 3374a62e36..bdcf282e3d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -12,9 +12,11 @@
"scrollbarHandleHover": "#00000066",
"face": "#fff",
"faceHeader": "#fff",
+ "faceHeaderText": "#888",
"faceDivider": "rgba(0, 0, 0, 0.082)",
"faceTextButton": "#ccc",
"faceTextButtonHover": "#aaa",
+ "faceTextButtonActive": "#999",
"popupBg": "#fff",
"popupFg": "#586069",
"subNoteBg": "rgba(0, 0, 0, 0.01)",
@@ -53,6 +55,7 @@
"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
"desktopTimelineSrc": "#6f7477",
"desktopTimelineSrcHover": "#525a5f",
+ "desktopWindowTitle": "#666",
"mobileSignedInAsBg": "#fcfff5",
"mobileSignedInAsFg": "#2c662d",
"mobileSignoutBg": "#fff6f5",