yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 9

Darken

Browse source
This commit is contained in:
syuilo 2018-05-24 05:46:09 +09:00
parent 89461c598f
commit f565e60bcf
4 changed files with 58 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/client/app/common/views/components/messaging-room.form.vue
View file

@ -197,7 +197,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.mk-messaging-form root(isDark)
> textarea > textarea
cursor auto cursor auto
display block display block
@ -209,10 +209,10 @@ export default Vue.extend({
padding 8px padding 8px
resize none resize none
font-size 1em font-size 1em
color #000 color isDark ? #fff : #000
outline none outline none
border none border none
border-top solid 1px #eee border-top solid 1px isDark ? #4b5056 : #eee
border-radius 0 border-radius 0
box-shadow none box-shadow none
background transparent background transparent
@ -302,4 +302,10 @@ export default Vue.extend({
input[type=file] input[type=file]
display none display none
.mk-messaging-form[data-darkmode]
root(true)
.mk-messaging-form:not([data-darkmode])
root(false)
</style> </style>

28
src/client/app/common/views/components/messaging-room.message.vue
View file

@ -59,8 +59,10 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.message @import '~const.styl'
$me-balloon-color = #23A7B6
root(isDark)
$me-balloon-color = $theme-color
padding 10px 12px 10px 12px padding 10px 12px 10px 12px
background-color transparent background-color transparent
@ -126,7 +128,7 @@ export default Vue.extend({
bottom -4px bottom -4px
left -12px left -12px
margin 0 margin 0
color rgba(#000, 0.5) color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
font-size 11px font-size 11px
> .content > .content
@ -187,7 +189,7 @@ export default Vue.extend({
display block display block
margin 2px 0 0 0 margin 2px 0 0 0
font-size 10px font-size 10px
color rgba(#000, 0.4) color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)
> [data-fa] > [data-fa]
margin-left 4px margin-left 4px
@ -200,8 +202,9 @@ export default Vue.extend({
padding-left 66px padding-left 66px
> .balloon > .balloon
$color = isDark ? #2d3338 : #eee
float left float left
background #eee background $color
&[data-no-text] &[data-no-text]
background transparent background transparent
@ -209,10 +212,15 @@ export default Vue.extend({
&:not([data-no-text]):before &:not([data-no-text]):before
left -14px left -14px
border-top solid 8px transparent border-top solid 8px transparent
border-right solid 8px #eee border-right solid 8px $color
border-bottom solid 8px transparent border-bottom solid 8px transparent
border-left solid 8px transparent border-left solid 8px transparent
> .content
> .text
if isDark
color #fff
> footer > footer
text-align left text-align left
@ -241,7 +249,7 @@ export default Vue.extend({
> .content > .content
> p.is-deleted > p.is-deleted
color rgba(255, 255, 255, 0.5) color rgba(#fff, 0.5)
> .text >>> > .text >>>
&, * &, *
@ -254,4 +262,10 @@ export default Vue.extend({
> .baloon > .baloon
opacity 0.5 opacity 0.5
.message[data-darkmode]
root(true)
.message:not([data-darkmode])
root(false)
</style> </style>

19
src/client/app/common/views/components/messaging-room.vue
View file

@ -244,11 +244,12 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.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
> .stream > .stream
width 100% width 100%
@ -273,7 +274,7 @@ export default Vue.extend({
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(#000, 0.4) color rgba(isDark ? #fff : #000, 0.4)
[data-fa] [data-fa]
margin-right 4px margin-right 4px
@ -284,7 +285,7 @@ export default Vue.extend({
padding 16px padding 16px
text-align center text-align center
font-size 0.8em font-size 0.8em
color rgba(#000, 0.4) color rgba(isDark ? #fff : #000, 0.4)
[data-fa] [data-fa]
margin-right 4px margin-right 4px
@ -328,7 +329,7 @@ export default Vue.extend({
left 0 left 0
right 0 right 0
margin 0 auto margin 0 auto
background rgba(#000, 0.1) background rgba(isDark ? #fff : #000, 0.1)
> span > span
display inline-block display inline-block
@ -337,7 +338,7 @@ export default Vue.extend({
//font-weight bold //font-weight bold
line-height 32px line-height 32px
color rgba(#000, 0.3) color rgba(#000, 0.3)
background #fff background isDark ? #191b22 : #fff
> footer > footer
position -webkit-sticky position -webkit-sticky
@ -348,7 +349,7 @@ export default Vue.extend({
max-width 600px max-width 600px
margin 0 auto margin 0 auto
padding 0 padding 0
background rgba(255, 255, 255, 0.95) background rgba(isDark ? #282c37 : #fff, 0.95)
background-clip content-box background-clip content-box
> .new-message > .new-message
@ -389,4 +390,10 @@ export default Vue.extend({
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>

17
src/client/app/mobile/views/pages/messaging-room.vue
View file

@ -16,16 +16,29 @@ export default Vue.extend({
data() { data() {
return { return {
fetching: true, fetching: true,
user: null user: null,
unwatchDarkmode: null
}; };
}, },
watch: { watch: {
$route: 'fetch' $route: 'fetch'
}, },
created() { created() {
document.documentElement.style.background = '#fff'; const applyBg = v =>
document.documentElement.style.setProperty('background', v ? '#191b22' : '#fff', 'important');
this.$nextTick(() => applyBg(this.$store.state.device.darkmode));
this.unwatchDarkmode = this.$store.watch(s => {
return s.device.darkmode;
}, applyBg);
this.fetch(); this.fetch();
}, },
beforeDestroy() {
document.documentElement.style.removeProperty('background');
this.unwatchDarkmode();
},
methods: { methods: {
fetch() { fetch() {
this.fetching = true; this.fetching = true;