2018-04-26 14:01:41 +09:00
|
|
|
<template>
|
|
|
|
<mk-ui>
|
2019-02-18 11:13:56 +09:00
|
|
|
<template #header><span style="margin-right:4px;"><fa icon="home"/></span>{{ $t('dashboard') }}</template>
|
|
|
|
<template #func>
|
2018-11-06 01:40:11 +09:00
|
|
|
<button @click="customizing = !customizing"><fa icon="cog"/></button>
|
2018-04-26 14:01:41 +09:00
|
|
|
</template>
|
|
|
|
<main>
|
|
|
|
<template v-if="customizing">
|
|
|
|
<header>
|
|
|
|
<select v-model="widgetAdderSelected">
|
2018-11-09 03:44:35 +09:00
|
|
|
<option value="profile">{{ $t('@.widgets.profile') }}</option>
|
|
|
|
<option value="analog-clock">{{ $t('@.widgets.analog-clock') }}</option>
|
|
|
|
<option value="calendar">{{ $t('@.widgets.calendar') }}</option>
|
|
|
|
<option value="activity">{{ $t('@.widgets.activity') }}</option>
|
|
|
|
<option value="rss">{{ $t('@.widgets.rss') }}</option>
|
|
|
|
<option value="photo-stream">{{ $t('@.widgets.photo-stream') }}</option>
|
|
|
|
<option value="slideshow">{{ $t('@.widgets.slideshow') }}</option>
|
|
|
|
<option value="hashtags">{{ $t('@.widgets.hashtags') }}</option>
|
|
|
|
<option value="posts-monitor">{{ $t('@.widgets.posts-monitor') }}</option>
|
|
|
|
<option value="version">{{ $t('@.widgets.version') }}</option>
|
|
|
|
<option value="server">{{ $t('@.widgets.server') }}</option>
|
2019-03-10 19:16:33 +09:00
|
|
|
<option value="queue">{{ $t('@.widgets.queue') }}</option>
|
2018-11-09 03:44:35 +09:00
|
|
|
<option value="memo">{{ $t('@.widgets.memo') }}</option>
|
|
|
|
<option value="nav">{{ $t('@.widgets.nav') }}</option>
|
|
|
|
<option value="tips">{{ $t('@.widgets.tips') }}</option>
|
2018-04-26 14:01:41 +09:00
|
|
|
</select>
|
2018-11-09 03:44:35 +09:00
|
|
|
<button @click="addWidget">{{ $t('add-widget') }}</button>
|
|
|
|
<p><a @click="hint">{{ $t('customization-tips') }}</a></p>
|
2018-04-26 14:01:41 +09:00
|
|
|
</header>
|
|
|
|
<x-draggable
|
|
|
|
:list="widgets"
|
2019-04-16 13:05:10 +09:00
|
|
|
handle=".handle"
|
|
|
|
animation="150"
|
2018-04-26 14:01:41 +09:00
|
|
|
@sort="onWidgetSort"
|
|
|
|
>
|
|
|
|
<div v-for="widget in widgets" class="customize-container" :key="widget.id">
|
|
|
|
<header>
|
2018-11-06 01:40:11 +09:00
|
|
|
<span class="handle"><fa icon="bars"/></span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)"><fa icon="times"/></button>
|
2018-04-26 14:01:41 +09:00
|
|
|
</header>
|
|
|
|
<div @click="widgetFunc(widget.id)">
|
2018-06-06 19:22:45 +09:00
|
|
|
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="mobile"/>
|
2018-04-26 14:01:41 +09:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</x-draggable>
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
2018-06-06 19:22:45 +09:00
|
|
|
<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="mobile"/>
|
2018-04-26 14:01:41 +09:00
|
|
|
</template>
|
|
|
|
</main>
|
|
|
|
</mk-ui>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import Vue from 'vue';
|
2018-11-09 03:44:35 +09:00
|
|
|
import i18n from '../../../i18n';
|
2018-04-26 14:01:41 +09:00
|
|
|
import * as XDraggable from 'vuedraggable';
|
|
|
|
import * as uuid from 'uuid';
|
|
|
|
|
|
|
|
export default Vue.extend({
|
2018-11-09 03:44:35 +09:00
|
|
|
i18n: i18n('mobile/views/pages/widgets.vue'),
|
2018-04-26 14:01:41 +09:00
|
|
|
components: {
|
|
|
|
XDraggable
|
|
|
|
},
|
2018-05-17 16:24:01 +09:00
|
|
|
|
2018-04-26 14:01:41 +09:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
showNav: false,
|
|
|
|
customizing: false,
|
|
|
|
widgetAdderSelected: null
|
|
|
|
};
|
|
|
|
},
|
2018-05-17 16:24:01 +09:00
|
|
|
|
|
|
|
computed: {
|
|
|
|
widgets(): any[] {
|
2018-05-21 02:13:39 +09:00
|
|
|
return this.$store.state.settings.mobileHome;
|
2018-05-17 16:24:01 +09:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-04-26 14:01:41 +09:00
|
|
|
created() {
|
2018-05-17 16:24:01 +09:00
|
|
|
if (this.widgets.length == 0) {
|
|
|
|
this.widgets = [{
|
2018-04-26 14:01:41 +09:00
|
|
|
name: 'calendar',
|
|
|
|
id: 'a', data: {}
|
|
|
|
}, {
|
|
|
|
name: 'activity',
|
|
|
|
id: 'b', data: {}
|
|
|
|
}, {
|
|
|
|
name: 'rss',
|
|
|
|
id: 'c', data: {}
|
|
|
|
}, {
|
|
|
|
name: 'photo-stream',
|
|
|
|
id: 'd', data: {}
|
|
|
|
}, {
|
|
|
|
name: 'nav',
|
|
|
|
id: 'f', data: {}
|
|
|
|
}, {
|
|
|
|
name: 'version',
|
|
|
|
id: 'g', data: {}
|
2018-05-17 16:24:01 +09:00
|
|
|
}];
|
2018-04-26 14:01:41 +09:00
|
|
|
this.saveHome();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
2018-11-09 08:26:32 +09:00
|
|
|
document.title = this.$root.instanceName;
|
2018-04-26 14:01:41 +09:00
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
hint() {
|
2019-04-16 13:05:10 +09:00
|
|
|
this.$root.dialog({
|
|
|
|
type: 'info',
|
|
|
|
text: this.$t('widgets-hints')
|
|
|
|
});
|
2018-04-26 14:01:41 +09:00
|
|
|
},
|
2018-05-17 16:24:01 +09:00
|
|
|
|
2018-04-26 14:01:41 +09:00
|
|
|
widgetFunc(id) {
|
|
|
|
const w = this.$refs[id][0];
|
|
|
|
if (w.func) w.func();
|
|
|
|
},
|
2018-05-17 16:24:01 +09:00
|
|
|
|
2018-04-26 14:01:41 +09:00
|
|
|
onWidgetSort() {
|
|
|
|
this.saveHome();
|
|
|
|
},
|
2018-05-17 16:24:01 +09:00
|
|
|
|
2018-04-26 14:01:41 +09:00
|
|
|
addWidget() {
|
2019-04-07 21:50:36 +09:00
|
|
|
this.$store.commit('settings/addMobileHomeWidget', {
|
2018-04-26 14:01:41 +09:00
|
|
|
name: this.widgetAdderSelected,
|
|
|
|
id: uuid(),
|
|
|
|
data: {}
|
2018-05-17 16:24:01 +09:00
|
|
|
});
|
2018-04-26 14:01:41 +09:00
|
|
|
},
|
2018-05-17 16:24:01 +09:00
|
|
|
|
2018-04-26 14:01:41 +09:00
|
|
|
removeWidget(widget) {
|
2019-04-07 21:50:36 +09:00
|
|
|
this.$store.commit('settings/removeMobileHomeWidget', widget);
|
2018-04-26 14:01:41 +09:00
|
|
|
},
|
2018-05-17 16:24:01 +09:00
|
|
|
|
2018-04-26 14:01:41 +09:00
|
|
|
saveHome() {
|
2018-05-17 16:24:01 +09:00
|
|
|
this.$store.commit('settings/setMobileHome', this.widgets);
|
2018-04-26 14:01:41 +09:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="stylus" scoped>
|
|
|
|
main
|
|
|
|
margin 0 auto
|
2018-05-17 23:10:53 +09:00
|
|
|
padding 8px
|
2018-04-26 14:01:41 +09:00
|
|
|
max-width 500px
|
2018-05-18 09:40:57 +09:00
|
|
|
width 100%
|
2018-04-26 14:01:41 +09:00
|
|
|
|
|
|
|
@media (min-width 500px)
|
2018-05-17 23:10:53 +09:00
|
|
|
padding 16px 8px
|
|
|
|
|
|
|
|
@media (min-width 600px)
|
|
|
|
padding 32px 8px
|
2018-04-26 14:01:41 +09:00
|
|
|
|
|
|
|
> header
|
|
|
|
padding 8px
|
|
|
|
background #fff
|
|
|
|
|
|
|
|
.widget
|
2018-05-17 23:10:53 +09:00
|
|
|
margin-bottom 8px
|
|
|
|
|
|
|
|
@media (min-width 600px)
|
|
|
|
margin-bottom 16px
|
2018-04-26 14:01:41 +09:00
|
|
|
|
|
|
|
.customize-container
|
|
|
|
margin 8px
|
|
|
|
background #fff
|
|
|
|
|
|
|
|
> header
|
|
|
|
line-height 32px
|
|
|
|
background #eee
|
|
|
|
|
|
|
|
> .handle
|
|
|
|
padding 0 8px
|
|
|
|
|
|
|
|
> .remove
|
|
|
|
position absolute
|
|
|
|
top 0
|
|
|
|
right 0
|
|
|
|
padding 0 8px
|
|
|
|
line-height 32px
|
|
|
|
|
|
|
|
> div
|
|
|
|
padding 8px
|
|
|
|
|
|
|
|
> *
|
|
|
|
pointer-events none
|
|
|
|
|
|
|
|
</style>
|