rudeshark.net/src/client/app/desktop/views/components/ui.vue

91 lines
1.8 KiB
Vue
Raw Normal View History

2018-02-10 06:56:33 +01:00
<template>
2018-09-22 12:59:37 +02:00
<div class="mk-ui" v-hotkey.global="keymap">
<div class="bg" v-if="$store.getters.isSignedIn && $store.state.i.wallpaperUrl" :style="style"></div>
2018-09-22 13:11:13 +02:00
<x-header class="header" v-show="!zenMode" ref="header"/>
2018-02-12 11:59:24 +01:00
<div class="content">
<slot></slot>
</div>
2018-05-27 06:49:09 +02:00
<mk-stream-indicator v-if="$store.getters.isSignedIn"/>
2018-02-10 06:56:33 +01:00
</div>
</template>
2018-02-12 11:59:24 +01:00
<script lang="ts">
import Vue from 'vue';
2018-02-20 14:53:34 +01:00
import XHeader from './ui.header.vue';
2018-02-12 11:59:24 +01:00
export default Vue.extend({
2018-02-20 14:53:34 +01:00
components: {
2018-02-20 17:39:51 +01:00
XHeader
2018-02-20 14:53:34 +01:00
},
2018-06-08 13:34:44 +02:00
data() {
return {
zenMode: false
};
},
2018-06-06 22:14:37 +02:00
computed: {
style(): any {
if (!this.$store.getters.isSignedIn || this.$store.state.i.wallpaperUrl == null) return {};
return {
backgroundColor: this.$store.state.i.wallpaperColor && this.$store.state.i.wallpaperColor.length == 3 ? `rgb(${ this.$store.state.i.wallpaperColor.join(',') })` : null,
backgroundImage: `url(${ this.$store.state.i.wallpaperUrl })`
};
},
keymap(): any {
return {
'p': this.post,
'n': this.post,
'z': this.toggleZenMode
};
2018-06-06 22:14:37 +02:00
}
},
2018-02-12 11:59:24 +01:00
2018-09-22 12:59:37 +02:00
watch: {
'$store.state.uiHeaderHeight'() {
this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
}
},
mounted() {
this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
},
methods: {
post() {
(this as any).apis.post();
},
2018-06-08 13:34:44 +02:00
toggleZenMode() {
this.zenMode = !this.zenMode;
2018-09-22 13:11:13 +02:00
this.$nextTick(() => {
this.$store.commit('setUiHeaderHeight', this.$refs.header.$el.offsetHeight);
});
2018-02-12 11:59:24 +01:00
}
}
});
</script>
2018-05-31 09:44:11 +02:00
<style lang="stylus" scoped>
.mk-ui
2018-09-22 12:59:37 +02:00
min-height 100vh
padding-top 48px
> .bg
position fixed
top 0
left 0
width 100%
height 100vh
background-size cover
background-position center
background-attachment fixed
opacity 0.3
2018-06-05 14:36:21 +02:00
2018-05-31 09:44:11 +02:00
> .header
@media (max-width 1000px)
display none
2018-06-05 14:36:21 +02:00
2018-05-31 09:44:11 +02:00
</style>