This commit is contained in:
syuilo 2017-11-13 07:32:47 +09:00
parent 0079a88433
commit 5d54b512db
5 changed files with 106 additions and 24 deletions

View file

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

View file

@ -69,6 +69,7 @@ require('./pages/search.tag');
require('./pages/not-found.tag'); require('./pages/not-found.tag');
require('./pages/selectdrive.tag'); require('./pages/selectdrive.tag');
require('./pages/drive.tag'); require('./pages/drive.tag');
require('./pages/messaging-room.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');

View file

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

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>

View file

@ -4,7 +4,10 @@
<div class="body"> <div class="body">
<header ref="header" onmousedown={ onHeaderMousedown }> <header ref="header" onmousedown={ onHeaderMousedown }>
<h1 data-yield="header"><yield from="header"/></h1> <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> </header>
<div class="content" data-yield="content"><yield from="content"/></div> <div class="content" data-yield="content"><yield from="content"/></div>
</div> </div>
@ -117,8 +120,12 @@
box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2) box-shadow 0 2px 6px 0 rgba(0, 0, 0, 0.2)
> header > header
$header-height = 40px
z-index 128 z-index 128
height $header-height
overflow hidden overflow hidden
white-space nowrap
cursor move cursor move
background #fff background #fff
border-radius 6px 6px 0 0 border-radius 6px 6px 0 0
@ -130,39 +137,45 @@
> h1 > h1
pointer-events none pointer-events none
display block display block
margin 0 margin 0 auto
height 40px width s('calc(100% - (%s * 2))', $header-height)
overflow hidden
text-overflow ellipsis
text-align center text-align center
font-size 1em font-size 1em
line-height 40px line-height $header-height
font-weight normal font-weight normal
color #666 color #666
> .close > div:last-child
cursor pointer
display block
position absolute position absolute
top 0 top 0
right 0 right 0
display block
z-index 1 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) display inline-block
margin 0
&:active
color darken(#000, 30%)
> i
padding 0 padding 0
width 40px cursor pointer
line-height 40px 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 > .content
height 100% height 100%
@ -181,6 +194,8 @@
this.isModal = this.opts.isModal != null ? this.opts.isModal : false; this.isModal = this.opts.isModal != null ? this.opts.isModal : false;
this.canClose = this.opts.canClose != null ? this.opts.canClose : true; 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.isFlexible = this.opts.height == null;
this.canResize = !this.isFlexible; this.canResize = !this.isFlexible;
@ -247,6 +262,19 @@
}, 300); }, 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.close = () => {
this.trigger('closing'); this.trigger('closing');