natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2018-09-27 21:43:11 +09:00
parent 7a0a8b5d2b
commit b032f78769
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
6 changed files with 30 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/client/app/common/views/components/messaging-room.message.vue
View File

@ -59,9 +59,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.message
root(isDark)
$me-balloon-color = var(--primary) $me-balloon-color = var(--primary)
padding 10px 12px 10px 12px padding 10px 12px 10px 12px
@ -179,7 +177,7 @@ root(isDark)
display block display block
margin 2px 0 0 0 margin 2px 0 0 0
font-size 10px font-size 10px
color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4) color var(--messagingRoomMessageInfo)
> [data-fa] > [data-fa]
margin-left 4px margin-left 4px
@ -192,7 +190,7 @@ root(isDark)
padding-left 66px padding-left 66px
> .balloon > .balloon
$color = isDark ? #2d3338 : #eee $color = var(--messagingRoomMessageBg)
float left float left
background $color background $color
@ -208,8 +206,7 @@ root(isDark)
> .content > .content
> .text > .text
if isDark color var(--messagingRoomMessageFg)
color #fff
> footer > footer
text-align left text-align left
@ -250,18 +247,9 @@ root(isDark)
> .read > .read
user-select none user-select none
margin 0 4px 0 0
color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
font-size 11px
&[data-is-deleted] &[data-is-deleted]
> .balloon > .balloon
opacity 0.5 opacity 0.5
.message[data-darkmode]
root(true)
.message:not([data-darkmode])
root(false)
</style> </style>

36
src/client/app/common/views/components/messaging-room.vue
View File

@ -262,14 +262,12 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-messaging-room
root(isDark)
display flex display flex
flex 1 flex 1
flex-direction column flex-direction column
height 100% height 100%
background isDark ? #191b22 : #fff background var(--messagingRoomBg)
> .body > .body
width 100% width 100%
@ -277,24 +275,15 @@ root(isDark)
margin 0 auto margin 0 auto
flex 1 flex 1
> .init > .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
> .empty > .empty
width 100% width 100%
margin 0 margin 0
padding 16px 8px 8px 8px padding 16px 8px 8px 8px
text-align center text-align center
font-size 0.8em font-size 0.8em
color rgba(isDark ? #fff : #000, 0.4) color var(--messagingRoomInfo)
opacity 0.5
[data-fa] [data-fa]
margin-right 4px margin-right 4px
@ -305,7 +294,8 @@ root(isDark)
padding 16px padding 16px
text-align center text-align center
font-size 0.8em font-size 0.8em
color rgba(isDark ? #fff : #000, 0.4) color var(--messagingRoomInfo)
opacity 0.5
[data-fa] [data-fa]
margin-right 4px margin-right 4px
@ -349,7 +339,7 @@ root(isDark)
left 0 left 0
right 0 right 0
margin 0 auto margin 0 auto
background rgba(isDark ? #fff : #000, 0.1) background var(--messagingRoomDateDividerLine)
> span > span
display inline-block display inline-block
@ -357,8 +347,8 @@ root(isDark)
padding 0 16px padding 0 16px
//font-weight bold //font-weight bold
line-height 32px line-height 32px
color rgba(isDark ? #fff : #000, 0.3) color var(--messagingRoomDateDividerText)
background isDark ? #191b22 : #fff background var(--messagingRoomBg)
> footer > footer
position -webkit-sticky position -webkit-sticky
@ -410,10 +400,4 @@ root(isDark)
transition opacity 0.5s transition opacity 0.5s
opacity 0 opacity 0
.mk-messaging-room[data-darkmode]
root(true)
.mk-messaging-room:not([data-darkmode])
root(false)
</style> </style>

60
src/client/app/mobile/views/components/ui.header.vue
View File

@ -4,7 +4,6 @@
<mk-special-message/> <mk-special-message/>
<div class="main" ref="main"> <div class="main" ref="main">
<div class="backdrop"></div> <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"> <div class="content" ref="mainContainer">
<button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button> <button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button>
<template v-if="hasUnreadNotification || hasUnreadMessagingMessage || hasGameInvitation">%fa:circle%</template> <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_invited', this.onReversiInvited);
this.connection.on('reversi_no_invites', this.onReversiNoInvites); 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() { beforeDestroy() {
@ -159,18 +111,6 @@ root(isDark)
//background-color rgba(#1b2023, 0.75) //background-color rgba(#1b2023, 0.75)
background-color isDark ? #313543 : #595f6f 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 > .content
z-index 1001 z-index 1001

8
src/client/theme/dark.json
View File

@ -77,6 +77,14 @@
"googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)", "googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)",
"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)", "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", "desktopHeaderBg": "#313543",
"desktopHeaderFg": "#b8c5ca", "desktopHeaderFg": "#b8c5ca",
"desktopHeaderHoverFg": "#fff", "desktopHeaderHoverFg": "#fff",

1
src/client/theme/halloween.json
View File

@ -11,7 +11,6 @@
"text": "#b1bee3" "text": "#b1bee3"
} }
}, },
"bg": "#1b1a35",
"renoteGradient": "#5d2d1a", "renoteGradient": "#5d2d1a",
"renoteText": "#ff6c00", "renoteText": "#ff6c00",
"desktopHeaderBg": "#36314e" "desktopHeaderBg": "#36314e"

8
src/client/theme/light.json
View File

@ -77,6 +77,14 @@
"googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)", "googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)",
"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)", "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", "desktopHeaderBg": "#f7f7f7",
"desktopHeaderFg": "#9eaba8", "desktopHeaderFg": "#9eaba8",
"desktopHeaderHoverFg": "#7b8c88", "desktopHeaderHoverFg": "#7b8c88",