summaryrefslogtreecommitdiff
path: root/src/client/components/deck/column.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/components/deck/column.vue')
-rw-r--r--src/client/components/deck/column.vue68
1 files changed, 30 insertions, 38 deletions
diff --git a/src/client/components/deck/column.vue b/src/client/components/deck/column.vue
index 61b7ac9c69..a8ae7e4cc2 100644
--- a/src/client/components/deck/column.vue
+++ b/src/client/components/deck/column.vue
@@ -1,6 +1,6 @@
<template>
<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section class="dnpfarvg _panel _narrow_" :class="{ naked, paged: isMainColumn, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
+<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
@dragover.prevent.stop="onDragover"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
@@ -15,15 +15,14 @@
@contextmenu.prevent.stop="onContextmenu"
>
<button class="toggleActive _button" @click="toggleActive" v-if="isStacked">
- <template v-if="active"><fa :icon="faAngleUp"/></template>
- <template v-else><fa :icon="faAngleDown"/></template>
+ <template v-if="active"><Fa :icon="faAngleUp"/></template>
+ <template v-else><Fa :icon="faAngleDown"/></template>
</button>
<div class="action">
<slot name="action"></slot>
</div>
<span class="header"><slot name="header"></slot></span>
- <button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><fa :icon="faCaretDown"/></button>
- <button v-else-if="$route.name !== 'index'" class="close _button" @click.stop="close"><fa :icon="faTimes"/></button>
+ <button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><Fa :icon="faCaretDown"/></button>
</header>
<div ref="body" v-show="active">
<slot></slot>
@@ -32,11 +31,12 @@
</template>
<script lang="ts">
-import Vue from 'vue';
-import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { defineComponent } from 'vue';
+import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
+import * as os from '@/os';
-export default Vue.extend({
+export default defineComponent({
props: {
column: {
type: Object,
@@ -71,7 +71,7 @@ export default Vue.extend({
dragging: false,
draghover: false,
dropready: false,
- faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes,
+ faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown,
};
},
@@ -86,10 +86,10 @@ export default Vue.extend({
keymap(): any {
return {
- 'shift+up': () => this.$parent.$emit('parentFocus', 'up'),
- 'shift+down': () => this.$parent.$emit('parentFocus', 'down'),
- 'shift+left': () => this.$parent.$emit('parentFocus', 'left'),
- 'shift+right': () => this.$parent.$emit('parentFocus', 'right'),
+ 'shift+up': () => this.$parent.$emit('parent-focus', 'up'),
+ 'shift+down': () => this.$parent.$emit('parent-focus', 'down'),
+ 'shift+left': () => this.$parent.$emit('parent-focus', 'left'),
+ 'shift+right': () => this.$parent.$emit('parent-focus', 'right'),
};
}
},
@@ -100,21 +100,21 @@ export default Vue.extend({
},
dragging(v) {
- this.$root.$emit(v ? 'deck.column.dragStart' : 'deck.column.dragEnd');
+ os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd');
}
},
mounted() {
if (!this.isMainColumn) {
- this.$root.$on('deck.column.dragStart', this.onOtherDragStart);
- this.$root.$on('deck.column.dragEnd', this.onOtherDragEnd);
+ os.deckGlobalEvents.on('column.dragStart', this.onOtherDragStart);
+ os.deckGlobalEvents.on('column.dragEnd', this.onOtherDragEnd);
}
},
- beforeDestroy() {
+ beforeUnmount() {
if (!this.isMainColumn) {
- this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
- this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
+ os.deckGlobalEvents.off('column.dragStart', this.onOtherDragStart);
+ os.deckGlobalEvents.off('column.dragEnd', this.onOtherDragEnd);
}
},
@@ -137,7 +137,7 @@ export default Vue.extend({
icon: faPencilAlt,
text: this.$t('rename'),
action: () => {
- this.$root.dialog({
+ os.dialog({
title: this.$t('rename'),
input: {
default: this.column.name,
@@ -207,14 +207,7 @@ export default Vue.extend({
},
showMenu() {
- this.$root.menu({
- items: this.getMenu(),
- source: this.$refs.menu,
- });
- },
-
- close() {
- this.$router.push('/');
+ os.modalMenu(this.getMenu(), this.$refs.menu);
},
goTop() {
@@ -232,7 +225,7 @@ export default Vue.extend({
}
e.dataTransfer.effectAllowed = 'move';
- e.dataTransfer.setData('mk-deck-column', this.column.id);
+ e.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, this.column.id);
this.dragging = true;
},
@@ -254,7 +247,7 @@ export default Vue.extend({
return;
}
- const isDeckColumn = e.dataTransfer.types[0] == 'mk-deck-column';
+ const isDeckColumn = e.dataTransfer.types[0] == _DATA_TRANSFER_DECK_COLUMN_;
e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
@@ -267,9 +260,9 @@ export default Vue.extend({
onDrop(e) {
this.draghover = false;
- this.$root.$emit('deck.column.dragEnd');
+ os.deckGlobalEvents.emit('column.dragEnd');
- const id = e.dataTransfer.getData('mk-deck-column');
+ const id = e.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
if (id != null && id != '') {
this.$store.commit('deviceUser/swapDeckColumn', {
a: this.column.id,
@@ -285,9 +278,11 @@ export default Vue.extend({
.dnpfarvg {
$header-height: 42px;
+ --section-padding: 10px;
+
height: 100%;
overflow: hidden;
- box-shadow: 0 0 0 1px var(--deckColumnBorder);
+ contain: content;
&.draghover {
box-shadow: 0 0 0 2px var(--focus);
@@ -341,7 +336,6 @@ export default Vue.extend({
&.paged {
> div {
background: var(--bg);
- padding: var(--margin);
}
}
@@ -379,8 +373,7 @@ export default Vue.extend({
> .toggleActive,
> .action > *,
- > .menu,
- > .close {
+ > .menu {
z-index: 1;
width: $header-height;
line-height: $header-height;
@@ -408,8 +401,7 @@ export default Vue.extend({
display: none;
}
- > .menu,
- > .close {
+ > .menu {
margin-left: auto;
margin-right: -16px;
}
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-03 23:52:12 +0000