Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-11 13:02:35 +09:00
parent dab2a5dd1c
commit cd5786d7fb
2 changed files with 166 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

334
src/web/app/desktop/views/home.vue → src/web/app/desktop/views/components/home.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div :data-customize="customize"> <div class="mk-home" :data-customize="customize">
<div class="customize" v-if="customize"> <div class="customize" v-if="customize">
<a href="/">%fa:check%完了</a> <a href="/">%fa:check%完了</a>
<div> <div>
<div class="adder"> <div class="adder">
<p>ウィジェットを追加:</p> <p>ウィジェットを追加:</p>
<select ref="widgetSelector"> <select v-model="widgetAdderSelected">
<option value="profile">プロフィール</option> <option value="profile">プロフィール</option>
<option value="calendar">カレンダー</option> <option value="calendar">カレンダー</option>
<option value="timemachine">カレンダー(タイムマシン)</option> <option value="timemachine">カレンダー(タイムマシン)</option>
@ -40,11 +40,11 @@
<div class="left"> <div class="left">
<div ref="left" data-place="left"> <div ref="left" data-place="left">
<template v-for="widget in leftWidgets"> <template v-for="widget in leftWidgets">
<div class="customize-container" v-if="customize" :key="widget.id" @contextmenu="onWidgetContextmenu.stop.prevent(widget.id)"> <div class="customize-container" v-if="customize" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
<component :is="widget.name" :widget="widget" :ref="widget.id"></component> <component :is="widget.name" :widget="widget" :ref="widget.id"/>
</div> </div>
<template v-else> <template v-else>
<component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"></component> <component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"/>
</template> </template>
</template> </template>
</div> </div>
@ -52,25 +52,25 @@
<main ref="main"> <main ref="main">
<div class="maintop" ref="maintop" data-place="main" v-if="customize"> <div class="maintop" ref="maintop" data-place="main" v-if="customize">
<template v-for="widget in centerWidgets"> <template v-for="widget in centerWidgets">
<div class="customize-container" v-if="customize" :key="widget.id" @contextmenu="onWidgetContextmenu.stop.prevent(widget.id)"> <div class="customize-container" v-if="customize" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
<component :is="widget.name" :widget="widget" :ref="widget.id"></component> <component :is="widget.name" :widget="widget" :ref="widget.id"/>
</div> </div>
<template v-else> <template v-else>
<component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"></component> <component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"/>
</template> </template>
</template> </template>
</div> </div>
<mk-timeline-home-widget ref="tl" v-on:loaded="onTlLoaded" v-if="mode == 'timeline'"/> <mk-timeline-home-widget ref="tl" @loaded="onTlLoaded" v-if="mode == 'timeline'"/>
<mk-mentions-home-widget ref="tl" v-on:loaded="onTlLoaded" v-if="mode == 'mentions'"/> <mk-mentions-home-widget ref="tl" @loaded="onTlLoaded" v-if="mode == 'mentions'"/>
</main> </main>
<div class="right"> <div class="right">
<div ref="right" data-place="right"> <div ref="right" data-place="right">
<template v-for="widget in rightWidgets"> <template v-for="widget in rightWidgets">
<div class="customize-container" v-if="customize" :key="widget.id" @contextmenu="onWidgetContextmenu.stop.prevent(widget.id)"> <div class="customize-container" v-if="customize" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
<component :is="widget.name" :widget="widget" :ref="widget.id"></component> <component :is="widget.name" :widget="widget" :ref="widget.id"/>
</div> </div>
<template v-else> <template v-else>
<component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"></component> <component :is="widget.name" :key="widget.id" :widget="widget" :ref="widget.id"/>
</template> </template>
</template> </template>
</div> </div>
@ -80,10 +80,11 @@
</template> </template>
<script lang="typescript"> <script lang="typescript">
import Vue from 'vue';
import uuid from 'uuid'; import uuid from 'uuid';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
export default { export default Vue.extend({
props: { props: {
customize: Boolean, customize: Boolean,
mode: { mode: {
@ -94,12 +95,13 @@ export default {
data() { data() {
return { return {
home: [], home: [],
bakedHomeData: null bakedHomeData: null,
widgetAdderSelected: null
}; };
}, },
methods: { methods: {
bakeHomeData() { bakeHomeData() {
return JSON.stringify(this.I.client_settings.home); return JSON.stringify(this.$root.$data.os.i.client_settings.home);
}, },
onTlLoaded() { onTlLoaded() {
this.$emit('loaded'); this.$emit('loaded');
@ -111,94 +113,86 @@ export default {
} }
}, },
onWidgetContextmenu(widgetId) { onWidgetContextmenu(widgetId) {
this.$refs[widgetId].func(); (this.$refs[widgetId] as any).func();
}, },
addWidget() { addWidget() {
const widget = { const widget = {
name: this.$refs.widgetSelector.options[this.$refs.widgetSelector.selectedIndex].value, name: this.widgetAdderSelected,
id: uuid(), id: uuid(),
place: 'left', place: 'left',
data: {} data: {}
}; };
this.I.client_settings.home.unshift(widget); this.$root.$data.os.i.client_settings.home.unshift(widget);
this.saveHome(); this.saveHome();
}, },
saveHome() { saveHome() {
/*const data = []; const data = [];
Array.from(this.$refs.left.children).forEach(el => { Array.from((this.$refs.left as Element).children).forEach(el => {
const id = el.getAttribute('data-widget-id'); const id = el.getAttribute('data-widget-id');
const widget = this.I.client_settings.home.find(w => w.id == id); const widget = this.$root.$data.os.i.client_settings.home.find(w => w.id == id);
widget.place = 'left'; widget.place = 'left';
data.push(widget); data.push(widget);
}); });
Array.from(this.$refs.right.children).forEach(el => { Array.from((this.$refs.right as Element).children).forEach(el => {
const id = el.getAttribute('data-widget-id'); const id = el.getAttribute('data-widget-id');
const widget = this.I.client_settings.home.find(w => w.id == id); const widget = this.$root.$data.os.i.client_settings.home.find(w => w.id == id);
widget.place = 'right'; widget.place = 'right';
data.push(widget); data.push(widget);
}); });
Array.from(this.$refs.maintop.children).forEach(el => { Array.from((this.$refs.maintop as Element).children).forEach(el => {
const id = el.getAttribute('data-widget-id'); const id = el.getAttribute('data-widget-id');
const widget = this.I.client_settings.home.find(w => w.id == id); const widget = this.$root.$data.os.i.client_settings.home.find(w => w.id == id);
widget.place = 'main'; widget.place = 'main';
data.push(widget); data.push(widget);
}); });
this.api('i/update_home', { this.$root.$data.os.api('i/update_home', {
home: data home: data
}).then(() => { });
this.I.update();
});*/
} }
}, },
computed: { computed: {
leftWidgets() { leftWidgets(): any {
return this.I.client_settings.home.filter(w => w.place == 'left'); return this.$root.$data.os.i.client_settings.home.filter(w => w.place == 'left');
}, },
centerWidgets() { centerWidgets(): any {
return this.I.client_settings.home.filter(w => w.place == 'center'); return this.$root.$data.os.i.client_settings.home.filter(w => w.place == 'center');
}, },
rightWidgets() { rightWidgets(): any {
return this.I.client_settings.home.filter(w => w.place == 'right'); return this.$root.$data.os.i.client_settings.home.filter(w => w.place == 'right');
} }
}, },
created() { created() {
this.bakedHomeData = this.bakeHomeData(); this.bakedHomeData = this.bakeHomeData();
}, },
mounted() { mounted() {
this.I.on('refreshed', this.onMeRefreshed); this.$root.$data.os.i.on('refreshed', this.onMeRefreshed);
this.I.client_settings.home.forEach(widget => { this.home = this.$root.$data.os.i.client_settings.home;
try {
this.setWidget(widget);
} catch (e) {
// noop
}
});
if (!this.opts.customize) { if (!this.customize) {
if (this.$refs.left.children.length == 0) { if ((this.$refs.left as Element).children.length == 0) {
this.$refs.left.parentNode.removeChild(this.$refs.left); (this.$refs.left as Element).parentNode.removeChild((this.$refs.left as Element));
} }
if (this.$refs.right.children.length == 0) { if ((this.$refs.right as Element).children.length == 0) {
this.$refs.right.parentNode.removeChild(this.$refs.right); (this.$refs.right as Element).parentNode.removeChild((this.$refs.right as Element));
} }
} }
if (this.opts.customize) { if (this.customize) {
dialog('%fa:info-circle%カスタマイズのヒント', /*dialog('%fa:info-circle%カスタマイズのヒント',
'<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p>' + '<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p>' +
'<p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>' + '<p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>' +
'<p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p>' + '<p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p>' +
'<p>カスタマイズを終了するには、右上の「完了」をクリックします。</p>', '<p>カスタマイズを終了するには、右上の「完了」をクリックします。</p>',
[{ [{
text: 'Got it!' text: 'Got it!'
}]); }]);*/
const sortableOption = { const sortableOption = {
group: 'kyoppie', group: 'kyoppie',
@ -220,151 +214,151 @@ export default {
const el = evt.item; const el = evt.item;
const id = el.getAttribute('data-widget-id'); const id = el.getAttribute('data-widget-id');
el.parentNode.removeChild(el); el.parentNode.removeChild(el);
this.I.client_settings.home = this.I.client_settings.home.filter(w => w.id != id); this.$root.$data.os.i.client_settings.home = this.$root.$data.os.i.client_settings.home.filter(w => w.id != id);
this.saveHome(); this.saveHome();
} }
})); }));
} }
}, },
beforeDestroy() { beforeDestroy() {
this.I.off('refreshed', this.onMeRefreshed); this.$root.$data.os.i.off('refreshed', this.onMeRefreshed);
this.home.forEach(widget => { this.home.forEach(widget => {
widget.unmount(); widget.unmount();
}); });
} }
}; });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
:scope .mk-home
display block display block
&[data-customize] &[data-customize]
padding-top 48px padding-top 48px
background-image url('/assets/desktop/grid.svg') background-image url('/assets/desktop/grid.svg')
> .main > main > *:not(.maintop) > .main > main > *:not(.maintop)
cursor not-allowed cursor not-allowed
> *
pointer-events none
&:not([data-customize])
> .main > *:empty
display none
> .customize
position fixed
z-index 1000
top 0
left 0
width 100%
height 48px
background #f7f7f7
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
> a
display block
position absolute
z-index 1001
top 0
right 0
padding 0 16px
line-height 48px
text-decoration none
color $theme-color-foreground
background $theme-color
transition background 0.1s ease
&:hover
background lighten($theme-color, 10%)
&:active
background darken($theme-color, 10%)
transition background 0s ease
> [data-fa]
margin-right 8px
> div
display flex
margin 0 auto
max-width 1200px - 32px
> div
width 50%
&.adder
> p
display inline
line-height 48px
&.trash
border-left solid 1px #ddd
> div
width 100%
height 100%
> p
position absolute
top 0
left 0
width 100%
line-height 48px
margin 0
text-align center
pointer-events none
> .main
display flex
justify-content center
margin 0 auto
max-width 1200px
> *
.customize-container
cursor move
> * > *
pointer-events none pointer-events none
&:not([data-customize]) > main
> .main > *:empty padding 16px
display none width calc(100% - 275px * 2)
> .customize > *:not(.maintop):not(:last-child)
position fixed > .maintop > *:not(:last-child)
z-index 1000 margin-bottom 16px
top 0
left 0
width 100%
height 48px
background #f7f7f7
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
> a > .maintop
display block min-height 64px
position absolute margin-bottom 16px
z-index 1001
top 0
right 0
padding 0 16px
line-height 48px
text-decoration none
color $theme-color-foreground
background $theme-color
transition background 0.1s ease
&:hover > *:not(main)
background lighten($theme-color, 10%) width 275px
&:active
background darken($theme-color, 10%)
transition background 0s ease
> [data-fa]
margin-right 8px
> div
display flex
margin 0 auto
max-width 1200px - 32px
> div
width 50%
&.adder
> p
display inline
line-height 48px
&.trash
border-left solid 1px #ddd
> div
width 100%
height 100%
> p
position absolute
top 0
left 0
width 100%
line-height 48px
margin 0
text-align center
pointer-events none
> .main
display flex
justify-content center
margin 0 auto
max-width 1200px
> * > *
.customize-container padding 16px 0 16px 0
cursor move
> * > *:not(:last-child)
pointer-events none margin-bottom 16px
> .left
padding-left 16px
> .right
padding-right 16px
@media (max-width 1100px)
> *:not(main)
display none
> main > main
padding 16px float none
width calc(100% - 275px * 2) width 100%
max-width 700px
> *:not(.maintop):not(:last-child) margin 0 auto
> .maintop > *:not(:last-child)
margin-bottom 16px
> .maintop
min-height 64px
margin-bottom 16px
> *:not(main)
width 275px
> *
padding 16px 0 16px 0
> *:not(:last-child)
margin-bottom 16px
> .left
padding-left 16px
> .right
padding-right 16px
@media (max-width 1100px)
> *:not(main)
display none
> main
float none
width 100%
max-width 700px
margin 0 auto
</style> </style>

2
src/web/app/desktop/views/components/index.ts
View file

@ -1,5 +1,7 @@
import Vue from 'vue'; import Vue from 'vue';
import ui from './ui.vue'; import ui from './ui.vue';
import home from './home.vue';
Vue.component('mk-ui', ui); Vue.component('mk-ui', ui);
Vue.component('mk-home', home);