From b032f78769d7d70b2265cb5318276fa582c20bf7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 21:43:11 +0900
Subject: [PATCH] wip
---
.../components/messaging-room.message.vue | 20 ++-----
.../views/components/messaging-room.vue | 36 ++++-------
.../app/mobile/views/components/ui.header.vue | 60 -------------------
src/client/theme/dark.json | 8 +++
src/client/theme/halloween.json | 1 -
src/client/theme/light.json | 8 +++
6 files changed, 30 insertions(+), 103 deletions(-)
diff --git a/src/client/app/common/views/components/messaging-room.message.vue b/src/client/app/common/views/components/messaging-room.message.vue
index e0528d5432..77bf55c52c 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -59,9 +59,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-
-
-root(isDark)
+.message
$me-balloon-color = var(--primary)
padding 10px 12px 10px 12px
@@ -179,7 +177,7 @@ root(isDark)
display block
margin 2px 0 0 0
font-size 10px
- color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)
+ color var(--messagingRoomMessageInfo)
> [data-fa]
margin-left 4px
@@ -192,7 +190,7 @@ root(isDark)
padding-left 66px
> .balloon
- $color = isDark ? #2d3338 : #eee
+ $color = var(--messagingRoomMessageBg)
float left
background $color
@@ -208,8 +206,7 @@ root(isDark)
> .content
> .text
- if isDark
- color #fff
+ color var(--messagingRoomMessageFg)
> footer
text-align left
@@ -250,18 +247,9 @@ root(isDark)
> .read
user-select none
- margin 0 4px 0 0
- color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
- font-size 11px
&[data-is-deleted]
> .balloon
opacity 0.5
-.message[data-darkmode]
- root(true)
-
-.message:not([data-darkmode])
- root(false)
-
</style>
diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 52abfa4e1d..98661bc39d 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -262,14 +262,12 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-messaging-room
display flex
flex 1
flex-direction column
height 100%
- background isDark ? #191b22 : #fff
+ background var(--messagingRoomBg)
> .body
width 100%
@@ -277,24 +275,15 @@ root(isDark)
margin 0 auto
flex 1
- > .init
- width 100%
- margin 0
- padding 16px 8px 8px 8px
- text-align center
- font-size 0.8em
- color rgba(isDark ? #fff : #000, 0.4)
-
- [data-fa]
- margin-right 4px
-
+ > .init,
> .empty
width 100%
margin 0
padding 16px 8px 8px 8px
text-align center
font-size 0.8em
- color rgba(isDark ? #fff : #000, 0.4)
+ color var(--messagingRoomInfo)
+ opacity 0.5
[data-fa]
margin-right 4px
@@ -305,7 +294,8 @@ root(isDark)
padding 16px
text-align center
font-size 0.8em
- color rgba(isDark ? #fff : #000, 0.4)
+ color var(--messagingRoomInfo)
+ opacity 0.5
[data-fa]
margin-right 4px
@@ -349,7 +339,7 @@ root(isDark)
left 0
right 0
margin 0 auto
- background rgba(isDark ? #fff : #000, 0.1)
+ background var(--messagingRoomDateDividerLine)
> span
display inline-block
@@ -357,8 +347,8 @@ root(isDark)
padding 0 16px
//font-weight bold
line-height 32px
- color rgba(isDark ? #fff : #000, 0.3)
- background isDark ? #191b22 : #fff
+ color var(--messagingRoomDateDividerText)
+ background var(--messagingRoomBg)
> footer
position -webkit-sticky
@@ -410,10 +400,4 @@ root(isDark)
transition opacity 0.5s
opacity 0
-.mk-messaging-room[data-darkmode]
- root(true)
-
-.mk-messaging-room:not([data-darkmode])
- root(false)
-
</style>
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index b859c22887..d3e258f052 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -4,7 +4,6 @@
<mk-special-message/>
<div class="main" ref="main">
<div class="backdrop"></div>
- <p ref="welcomeback" v-if="$store.getters.isSignedIn">%i18n:@welcome-back%<b>{{ $store.state.i | userName }}</b>%i18n:@adjective%</p>
<div class="content" ref="mainContainer">
<button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button>
<template v-if="hasUnreadNotification || hasUnreadMessagingMessage || hasGameInvitation">%fa:circle%</template>
@@ -50,53 +49,6 @@ export default Vue.extend({
this.connection.on('reversi_invited', this.onReversiInvited);
this.connection.on('reversi_no_invites', this.onReversiNoInvites);
-
- 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);
- }
}
},
beforeDestroy() {
@@ -159,18 +111,6 @@ root(isDark)
//background-color rgba(#1b2023, 0.75)
background-color isDark ? #313543 : #595f6f
- > p
- display none
- position absolute
- z-index 1002
- top $height
- width 100%
- line-height $height
- margin 0
- text-align center
- color #fff
- opacity 0
-
> .content
z-index 1001
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 0422eb021b..7a9a06187f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -77,6 +77,14 @@
"googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)",
"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
+ "messagingRoomBg": "@bg",
+ "messagingRoomInfo": "#fff",
+ "messagingRoomDateDividerLine": "rgba(255, 255, 255, 0.1)",
+ "messagingRoomDateDividerText": "rgba(255, 255, 255, 0.3)",
+ "messagingRoomMessageInfo": "rgba(255, 255, 255, 0.4)",
+ "messagingRoomMessageBg": "$secondary",
+ "messagingRoomMessageFg": "#fff",
+
"desktopHeaderBg": "#313543",
"desktopHeaderFg": "#b8c5ca",
"desktopHeaderHoverFg": "#fff",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 81c773f574..327d04cad6 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -11,7 +11,6 @@
"text": "#b1bee3"
}
},
- "bg": "#1b1a35",
"renoteGradient": "#5d2d1a",
"renoteText": "#ff6c00",
"desktopHeaderBg": "#36314e"
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 83e4ee05c3..ca0dad0718 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -77,6 +77,14 @@
"googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)",
"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
+ "messagingRoomBg": "#fff",
+ "messagingRoomInfo": "#000",
+ "messagingRoomDateDividerLine": "rgba(0, 0, 0, 0.1)",
+ "messagingRoomDateDividerText": "rgba(0, 0, 0, 0.3)",
+ "messagingRoomMessageInfo": "rgba(0, 0, 0, 0.4)",
+ "messagingRoomMessageBg": "#eee",
+ "messagingRoomMessageFg": "#333",
+
"desktopHeaderBg": "#f7f7f7",
"desktopHeaderFg": "#9eaba8",
"desktopHeaderHoverFg": "#7b8c88",