mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-01 07:35:57 +09:00
Code

feat(client): ウィジェットを左にも置けるように

Browse Source
This commit is contained in:
syuilo 2020-07-04 22:33:42 +09:00
parent 1b75984046
commit 624c9f3418
1 changed files with 53 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/client/app.vue
View File

@ -86,18 +86,18 @@
</div> </div>
</main> </main>
<div class="widgets" :class="{ edit: widgetsEditMode }"> <template v-if="isDesktop">
<template v-if="isDesktop && $store.getters.isSignedIn"> <div class="widgets" :class="{ edit: widgetsEditMode }" v-for="place in ['left', 'right']" :key="place">
<template v-if="widgetsEditMode"> <template v-if="widgetsEditMode">
<mk-button primary @click="addWidget" class="add"><fa :icon="faPlus"/></mk-button> <mk-button primary @click="addWidget(place)" class="add"><fa :icon="faPlus"/></mk-button>
<x-draggable <x-draggable
:list="widgets" :list="widgets[place]"
handle=".handle" handle=".handle"
animation="150" animation="150"
class="sortable" class="sortable"
@sort="onWidgetSort" @sort="onWidgetSort"
> >
<div v-for="widget in widgets" class="customize-container _panel" :key="widget.id"> <div v-for="widget in widgets[place]" class="customize-container _panel" :key="widget.id">
<header> <header>
<span class="handle"><fa :icon="faBars"/></span>{{ $t('_widgets.' + widget.name) }}<button class="remove _button" @click="removeWidget(widget)"><fa :icon="faTimes"/></button> <span class="handle"><fa :icon="faBars"/></span>{{ $t('_widgets.' + widget.name) }}<button class="remove _button" @click="removeWidget(widget)"><fa :icon="faTimes"/></button>
</header> </header>
@ -107,11 +107,9 @@
</div> </div>
</x-draggable> </x-draggable>
</template> </template>
<template v-else> <component v-else class="_widget" v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget"/>
<component class="_widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget"/> </div>
</template> </template>
</template>
</div>
</div> </div>
<div class="buttons"> <div class="buttons">
@ -179,7 +177,12 @@ export default Vue.extend({
}, },
widgets(): any[] { widgets(): any[] {
return this.$store.state.deviceUser.widgets; const widgets = this.$store.state.deviceUser.widgets;
return {
left: widgets.filter(x => x.place === 'left'),
right: widgets.filter(x => x.place == null || x.place === 'right'),
mobile: widgets.filter(x => x.place === 'mobile'),
};
}, },
menu(): string[] { menu(): string[] {
@ -219,16 +222,16 @@ export default Vue.extend({
this.connection = this.$root.stream.useSharedConnection('main'); this.connection = this.$root.stream.useSharedConnection('main');
this.connection.on('notification', this.onNotification); this.connection.on('notification', this.onNotification);
if (this.widgets.length === 0) { if (this.$store.state.deviceUser.widgets.length === 0) {
this.$store.commit('deviceUser/setWidgets', [{ this.$store.commit('deviceUser/setWidgets', [{
name: 'calendar', name: 'calendar',
id: 'a', data: {} id: 'a', place: 'right', data: {}
}, { }, {
name: 'notifications', name: 'notifications',
id: 'b', data: {} id: 'b', place: 'right', data: {}
}, { }, {
name: 'trends', name: 'trends',
id: 'c', data: {} id: 'c', place: 'right', data: {}
}]); }]);
} }
} }
@ -503,7 +506,7 @@ export default Vue.extend({
this.saveHome(); this.saveHome();
}, },
addWidget(ev) { async addWidget(place) {
const widgets = [ const widgets = [
'memo', 'memo',
'notifications', 'notifications',
@ -516,18 +519,24 @@ export default Vue.extend({
'photos', 'photos',
]; ];
this.$root.menu({ const { canceled, result: widget } = await this.$root.dialog({
items: widgets.map(widget => ({ type: null,
text: this.$t('_widgets.' + widget), title: this.$t('chooseWidget'),
action: () => { select: {
this.$store.commit('deviceUser/addWidget', { items: widgets.map(widget => ({
name: widget, value: widget,
id: uuid(), text: this.$t('_widgets.' + widget),
data: {} }))
}); },
} showCancelButton: true
})), });
source: ev.currentTarget || ev.target, if (canceled) return;
this.$store.commit('deviceUser/addWidget', {
name: widget,
id: uuid(),
place: place,
data: {}
}); });
}, },
@ -536,7 +545,7 @@ export default Vue.extend({
}, },
saveHome() { saveHome() {
this.$store.commit('deviceUser/setWidgets', this.widgets); this.$store.commit('deviceUser/setWidgets', [...this.widgets.left, ...this.widgets.right, ...this.widgets.mobile]);
} }
} }
}); });
@ -574,6 +583,8 @@ export default Vue.extend({
$nav-icon-only-threshold: 1279px; $nav-icon-only-threshold: 1279px;
$nav-hide-threshold: 650px; $nav-hide-threshold: 650px;
$side-hide-threshold: 1090px; $side-hide-threshold: 1090px;
$left-widgets-hide-threshold: 1600px;
$right-widgets-hide-threshold: 1090px;
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
@ -970,7 +981,19 @@ export default Vue.extend({
overflow: auto; overflow: auto;
box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider); box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
@media (max-width: $side-hide-threshold) { &:first-of-type {
order: -1;
@media (max-width: $left-widgets-hide-threshold) {
display: none;
}
}
&:empty {
display: none;
}
@media (max-width: $right-widgets-hide-threshold) {
display: none; display: none;
} }