Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2017-11-01 02:16:05 +09:00
parent 71c3e11708
commit e770cd6f55
5 changed files with 196 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/web/app/desktop/router.js
View file

@ -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'));
}

1
src/web/app/desktop/tags/index.js
View file

@ -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');

33
src/web/app/desktop/tags/pages/channel.tag
View file

@ -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 }>&gt;&gt;{ 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>

44
src/web/app/desktop/tags/pages/drive-chooser.tag
View file

@ -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
View 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>