This commit is contained in:
syuilo 2018-09-01 08:09:21 +09:00
parent dca4053a67
commit bffb9a5c45
1 changed files with 25 additions and 10 deletions

View File

@ -3,18 +3,20 @@
@dragover.prevent.stop="onDragover" @dragover.prevent.stop="onDragover"
@dragenter.prevent="onDragenter" @dragenter.prevent="onDragenter"
@dragleave="onDragleave" @dragleave="onDragleave"
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop">
>
<header :class="{ indicate: count > 0 }" <header :class="{ indicate: count > 0 }"
draggable="true" draggable="true"
@click="toggleActive" @click="goTop"
@dragstart="onDragstart" @dragstart="onDragstart"
@dragend="onDragend" @dragend="onDragend"
@contextmenu.prevent.stop="onContextmenu" @contextmenu.prevent.stop="onContextmenu">
> <button class="toggleActive" @click="toggleActive" v-if="isStacked">
<template v-if="active">%fa:angle-up%</template>
<template v-else>%fa:angle-down%</template>
</button>
<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>
<button ref="menu" @click.stop="showMenu">%fa:caret-down%</button> <button class="menu" ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
</header> </header>
<div ref="body" v-show="active"> <div ref="body" v-show="active">
<slot></slot> <slot></slot>
@ -211,6 +213,13 @@ export default Vue.extend({
}); });
}, },
goTop() {
this.$refs.body.scrollTo({
top: 0,
behavior: 'smooth'
});
},
onDragstart(e) { onDragstart(e) {
e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('mk-deck-column', this.column.id); e.dataTransfer.setData('mk-deck-column', this.column.id);
@ -302,6 +311,7 @@ root(isDark)
color #bbb color #bbb
> header > header
display flex
z-index 1 z-index 1
line-height $header-height line-height $header-height
padding 0 16px padding 0 16px
@ -328,10 +338,8 @@ root(isDark)
margin-left 4px margin-left 4px
opacity 0.5 opacity 0.5
> button > .toggleActive
position absolute > .menu
top 0
right 0
width $header-height width $header-height
line-height $header-height line-height $header-height
font-size 16px font-size 16px
@ -343,6 +351,13 @@ root(isDark)
&:active &:active
color isDark ? #b2c1d5 : #999 color isDark ? #b2c1d5 : #999
> .toggleActive
margin-left -16px
> .menu
margin-left auto
margin-right -16px
> div > div
height "calc(100% - %s)" % $header-height height "calc(100% - %s)" % $header-height
overflow auto overflow auto