This commit is contained in:
syuilo 2017-11-12 18:23:33 +09:00
parent 800d409949
commit ca26fc7363
11 changed files with 179 additions and 16 deletions

View file

@ -385,6 +385,11 @@ desktop:
next: "Next month" next: "Next month"
go: "Click to travel" go: "Click to travel"
mk-post-form-home-widget:
title: "Post"
post: "Post"
placeholder: "What's happening?"
mk-repost-form: mk-repost-form:
quote: "Quote..." quote: "Quote..."
cancel: "Cancel" cancel: "Cancel"

View file

@ -385,6 +385,11 @@ desktop:
next: "来月" next: "来月"
go: "クリックして時間遡行" go: "クリックして時間遡行"
mk-post-form-home-widget:
title: "投稿"
post: "投稿"
placeholder: "いまどうしてる?"
mk-repost-form: mk-repost-form:
quote: "引用する..." quote: "引用する..."
cancel: "キャンセル" cancel: "キャンセル"

View file

@ -9,10 +9,13 @@ riot.mixin('widget', {
this.mixin('api'); this.mixin('api');
this.id = this.opts.id; this.id = this.opts.id;
this.place = this.opts.place;
Object.keys(this.data).forEach(prop => { if (this.data) {
this.data[prop] = this.opts.data.hasOwnProperty(prop) ? this.opts.data[prop] : this.data[prop]; Object.keys(this.data).forEach(prop => {
}); this.data[prop] = this.opts.data.hasOwnProperty(prop) ? this.opts.data[prop] : this.data[prop];
});
}
}, },
save: function() { save: function() {

View file

@ -75,9 +75,8 @@
a a
color #555 color #555
</style> </style>
<script>
this.mixin('widget');
</script>
</mk-broadcast-home-widget> </mk-broadcast-home-widget>

View file

@ -28,5 +28,8 @@
color #999 color #999
</style> </style>
<script>this.mixin('user-preview');</script> <script>
this.mixin('widget');
this.mixin('user-preview');
</script>
</mk-donation-home-widget> </mk-donation-home-widget>

View file

@ -14,4 +14,7 @@
color #ccc color #ccc
</style> </style>
<script>
this.mixin('widget');
</script>
</mk-nav-home-widget> </mk-nav-home-widget>

View file

@ -0,0 +1,101 @@
<mk-post-form-home-widget>
<mk-post-form if={ place == 'main' }/>
<virtual if={ place != 'main' }>
<virtual if={ data.design == 0 }>
<p class="title"><i class="fa fa-pencil"></i>%i18n:desktop.tags.mk-post-form-home-widget.title%</p>
</virtual>
<textarea disabled={ posting } ref="text" onkeydown={ onkeydown } placeholder="%i18n:desktop.tags.mk-post-form-home-widget.placeholder%"></textarea>
<button onclick={ post } disabled={ posting }>%i18n:desktop.tags.mk-post-form-home-widget.post%</button>
</virtual>
<style>
:scope
display block
background #fff
overflow hidden
> .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)
> i
margin-right 4px
> textarea
display block
width 100%
max-width 100%
min-width 100%
padding 16px
margin-bottom 28px + 16px
border none
border-bottom solid 1px #eee
> button
display block
position absolute
bottom 8px
right 8px
margin 0
padding 0 10px
height 28px
color $theme-color-foreground
background $theme-color !important
outline none
border none
border-radius 4px
transition background 0.1s ease
cursor pointer
&:hover
background lighten($theme-color, 10%) !important
&:active
background darken($theme-color, 10%) !important
transition background 0s ease
</style>
<script>
this.data = {
design: 0
};
this.mixin('widget');
this.func = () => {
if (++this.data.design == 2) this.data.design = 0;
this.save();
};
this.onkeydown = e => {
if (e.which == 10 || e.which == 13) this.post();
};
this.post = () => {
this.update({
posting: true
});
this.api('posts/create', {
text: this.refs.text.value
}).then(data => {
this.clear();
}).catch(err => {
alert('失敗した');
}).then(() => {
this.update({
posting: false
});
});
};
this.clear = () => {
this.refs.text.value = '';
};
</script>
</mk-post-form-home-widget>

View file

@ -31,6 +31,8 @@
<script> <script>
import anime from 'animejs'; import anime from 'animejs';
this.mixin('widget');
this.tips = [ this.tips = [
'<kbd>t</kbd>でタイムラインにフォーカスできます', '<kbd>t</kbd>でタイムラインにフォーカスできます',
'<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます', '<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます',

View file

@ -17,6 +17,8 @@
</style> </style>
<script> <script>
this.mixin('widget');
this.version = VERSION; this.version = VERSION;
</script> </script>
</mk-version-home-widget> </mk-version-home-widget>

View file

@ -16,6 +16,7 @@
<option value="notifications">通知</option> <option value="notifications">通知</option>
<option value="user-recommendation">おすすめユーザー</option> <option value="user-recommendation">おすすめユーザー</option>
<option value="recommended-polls">投票</option> <option value="recommended-polls">投票</option>
<option value="post-form">投稿フォーム</option>
<option value="channel">チャンネル</option> <option value="channel">チャンネル</option>
<option value="server">サーバー情報</option> <option value="server">サーバー情報</option>
<option value="donation">寄付のお願い</option> <option value="donation">寄付のお願い</option>
@ -32,12 +33,13 @@
</div> </div>
</div> </div>
<div class="main"> <div class="main">
<div class="left" ref="left"></div> <div class="left" ref="left" data-place="left"></div>
<main> <main ref="main">
<div class="maintop" ref="maintop" data-place="main" if={ opts.customize }></div>
<mk-timeline-home-widget ref="tl" if={ mode == 'timeline' }/> <mk-timeline-home-widget ref="tl" if={ mode == 'timeline' }/>
<mk-mentions-home-widget ref="tl" if={ mode == 'mentions' }/> <mk-mentions-home-widget ref="tl" if={ mode == 'mentions' }/>
</main> </main>
<div class="right" ref="right"></div> <div class="right" ref="right" data-place="right"></div>
</div> </div>
<style> <style>
:scope :scope
@ -46,6 +48,12 @@
&[data-customize] &[data-customize]
background-image url('/assets/desktop/grid.svg') background-image url('/assets/desktop/grid.svg')
> .main > main > *:not(.maintop)
cursor not-allowed
> *
pointer-events none
&:not([data-customize]) &:not([data-customize])
> .main > *:empty > .main > *:empty
display none display none
@ -91,30 +99,39 @@
max-width 1200px max-width 1200px
> * > *
> *:not(.customize-container) > *:not(.customize-container):not(.maintop)
> .maintop > .customize-container > *
> .customize-container > * > .customize-container > *
display block display block
border solid 1px rgba(0, 0, 0, 0.075) border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px border-radius 6px
> *:not(.customize-container) > *:not(.customize-container):not(.maintop)
> .customize-container > .customize-container
&:not(:last-child) &:not(:last-child)
margin-bottom 16px margin-bottom 16px
> .maintop > .customize-container
margin-bottom 16px
> main > main
padding 16px padding 16px
width calc(100% - 275px * 2) width calc(100% - 275px * 2)
> *:not(main) > .maintop
width 275px min-height 64px
> *
> .customize-container > .customize-container
> .maintop > .customize-container
cursor move cursor move
> * > *
pointer-events none pointer-events none
> *:not(main)
width 275px
> .left > .left
padding 16px 0 16px 16px padding 16px 0 16px 16px
@ -160,11 +177,18 @@
const sortableOption = { const sortableOption = {
group: 'kyoppie', group: 'kyoppie',
animation: 150, animation: 150,
onSort: this.saveHome onMove: evt => {
const id = evt.dragged.getAttribute('data-widget-id');
this.home.find(tag => tag.id == id).update({ place: evt.to.getAttribute('data-place') });
},
onSort: () => {
this.saveHome();
}
}; };
new Sortable(this.refs.left, sortableOption); new Sortable(this.refs.left, sortableOption);
new Sortable(this.refs.right, sortableOption); new Sortable(this.refs.right, sortableOption);
new Sortable(this.refs.maintop, sortableOption);
new Sortable(this.refs.trash, Object.assign({}, sortableOption, { new Sortable(this.refs.trash, Object.assign({}, sortableOption, {
onAdd: evt => { onAdd: evt => {
const el = evt.item; const el = evt.item;
@ -213,11 +237,19 @@
this.refs.right.appendChild(actualEl); this.refs.right.appendChild(actualEl);
} }
break; break;
case 'main':
if (this.opts.customize) {
this.refs.maintop.appendChild(actualEl);
} else {
this.refs.main.insertBefore(actualEl, this.refs.tl.root);
}
break;
} }
const tag = riot.mount(el, { const tag = riot.mount(el, {
id: widget.id, id: widget.id,
data: widget.data, data: widget.data,
place: widget.place,
tl: this.refs.tl tl: this.refs.tl
})[0]; })[0];
@ -265,6 +297,13 @@
data.push(widget); data.push(widget);
}); });
Array.from(this.refs.maintop.children).forEach(el => {
const id = el.getAttribute('data-widget-id');
const widget = this.I.client_settings.home.find(w => w.id == id);
widget.place = 'main';
data.push(widget);
});
this.api('i/update_home', { this.api('i/update_home', {
home: data home: data
}).then(() => { }).then(() => {

View file

@ -42,6 +42,7 @@ require('./home-widgets/server.tag');
require('./home-widgets/slideshow.tag'); require('./home-widgets/slideshow.tag');
require('./home-widgets/channel.tag'); require('./home-widgets/channel.tag');
require('./home-widgets/timemachine.tag'); require('./home-widgets/timemachine.tag');
require('./home-widgets/post-form.tag');
require('./timeline.tag'); require('./timeline.tag');
require('./messaging/window.tag'); require('./messaging/window.tag');
require('./messaging/room-window.tag'); require('./messaging/room-window.tag');