Deckにウィジェットを置けるように
This commit is contained in:
syuilo
@@ -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
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<x-column :id="id">
|
||||
<span slot="header">%fa:bell R% %i18n:@notifications%</span>
|
||||
<span slot="header">%fa:bell R%%i18n:@notifications%</span>
|
||||
|
||||
<x-notifications/>
|
||||
</x-column>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<mk-ui :class="$style.root">
|
||||
<div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-darkmode="$store.state.device.darkmode">
|
||||
<template v-for="column in columns">
|
||||
<x-widgets-column v-if="column.type == 'widgets'" :key="column.id" :column="column"/>
|
||||
<x-notifications-column v-if="column.type == 'notifications'" :key="column.id" :id="column.id"/>
|
||||
<x-tl-column v-if="column.type == 'home'" :key="column.id" :column="column"/>
|
||||
<x-tl-column v-if="column.type == 'local'" :key="column.id" :column="column"/>
|
||||
@@ -17,6 +18,7 @@
|
||||
import Vue from 'vue';
|
||||
import XTlColumn from './deck.tl-column.vue';
|
||||
import XNotificationsColumn from './deck.notifications-column.vue';
|
||||
import XWidgetsColumn from './deck.widgets-column.vue';
|
||||
import Menu from '../../../../common/views/components/menu.vue';
|
||||
import MkUserListsWindow from '../../components/user-lists-window.vue';
|
||||
import * as uuid from 'uuid';
|
||||
@@ -24,7 +26,8 @@ import * as uuid from 'uuid';
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XTlColumn,
|
||||
XNotificationsColumn
|
||||
XNotificationsColumn,
|
||||
XWidgetsColumn
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
@@ -110,6 +113,15 @@ export default Vue.extend({
|
||||
type: 'notifications'
|
||||
});
|
||||
}
|
||||
}, {
|
||||
content: '%i18n:@widgets%',
|
||||
onClick: () => {
|
||||
this.$store.dispatch('settings/addDeckColumn', {
|
||||
id: uuid(),
|
||||
type: 'widgets',
|
||||
widgets: []
|
||||
});
|
||||
}
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
152
src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
Normal file
152
src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="wtdtxvecapixsepjtcupubtsmometobz">
|
||||
<x-column :id="column.id" :menu="menu" :naked="true" :narrow="true">
|
||||
<span slot="header">%fa:calculator%%i18n:@widgets%</span>
|
||||
|
||||
<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
|
||||
<template v-if="edit">
|
||||
<header>
|
||||
<select v-model="widgetAdderSelected">
|
||||
<option value="profile">%i18n:common.widgets.profile%</option>
|
||||
<option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
|
||||
<option value="calendar">%i18n:common.widgets.calendar%</option>
|
||||
<option value="timemachine">%i18n:common.widgets.timemachine%</option>
|
||||
<option value="activity">%i18n:common.widgets.activity%</option>
|
||||
<option value="rss">%i18n:common.widgets.rss%</option>
|
||||
<option value="trends">%i18n:common.widgets.trends%</option>
|
||||
<option value="photo-stream">%i18n:common.widgets.photo-stream%</option>
|
||||
<option value="slideshow">%i18n:common.widgets.slideshow%</option>
|
||||
<option value="version">%i18n:common.widgets.version%</option>
|
||||
<option value="broadcast">%i18n:common.widgets.broadcast%</option>
|
||||
<option value="notifications">%i18n:common.widgets.notifications%</option>
|
||||
<option value="users">%i18n:common.widgets.users%</option>
|
||||
<option value="polls">%i18n:common.widgets.polls%</option>
|
||||
<option value="post-form">%i18n:common.widgets.post-form%</option>
|
||||
<option value="messaging">%i18n:common.widgets.messaging%</option>
|
||||
<option value="memo">%i18n:common.widgets.memo%</option>
|
||||
<option value="server">%i18n:common.widgets.server%</option>
|
||||
<option value="donation">%i18n:common.widgets.donation%</option>
|
||||
<option value="nav">%i18n:common.widgets.nav%</option>
|
||||
<option value="tips">%i18n:common.widgets.tips%</option>
|
||||
</select>
|
||||
<button @click="addWidget">追加</button>
|
||||
</header>
|
||||
<x-draggable
|
||||
:list="column.widgets"
|
||||
:options="{ handle: '.handle', animation: 150 }"
|
||||
@sort="onWidgetSort"
|
||||
>
|
||||
<div v-for="widget in column.widgets" class="customize-container" :key="widget.id">
|
||||
<header>
|
||||
<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
|
||||
</header>
|
||||
<div @click="widgetFunc(widget.id)">
|
||||
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
|
||||
</div>
|
||||
</div>
|
||||
</x-draggable>
|
||||
</template>
|
||||
<template v-else>
|
||||
<component class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="deck"/>
|
||||
</template>
|
||||
</div>
|
||||
</x-column>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import XColumn from './deck.column.vue';
|
||||
import * as XDraggable from 'vuedraggable';
|
||||
import * as uuid from 'uuid';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XColumn,
|
||||
XDraggable
|
||||
},
|
||||
|
||||
props: {
|
||||
column: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
edit: false,
|
||||
menu: null,
|
||||
widgetAdderSelected: null
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.menu = [{
|
||||
content: '%fa:cog% %i18n:@edit%',
|
||||
onClick: () => {
|
||||
this.edit = !this.edit;
|
||||
}
|
||||
}];
|
||||
},
|
||||
|
||||
methods: {
|
||||
widgetFunc(id) {
|
||||
const w = this.$refs[id][0];
|
||||
if (w.func) w.func();
|
||||
},
|
||||
|
||||
onWidgetSort() {
|
||||
this.saveWidgets();
|
||||
},
|
||||
|
||||
addWidget() {
|
||||
this.$store.dispatch('settings/addDeckWidget', {
|
||||
id: this.column.id,
|
||||
widget: {
|
||||
name: this.widgetAdderSelected,
|
||||
id: uuid(),
|
||||
data: {}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
removeWidget(widget) {
|
||||
this.$store.dispatch('settings/removeDeckWidget', {
|
||||
id: this.column.id,
|
||||
widget
|
||||
});
|
||||
},
|
||||
|
||||
saveWidgets() {
|
||||
this.$store.dispatch('settings/saveDeck');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.gqpwvtwtprsbmnssnbicggtwqhmylhnq
|
||||
.widget, .customize-container
|
||||
margin 8px
|
||||
|
||||
&:first-of-type
|
||||
margin-top 0
|
||||
|
||||
.customize-container
|
||||
background #fff
|
||||
|
||||
> header
|
||||
color isDark ? #fff : #000
|
||||
|
||||
.wtdtxvecapixsepjtcupubtsmometobz[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.wtdtxvecapixsepjtcupubtsmometobz:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user