sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Deckにウィジェットを置けるように

Browse Source
This commit is contained in:
syuilo
2018-06-06 19:22:45 +09:00
parent ed8fa59639
commit b0f989dbac
20 changed files with 417 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,8 @@
<template>
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs">
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow }">
<header :class="{ indicate }">
<slot name="header"></slot>
<button ref="menu" @click="menu">%fa:caret-down%</button>
<button ref="menu" @click="showMenu">%fa:caret-down%</button>
</header>
<div ref="body">
<slot></slot>
@ -19,6 +19,20 @@ export default Vue.extend({
id: {
type: String,
required: false
},
menu: {
type: Array,
required: false
},
naked: {
type: Boolean,
required: false,
default: false
},
narrow: {
type: Boolean,
required: false,
default: false
}
},
@ -59,26 +73,33 @@ export default Vue.extend({
}
},
menu() {
showMenu() {
const 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);
}
}];
if (this.menu) {
items.unshift(null);
this.menu.reverse().forEach(i => items.unshift(i));
}
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);
}
}]
items
});
}
}
@ -100,6 +121,21 @@ root(isDark)
box-shadow 0 2px 16px rgba(#000, 0.1)
overflow hidden
&.narrow
min-width 285px
max-width 285px
&.naked
background rgba(#000, isDark ? 0.25 : 0.1)
> header
background transparent
box-shadow none
if !isDark
> button
color #bbb
> header
z-index 1
line-height $header-height