✌️
This commit is contained in:
syuilo
parent
800d409949
commit
ca26fc7363
11 changed files with 179 additions and 16 deletions
|
|
@ -385,6 +385,11 @@ desktop:
|
|||
next: "Next month"
|
||||
go: "Click to travel"
|
||||
|
||||
mk-post-form-home-widget:
|
||||
title: "Post"
|
||||
post: "Post"
|
||||
placeholder: "What's happening?"
|
||||
|
||||
mk-repost-form:
|
||||
quote: "Quote..."
|
||||
cancel: "Cancel"
|
||||
|
|
|
|||
|
|
@ -385,6 +385,11 @@ desktop:
|
|||
next: "来月"
|
||||
go: "クリックして時間遡行"
|
||||
|
||||
mk-post-form-home-widget:
|
||||
title: "投稿"
|
||||
post: "投稿"
|
||||
placeholder: "いまどうしてる？"
|
||||
|
||||
mk-repost-form:
|
||||
quote: "引用する..."
|
||||
cancel: "キャンセル"
|
||||
|
|
|
|||
|
|
@ -9,10 +9,13 @@ riot.mixin('widget', {
|
|||
this.mixin('api');
|
||||
|
||||
this.id = this.opts.id;
|
||||
this.place = this.opts.place;
|
||||
|
||||
if (this.data) {
|
||||
Object.keys(this.data).forEach(prop => {
|
||||
this.data[prop] = this.opts.data.hasOwnProperty(prop) ? this.opts.data[prop] : this.data[prop];
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
save: function() {
|
||||
|
|
|
|||
|
|
@ -75,9 +75,8 @@
|
|||
a
|
||||
color #555
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<script>
|
||||
this.mixin('widget');
|
||||
</script>
|
||||
</mk-broadcast-home-widget>
|
||||
|
|
|
|||
|
|
@ -28,5 +28,8 @@
|
|||
color #999
|
||||
|
||||
</style>
|
||||
<script>this.mixin('user-preview');</script>
|
||||
<script>
|
||||
this.mixin('widget');
|
||||
this.mixin('user-preview');
|
||||
</script>
|
||||
</mk-donation-home-widget>
|
||||
|
|
|
|||
|
|
@ -14,4 +14,7 @@
|
|||
color #ccc
|
||||
|
||||
</style>
|
||||
<script>
|
||||
this.mixin('widget');
|
||||
</script>
|
||||
</mk-nav-home-widget>
|
||||
|
|
|
|||
101
src/web/app/desktop/tags/home-widgets/post-form.tag
Normal file
101
src/web/app/desktop/tags/home-widgets/post-form.tag
Normal 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>
|
||||
|
|
@ -31,6 +31,8 @@
|
|||
<script>
|
||||
import anime from 'animejs';
|
||||
|
||||
this.mixin('widget');
|
||||
|
||||
this.tips = [
|
||||
'<kbd>t</kbd>でタイムラインにフォーカスできます',
|
||||
'<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます',
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@
|
|||
|
||||
</style>
|
||||
<script>
|
||||
this.mixin('widget');
|
||||
|
||||
this.version = VERSION;
|
||||
</script>
|
||||
</mk-version-home-widget>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<option value="notifications">通知</option>
|
||||
<option value="user-recommendation">おすすめユーザー</option>
|
||||
<option value="recommended-polls">投票</option>
|
||||
<option value="post-form">投稿フォーム</option>
|
||||
<option value="channel">チャンネル</option>
|
||||
<option value="server">サーバー情報</option>
|
||||
<option value="donation">寄付のお願い</option>
|
||||
|
|
@ -32,12 +33,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="left" ref="left"></div>
|
||||
<main>
|
||||
<div class="left" ref="left" data-place="left"></div>
|
||||
<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-mentions-home-widget ref="tl" if={ mode == 'mentions' }/>
|
||||
</main>
|
||||
<div class="right" ref="right"></div>
|
||||
<div class="right" ref="right" data-place="right"></div>
|
||||
</div>
|
||||
<style>
|
||||
:scope
|
||||
|
|
@ -46,6 +48,12 @@
|
|||
&[data-customize]
|
||||
background-image url('/assets/desktop/grid.svg')
|
||||
|
||||
> .main > main > *:not(.maintop)
|
||||
cursor not-allowed
|
||||
|
||||
> *
|
||||
pointer-events none
|
||||
|
||||
&:not([data-customize])
|
||||
> .main > *:empty
|
||||
display none
|
||||
|
|
@ -91,30 +99,39 @@
|
|||
max-width 1200px
|
||||
|
||||
> *
|
||||
> *:not(.customize-container)
|
||||
> *:not(.customize-container):not(.maintop)
|
||||
> .maintop > .customize-container > *
|
||||
> .customize-container > *
|
||||
display block
|
||||
border solid 1px rgba(0, 0, 0, 0.075)
|
||||
border-radius 6px
|
||||
|
||||
> *:not(.customize-container)
|
||||
> *:not(.customize-container):not(.maintop)
|
||||
> .customize-container
|
||||
&:not(:last-child)
|
||||
margin-bottom 16px
|
||||
|
||||
> .maintop > .customize-container
|
||||
margin-bottom 16px
|
||||
|
||||
> main
|
||||
padding 16px
|
||||
width calc(100% - 275px * 2)
|
||||
|
||||
> *:not(main)
|
||||
width 275px
|
||||
> .maintop
|
||||
min-height 64px
|
||||
|
||||
> *
|
||||
> .customize-container
|
||||
> .maintop > .customize-container
|
||||
cursor move
|
||||
|
||||
> *
|
||||
pointer-events none
|
||||
|
||||
> *:not(main)
|
||||
width 275px
|
||||
|
||||
> .left
|
||||
padding 16px 0 16px 16px
|
||||
|
||||
|
|
@ -160,11 +177,18 @@
|
|||
const sortableOption = {
|
||||
group: 'kyoppie',
|
||||
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.right, sortableOption);
|
||||
new Sortable(this.refs.maintop, sortableOption);
|
||||
new Sortable(this.refs.trash, Object.assign({}, sortableOption, {
|
||||
onAdd: evt => {
|
||||
const el = evt.item;
|
||||
|
|
@ -213,11 +237,19 @@
|
|||
this.refs.right.appendChild(actualEl);
|
||||
}
|
||||
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, {
|
||||
id: widget.id,
|
||||
data: widget.data,
|
||||
place: widget.place,
|
||||
tl: this.refs.tl
|
||||
})[0];
|
||||
|
||||
|
|
@ -265,6 +297,13 @@
|
|||
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', {
|
||||
home: data
|
||||
}).then(() => {
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ require('./home-widgets/server.tag');
|
|||
require('./home-widgets/slideshow.tag');
|
||||
require('./home-widgets/channel.tag');
|
||||
require('./home-widgets/timemachine.tag');
|
||||
require('./home-widgets/post-form.tag');
|
||||
require('./timeline.tag');
|
||||
require('./messaging/window.tag');
|
||||
require('./messaging/room-window.tag');
|
||||
|
|
|
|||
Loading…
Reference in a new issue