This commit is contained in:
syuilo
parent
0079a88433
commit
5d54b512db
|
|
@ -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'));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue