oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Pull Requests Packages Releases 2 Activity

wip

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/web/app/common/define-widget.ts
View File

@ -6,22 +6,13 @@ export default function<T extends object>(data: {
}) {
return Vue.extend({
props: {
wid: {
type: String,
required: true
},
wplace: {
type: String,
required: true
},
wprops: {
type: Object,
required: false
widget: {
type: Object
}
},
computed: {
id(): string {
return this.wid;
return this.widget.id;
}
},
data() {
@ -32,19 +23,19 @@ export default function<T extends object>(data: {
watch: {
props(newProps, oldProps) {
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,
data: newProps
}).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() {
if (this.props) {
Object.keys(this.props).forEach(prop => {
if (this.wprops.hasOwnProperty(prop)) {
this.props[prop] = this.wprops[prop];
if (this.widget.data.hasOwnProperty(prop)) {
this.props[prop] = this.widget.data[prop];
}
});
}

22
src/web/app/common/views/components/index.ts
View File

@ -5,6 +5,7 @@ import signup from './signup.vue';
import forkit from './forkit.vue';
import nav from './nav.vue';
import postHtml from './post-html';
import pollEditor from './poll-editor.vue';
import reactionIcon from './reaction-icon.vue';
import reactionsViewer from './reactions-viewer.vue';
import time from './time.vue';
@ -13,18 +14,17 @@ import uploader from './uploader.vue';
import specialMessage from './special-message.vue';
import streamIndicator from './stream-indicator.vue';
import ellipsis from './ellipsis.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 messaging from './messaging.vue';
import messagingForm from './messaging-form.vue';
import messagingRoom from './messaging-room.vue';
import messagingMessage from './messaging-message.vue';
Vue.component('mk-signin', signin);
Vue.component('mk-signup', signup);
Vue.component('mk-forkit', forkit);
Vue.component('mk-nav', nav);
Vue.component('mk-post-html', postHtml);
Vue.component('mk-poll-editor', pollEditor);
Vue.component('mk-reaction-icon', reactionIcon);
Vue.component('mk-reactions-viewer', reactionsViewer);
Vue.component('mk-time', time);
@ -33,9 +33,7 @@ Vue.component('mk-uploader', uploader);
Vue.component('mk-special-message', specialMessage);
Vue.component('mk-stream-indicator', streamIndicator);
Vue.component('mk-ellipsis', ellipsis);
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('mk-messaging', messaging);
Vue.component('mk-messaging-form', messagingForm);
Vue.component('mk-messaging-room', messagingRoom);
Vue.component('mk-messaging-message', messagingMessage);

18
src/web/app/common/views/components/messaging-form.vue
View File

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

2
src/web/app/common/views/components/messaging.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="mk-messaging" :data-compact="compact">
<div class="search" v-if="!opts.compact">
<div class="search" v-if="!compact">
<div class="form">
<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%"/>

66
src/web/app/desktop/-tags/home-widgets/notifications.tag
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>

10
src/web/app/desktop/views/components/drive-window.vue
View File

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

1
src/web/app/desktop/views/components/follow-button.vue
View File

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

12
src/web/app/desktop/views/components/home.vue
View File

@ -41,10 +41,10 @@
<div ref="left" data-place="left">
<template v-for="widget in leftWidgets">
<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>
<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>
</div>
@ -53,10 +53,10 @@
<div class="maintop" ref="maintop" data-place="main" v-if="customize">
<template v-for="widget in centerWidgets">
<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>
<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>
</div>
@ -67,10 +67,10 @@
<div ref="right" data-place="right">
<template v-for="widget in rightWidgets">
<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>
<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>
</div>

14
src/web/app/desktop/views/components/index.ts
View File

@ -32,6 +32,13 @@ import driveFile from './drive-file.vue';
import driveFolder from './drive-folder.vue';
import driveNavFolder from './drive-nav-folder.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-header', uiHeader);
@ -65,3 +72,10 @@ Vue.component('mk-drive-file', driveFile);
Vue.component('mk-drive-folder', driveFolder);
Vue.component('mk-drive-nav-folder', driveNavFolder);
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);

4
src/web/app/desktop/views/components/messaging-window.vue
View File

@ -1,5 +1,5 @@
<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>
<mk-messaging :class="$style.content" @navigate="navigate"/>
</mk-window>
@ -7,6 +7,8 @@
<script lang="ts">
import Vue from 'vue';
import MkMessagingRoomWindow from './messaging-room-window.vue';
export default Vue.extend({
methods: {
navigate(user) {

5
src/web/app/desktop/views/components/settings-window.vue
View File

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

4
src/web/app/desktop/views/components/ui-header-account.vue
View File

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

4
src/web/app/desktop/views/components/ui-header-nav.vue
View File

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

2
src/web/app/common/views/components/widgets/calendar.vue → src/web/app/desktop/views/components/widgets/calendar.vue
View File

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

2
src/web/app/common/views/components/widgets/donation.vue → src/web/app/desktop/views/components/widgets/donation.vue
View File

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

2
src/web/app/desktop/views/components/widgets/messaging.vue
View File

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

2
src/web/app/common/views/components/widgets/nav.vue → src/web/app/desktop/views/components/widgets/nav.vue
View File

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

70
src/web/app/desktop/views/components/widgets/notifications.vue Normal file
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>

2
src/web/app/common/views/components/widgets/photo-stream.vue → src/web/app/desktop/views/components/widgets/photo-stream.vue
View File

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

2
src/web/app/common/views/components/widgets/profile.vue → src/web/app/desktop/views/components/widgets/profile.vue
View File

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

2
src/web/app/common/views/components/widgets/slideshow.vue → src/web/app/desktop/views/components/widgets/slideshow.vue
View File

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

2
src/web/app/common/views/components/widgets/tips.vue → src/web/app/desktop/views/components/widgets/tips.vue
View File

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