Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve usability

Browse Source
This commit is contained in:
syuilo 2018-06-08 11:17:22 +09:00
parent 3ffd6ff5a2
commit 00e0d6ce2c
1 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/client/app/desktop/views/pages/deck/deck.column.vue
View File

@ -1,14 +1,15 @@
<template> <template>
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging }"> <div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }"
@dragover.prevent.stop="onDragover"
@dragenter.prevent="onDragenter"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
>
<header :class="{ indicate: count > 0 }" <header :class="{ indicate: count > 0 }"
draggable="true" draggable="true"
@click="toggleActive" @click="toggleActive"
@dragstart="onDragstart" @dragstart="onDragstart"
@dragend="onDragend" @dragend="onDragend"
@dragover.prevent.stop="onDragover"
@dragenter.prevent="onDragenter"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
> >
<slot name="header"></slot> <slot name="header"></slot>
<span class="count" v-if="count > 0">({{ count }})</span> <span class="count" v-if="count > 0">({{ count }})</span>
@ -64,7 +65,8 @@ export default Vue.extend({
count: 0, count: 0,
active: true, active: true,
dragging: false, dragging: false,
draghover: false draghover: false,
dropready: false
}; };
}, },
@ -73,6 +75,9 @@ export default Vue.extend({
if (v && this.isScrollTop()) { if (v && this.isScrollTop()) {
this.$emit('top'); this.$emit('top');
} }
},
dragging(v) {
this.$root.$emit(v ? 'deck.column.dragStart' : 'deck.column.dragEnd');
} }
}, },
@ -86,12 +91,25 @@ export default Vue.extend({
mounted() { mounted() {
this.$refs.body.addEventListener('scroll', this.onScroll, { passive: true }); this.$refs.body.addEventListener('scroll', this.onScroll, { passive: true });
this.$root.$on('deck.column.dragStart', this.onOtherDragStart);
this.$root.$on('deck.column.dragEnd', this.onOtherDragEnd);
}, },
beforeDestroy() { beforeDestroy() {
this.$refs.body.removeEventListener('scroll', this.onScroll); this.$refs.body.removeEventListener('scroll', this.onScroll);
this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
}, },
methods: { methods: {
onOtherDragStart() {
this.dropready = true;
},
onOtherDragEnd() {
this.dropready = false;
},
toggleActive() { toggleActive() {
if (!this.isStacked) return; if (!this.isStacked) return;
const vms = this.$store.state.settings.deck.layout.find(ids => ids.indexOf(this.column.id) != -1).map(id => this.getColumnVm(id)); const vms = this.$store.state.settings.deck.layout.find(ids => ids.indexOf(this.column.id) != -1).map(id => this.getColumnVm(id));
@ -208,6 +226,7 @@ export default Vue.extend({
onDrop(e) { onDrop(e) {
this.draghover = false; this.draghover = false;
this.$root.$emit('deck.column.dragEnd');
const id = e.dataTransfer.getData('mk-deck-column'); const id = e.dataTransfer.getData('mk-deck-column');
if (id != null && id != '') { if (id != null && id != '') {
@ -236,8 +255,14 @@ root(isDark)
overflow hidden overflow hidden
&.draghover &.draghover
box-shadow 0 0 0 2px rgba($theme-color, 0.8)
&.dragging &.dragging
box-shadow 0 0 0 2px rgba($theme-color, 0.7) box-shadow 0 0 0 2px rgba($theme-color, 0.4)
&.dropready
*
pointer-events none
&:not(.active) &:not(.active)
flex-basis $header-height flex-basis $header-height