mirror/iceshrimp
1
0
Fork 0
mirror of https://iceshrimp.dev/iceshrimp/iceshrimp synced 2024-12-01 16:28:06 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

#911

Browse Source
This commit is contained in:
syuilo 2017-11-13 07:32:47 +09:00
parent 7070a24a9d
commit 525e66efc9
5 changed files with 106 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/web/app/desktop/router.js
View File

@ -12,6 +12,7 @@ export default me => {
route('/i/customize-home', customizeHome);
route('/i/drive', drive);
route('/i/drive/folder/:folder', drive);
route('/i/messaging/:user', messaging);
route('/i/mentions', mentions);
route('/post::post', post);
route('/search::query', search);
@ -72,6 +73,12 @@ export default me => {
mount(el);
}
function messaging(ctx) {
const el = document.createElement('mk-messaging-room-page');
el.setAttribute('user', ctx.params.user);
mount(el);
}
function notFound() {
mount(document.createElement('mk-not-found'));
}

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

@ -69,6 +69,7 @@ require('./pages/search.tag');
require('./pages/not-found.tag');
require('./pages/selectdrive.tag');
require('./pages/drive.tag');
require('./pages/messaging-room.tag');
require('./autocomplete-suggestion.tag');
require('./progress-dialog.tag');
require('./user-preview.tag');

10
src/web/app/desktop/tags/messaging/room-window.tag
View File

@ -1,5 +1,5 @@
<mk-messaging-room-window>
<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' }>
<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' } popout-option={ popout }>
<yield to="header"><i class="fa fa-comments"></i>メッセージ: { parent.user.name }</yield>
<yield to="content">
<mk-messaging-room user={ parent.user }/>
@ -19,8 +19,16 @@
</style>
<script>
import CONFIG from '../../../common/scripts/config';
this.user = this.opts.user;
this.popout = {
url: `${CONFIG.url}/i/messaging/${this.user.username}`,
width: 420,
height: 540
};
this.on('mount', () => {
this.refs.window.on('closed', () => {
this.unmount();

38
src/web/app/desktop/tags/pages/messaging-room.tag Normal file
View File

@ -0,0 +1,38 @@
<mk-messaging-room-page>
<mk-messaging-room if={ user } user={ user } isNaked={ true }/>
<style>
:scope
display block
position fixed
width 100%
height 100%
background #fff
</style>
<script>
import Progress from '../../../common/scripts/loading';
this.mixin('api');
this.fetching = true;
this.user = null;
this.on('mount', () => {
Progress.start();
this.api('users/show', {
username: this.opts.user
}).then(user => {
this.update({
fetching: false,
user: user
});
document.title = 'メッセージ: ' + this.user.name;
Progress.done();
});
});
</script>
</mk-messaging-room-page>

74
src/web/app/desktop/tags/window.tag
View File

@ -4,7 +4,10 @@
<div class="body">
<header ref="header" onmousedown={ onHeaderMousedown }>
<h1 data-yield="header"><yield from="header"/></h1>
<button class="close" if={ canClose } onmousedown={ repelMove } onclick={ close } title="閉じる"><i class="fa fa-times"></i></button>
<div>
<button class="popout" if={ popoutOption } onmousedown={ repelMove } onclick={ popout } title="ポップアウト"><i class="fa fa-external-link"></i></button>
<button class="close" if={ canClose } onmousedown={ repelMove } onclick={ close } title="閉じる"><i class="fa fa-times"></i></button>
</div>
</header>
<div class="content" data-yield="content"><yield from="content"/></div>
</div>
@ -117,8 +120,12 @@
box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
> header
$header-height = 40px
z-index 128
height $header-height
overflow hidden
white-space nowrap
cursor move
background #fff
border-radius 6px 6px 0 0
@ -130,39 +137,45 @@
> h1
pointer-events none
display block
margin 0
height 40px
margin 0 auto
width s('calc(100% - (%s * 2))', $header-height)
overflow hidden
text-overflow ellipsis
text-align center
font-size 1em
line-height 40px
line-height $header-height
font-weight normal
color #666
> .close
cursor pointer
display block
> div:last-child
position absolute
top 0
right 0
display block
z-index 1
margin 0
padding 0
font-size 1.2em
color rgba(#000, 0.4)
border none
outline none
background transparent
&:hover
color rgba(#000, 0.6)
&:active
color darken(#000, 30%)
> i
> *
display inline-block
margin 0
padding 0
width 40px
line-height 40px
cursor pointer
font-size 1.2em
color rgba(#000, 0.4)
border none
outline none
background transparent
&:hover
color rgba(#000, 0.6)
&:active
color darken(#000, 30%)
> i
padding 0
width $header-height
line-height $header-height
text-align center
> .content
height 100%
@ -181,6 +194,8 @@
this.isModal = this.opts.isModal != null ? this.opts.isModal : false;
this.canClose = this.opts.canClose != null ? this.opts.canClose : true;
this.popoutOption = this.opts.popoutOption;
console.log(this.popoutOption);
this.isFlexible = this.opts.height == null;
this.canResize = !this.isFlexible;
@ -247,6 +262,19 @@
}, 300);
};
this.popout = () => {
const position = this.refs.main.getBoundingClientRect();
const x = window.screenX + position.left;
const y = window.screenY + position.top;
window.open(this.popoutOption.url,
this.popoutOption.url,
`height=${this.popoutOption.height},width=${this.popoutOption.width},left=${x},top=${y}`);
this.close();
};
this.close = () => {
this.trigger('closing');