From 5d54b512db803139df0282922e3c16d916f8308c Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 13 Nov 2017 07:32:47 +0900 Subject: [PATCH] #911 --- src/web/app/desktop/router.js | 7 ++ src/web/app/desktop/tags/index.js | 1 + .../desktop/tags/messaging/room-window.tag | 10 ++- .../app/desktop/tags/pages/messaging-room.tag | 38 ++++++++++ src/web/app/desktop/tags/window.tag | 74 +++++++++++++------ 5 files changed, 106 insertions(+), 24 deletions(-) create mode 100644 src/web/app/desktop/tags/pages/messaging-room.tag diff --git a/src/web/app/desktop/router.js b/src/web/app/desktop/router.js index bbd68cf99a..4675b967d6 100644 --- a/src/web/app/desktop/router.js +++ b/src/web/app/desktop/router.js @@ -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')); } diff --git a/src/web/app/desktop/tags/index.js b/src/web/app/desktop/tags/index.js index e48ba9744b..15677471c3 100644 --- a/src/web/app/desktop/tags/index.js +++ b/src/web/app/desktop/tags/index.js @@ -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'); diff --git a/src/web/app/desktop/tags/messaging/room-window.tag b/src/web/app/desktop/tags/messaging/room-window.tag index 5d8a4303a5..4d4f5c626d 100644 --- a/src/web/app/desktop/tags/messaging/room-window.tag +++ b/src/web/app/desktop/tags/messaging/room-window.tag @@ -1,5 +1,5 @@ - + メッセージ: { parent.user.name } @@ -19,8 +19,16 @@ + diff --git a/src/web/app/desktop/tags/window.tag b/src/web/app/desktop/tags/window.tag index aefb6499b7..cc8dc4c1a4 100644 --- a/src/web/app/desktop/tags/window.tag +++ b/src/web/app/desktop/tags/window.tag @@ -4,7 +4,10 @@

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