This commit is contained in:
syuilo 2018-02-22 00:07:37 +09:00
parent 0f36bbd3d4
commit 9fde555cc3
7 changed files with 87 additions and 83 deletions

View file

@ -187,6 +187,7 @@
"vue-loader": "^14.1.1", "vue-loader": "^14.1.1",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13", "vue-template-compiler": "^2.5.13",
"vuedraggable": "^2.16.0",
"web-push": "3.2.5", "web-push": "3.2.5",
"webpack": "3.10.0", "webpack": "3.10.0",
"webpack-replace-loader": "^1.3.0", "webpack-replace-loader": "^1.3.0",

View file

@ -31,38 +31,51 @@
<button @click="addWidget">追加</button> <button @click="addWidget">追加</button>
</div> </div>
<div class="trash"> <div class="trash">
<div ref="trash"></div> <x-draggable v-model="trash" :options="{ group: 'x' }" @add="onTrash"></x-draggable>
<p>ゴミ箱</p> <p>ゴミ箱</p>
</div> </div>
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<div v-for="place in ['left', 'main', 'right']" :class="place" :ref="place" :data-place="place"> <template v-if="customize">
<template v-if="place != 'main'"> <x-draggable v-for="place in ['left', 'right']"
<template v-for="widget in widgets[place]"> :list="widgets[place]"
<div class="customize-container" v-if="customize" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)" :data-widget-id="widget.id"> :class="place"
:data-place="place"
:options="{ group: 'x', animation: 150 }"
@sort="onWidgetSort"
:key="place"
>
<div v-for="widget in widgets[place]" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id"/> <component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id"/>
</div> </div>
<template v-else> </x-draggable>
<component :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :ref="widget.id" @chosen="warp"/> <div class="main">
</template> <mk-timeline ref="tl" @loaded="onTlLoaded"/>
</template>
</template>
<template v-else>
<mk-timeline ref="tl" @loaded="onTlLoaded" v-if="place == 'main' && mode == 'timeline'"/>
<mk-mentions @loaded="onTlLoaded" v-if="place == 'main' && mode == 'mentions'"/>
</template>
</div> </div>
</template>
<template v-else>
<div v-for="place in ['left', 'right']" :class="place">
<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" @chosen="warp"/>
</div>
<div class="main">
<mk-timeline ref="tl" @loaded="onTlLoaded" v-if="mode == 'timeline'"/>
<mk-mentions @loaded="onTlLoaded" v-if="mode == 'mentions'"/>
</div>
</template>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import * as XDraggable from 'vuedraggable';
import * as uuid from 'uuid'; import * as uuid from 'uuid';
import * as Sortable from 'sortablejs';
export default Vue.extend({ export default Vue.extend({
components: {
XDraggable
},
props: { props: {
customize: Boolean, customize: Boolean,
mode: { mode: {
@ -72,11 +85,17 @@ export default Vue.extend({
}, },
data() { data() {
return { return {
widgetAdderSelected: null widgetAdderSelected: null,
trash: [],
widgets: {
left: [],
right: []
}
}; };
}, },
computed: { computed: {
home(): any { home: {
get(): any[] {
//#region //#region
(this as any).os.i.client_settings.home.forEach(w => { (this as any).os.i.client_settings.home.forEach(w => {
if (w.name == 'rss-reader') w.name = 'rss'; if (w.name == 'rss-reader') w.name = 'rss';
@ -86,36 +105,29 @@ export default Vue.extend({
//#endregion //#endregion
return (this as any).os.i.client_settings.home; return (this as any).os.i.client_settings.home;
}, },
leftWidgets(): any { set(value) {
(this as any).os.i.client_settings.home = value;
}
},
left(): any[] {
return this.home.filter(w => w.place == 'left'); return this.home.filter(w => w.place == 'left');
}, },
rightWidgets(): any { right(): any[] {
return this.home.filter(w => w.place == 'right'); return this.home.filter(w => w.place == 'right');
},
widgets(): any {
return {
left: this.leftWidgets,
right: this.rightWidgets,
};
},
leftEl(): Element {
return (this.$refs.left as Element[])[0];
},
rightEl(): Element {
return (this.$refs.right as Element[])[0];
} }
}, },
created() {
this.widgets.left = this.left;
this.widgets.right = this.right;
this.$watch('os.i', i => {
this.widgets.left = this.left;
this.widgets.right = this.right;
}, {
deep: true
});
},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
if (!this.customize) {
if (this.leftEl.children.length == 0) {
this.leftEl.parentNode.removeChild(this.leftEl);
}
if (this.rightEl.children.length == 0) {
this.rightEl.parentNode.removeChild(this.rightEl);
}
}
if (this.customize) { if (this.customize) {
(this as any).apis.dialog({ (this as any).apis.dialog({
title: '%fa:info-circle%カスタマイズのヒント', title: '%fa:info-circle%カスタマイズのヒント',
@ -127,30 +139,6 @@ export default Vue.extend({
text: 'Got it!' text: 'Got it!'
}] }]
}); });
const sortableOption = {
group: 'kyoppie',
animation: 150,
onMove: evt => {
const id = evt.dragged.getAttribute('data-widget-id');
this.home.find(w => w.id == id).place = evt.to.getAttribute('data-place');
},
onSort: () => {
this.saveHome();
}
};
new Sortable(this.leftEl, sortableOption);
new Sortable(this.rightEl, sortableOption);
new Sortable(this.$refs.trash, Object.assign({}, sortableOption, {
onAdd: evt => {
const el = evt.item;
const id = el.getAttribute('data-widget-id');
el.parentNode.removeChild(el);
this.home = this.home.filter(w => w.id != id);
this.saveHome();
}
}));
} }
}); });
}, },
@ -161,6 +149,12 @@ export default Vue.extend({
onWidgetContextmenu(widgetId) { onWidgetContextmenu(widgetId) {
(this.$refs[widgetId] as any)[0].func(); (this.$refs[widgetId] as any)[0].func();
}, },
onWidgetSort() {
this.saveHome();
},
onTrash(evt) {
this.saveHome();
},
addWidget() { addWidget() {
const widget = { const widget = {
name: this.widgetAdderSelected, name: this.widgetAdderSelected,
@ -169,11 +163,15 @@ export default Vue.extend({
data: {} data: {}
}; };
this.home.unshift(widget); this.widgets.left.unshift(widget);
this.saveHome(); this.saveHome();
}, },
saveHome() { saveHome() {
const left = this.widgets.left;
const right = this.widgets.right;
this.home = left.concat(right);
left.forEach(w => w.place = 'left');
right.forEach(w => w.place = 'right');
(this as any).api('i/update_home', { (this as any).api('i/update_home', {
home: this.home home: this.home
}); });
@ -282,6 +280,7 @@ export default Vue.extend({
> .main > .main
padding 16px padding 16px
width calc(100% - 275px * 2) width calc(100% - 275px * 2)
order 2
> *:not(main) > *:not(main)
width 275px width 275px
@ -292,9 +291,11 @@ export default Vue.extend({
> .left > .left
padding-left 16px padding-left 16px
order 1
> .right > .right
padding-right 16px padding-right 16px
order 3
@media (max-width 1100px) @media (max-width 1100px)
> *:not(main) > *:not(main)

View file

@ -36,6 +36,7 @@ import wNotifications from './widgets/notifications.vue';
import wBroadcast from './widgets/broadcast.vue'; import wBroadcast from './widgets/broadcast.vue';
import wTimemachine from './widgets/timemachine.vue'; import wTimemachine from './widgets/timemachine.vue';
import wProfile from './widgets/profile.vue'; import wProfile from './widgets/profile.vue';
import wServer from './widgets/server.vue';
Vue.component('mk-ui', ui); Vue.component('mk-ui', ui);
Vue.component('mk-ui-notification', uiNotification); Vue.component('mk-ui-notification', uiNotification);
@ -73,3 +74,4 @@ Vue.component('mkw-notifications', wNotifications);
Vue.component('mkw-broadcast', wBroadcast); Vue.component('mkw-broadcast', wBroadcast);
Vue.component('mkw-timemachine', wTimemachine); Vue.component('mkw-timemachine', wTimemachine);
Vue.component('mkw-profile', wProfile); Vue.component('mkw-profile', wProfile);
Vue.component('mkw-server', wServer);

View file

@ -53,7 +53,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import uuid from 'uuid'; import * as uuid from 'uuid';
export default Vue.extend({ export default Vue.extend({
props: ['connection'], props: ['connection'],

View file

@ -3,8 +3,8 @@
<x-pie class="pie" :value="usage"/> <x-pie class="pie" :value="usage"/>
<div> <div>
<p>%fa:microchip%CPU</p> <p>%fa:microchip%CPU</p>
<p>{{ cores }} Cores</p> <p>{{ meta.cpu.cores }} Cores</p>
<p>{{ model }}</p> <p>{{ meta.cpu.model }}</p>
</div> </div>
</div> </div>
</template> </template>

View file

@ -14,8 +14,8 @@ export default Vue.extend({
}); });
</script> </script>
<style lang="info" scoped> <style lang="stylus" scoped>
.uptimes .info
padding 10px 14px padding 10px 14px
> p > p

View file

@ -14,7 +14,7 @@
fill="none" fill="none"
stroke-width="0.1" stroke-width="0.1"
:stroke="color"/> :stroke="color"/>
<text x="50%" y="50%" dy="0.05" text-anchor="middle">{{ (p * 100).toFixed(0) }}%</text> <text x="50%" y="50%" dy="0.05" text-anchor="middle">{{ (value * 100).toFixed(0) }}%</text>
</svg> </svg>
</template> </template>