Sharkey/src/client/app/desktop/views/components/home.vue

401 lines
8.7 KiB
Vue
Raw Normal View History

2018-02-09 02:46:23 +02:00
<template>
2018-02-11 06:02:35 +02:00
<div class="mk-home" :data-customize="customize">
2018-02-09 06:11:30 +02:00
<div class="customize" v-if="customize">
<router-link to="/">%fa:check%%i18n:@done%</router-link>
2018-02-09 06:11:30 +02:00
<div>
<div class="adder">
<p>%i18n:@add-widget%</p>
2018-02-11 06:02:35 +02:00
<select v-model="widgetAdderSelected">
2018-05-27 16:39:20 +03:00
<option value="profile">%i18n:common.widgets.profile%</option>
2018-05-29 17:13:39 +03:00
<option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
2018-05-27 16:39:20 +03:00
<option value="calendar">%i18n:common.widgets.calendar%</option>
<option value="timemachine">%i18n:common.widgets.timemachine%</option>
<option value="activity">%i18n:common.widgets.activity%</option>
<option value="rss">%i18n:common.widgets.rss%</option>
<option value="trends">%i18n:common.widgets.trends%</option>
<option value="photo-stream">%i18n:common.widgets.photo-stream%</option>
<option value="slideshow">%i18n:common.widgets.slideshow%</option>
<option value="version">%i18n:common.widgets.version%</option>
<option value="broadcast">%i18n:common.widgets.broadcast%</option>
<option value="notifications">%i18n:common.widgets.notifications%</option>
<option value="users">%i18n:common.widgets.users%</option>
<option value="polls">%i18n:common.widgets.polls%</option>
<option value="post-form">%i18n:common.widgets.post-form%</option>
<option value="messaging">%i18n:common.widgets.messaging%</option>
<option value="memo">%i18n:common.widgets.memo%</option>
2018-06-11 03:11:32 +03:00
<option value="hashtags">%i18n:common.widgets.hashtags%</option>
2018-06-08 22:14:26 +03:00
<option value="posts-monitor">%i18n:common.widgets.posts-monitor%</option>
2018-05-27 16:39:20 +03:00
<option value="server">%i18n:common.widgets.server%</option>
<option value="donation">%i18n:common.widgets.donation%</option>
<option value="nav">%i18n:common.widgets.nav%</option>
<option value="tips">%i18n:common.widgets.tips%</option>
2018-02-09 06:11:30 +02:00
</select>
<button @click="addWidget">%i18n:@add%</button>
2018-02-09 06:11:30 +02:00
</div>
<div class="trash">
2018-02-21 17:07:37 +02:00
<x-draggable v-model="trash" :options="{ group: 'x' }" @add="onTrash"></x-draggable>
<p>%i18n:common.trash%</p>
2018-02-09 06:11:30 +02:00
</div>
</div>
</div>
<div class="main">
2018-02-21 17:07:37 +02:00
<template v-if="customize">
<x-draggable v-for="place in ['left', 'right']"
:list="widgets[place]"
: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" :is-customize-mode="true" platform="desktop"/>
2018-02-21 17:07:37 +02:00
</div>
</x-draggable>
<div class="main">
2018-02-22 19:06:35 +02:00
<a @click="hint">カスタマイズのヒント</a>
<div>
2018-05-27 07:49:09 +03:00
<mk-post-form v-if="$store.state.settings.showPostFormOnTopOfTl"/>
2018-02-22 19:06:35 +02:00
<mk-timeline ref="tl" @loaded="onTlLoaded"/>
</div>
2018-02-21 17:07:37 +02:00
</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" :ref="widget.id" :widget="widget" @chosen="warp" platform="desktop"/>
2018-02-21 17:07:37 +02:00
</div>
<div class="main">
2018-05-31 10:44:11 +03:00
<mk-post-form class="form" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
2018-06-23 06:09:09 +03:00
<mk-timeline class="tl" ref="tl" @loaded="onTlLoaded" v-if="mode == 'timeline'"/>
2018-02-21 17:07:37 +02:00
</div>
</template>
2018-02-09 02:46:23 +02:00
</div>
2018-02-09 06:11:30 +02:00
</div>
2018-02-09 02:46:23 +02:00
</template>
2018-02-11 06:09:46 +02:00
<script lang="ts">
2018-02-11 06:02:35 +02:00
import Vue from 'vue';
2018-02-21 17:07:37 +02:00
import * as XDraggable from 'vuedraggable';
2018-02-11 06:09:46 +02:00
import * as uuid from 'uuid';
2018-02-09 06:11:30 +02:00
2018-06-05 20:48:26 +03:00
const defaultDesktopHomeWidgets = {
left: [
'profile',
'calendar',
'activity',
'rss',
2018-06-17 00:57:50 +03:00
'hashtags',
2018-06-05 20:48:26 +03:00
'photo-stream',
'version'
],
right: [
'broadcast',
'notifications',
'users',
'polls',
'server',
'donation',
'nav',
'tips'
]
};
//#region Construct home data
const _defaultDesktopHomeWidgets = [];
defaultDesktopHomeWidgets.left.forEach(widget => {
_defaultDesktopHomeWidgets.push({
name: widget,
id: uuid(),
place: 'left',
data: {}
});
});
defaultDesktopHomeWidgets.right.forEach(widget => {
_defaultDesktopHomeWidgets.push({
name: widget,
id: uuid(),
place: 'right',
data: {}
});
});
//#endregion
2018-02-11 06:02:35 +02:00
export default Vue.extend({
2018-02-21 17:07:37 +02:00
components: {
XDraggable
},
2018-04-29 11:17:15 +03:00
2018-02-09 06:11:30 +02:00
props: {
2018-04-07 21:58:11 +03:00
customize: {
type: Boolean,
default: false
},
2018-02-09 06:11:30 +02:00
mode: {
type: String,
default: 'timeline'
}
},
2018-04-29 11:17:15 +03:00
2018-02-09 06:11:30 +02:00
data() {
return {
2018-02-24 00:49:03 +02:00
connection: null,
connectionId: null,
2018-02-21 17:07:37 +02:00
widgetAdderSelected: null,
2018-04-29 11:17:15 +03:00
trash: []
2018-02-09 06:11:30 +02:00
};
},
2018-04-29 11:17:15 +03:00
2018-02-19 11:26:20 +02:00
computed: {
2018-04-29 11:17:15 +03:00
home(): any[] {
2018-06-05 21:03:56 +03:00
return this.$store.state.settings.home || [];
2018-02-21 13:55:03 +02:00
},
2018-02-21 17:07:37 +02:00
left(): any[] {
2018-02-21 13:55:03 +02:00
return this.home.filter(w => w.place == 'left');
2018-02-19 11:26:20 +02:00
},
2018-02-21 17:07:37 +02:00
right(): any[] {
2018-02-21 13:55:03 +02:00
return this.home.filter(w => w.place == 'right');
2018-04-29 11:17:15 +03:00
},
widgets(): any {
return {
left: this.left,
right: this.right
};
2018-02-19 11:26:20 +02:00
}
},
2018-04-29 11:17:15 +03:00
2018-06-05 20:48:26 +03:00
created() {
2018-06-05 21:03:56 +03:00
if (this.$store.state.settings.home == null) {
2018-06-05 20:48:26 +03:00
this.api('i/update_home', {
home: _defaultDesktopHomeWidgets
2018-06-05 21:03:56 +03:00
}).then(() => {
this.$store.commit('settings/setHome', _defaultDesktopHomeWidgets);
2018-06-05 20:48:26 +03:00
});
}
},
2018-02-24 00:49:03 +02:00
mounted() {
this.connection = (this as any).os.stream.getConnection();
this.connectionId = (this as any).os.stream.use();
},
2018-04-29 11:17:15 +03:00
2018-02-24 00:49:03 +02:00
beforeDestroy() {
(this as any).os.stream.dispose(this.connectionId);
},
2018-04-29 11:17:15 +03:00
2018-02-09 06:11:30 +02:00
methods: {
2018-02-22 19:06:35 +02:00
hint() {
(this as any).apis.dialog({
title: '%fa:info-circle%%i18n:common.customizationtips.title%',
text: '<p>%i18n:common.customizationtips.paragraph1%</p>' +
'<p>%i18n:common.customizationtips.paragraph2%</p>' +
'<p>%i18n:common.customizationtips.paragraph3%</p>' +
'<p>%i18n:common.customizationtips.paragraph4%</p>',
2018-02-22 19:06:35 +02:00
actions: [{
text: 'Got it!'
}]
});
},
2018-04-29 11:17:15 +03:00
2018-02-09 06:11:30 +02:00
onTlLoaded() {
this.$emit('loaded');
},
2018-04-29 11:17:15 +03:00
2018-02-09 06:11:30 +02:00
onWidgetContextmenu(widgetId) {
2018-02-21 18:08:49 +02:00
const w = (this.$refs[widgetId] as any)[0];
if (w.func) w.func();
2018-02-09 06:11:30 +02:00
},
2018-04-29 11:17:15 +03:00
2018-02-21 17:07:37 +02:00
onWidgetSort() {
this.saveHome();
},
2018-04-29 11:17:15 +03:00
2018-02-21 17:07:37 +02:00
onTrash(evt) {
this.saveHome();
},
2018-04-29 11:17:15 +03:00
2018-02-09 06:11:30 +02:00
addWidget() {
2018-04-29 11:17:15 +03:00
this.$store.dispatch('settings/addHomeWidget', {
2018-02-11 06:02:35 +02:00
name: this.widgetAdderSelected,
2018-02-09 06:11:30 +02:00
id: uuid(),
place: 'left',
data: {}
2018-04-29 11:17:15 +03:00
});
2018-02-09 06:11:30 +02:00
},
2018-04-29 11:17:15 +03:00
2018-02-09 06:11:30 +02:00
saveHome() {
2018-02-21 17:07:37 +02:00
const left = this.widgets.left;
const right = this.widgets.right;
2018-04-29 11:17:15 +03:00
this.$store.commit('settings/setHome', left.concat(right));
2018-02-21 17:07:37 +02:00
left.forEach(w => w.place = 'left');
right.forEach(w => w.place = 'right');
2018-02-18 05:35:18 +02:00
(this as any).api('i/update_home', {
2018-02-21 08:30:03 +02:00
home: this.home
2018-02-11 06:02:35 +02:00
});
2018-02-09 06:11:30 +02:00
},
2018-04-29 11:17:15 +03:00
2018-02-19 11:26:20 +02:00
warp(date) {
2018-02-24 16:56:57 +02:00
(this.$refs.tl as any).warp(date);
2018-02-09 06:11:30 +02:00
}
}
2018-02-11 06:02:35 +02:00
});
2018-02-09 06:11:30 +02:00
</script>
2018-02-09 02:46:23 +02:00
<style lang="stylus" scoped>
2018-03-03 06:47:55 +02:00
@import '~const.styl'
2018-04-21 04:10:04 +03:00
root(isDark)
2018-02-11 06:02:35 +02:00
display block
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
&[data-customize]
padding-top 48px
background-image url('/assets/desktop/grid.svg')
2018-02-09 02:46:23 +02:00
2018-02-21 17:21:07 +02:00
> .main > .main
2018-02-22 19:06:35 +02:00
> a
display block
margin-bottom 8px
text-align center
2018-02-09 02:46:23 +02:00
2018-02-22 19:06:35 +02:00
> div
cursor not-allowed !important
> *
pointer-events none
2018-02-11 06:02:35 +02:00
&:not([data-customize])
> .main > *:empty
display none
> .customize
position fixed
z-index 1000
top 0
left 0
width 100%
height 48px
2018-04-21 04:10:04 +03:00
color isDark ? #fff : #000
background isDark ? #313543 : #f7f7f7
2018-04-29 02:51:17 +03:00
box-shadow 0 1px 1px rgba(#000, 0.075)
2018-02-11 06:02:35 +02:00
> 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
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
&:hover
background lighten($theme-color, 10%)
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
&:active
background darken($theme-color, 10%)
transition background 0s ease
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> [data-fa]
margin-right 8px
> div
2018-02-09 02:46:23 +02:00
display flex
margin 0 auto
2018-04-30 05:59:58 +03:00
max-width 1220px - 32px
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> div
width 50%
&.adder
> p
display inline
line-height 48px
&.trash
2018-04-21 04:10:04 +03:00
border-left solid 1px isDark ? #1c2023 : #ddd
2018-02-11 06:02:35 +02:00
> div
width 100%
height 100%
> p
position absolute
top 0
left 0
width 100%
line-height 48px
margin 0
text-align center
2018-02-09 02:46:23 +02:00
pointer-events none
2018-02-11 06:02:35 +02:00
> .main
display flex
justify-content center
margin 0 auto
2018-04-30 05:59:58 +03:00
max-width 1220px
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> *
.customize-container
cursor move
2018-02-22 14:29:04 +02:00
border-radius 6px
&:hover
box-shadow 0 0 8px rgba(64, 120, 200, 0.3)
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> *
pointer-events none
2018-02-09 02:46:23 +02:00
2018-02-19 11:26:20 +02:00
> .main
2018-02-11 06:02:35 +02:00
padding 16px
width calc(100% - 275px * 2)
2018-02-21 17:07:37 +02:00
order 2
2018-02-09 02:46:23 +02:00
2018-05-31 10:44:11 +03:00
> .form
2018-02-22 19:06:35 +02:00
margin-bottom 16px
2018-04-21 04:10:04 +03:00
border solid 1px rgba(#000, 0.075)
2018-02-22 19:06:35 +02:00
border-radius 4px
2018-05-31 10:44:11 +03:00
@media (max-width 700px)
padding 0
> .tl
border none
border-radius 0
2018-02-22 15:03:44 +02:00
> *:not(.main)
2018-02-11 06:02:35 +02:00
width 275px
2018-02-19 11:26:20 +02:00
padding 16px 0 16px 0
2018-02-09 02:46:23 +02:00
2018-02-19 11:26:20 +02:00
> *:not(:last-child)
margin-bottom 16px
2018-02-09 02:46:23 +02:00
2018-02-11 06:02:35 +02:00
> .left
padding-left 16px
2018-02-21 17:07:37 +02:00
order 1
2018-02-11 06:02:35 +02:00
> .right
padding-right 16px
2018-02-21 17:07:37 +02:00
order 3
2018-02-11 06:02:35 +02:00
@media (max-width 1100px)
2018-02-22 15:03:44 +02:00
> *:not(.main)
2018-02-11 06:02:35 +02:00
display none
2018-02-19 11:26:20 +02:00
> .main
2018-02-11 06:02:35 +02:00
float none
width 100%
max-width 700px
margin 0 auto
2018-02-09 02:46:23 +02:00
2018-04-21 04:10:04 +03:00
.mk-home[data-darkmode]
root(true)
.mk-home:not([data-darkmode])
root(false)
2018-02-09 02:46:23 +02:00
</style>