wip
This commit is contained in:
syuilo
parent
71c3e11708
commit
e770cd6f55
5 changed files with 196 additions and 46 deletions
|
|
@ -8,6 +8,7 @@ let page = null;
|
|||
|
||||
export default me => {
|
||||
route('/', index);
|
||||
route('/selectdrive', selectDrive);
|
||||
route('/i>mentions', mentions);
|
||||
route('/channel', channels);
|
||||
route('/channel/:channel', channel);
|
||||
|
|
@ -66,6 +67,10 @@ export default me => {
|
|||
mount(document.createElement('mk-channels-page'));
|
||||
}
|
||||
|
||||
function selectDrive() {
|
||||
mount(document.createElement('mk-selectdrive-page'));
|
||||
}
|
||||
|
||||
function notFound() {
|
||||
mount(document.createElement('mk-not-found'));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@ require('./pages/search.tag');
|
|||
require('./pages/not-found.tag');
|
||||
require('./pages/channel.tag');
|
||||
require('./pages/channels.tag');
|
||||
require('./pages/selectdrive.tag');
|
||||
require('./autocomplete-suggestion.tag');
|
||||
require('./progress-dialog.tag');
|
||||
require('./user-preview.tag');
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
<mk-ui ref="ui">
|
||||
<main if={ !parent.fetching }>
|
||||
<h1>{ parent.channel.title }</h1>
|
||||
<mk-channel-post if={ parent.posts } each={ parent.posts.reverse() } post={ this } form={ parent.refs.form }/>
|
||||
<virtual if={ parent.posts }>
|
||||
<mk-channel-post each={ parent.posts.reverse() } post={ this } form={ parent.refs.form }/>
|
||||
</virtual>
|
||||
<hr>
|
||||
<mk-channel-form channel={ parent.channel } ref="form"/>
|
||||
</main>
|
||||
|
|
@ -68,6 +70,11 @@
|
|||
<div>
|
||||
<a if={ post.reply_to }>>>{ post.reply_to.index }</a>
|
||||
{ post.text }
|
||||
<div class="media" if={ post.media }>
|
||||
<virtual each={ file in post.media }>
|
||||
<img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/>
|
||||
</virtual>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
:scope
|
||||
|
|
@ -109,13 +116,19 @@
|
|||
<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0) } onclick={ post }>
|
||||
{ wait ? 'やってます' : 'やる' }<mk-ellipsis if={ wait }/>
|
||||
</button>
|
||||
|
||||
<br>
|
||||
<button onclick={ drive }>ドライブ</button>
|
||||
<ol if={ files }>
|
||||
<li each={ files }>{ name }</li>
|
||||
</ol>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
||||
</style>
|
||||
<script>
|
||||
import CONFIG from '../../../common/scripts/config';
|
||||
|
||||
this.mixin('api');
|
||||
|
||||
this.channel = this.opts.channel;
|
||||
|
|
@ -128,6 +141,9 @@
|
|||
|
||||
this.clear = () => {
|
||||
this.clearReply();
|
||||
this.update({
|
||||
files: null
|
||||
});
|
||||
this.refs.text.value = '';
|
||||
};
|
||||
|
||||
|
|
@ -136,8 +152,13 @@
|
|||
wait: true
|
||||
});
|
||||
|
||||
const files = this.files && this.files.length > 0
|
||||
? this.files.map(f => f.id)
|
||||
: undefined;
|
||||
|
||||
this.api('posts/create', {
|
||||
text: this.refs.text.value,
|
||||
media_ids: files,
|
||||
reply_to_id: this.reply ? this.reply.id : undefined,
|
||||
channel_id: this.channel.id
|
||||
}).then(data => {
|
||||
|
|
@ -151,5 +172,13 @@
|
|||
});
|
||||
};
|
||||
|
||||
this.drive = () => {
|
||||
window['cb'] = files => {
|
||||
this.update({
|
||||
files: files
|
||||
});
|
||||
};
|
||||
window.open(CONFIG.url + '/selectdrive?multiple=true', '_blank');
|
||||
};
|
||||
</script>
|
||||
</mk-channel-form>
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
<mk-drive-chooser>
|
||||
<mk-drive-browser ref="browser" multiple={ parent.multiple }/>
|
||||
<div>
|
||||
<button class="upload" title="PCからドライブにファイルをアップロード" onclick={ upload }><i class="fa fa-upload"></i></button>
|
||||
<button class="cancel" onclick={ close }>キャンセル</button>
|
||||
<button class="ok" onclick={ parent.ok }>決定</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
height 100%
|
||||
|
||||
</style>
|
||||
<script>
|
||||
this.multiple = this.opts.multiple != null ? this.opts.multiple : false;
|
||||
|
||||
this.on('mount', () => {
|
||||
this.refs.browser.on('selected', file => {
|
||||
this.files = [file];
|
||||
this.ok();
|
||||
});
|
||||
|
||||
this.refs.browser.on('change-selection', files => {
|
||||
this.update({
|
||||
files: files
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
this.upload = () => {
|
||||
this.refs.browser.selectLocalFile();
|
||||
};
|
||||
|
||||
this.close = () => {
|
||||
window.close();
|
||||
};
|
||||
|
||||
this.ok = () => {
|
||||
window.opener.cb(this.multiple ? this.files : this.files[0]);
|
||||
window.close();
|
||||
};
|
||||
</script>
|
||||
</mk-drive-chooser>
|
||||
159
src/web/app/desktop/tags/pages/selectdrive.tag
Normal file
159
src/web/app/desktop/tags/pages/selectdrive.tag
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
<mk-selectdrive-page>
|
||||
<mk-drive-browser ref="browser" multiple={ multiple }/>
|
||||
<div>
|
||||
<button class="upload" title="PCからドライブにファイルをアップロード" onclick={ upload }><i class="fa fa-upload"></i></button>
|
||||
<button class="cancel" onclick={ close }>キャンセル</button>
|
||||
<button class="ok" onclick={ ok }>決定</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
height 100%
|
||||
background #fff
|
||||
|
||||
> mk-drive-browser
|
||||
height calc(100% - 72px)
|
||||
|
||||
> div
|
||||
position fixed
|
||||
bottom 0
|
||||
left 0
|
||||
width 100%
|
||||
height 72px
|
||||
background lighten($theme-color, 95%)
|
||||
|
||||
.upload
|
||||
display inline-block
|
||||
position absolute
|
||||
top 8px
|
||||
left 16px
|
||||
cursor pointer
|
||||
padding 0
|
||||
margin 8px 4px 0 0
|
||||
width 40px
|
||||
height 40px
|
||||
font-size 1em
|
||||
color rgba($theme-color, 0.5)
|
||||
background transparent
|
||||
outline none
|
||||
border solid 1px transparent
|
||||
border-radius 4px
|
||||
|
||||
&:hover
|
||||
background transparent
|
||||
border-color rgba($theme-color, 0.3)
|
||||
|
||||
&:active
|
||||
color rgba($theme-color, 0.6)
|
||||
background transparent
|
||||
border-color rgba($theme-color, 0.5)
|
||||
box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
|
||||
|
||||
&:focus
|
||||
&:after
|
||||
content ""
|
||||
pointer-events none
|
||||
position absolute
|
||||
top -5px
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border-radius 8px
|
||||
|
||||
.ok
|
||||
.cancel
|
||||
display block
|
||||
position absolute
|
||||
bottom 16px
|
||||
cursor pointer
|
||||
padding 0
|
||||
margin 0
|
||||
width 120px
|
||||
height 40px
|
||||
font-size 1em
|
||||
outline none
|
||||
border-radius 4px
|
||||
|
||||
&:focus
|
||||
&:after
|
||||
content ""
|
||||
pointer-events none
|
||||
position absolute
|
||||
top -5px
|
||||
right -5px
|
||||
bottom -5px
|
||||
left -5px
|
||||
border 2px solid rgba($theme-color, 0.3)
|
||||
border-radius 8px
|
||||
|
||||
&:disabled
|
||||
opacity 0.7
|
||||
cursor default
|
||||
|
||||
.ok
|
||||
right 16px
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
|
||||
&:not(:disabled)
|
||||
font-weight bold
|
||||
|
||||
&:hover:not(:disabled)
|
||||
background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
|
||||
border-color $theme-color
|
||||
|
||||
&:active:not(:disabled)
|
||||
background $theme-color
|
||||
border-color $theme-color
|
||||
|
||||
.cancel
|
||||
right 148px
|
||||
color #888
|
||||
background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
|
||||
border solid 1px #e2e2e2
|
||||
|
||||
&:hover
|
||||
background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
|
||||
border-color #dcdcdc
|
||||
|
||||
&:active
|
||||
background #ececec
|
||||
border-color #dcdcdc
|
||||
|
||||
</style>
|
||||
<script>
|
||||
const q = (new URL(location)).searchParams;
|
||||
this.multiple = q.get('multiple') == 'true' ? true : false;
|
||||
|
||||
this.on('mount', () => {
|
||||
document.documentElement.style.background = '#fff';
|
||||
|
||||
this.refs.browser.on('selected', file => {
|
||||
this.files = [file];
|
||||
this.ok();
|
||||
});
|
||||
|
||||
this.refs.browser.on('change-selection', files => {
|
||||
this.update({
|
||||
files: files
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
this.upload = () => {
|
||||
this.refs.browser.selectLocalFile();
|
||||
};
|
||||
|
||||
this.close = () => {
|
||||
window.close();
|
||||
};
|
||||
|
||||
this.ok = () => {
|
||||
window.opener.cb(this.multiple ? this.files : this.files[0]);
|
||||
window.close();
|
||||
};
|
||||
</script>
|
||||
</mk-selectdrive-page>
|
||||
Loading…
Add table
Add a link
Reference in a new issue