mizzkey/src/client/app/common/views/components/visibility-chooser.vue

234 lines
5.3 KiB
Vue
Raw Normal View History

2018-04-28 10:25:56 +02:00
<template>
2018-12-29 17:32:58 +01:00
<div class="gqyayizv">
2018-04-28 10:25:56 +02:00
<div class="backdrop" ref="backdrop" @click="close"></div>
2018-12-29 17:32:58 +01:00
<div class="popover" :class="{ isMobile: $root.isMobile }" ref="popover">
2018-04-28 10:25:56 +02:00
<div @click="choose('public')" :class="{ active: v == 'public' }">
<div><fa icon="globe"/></div>
2018-04-28 10:25:56 +02:00
<div>
<span>{{ $t('public') }}</span>
2018-04-28 10:25:56 +02:00
</div>
</div>
<div @click="choose('home')" :class="{ active: v == 'home' }">
<div><fa icon="home"/></div>
2018-04-28 10:25:56 +02:00
<div>
<span>{{ $t('home') }}</span>
<span>{{ $t('home-desc') }}</span>
2018-04-28 10:25:56 +02:00
</div>
</div>
<div @click="choose('followers')" :class="{ active: v == 'followers' }">
<div><fa icon="unlock"/></div>
2018-04-28 10:25:56 +02:00
<div>
<span>{{ $t('followers') }}</span>
<span>{{ $t('followers-desc') }}</span>
2018-04-28 10:25:56 +02:00
</div>
</div>
2018-04-28 21:30:51 +02:00
<div @click="choose('specified')" :class="{ active: v == 'specified' }">
<div><fa icon="envelope"/></div>
2018-04-28 10:25:56 +02:00
<div>
<span>{{ $t('specified') }}</span>
<span>{{ $t('specified-desc') }}</span>
2018-04-28 10:25:56 +02:00
</div>
</div>
<div @click="choose('local-public')" :class="{ active: v == 'local-public' }">
<div><fa icon="globe"/></div>
<div>
<span>{{ $t('local-public') }}</span>
2018-11-17 10:21:05 +01:00
<span>{{ $t('local-public-desc') }}</span>
</div>
</div>
<div @click="choose('local-home')" :class="{ active: v == 'local-home' }">
<div><fa icon="home"/></div>
<div>
<span>{{ $t('local-home') }}</span>
</div>
</div>
<div @click="choose('local-followers')" :class="{ active: v == 'local-followers' }">
<div><fa icon="unlock"/></div>
<div>
<span>{{ $t('local-followers') }}</span>
</div>
</div>
2018-04-28 10:25:56 +02:00
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
2018-04-28 10:25:56 +02:00
import * as anime from 'animejs';
export default Vue.extend({
i18n: i18n('common/views/components/visibility-chooser.vue'),
2018-12-30 06:43:03 +01:00
props: {
source: {
required: true
},
currentVisibility: {
type: String,
required: false
}
},
2018-08-17 09:35:04 +02:00
data() {
return {
2018-12-30 06:43:03 +01:00
v: this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : (this.currentVisibility || this.$store.state.settings.defaultNoteVisibility)
2018-08-17 09:35:04 +02:00
}
},
2018-04-28 10:25:56 +02:00
mounted() {
this.$nextTick(() => {
const popover = this.$refs.popover as any;
const rect = this.source.getBoundingClientRect();
const width = popover.offsetWidth;
const height = popover.offsetHeight;
2018-04-29 01:51:17 +02:00
let left;
let top;
2018-12-29 17:32:58 +01:00
if (this.$root.isMobile) {
2018-04-28 10:25:56 +02:00
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
2018-04-29 01:51:17 +02:00
left = (x - (width / 2));
top = (y - (height / 2));
2018-04-28 10:25:56 +02:00
} else {
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
const y = rect.top + window.pageYOffset + this.source.offsetHeight;
2018-04-29 01:51:17 +02:00
left = (x - (width / 2));
top = y;
}
if (left + width > window.innerWidth) {
left = window.innerWidth - width;
2018-04-28 10:25:56 +02:00
}
2018-04-29 01:51:17 +02:00
popover.style.left = left + 'px';
popover.style.top = top + 'px';
2018-04-28 10:25:56 +02:00
anime({
targets: this.$refs.backdrop,
opacity: 1,
duration: 100,
easing: 'linear'
});
anime({
targets: this.$refs.popover,
opacity: 1,
scale: [0.5, 1],
duration: 500
});
});
},
methods: {
choose(visibility) {
if (this.$store.state.settings.rememberNoteVisibility) {
this.$store.commit('device/setVisibility', visibility);
}
2018-04-28 10:25:56 +02:00
this.$emit('chosen', visibility);
2018-09-15 14:53:04 +02:00
this.destroyDom();
2018-04-28 10:25:56 +02:00
},
close() {
(this.$refs.backdrop as any).style.pointerEvents = 'none';
anime({
targets: this.$refs.backdrop,
opacity: 0,
duration: 200,
easing: 'linear'
});
(this.$refs.popover as any).style.pointerEvents = 'none';
anime({
targets: this.$refs.popover,
opacity: 0,
scale: 0.5,
duration: 200,
easing: 'easeInBack',
2018-09-15 14:53:04 +02:00
complete: () => this.destroyDom()
2018-04-28 10:25:56 +02:00
});
}
}
});
</script>
<style lang="stylus" scoped>
2018-12-29 17:32:58 +01:00
.gqyayizv
2018-04-28 10:25:56 +02:00
position initial
> .backdrop
position fixed
top 0
left 0
z-index 10000
width 100%
height 100%
2018-09-27 09:58:00 +02:00
background var(--modalBackdrop)
2018-04-28 10:25:56 +02:00
opacity 0
> .popover
2018-09-26 18:32:04 +02:00
$bgcolor = var(--popupBg)
2018-04-28 10:25:56 +02:00
position absolute
z-index 10001
width 240px
padding 8px 0
background $bgcolor
border-radius 4px
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
transform scale(0.5)
opacity 0
2018-12-29 17:32:58 +01:00
&:not(.isMobile)
$arrow-size = 10px
2018-04-28 10:25:56 +02:00
2018-12-29 17:32:58 +01:00
margin-top $arrow-size
transform-origin center -($arrow-size)
2018-04-28 10:25:56 +02:00
&:before
content ""
display block
position absolute
2018-12-29 17:32:58 +01:00
top -($arrow-size * 2)
left s('calc(50% - %s)', $arrow-size)
border-top solid $arrow-size transparent
border-left solid $arrow-size transparent
border-right solid $arrow-size transparent
border-bottom solid $arrow-size $bgcolor
2018-04-28 10:25:56 +02:00
> div
display flex
padding 8px 14px
font-size 12px
2018-09-27 09:58:00 +02:00
color var(--popupFg)
2018-04-28 10:25:56 +02:00
cursor pointer
&:hover
2018-09-27 09:58:00 +02:00
background var(--faceClearButtonHover)
2018-04-28 10:25:56 +02:00
&:active
2018-09-27 09:58:00 +02:00
background var(--faceClearButtonActive)
2018-04-28 10:25:56 +02:00
&.active
2018-09-26 13:19:35 +02:00
color var(--primaryForeground)
background var(--primary)
2018-04-28 10:25:56 +02:00
> *
user-select none
pointer-events none
> *:first-child
display flex
justify-content center
align-items center
margin-right 10px
2018-06-10 18:14:29 +02:00
width 16px
2018-04-28 10:25:56 +02:00
> *:last-child
flex 1 1 auto
> span:first-child
display block
font-weight bold
> span:last-child:not(:first-child)
opacity 0.6
2018-12-29 17:32:58 +01:00
2018-04-28 10:25:56 +02:00
</style>