github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-01-19 07:42:48 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tweak quote button positioning/style

Browse Source 
Now appears where your cursor ends the selection, but not overlapping text.
This commit is contained in:
Toby Zerner 2016-05-22 14:05:38 +09:30
parent a05600b91e
commit 310fed2329
4 changed files with 42 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
extensions/mentions/js/forum/dist/extension.js vendored
View File

@ -661,14 +661,21 @@ System.register('flarum/mentions/addPostQuoteButton', ['flarum/extend', 'flarum/
var parent = range.commonAncestorContainer;
if ($postBody[0] === parent || $.contains($postBody[0], parent)) {
var content = $.trim(selection.toString());
var content = selection.toString();
if (content) {
var button = new PostQuoteButton({ post: post, content: content });
m.render($container[0], button.render());
var rect = range.getClientRects()[0];
button.show(rect.left, $(window).scrollTop() + rect.top);
var rects = range.getClientRects();
var firstRect = rects[0];
if (e.clientY < firstRect.bottom && e.clientX - firstRect.right < firstRect.left - e.clientX) {
button.showStart(firstRect.left, firstRect.top);
} else {
var lastRect = rects[rects.length - 1];
button.showEnd(lastRect.right, lastRect.bottom);
}
}
}
}
@ -991,11 +998,18 @@ System.register('flarum/mentions/components/PostQuoteButton', ['flarum/component
$(document).on('mousedown', this.hide.bind(this));
}
}, {
key: 'show',
value: function show(left, top) {
key: 'showStart',
value: function showStart(left, top) {
var $this = this.$();
$this.show().css('top', top - $this.outerHeight() - 5).css('left', left);
$this.show().css('left', left).css('top', $(window).scrollTop() + top - $this.outerHeight() - 5);
}
}, {
key: 'showEnd',
value: function showEnd(right, bottom) {
var $this = this.$();
$this.show().css('left', right - $this.outerWidth()).css('top', $(window).scrollTop() + bottom + 5);
}
}, {
key: 'hide',

13
extensions/mentions/js/forum/src/addPostQuoteButton.js
View File

@ -26,14 +26,21 @@ export default function addPostQuoteButton() {
const parent = range.commonAncestorContainer;
if ($postBody[0] === parent || $.contains($postBody[0], parent)) {
const content = $.trim(selection.toString());
const content = selection.toString();
if (content) {
const button = new PostQuoteButton({post, content});
m.render($container[0], button.render());
const rect = range.getClientRects()[0];
button.show(rect.left, $(window).scrollTop() + rect.top);
const rects = range.getClientRects();
const firstRect = rects[0];
if (e.clientY < firstRect.bottom && e.clientX - firstRect.right < firstRect.left - e.clientX) {
button.showStart(firstRect.left, firstRect.top);
} else {
const lastRect = rects[rects.length - 1];
button.showEnd(lastRect.right, lastRect.bottom);
}
}
}
}

14
extensions/mentions/js/forum/src/components/PostQuoteButton.js
View File

@ -26,12 +26,20 @@ export default class PostQuoteButton extends Button {
$(document).on('mousedown', this.hide.bind(this));
}
show(left, top) {
showStart(left, top) {
const $this = this.$();
$this.show()
.css('top', top - $this.outerHeight() - 5)
.css('left', left);
.css('left', left)
.css('top', $(window).scrollTop() + top - $this.outerHeight() - 5);
}
showEnd(right, bottom) {
const $this = this.$();
$this.show()
.css('left', right - $this.outerWidth())
.css('top', $(window).scrollTop() + bottom + 5)
}
hide() {

2
extensions/mentions/less/forum/extension.less
View File

@ -88,5 +88,5 @@
}
.PostQuoteButton {
position: absolute;
box-shadow: 0 2px 4px @shadow-color;
.Button--color(@tooltip-color, @tooltip-bg);
}