Add horizontal popup offset

4 files changed, 14 insertions, 8 deletions

diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 373a1a6b..b5e1a27d 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -192,7 +192,8 @@ function optionsSetDefaults(options) {
             showAdvanced: false,
             popupWidth: 400,
             popupHeight: 250,
-            popupOffset: 10,
+            popupHorizontalOffset: 0,
+            popupVerticalOffset: 10,
             showGuide: true,
             compactTags: false,
             compactGlossaries: false,
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 7bc6a651..b5c733e2 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -33,7 +33,8 @@ async function formRead() {
     optionsNew.general.maxResults = parseInt($('#max-displayed-results').val(), 10);
     optionsNew.general.popupWidth = parseInt($('#popup-width').val(), 10);
     optionsNew.general.popupHeight = parseInt($('#popup-height').val(), 10);
-    optionsNew.general.popupOffset = parseInt($('#popup-offset').val(), 10);
+    optionsNew.general.popupHorizontalOffset = parseInt($('#popup-horizontal-offset').val(), 0);
+    optionsNew.general.popupVerticalOffset = parseInt($('#popup-vertical-offset').val(), 10);
 
     optionsNew.scanning.middleMouse = $('#middle-mouse-button-scan').prop('checked');
     optionsNew.scanning.selectText = $('#select-matched-text').prop('checked');
@@ -163,7 +164,8 @@ async function onReady() {
     $('#max-displayed-results').val(options.general.maxResults);
     $('#popup-width').val(options.general.popupWidth);
     $('#popup-height').val(options.general.popupHeight);
-    $('#popup-offset').val(options.general.popupOffset);
+    $('#popup-horizontal-offset').val(options.general.popupHorizontalOffset);
+    $('#popup-vertical-offset').val(options.general.popupVerticalOffset);
 
     $('#middle-mouse-button-scan').prop('checked', options.scanning.middleMouse);
     $('#select-matched-text').prop('checked', options.scanning.selectText);
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index c77f550c..5570b82f 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -93,8 +93,11 @@
                 </div>
 
                 <div class="form-group options-advanced">
-                    <label for="popup-offset">Popup offset (in pixels)</label>
-                    <input type="number" min="0" id="popup-offset" class="form-control">
+                    <label>Popup offset (horizontal, vertical; in pixels)</label>
+                    <div class="row">
+                        <div class="col-xs-6"><input type="number" min="0" id="popup-horizontal-offset" class="form-control"></div>
+                        <div class="col-xs-6"><input type="number" min="0" id="popup-vertical-offset" class="form-control"></div>
+                    </div>
                 </div>
             </div>
 
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index a17b184a..58e0672e 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -50,7 +50,7 @@ class Popup {
         const limitX = document.body.clientWidth;
         const limitY = window.innerHeight;
 
-        let x = elementRect.left;
+        let x = elementRect.left + options.general.popupHorizontalOffset;
         let width = Math.max(containerWidth, options.general.popupWidth);
         const overflowX = Math.max(x + width - limitX, 0);
         if (overflowX > 0) {
@@ -64,8 +64,8 @@ class Popup {
 
         let y = 0;
         let height = Math.max(containerHeight, options.general.popupHeight);
-        const yBelow = elementRect.bottom + options.general.popupOffset;
-        const yAbove = elementRect.top - options.general.popupOffset;
+        const yBelow = elementRect.bottom + options.general.popupVerticalOffset;
+        const yAbove = elementRect.top - options.general.popupVerticalOffset;
         const overflowBelow = Math.max(yBelow + height - limitY, 0);
         const overflowAbove = Math.max(height - yAbove, 0);
         if (overflowBelow > 0 || overflowAbove > 0) {