SWREI/switched
0
0
Fork 0
Code

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

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

@ -59,8 +59,10 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.message
$me-balloon-color = #23A7B6
@import '~const.styl'
root(isDark)
$me-balloon-color = $theme-color
padding 10px 12px 10px 12px
background-color transparent
@ -126,7 +128,7 @@ export default Vue.extend({
bottom -4px
left -12px
margin 0
color rgba(#000, 0.5)
color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
font-size 11px
> .content
@ -187,7 +189,7 @@ export default Vue.extend({
display block
margin 2px 0 0 0
font-size 10px
color rgba(#000, 0.4)
color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)
> [data-fa]
margin-left 4px
@ -200,8 +202,9 @@ export default Vue.extend({
padding-left 66px
> .balloon
$color = isDark ? #2d3338 : #eee
float left
background #eee
background $color
&[data-no-text]
background transparent
@ -209,10 +212,15 @@ export default Vue.extend({
&:not([data-no-text]):before
left -14px
border-top solid 8px transparent
border-right solid 8px #eee
border-right solid 8px $color
border-bottom solid 8px transparent
border-left solid 8px transparent
> .content
> .text
if isDark
color #fff
> footer
text-align left
@ -241,7 +249,7 @@ export default Vue.extend({
> .content
> p.is-deleted
color rgba(255, 255, 255, 0.5)
color rgba(#fff, 0.5)
> .text >>>
&, *
@ -254,4 +262,10 @@ export default Vue.extend({
> .baloon
opacity 0.5
.message[data-darkmode]
root(true)
.message:not([data-darkmode])
root(false)
</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>
@import '~const.styl'
.mk-messaging-room
root(isDark)
display flex
flex 1
flex-direction column
height 100%
background isDark ? #191b22 : #fff
> .stream
width 100%
@ -273,7 +274,7 @@ export default Vue.extend({
padding 16px 8px 8px 8px
text-align center
font-size 0.8em
color rgba(#000, 0.4)
color rgba(isDark ? #fff : #000, 0.4)
[data-fa]
margin-right 4px
@ -284,7 +285,7 @@ export default Vue.extend({
padding 16px
text-align center
font-size 0.8em
color rgba(#000, 0.4)
color rgba(isDark ? #fff : #000, 0.4)
[data-fa]
margin-right 4px
@ -328,7 +329,7 @@ export default Vue.extend({
left 0
right 0
margin 0 auto
background rgba(#000, 0.1)
background rgba(isDark ? #fff : #000, 0.1)
> span
display inline-block
@ -337,7 +338,7 @@ export default Vue.extend({
//font-weight bold
line-height 32px
color rgba(#000, 0.3)
background #fff
background isDark ? #191b22 : #fff
> footer
position -webkit-sticky
@ -348,7 +349,7 @@ export default Vue.extend({
max-width 600px
margin 0 auto
padding 0
background rgba(255, 255, 255, 0.95)
background rgba(isDark ? #282c37 : #fff, 0.95)
background-clip content-box
> .new-message
@ -389,4 +390,10 @@ export default Vue.extend({
transition opacity 0.5s
opacity 0
.mk-messaging-room[data-darkmode]
root(true)
.mk-messaging-room:not([data-darkmode])
root(false)
</style>

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

@ -16,16 +16,29 @@ export default Vue.extend({
data() {
return {
fetching: true,
user: null
user: null,
unwatchDarkmode: null
};
},
watch: {
$route: 'fetch'
},
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();
},
beforeDestroy() {
document.documentElement.style.removeProperty('background');
this.unwatchDarkmode();
},
methods: {
fetch() {
this.fetching = true;