mirror of
https://activitypub.software/TransFem-org/Sharkey
synced 2024-11-27 00:13:03 +00:00
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 => {
|
export default me => {
|
||||||
route('/', index);
|
route('/', index);
|
||||||
|
route('/selectdrive', selectDrive);
|
||||||
route('/i>mentions', mentions);
|
route('/i>mentions', mentions);
|
||||||
route('/channel', channels);
|
route('/channel', channels);
|
||||||
route('/channel/:channel', channel);
|
route('/channel/:channel', channel);
|
||||||
|
|
@ -66,6 +67,10 @@ export default me => {
|
||||||
mount(document.createElement('mk-channels-page'));
|
mount(document.createElement('mk-channels-page'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function selectDrive() {
|
||||||
|
mount(document.createElement('mk-selectdrive-page'));
|
||||||
|
}
|
||||||
|
|
||||||
function notFound() {
|
function notFound() {
|
||||||
mount(document.createElement('mk-not-found'));
|
mount(document.createElement('mk-not-found'));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -63,6 +63,7 @@ require('./pages/search.tag');
|
||||||
require('./pages/not-found.tag');
|
require('./pages/not-found.tag');
|
||||||
require('./pages/channel.tag');
|
require('./pages/channel.tag');
|
||||||
require('./pages/channels.tag');
|
require('./pages/channels.tag');
|
||||||
|
require('./pages/selectdrive.tag');
|
||||||
require('./autocomplete-suggestion.tag');
|
require('./autocomplete-suggestion.tag');
|
||||||
require('./progress-dialog.tag');
|
require('./progress-dialog.tag');
|
||||||
require('./user-preview.tag');
|
require('./user-preview.tag');
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,9 @@
|
||||||
<mk-ui ref="ui">
|
<mk-ui ref="ui">
|
||||||
<main if={ !parent.fetching }>
|
<main if={ !parent.fetching }>
|
||||||
<h1>{ parent.channel.title }</h1>
|
<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>
|
<hr>
|
||||||
<mk-channel-form channel={ parent.channel } ref="form"/>
|
<mk-channel-form channel={ parent.channel } ref="form"/>
|
||||||
</main>
|
</main>
|
||||||
|
|
@ -68,6 +70,11 @@
|
||||||
<div>
|
<div>
|
||||||
<a if={ post.reply_to }>>>{ post.reply_to.index }</a>
|
<a if={ post.reply_to }>>>{ post.reply_to.index }</a>
|
||||||
{ post.text }
|
{ 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>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
|
|
@ -109,13 +116,19 @@
|
||||||
<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0) } onclick={ post }>
|
<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0) } onclick={ post }>
|
||||||
{ wait ? 'やってます' : 'やる' }<mk-ellipsis if={ wait }/>
|
{ wait ? 'やってます' : 'やる' }<mk-ellipsis if={ wait }/>
|
||||||
</button>
|
</button>
|
||||||
|
<br>
|
||||||
|
<button onclick={ drive }>ドライブ</button>
|
||||||
|
<ol if={ files }>
|
||||||
|
<li each={ files }>{ name }</li>
|
||||||
|
</ol>
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
display block
|
display block
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
|
import CONFIG from '../../../common/scripts/config';
|
||||||
|
|
||||||
this.mixin('api');
|
this.mixin('api');
|
||||||
|
|
||||||
this.channel = this.opts.channel;
|
this.channel = this.opts.channel;
|
||||||
|
|
@ -128,6 +141,9 @@
|
||||||
|
|
||||||
this.clear = () => {
|
this.clear = () => {
|
||||||
this.clearReply();
|
this.clearReply();
|
||||||
|
this.update({
|
||||||
|
files: null
|
||||||
|
});
|
||||||
this.refs.text.value = '';
|
this.refs.text.value = '';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -136,8 +152,13 @@
|
||||||
wait: true
|
wait: true
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const files = this.files && this.files.length > 0
|
||||||
|
? this.files.map(f => f.id)
|
||||||
|
: undefined;
|
||||||
|
|
||||||
this.api('posts/create', {
|
this.api('posts/create', {
|
||||||
text: this.refs.text.value,
|
text: this.refs.text.value,
|
||||||
|
media_ids: files,
|
||||||
reply_to_id: this.reply ? this.reply.id : undefined,
|
reply_to_id: this.reply ? this.reply.id : undefined,
|
||||||
channel_id: this.channel.id
|
channel_id: this.channel.id
|
||||||
}).then(data => {
|
}).then(data => {
|
||||||
|
|
@ -151,5 +172,13 @@
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.drive = () => {
|
||||||
|
window['cb'] = files => {
|
||||||
|
this.update({
|
||||||
|
files: files
|
||||||
|
});
|
||||||
|
};
|
||||||
|
window.open(CONFIG.url + '/selectdrive?multiple=true', '_blank');
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
</mk-channel-form>
|
</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…
Reference in a new issue