mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-27 12:03:08 +02:00
[Client] 良い感じに
This commit is contained in:
parent
9b8208f937
commit
0390820f07
6 changed files with 24 additions and 15 deletions
|
@ -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",
|
||||||
|
|
|
@ -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 => {
|
||||||
|
|
|
@ -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
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
@ -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
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
@ -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
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
@ -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
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue