github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-01-19 17:12:46 +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; var parent = range.commonAncestorContainer;
if ($postBody[0] === parent || $.contains($postBody[0], parent)) { if ($postBody[0] === parent || $.contains($postBody[0], parent)) {
var content = $.trim(selection.toString()); var content = selection.toString();
if (content) { if (content) {
var button = new PostQuoteButton({ post: post, content: content }); var button = new PostQuoteButton({ post: post, content: content });
m.render($container[0], button.render()); m.render($container[0], button.render());
var rect = range.getClientRects()[0]; var rects = range.getClientRects();
button.show(rect.left, $(window).scrollTop() + rect.top); 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)); $(document).on('mousedown', this.hide.bind(this));
} }
}, { }, {
key: 'show', key: 'showStart',
value: function show(left, top) { value: function showStart(left, top) {
var $this = this.$(); 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', key: 'hide',

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

@ -26,14 +26,21 @@ export default function addPostQuoteButton() {
const parent = range.commonAncestorContainer; const parent = range.commonAncestorContainer;
if ($postBody[0] === parent || $.contains($postBody[0], parent)) { if ($postBody[0] === parent || $.contains($postBody[0], parent)) {
const content = $.trim(selection.toString()); const content = selection.toString();
if (content) { if (content) {
const button = new PostQuoteButton({post, content}); const button = new PostQuoteButton({post, content});
m.render($container[0], button.render()); m.render($container[0], button.render());
const rect = range.getClientRects()[0]; const rects = range.getClientRects();
button.show(rect.left, $(window).scrollTop() + rect.top); 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)); $(document).on('mousedown', this.hide.bind(this));
} }
show(left, top) { showStart(left, top) {
const $this = this.$(); const $this = this.$();
$this.show() $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() { hide() {

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

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