amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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