wip

src/client/app/desktop/views/pages/deck/deck.column.vue

@@ -2,6 +2,7 @@
 <div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs">
 	<header :class="{ indicate }">
 		<slot name="header"></slot>
+		<button ref="menu" @click="menu">%fa:caret-down%</button>
 	</header>
 	<div ref="body">
 		<slot></slot>
@@ -11,8 +12,16 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import Menu from '../../../../common/views/components/menu.vue';
 
 export default Vue.extend({
+	props: {
+		id: {
+			type: String,
+			required: false
+		}
+	},
+
 	data() {
 		return {
 			indicate: false
@@ -48,6 +57,29 @@ export default Vue.extend({
 				const current = this.$refs.body.scrollTop + this.$refs.body.clientHeight;
 				if (current > this.$refs.body.scrollHeight - 1) this.$emit('bottom');
 			}
+		},
+
+		menu() {
+			this.os.new(Menu, {
+				source: this.$refs.menu,
+				compact: false,
+				items: [{
+					content: '%fa:arrow-left% %i18n:@swap-left%',
+					onClick: () => {
+						this.$store.dispatch('settings/swapLeftDeckColumn', this.id);
+					}
+				}, {
+					content: '%fa:arrow-right% %i18n:@swap-right%',
+					onClick: () => {
+						this.$store.dispatch('settings/swapRightDeckColumn', this.id);
+					}
+				}, {
+					content: '%fa:trash-alt R% %i18n:@remove%',
+					onClick: () => {
+						this.$store.dispatch('settings/removeDeckColumn', this.id);
+					}
+				}]
+			});
 		}
 	}
 });
@@ -57,6 +89,8 @@ export default Vue.extend({
 @import '~const.styl'
 
 root(isDark)
+	$header-height = 42px
+
 	flex 1
 	min-width 330px
 	max-width 330px
@@ -68,7 +102,7 @@ root(isDark)
 
 	> header
 		z-index 1
-		line-height 42px
+		line-height $header-height
 		padding 0 16px
 		color isDark ? #e3e5e8 : #888
 		background isDark ? #313543 : #fff
@@ -77,8 +111,26 @@ root(isDark)
 		&.indicate
 			box-shadow 0 3px 0 0 $theme-color
 
+		> span
+			[data-fa]
+				margin-right 8px
+
+		> button
+			position absolute
+			top 0
+			right 0
+			width $header-height
+			line-height $header-height
+			color isDark ? #9baec8 : #ccc
+
+			&:hover
+				color isDark ? #b2c1d5 : #aaa
+
+			&:active
+				color isDark ? #b2c1d5 : #999
+
 	> div
-		height calc(100% - 42px)
+		height calc(100% - $header-height)
 		overflow auto
 		overflow-x hidden