From 9e319006f350e357e75654b2c5e28d803c08a617 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 27 Sep 2018 15:19:11 +0900 Subject: [PATCH] wip --- .../views/components/ui.header.account.vue | 7 +-- .../views/components/ui.header.nav.vue | 14 +---- .../components/ui.header.notifications.vue | 18 +----- .../views/components/ui.header.search.vue | 19 ++---- .../desktop/views/components/ui.header.vue | 63 +------------------ src/client/theme/dark.json | 6 ++ src/client/theme/light.json | 6 ++ 7 files changed, 27 insertions(+), 106 deletions(-) diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue index c728fa42be..77221f81d2 100644 --- a/src/client/app/desktop/views/components/ui.header.account.vue +++ b/src/client/app/desktop/views/components/ui.header.account.vue @@ -134,7 +134,7 @@ root(isDark) display block margin 0 padding 0 - color #9eaba8 + color var(--desktopHeaderFg) border none background transparent cursor pointer @@ -144,14 +144,11 @@ root(isDark) &:hover &[data-active='true'] - color isDark ? #fff : darken(#9eaba8, 20%) + color var(--desktopHeaderHoverFg) > .avatar filter saturate(150%) - &:active - color isDark ? #fff : darken(#9eaba8, 30%) - > .username display block float left diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue index f41d4b8ecf..4f679db938 100644 --- a/src/client/app/desktop/views/components/ui.header.nav.vue +++ b/src/client/app/desktop/views/components/ui.header.nav.vue @@ -95,9 +95,7 @@ export default Vue.extend({ diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue index 2a38655f3a..c59a49556d 100644 --- a/src/client/app/desktop/views/components/ui.header.notifications.vue +++ b/src/client/app/desktop/views/components/ui.header.notifications.vue @@ -61,16 +61,13 @@ export default Vue.extend({ diff --git a/src/client/app/desktop/views/components/ui.header.search.vue b/src/client/app/desktop/views/components/ui.header.search.vue index d5794dc882..d22efbf84f 100644 --- a/src/client/app/desktop/views/components/ui.header.search.vue +++ b/src/client/app/desktop/views/components/ui.header.search.vue @@ -28,8 +28,7 @@ export default Vue.extend({ diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue index 264da8bef8..5089232b06 100644 --- a/src/client/app/desktop/views/components/ui.header.vue +++ b/src/client/app/desktop/views/components/ui.header.vue @@ -5,7 +5,6 @@
-

%i18n:@welcome-back%{{ $store.state.i | userName }}%i18n:@adjective%

@@ -64,55 +63,6 @@ export default Vue.extend({ mounted() { this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight); - - if (this.$store.getters.isSignedIn) { - const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000; - const isHisasiburi = ago >= 3600; - this.$store.state.i.lastUsedAt = new Date(); - - if (isHisasiburi) { - (this.$refs.welcomeback as any).style.display = 'block'; - (this.$refs.main as any).style.overflow = 'hidden'; - - anime({ - targets: this.$refs.welcomeback, - top: '0', - opacity: 1, - delay: 1000, - duration: 500, - easing: 'easeOutQuad' - }); - - anime({ - targets: this.$refs.mainContainer, - opacity: 0, - delay: 1000, - duration: 500, - easing: 'easeOutQuad' - }); - - setTimeout(() => { - anime({ - targets: this.$refs.welcomeback, - top: '-48px', - opacity: 0, - duration: 500, - complete: () => { - (this.$refs.welcomeback as any).style.display = 'none'; - (this.$refs.main as any).style.overflow = 'initial'; - }, - easing: 'easeInQuad' - }); - - anime({ - targets: this.$refs.mainContainer, - opacity: 1, - duration: 500, - easing: 'easeInQuad' - }); - }, 2500); - } - } }, methods: { @@ -161,17 +111,6 @@ root(isDark) font-size 0.9rem user-select none - > p - display none - position absolute - top 48px - width 100% - line-height 48px - margin 0 - text-align center - color isDark ? #fff : #888 - opacity 0 - > .container display flex width 100% @@ -190,7 +129,7 @@ root(isDark) display block width 48px height 48px - background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg') + background-image var(--desktopHeaderIcon) background-size 24px background-position center background-repeat no-repeat diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json index d563409564..403a5ded1d 100644 --- a/src/client/theme/dark.json +++ b/src/client/theme/dark.json @@ -49,6 +49,12 @@ "cwButtonHoverBg": "#707b97", "reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)", "desktopHeaderBg": "#313543", + "desktopHeaderFg": "#b8c5ca", + "desktopHeaderHoverFg": "#fff", + "desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')", + "desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)", + "desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)", + "desktopHeaderSearchFg": "#fff", "desktopPostFormBg": "@face", "desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)", "desktopPostFormTextareaFg": "#fff", diff --git a/src/client/theme/light.json b/src/client/theme/light.json index bdcf282e3d..f9f9a9a52d 100644 --- a/src/client/theme/light.json +++ b/src/client/theme/light.json @@ -49,6 +49,12 @@ "cwButtonHoverBg": "#bbc4ce", "reactionPickerButtonHoverBg": "#eee", "desktopHeaderBg": "#f7f7f7", + "desktopHeaderFg": "#9eaba8", + "desktopHeaderHoverFg": "#7b8c88", + "desktopHeaderIcon": "url('/assets/desktop/header-icon.light.svg')", + "desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)", + "desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)", + "desktopHeaderSearchFg": "#000", "desktopPostFormBg": "#fff6f6", "desktopPostFormTextareaBg": "#fff", "desktopPostFormTextareaFg": "#333",