From 310fed232949eedd90ff3fb807f1b4f89649e6cd Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Sun, 22 May 2016 14:05:38 +0930 Subject: [PATCH] Tweak quote button positioning/style Now appears where your cursor ends the selection, but not overlapping text. --- .../mentions/js/forum/dist/extension.js | 26 ++++++++++++++----- .../js/forum/src/addPostQuoteButton.js | 13 +++++++--- .../forum/src/components/PostQuoteButton.js | 14 +++++++--- extensions/mentions/less/forum/extension.less | 2 +- 4 files changed, 42 insertions(+), 13 deletions(-) diff --git a/extensions/mentions/js/forum/dist/extension.js b/extensions/mentions/js/forum/dist/extension.js index 5102e5759..cbe095402 100644 --- a/extensions/mentions/js/forum/dist/extension.js +++ b/extensions/mentions/js/forum/dist/extension.js @@ -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', diff --git a/extensions/mentions/js/forum/src/addPostQuoteButton.js b/extensions/mentions/js/forum/src/addPostQuoteButton.js index 25c581704..30c723a82 100644 --- a/extensions/mentions/js/forum/src/addPostQuoteButton.js +++ b/extensions/mentions/js/forum/src/addPostQuoteButton.js @@ -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); + } } } } diff --git a/extensions/mentions/js/forum/src/components/PostQuoteButton.js b/extensions/mentions/js/forum/src/components/PostQuoteButton.js index c01ac4fe8..5ec66b6dc 100644 --- a/extensions/mentions/js/forum/src/components/PostQuoteButton.js +++ b/extensions/mentions/js/forum/src/components/PostQuoteButton.js @@ -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() { diff --git a/extensions/mentions/less/forum/extension.less b/extensions/mentions/less/forum/extension.less index 62c075d75..576f1e365 100644 --- a/extensions/mentions/less/forum/extension.less +++ b/extensions/mentions/less/forum/extension.less @@ -88,5 +88,5 @@ } .PostQuoteButton { position: absolute; - box-shadow: 0 2px 4px @shadow-color; + .Button--color(@tooltip-color, @tooltip-bg); }