This commit is contained in:
syuilo 2018-02-18 23:51:41 +09:00
parent 2a54802efa
commit e01b9d3f16
22 changed files with 142 additions and 129 deletions

View File

@ -6,22 +6,13 @@ export default function<T extends object>(data: {
}) { }) {
return Vue.extend({ return Vue.extend({
props: { props: {
wid: { widget: {
type: String, type: Object
required: true
},
wplace: {
type: String,
required: true
},
wprops: {
type: Object,
required: false
} }
}, },
computed: { computed: {
id(): string { id(): string {
return this.wid; return this.widget.id;
} }
}, },
data() { data() {
@ -32,19 +23,19 @@ export default function<T extends object>(data: {
watch: { watch: {
props(newProps, oldProps) { props(newProps, oldProps) {
if (JSON.stringify(newProps) == JSON.stringify(oldProps)) return; if (JSON.stringify(newProps) == JSON.stringify(oldProps)) return;
this.$root.$data.os.api('i/update_home', { (this as any).api('i/update_home', {
id: this.id, id: this.id,
data: newProps data: newProps
}).then(() => { }).then(() => {
this.$root.$data.os.i.client_settings.home.find(w => w.id == this.id).data = newProps; (this as any).os.i.client_settings.home.find(w => w.id == this.id).data = newProps;
}); });
} }
}, },
created() { created() {
if (this.props) { if (this.props) {
Object.keys(this.props).forEach(prop => { Object.keys(this.props).forEach(prop => {
if (this.wprops.hasOwnProperty(prop)) { if (this.widget.data.hasOwnProperty(prop)) {
this.props[prop] = this.wprops[prop]; this.props[prop] = this.widget.data[prop];
} }
}); });
} }

View File

@ -5,6 +5,7 @@ import signup from './signup.vue';
import forkit from './forkit.vue'; import forkit from './forkit.vue';
import nav from './nav.vue'; import nav from './nav.vue';
import postHtml from './post-html'; import postHtml from './post-html';
import pollEditor from './poll-editor.vue';
import reactionIcon from './reaction-icon.vue'; import reactionIcon from './reaction-icon.vue';
import reactionsViewer from './reactions-viewer.vue'; import reactionsViewer from './reactions-viewer.vue';
import time from './time.vue'; import time from './time.vue';
@ -13,18 +14,17 @@ import uploader from './uploader.vue';
import specialMessage from './special-message.vue'; import specialMessage from './special-message.vue';
import streamIndicator from './stream-indicator.vue'; import streamIndicator from './stream-indicator.vue';
import ellipsis from './ellipsis.vue'; import ellipsis from './ellipsis.vue';
import wNav from './widgets/nav.vue'; import messaging from './messaging.vue';
import wCalendar from './widgets/calendar.vue'; import messagingForm from './messaging-form.vue';
import wPhotoStream from './widgets/photo-stream.vue'; import messagingRoom from './messaging-room.vue';
import wSlideshow from './widgets/slideshow.vue'; import messagingMessage from './messaging-message.vue';
import wTips from './widgets/tips.vue';
import wDonation from './widgets/donation.vue';
Vue.component('mk-signin', signin); Vue.component('mk-signin', signin);
Vue.component('mk-signup', signup); Vue.component('mk-signup', signup);
Vue.component('mk-forkit', forkit); Vue.component('mk-forkit', forkit);
Vue.component('mk-nav', nav); Vue.component('mk-nav', nav);
Vue.component('mk-post-html', postHtml); Vue.component('mk-post-html', postHtml);
Vue.component('mk-poll-editor', pollEditor);
Vue.component('mk-reaction-icon', reactionIcon); Vue.component('mk-reaction-icon', reactionIcon);
Vue.component('mk-reactions-viewer', reactionsViewer); Vue.component('mk-reactions-viewer', reactionsViewer);
Vue.component('mk-time', time); Vue.component('mk-time', time);
@ -33,9 +33,7 @@ Vue.component('mk-uploader', uploader);
Vue.component('mk-special-message', specialMessage); Vue.component('mk-special-message', specialMessage);
Vue.component('mk-stream-indicator', streamIndicator); Vue.component('mk-stream-indicator', streamIndicator);
Vue.component('mk-ellipsis', ellipsis); Vue.component('mk-ellipsis', ellipsis);
Vue.component('mkw-nav', wNav); Vue.component('mk-messaging', messaging);
Vue.component('mkw-calendar', wCalendar); Vue.component('mk-messaging-form', messagingForm);
Vue.component('mkw-photo-stream', wPhotoStream); Vue.component('mk-messaging-room', messagingRoom);
Vue.component('mkw-slideshoe', wSlideshow); Vue.component('mk-messaging-message', messagingMessage);
Vue.component('mkw-tips', wTips);
Vue.component('mkw-donation', wDonation);

View File

@ -23,7 +23,7 @@ export default Vue.extend({
data() { data() {
return { return {
text: null, text: null,
files: [], file: null,
sending: false sending: false
}; };
}, },
@ -49,17 +49,17 @@ export default Vue.extend({
}, },
chooseFileFromDrive() { chooseFileFromDrive() {
const w = new MkDriveChooserWindow({ (this as any).apis.chooseDriveFile({
propsData: { multiple: false
multiple: true }).then(file => {
} this.file = file;
}).$mount();
w.$once('selected', files => {
files.forEach(this.addFile);
}); });
document.body.appendChild(w.$el);
}, },
upload() {
// TODO
}
send() { send() {
this.sending = true; this.sending = true;
(this as any).api('messaging/messages/create', { (this as any).api('messaging/messages/create', {

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-messaging" :data-compact="compact"> <div class="mk-messaging" :data-compact="compact">
<div class="search" v-if="!opts.compact"> <div class="search" v-if="!compact">
<div class="form"> <div class="form">
<label for="search-input">%fa:search%</label> <label for="search-input">%fa:search%</label>
<input v-model="q" type="search" @input="search" @keydown="onSearchKeydown" placeholder="%i18n:common.tags.mk-messaging.search-user%"/> <input v-model="q" type="search" @input="search" @keydown="onSearchKeydown" placeholder="%i18n:common.tags.mk-messaging.search-user%"/>

View File

@ -1,66 +0,0 @@
<mk-notifications-home-widget>
<template v-if="!data.compact">
<p class="title">%fa:R bell%%i18n:desktop.tags.mk-notifications-home-widget.title%</p>
<button @click="settings" title="%i18n:desktop.tags.mk-notifications-home-widget.settings%">%fa:cog%</button>
</template>
<mk-notifications/>
<style lang="stylus" scoped>
:scope
display block
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> .title
z-index 1
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07)
> [data-fa]
margin-right 4px
> button
position absolute
z-index 2
top 0
right 0
padding 0
width 42px
font-size 0.9em
line-height 42px
color #ccc
&:hover
color #aaa
&:active
color #999
> mk-notifications
max-height 300px
overflow auto
</style>
<script lang="typescript">
this.data = {
compact: false
};
this.mixin('widget');
this.settings = () => {
const w = riot.mount(document.body.appendChild(document.createElement('mk-settings-window')))[0];
w.switch('notification');
};
this.func = () => {
this.data.compact = !this.data.compact;
this.save();
};
</script>
</mk-notifications-home-widget>

View File

@ -1,9 +1,9 @@
<template> <template>
<mk-window ref="window" @closed="$destroy" width="800px" height="500px" :popout="popout"> <mk-window ref="window" @closed="$destroy" width="800px" height="500px" :popout="popout">
<span slot="header" :class="$style.header"> <template slot="header">
<p class="info" v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> %i18n:desktop.tags.mk-drive-browser-window.used%</p> <p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> %i18n:desktop.tags.mk-drive-browser-window.used%</p>
%fa:cloud%%i18n:desktop.tags.mk-drive-browser-window.drive% <span: class="$style.title">%fa:cloud%%i18n:desktop.tags.mk-drive-browser-window.drive%</span>
</span> </template>
<mk-drive-browser multiple :folder="folder" ref="browser"/> <mk-drive-browser multiple :folder="folder" ref="browser"/>
</mk-window> </mk-window>
</template> </template>
@ -38,7 +38,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" module> <style lang="stylus" module>
.header .title
> [data-fa] > [data-fa]
margin-right 4px margin-right 4px

View File

@ -1,7 +1,6 @@
<template> <template>
<button class="mk-follow-button" <button class="mk-follow-button"
:class="{ wait, follow: !user.is_following, unfollow: user.is_following }" :class="{ wait, follow: !user.is_following, unfollow: user.is_following }"
v-if="!init"
@click="onClick" @click="onClick"
:disabled="wait" :disabled="wait"
:title="user.is_following ? 'フォロー解除' : 'フォローする'" :title="user.is_following ? 'フォロー解除' : 'フォローする'"

View File

@ -41,10 +41,10 @@
<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.stop.prevent="onWidgetContextmenu(widget.id)"> <div class="customize-container" v-if="customize" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
<component :is="'mk-hw-' + widget.name" :widget="widget" :ref="widget.id"/> <component :is="'mkw-' + widget.name" :widget="widget" :ref="widget.id"/>
</div> </div>
<template v-else> <template v-else>
<component :is="'mk-hw-' + widget.name" :key="widget.id" :widget="widget" :ref="widget.id"/> <component :is="'mkw-' + widget.name" :key="widget.id" :widget="widget" :ref="widget.id"/>
</template> </template>
</template> </template>
</div> </div>
@ -53,10 +53,10 @@
<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.stop.prevent="onWidgetContextmenu(widget.id)"> <div class="customize-container" v-if="customize" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
<component :is="'mk-hw-' + widget.name" :widget="widget" :ref="widget.id"/> <component :is="'mkw-' + widget.name" :widget="widget" :ref="widget.id"/>
</div> </div>
<template v-else> <template v-else>
<component :is="'mk-hw-' + widget.name" :key="widget.id" :widget="widget" :ref="widget.id"/> <component :is="'mkw-' + widget.name" :key="widget.id" :widget="widget" :ref="widget.id"/>
</template> </template>
</template> </template>
</div> </div>
@ -67,10 +67,10 @@
<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.stop.prevent="onWidgetContextmenu(widget.id)"> <div class="customize-container" v-if="customize" :key="widget.id" @contextmenu.stop.prevent="onWidgetContextmenu(widget.id)">
<component :is="'mk-hw-' + widget.name" :widget="widget" :ref="widget.id"/> <component :is="'mkw-' + widget.name" :widget="widget" :ref="widget.id"/>
</div> </div>
<template v-else> <template v-else>
<component :is="'mk-hw-' + widget.name" :key="widget.id" :widget="widget" :ref="widget.id"/> <component :is="'mkw-' + widget.name" :key="widget.id" :widget="widget" :ref="widget.id"/>
</template> </template>
</template> </template>
</div> </div>

View File

@ -32,6 +32,13 @@ import driveFile from './drive-file.vue';
import driveFolder from './drive-folder.vue'; import driveFolder from './drive-folder.vue';
import driveNavFolder from './drive-nav-folder.vue'; import driveNavFolder from './drive-nav-folder.vue';
import contextMenuMenu from './context-menu-menu.vue'; import contextMenuMenu from './context-menu-menu.vue';
import wNav from './widgets/nav.vue';
import wCalendar from './widgets/calendar.vue';
import wPhotoStream from './widgets/photo-stream.vue';
import wSlideshow from './widgets/slideshow.vue';
import wTips from './widgets/tips.vue';
import wDonation from './widgets/donation.vue';
import wNotifications from './widgets/notifications.vue';
Vue.component('mk-ui', ui); Vue.component('mk-ui', ui);
Vue.component('mk-ui-header', uiHeader); Vue.component('mk-ui-header', uiHeader);
@ -65,3 +72,10 @@ Vue.component('mk-drive-file', driveFile);
Vue.component('mk-drive-folder', driveFolder); Vue.component('mk-drive-folder', driveFolder);
Vue.component('mk-drive-nav-folder', driveNavFolder); Vue.component('mk-drive-nav-folder', driveNavFolder);
Vue.component('context-menu-menu', contextMenuMenu); Vue.component('context-menu-menu', contextMenuMenu);
Vue.component('mkw-nav', wNav);
Vue.component('mkw-calendar', wCalendar);
Vue.component('mkw-photo-stream', wPhotoStream);
Vue.component('mkw-slideshoe', wSlideshow);
Vue.component('mkw-tips', wTips);
Vue.component('mkw-donation', wDonation);
Vue.component('mkw-notifications', wNotifications);

View File

@ -1,5 +1,5 @@
<template> <template>
<mk-window ref="window" width='500px' height='560px' @closed="$destroy"> <mk-window ref="window" width="500px" height="560px" @closed="$destroy">
<span slot="header" :class="$style.header">%fa:comments%メッセージ</span> <span slot="header" :class="$style.header">%fa:comments%メッセージ</span>
<mk-messaging :class="$style.content" @navigate="navigate"/> <mk-messaging :class="$style.content" @navigate="navigate"/>
</mk-window> </mk-window>
@ -7,6 +7,8 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import MkMessagingRoomWindow from './messaging-room-window.vue';
export default Vue.extend({ export default Vue.extend({
methods: { methods: {
navigate(user) { navigate(user) {

View File

@ -7,6 +7,11 @@
</mk-window> </mk-window>
</template> </template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({});
</script>
<style lang="stylus" module> <style lang="stylus" module>
.header .header
> [data-fa] > [data-fa]

View File

@ -33,6 +33,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import MkSettingsWindow from './settings-window.vue'; import MkSettingsWindow from './settings-window.vue';
import MkDriveWindow from './drive-window.vue';
import contains from '../../../common/scripts/contains'; import contains from '../../../common/scripts/contains';
import signout from '../../../common/scripts/signout'; import signout from '../../../common/scripts/signout';
@ -69,8 +70,7 @@ export default Vue.extend({
}, },
drive() { drive() {
this.close(); this.close();
// TODO document.body.appendChild(new MkDriveWindow().$mount().$el);
//document.body.appendChild(new MkDriveWindow().$mount().$el);
}, },
settings() { settings() {
this.close(); this.close();

View File

@ -34,6 +34,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import MkMessagingWindow from './messaging-window.vue';
export default Vue.extend({ export default Vue.extend({
data() { data() {
@ -76,8 +77,7 @@ export default Vue.extend({
}, },
messaging() { messaging() {
// TODO document.body.appendChild(new MkMessagingWindow().$mount().$el);
//document.body.appendChild(new MkMessagingWindow().$mount().$el);
} }
} }
}); });

View File

@ -35,7 +35,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import define from '../../../define-widget'; import define from '../../../../common/define-widget';
export default define({ export default define({
name: 'calendar', name: 'calendar',
props: { props: {

View File

@ -12,7 +12,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import define from '../../../define-widget'; import define from '../../../../common/define-widget';
export default define({ export default define({
name: 'donation' name: 'donation'
}); });

View File

@ -6,7 +6,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import define from '../../../define-widget'; import define from '../../../../common/define-widget';
export default define({ export default define({
name: 'messaging', name: 'messaging',
props: { props: {

View File

@ -5,7 +5,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import define from '../../../define-widget'; import define from '../../../../common/define-widget';
export default define({ export default define({
name: 'nav' name: 'nav'
}); });

View File

@ -0,0 +1,70 @@
<template>
<div class="mkw-notifications">
<template v-if="!props.compact">
<p class="title">%fa:R bell%%i18n:desktop.tags.mk-notifications-home-widget.title%</p>
<button @click="settings" title="%i18n:desktop.tags.mk-notifications-home-widget.settings%">%fa:cog%</button>
</template>
<mk-notifications/>
</div>
</template>
<script lang="ts">
import define from '../../../../common/define-widget';
export default define({
name: 'notifications',
props: {
compact: false
}
}).extend({
methods: {
settings() {
alert('not implemented yet');
},
func() {
this.props.compact = !this.props.compact;
}
}
});
</script>
<style lang="stylus" scoped>
.mkw-notifications
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> .title
z-index 1
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07)
> [data-fa]
margin-right 4px
> button
position absolute
z-index 2
top 0
right 0
padding 0
width 42px
font-size 0.9em
line-height 42px
color #ccc
&:hover
color #aaa
&:active
color #999
> .mk-notifications
max-height 300px
overflow auto
</style>

View File

@ -10,7 +10,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import define from '../../../define-widget'; import define from '../../../../common/define-widget';
export default define({ export default define({
name: 'photo-stream', name: 'photo-stream',
props: { props: {

View File

@ -21,7 +21,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import define from '../../../define-widget'; import define from '../../../../common/define-widget';
export default define({ export default define({
name: 'profile', name: 'profile',
props: { props: {

View File

@ -12,7 +12,7 @@
<script lang="ts"> <script lang="ts">
import * as anime from 'animejs'; import * as anime from 'animejs';
import define from '../../../define-widget'; import define from '../../../../common/define-widget';
export default define({ export default define({
name: 'slideshow', name: 'slideshow',
props: { props: {

View File

@ -6,7 +6,7 @@
<script lang="ts"> <script lang="ts">
import * as anime from 'animejs'; import * as anime from 'animejs';
import define from '../../../define-widget'; import define from '../../../../common/define-widget';
const tips = [ const tips = [
'<kbd>t</kbd>でタイムラインにフォーカスできます', '<kbd>t</kbd>でタイムラインにフォーカスできます',