natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve usability

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>
<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 }"
draggable="true"
@click="toggleActive"
@dragstart="onDragstart"
@dragend="onDragend"
@dragover.prevent.stop="onDragover"
@dragenter.prevent="onDragenter"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
>
<slot name="header"></slot>
<span class="count" v-if="count > 0">({{ count }})</span>
@ -64,7 +65,8 @@ export default Vue.extend({
count: 0,
active: true,
dragging: false,
draghover: false
draghover: false,
dropready: false
};
},
@ -73,6 +75,9 @@ export default Vue.extend({
if (v && this.isScrollTop()) {
this.$emit('top');
}
},
dragging(v) {
this.$root.$emit(v ? 'deck.column.dragStart' : 'deck.column.dragEnd');
}
},
@ -86,12 +91,25 @@ export default Vue.extend({
mounted() {
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() {
this.$refs.body.removeEventListener('scroll', this.onScroll);
this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
},
methods: {
onOtherDragStart() {
this.dropready = true;
},
onOtherDragEnd() {
this.dropready = false;
},
toggleActive() {
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));
@ -208,6 +226,7 @@ export default Vue.extend({
onDrop(e) {
this.draghover = false;
this.$root.$emit('deck.column.dragEnd');
const id = e.dataTransfer.getData('mk-deck-column');
if (id != null && id != '') {
@ -236,8 +255,14 @@ root(isDark)
overflow hidden
&.draghover
box-shadow 0 0 0 2px rgba($theme-color, 0.8)
&.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)
flex-basis $header-height