[Client] 良い感じに

This commit is contained in:
syuilo 2017-03-20 05:13:13 +09:00
parent 9b8208f937
commit 0390820f07
6 changed files with 24 additions and 15 deletions

View file

@ -1,7 +1,7 @@
{ {
"name": "misskey", "name": "misskey",
"author": "syuilo <i@syuilo.com>", "author": "syuilo <i@syuilo.com>",
"version": "0.0.1387", "version": "0.0.1388",
"license": "MIT", "license": "MIT",
"description": "A miniblog-based SNS", "description": "A miniblog-based SNS",
"bugs": "https://github.com/syuilo/misskey/issues", "bugs": "https://github.com/syuilo/misskey/issues",

View file

@ -25,24 +25,41 @@
> .popover > .popover
position absolute position absolute
z-index 10001 z-index 10001
padding 4px
background #fff background #fff
border 1px solid rgba(27, 31, 35, 0.15) border 1px solid rgba(27, 31, 35, 0.15)
border-radius 4px border-radius 4px
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15) box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
> button > button
width 40px
height 40px
font-size 24px font-size 24px
border-radius 2px
&:hover
background #eee
&:active
background $theme-color
box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
</style> </style>
<script> <script>
this.mixin('api'); this.mixin('api');
this.post = this.opts.post; this.post = this.opts.post;
this.source = this.opts.source;
this.on('mount', () => { this.on('mount', () => {
const rect = this.source.getBoundingClientRect();
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
const width = this.refs.popover.offsetWidth; const width = this.refs.popover.offsetWidth;
this.refs.popover.style.top = this.opts.top + 'px'; const height = this.refs.popover.offsetHeight;
this.refs.popover.style.left = (this.opts.left - (width / 2)) + 'px'; this.refs.popover.style.left = (x - (width / 2)) + 'px';
this.refs.popover.style.top = (y - (height / 2)) + 'px';
}); });
this.react = reaction => { this.react = reaction => {

View file

@ -329,10 +329,8 @@
}; };
this.react = () => { this.react = () => {
const rect = this.refs.reactButton.getBoundingClientRect();
riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), { riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
top: rect.top + window.pageYOffset, source: this.refs.reactButton,
left: rect.left + window.pageXOffset,
post: this.p post: this.p
}); });
}; };

View file

@ -377,10 +377,8 @@
}; };
this.react = () => { this.react = () => {
const rect = this.refs.reactButton.getBoundingClientRect();
riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), { riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
top: rect.top + window.pageYOffset, source: this.refs.reactButton,
left: rect.left + window.pageXOffset,
post: this.p post: this.p
}); });
}; };

View file

@ -335,10 +335,8 @@
}; };
this.react = () => { this.react = () => {
const rect = this.refs.reactButton.getBoundingClientRect();
riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), { riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
top: rect.top + window.pageYOffset, source: this.refs.reactButton,
left: rect.left + window.pageXOffset,
post: this.p post: this.p
}); });
}; };

View file

@ -356,10 +356,8 @@
}; };
this.react = () => { this.react = () => {
const rect = this.refs.reactButton.getBoundingClientRect();
riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), { riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
top: rect.top + window.pageYOffset, source: this.refs.reactButton,
left: rect.left + window.pageXOffset,
post: this.p post: this.p
}); });
}; };