Add options of display position offset

src/_locales/en/messages.json

@@ -151,6 +151,9 @@
   "rightLabel": {
     "message": "Right"
   },
+  "positionOffsetLabel": {
+    "message": "Display position - Offset"
+  },
   "panelStyleLabel": {
     "message": "Translation panel"
   },

src/content/components/TranslateButton.js

@@ -4,7 +4,7 @@ import "../styles/TranslateButton.scss";
 
 const calcPosition = () => {
   const buttonSize = parseInt(getSettings("buttonSize"));
-  const offset = 10;
+  const offset = parseInt(getSettings("buttonOffset"));
   switch (getSettings("buttonDirection")) {
     case "top":
       return { top: -buttonSize - offset, left: -buttonSize / 2 };

src/content/components/TranslatePanel.js

@@ -31,7 +31,7 @@ export default class TranslatePanel extends Component {
     const windowWidth = document.documentElement.clientWidth;
     const windowHeight = document.documentElement.clientHeight;
     const referencePosition = this.props.position;
-    const offset = 10;
+    const offset = parseInt(getSettings("panelOffset"));
 
     let position = { x: 0, y: 0 };
     const panelDirection = getSettings("panelDirection");

src/settings/defaultSettings.js

@@ -143,7 +143,7 @@ export default [
           },
           {
             id: "buttonDirection",
-            title: "buttonPositionLabel",
+            title: "displayDirectionLabel",
             captions: [],
             type: "select",
             default: "bottomRight",
@@ -182,6 +182,15 @@ export default [
               }
             ],
             new: true
+          },
+          {
+            id: "buttonOffset",
+            title: "positionOffsetLabel",
+            captions: [],
+            type: "number",
+            default: 10,
+            placeholder: 10,
+            new: true
           }
         ]
       },
@@ -281,6 +290,15 @@ export default [
             ],
             new: true
           },
+          {
+            id: "panelOffset",
+            title: "positionOffsetLabel",
+            captions: [],
+            type: "number",
+            default: 10,
+            placeholder: 10,
+            new: true
+          },
           {
             id: "resultFontColor",
             title: "resultFontColorLabel",