Make pop-up dimensions configurable

We may want to reduce the default size of the pop-up once we implement automatic expanding of <details> sections regardless of the iframe size. Relevant: kiwix/kiwix-js#547
abdnh · Sep 26, 2022 · 0de438f · 0de438f
1 parent dcfa243
commit 0de438f
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 17 deletions.
diff --git a/designer/settings.ui b/designer/settings.ui
@@ -29,46 +29,87 @@
      <property name="title">
       <string>Pop-up Dictionary</string>
      </property>
-     <layout class="QFormLayout" name="formLayout">
-      <item row="0" column="0" colspan="2">
-       <widget class="QLabel" name="label_2">
+     <layout class="QGridLayout" name="gridLayout">
+      <item row="1" column="0" colspan="2">
+       <widget class="QLabel" name="label">
         <property name="text">
-         <string>Configure the dictionary used to look up words in the reviewing screen</string>
+         <string>Dictionary</string>
         </property>
        </widget>
       </item>
-      <item row="1" column="0">
-       <widget class="QLabel" name="label">
+      <item row="0" column="0" colspan="6">
+       <widget class="QLabel" name="label_2">
         <property name="text">
-         <string>Dictionary</string>
+         <string>Configure the dictionary used to look up words in the reviewing screen</string>
         </property>
        </widget>
       </item>
-      <item row="1" column="1">
+      <item row="1" column="2" colspan="4">
        <widget class="QComboBox" name="popupDictionaryComboBox"/>
       </item>
-      <item row="3" column="0" colspan="2">
+      <item row="3" column="4">
+       <widget class="QSpinBox" name="popupHeightSpinBox">
+        <property name="maximum">
+         <number>9999</number>
+        </property>
+       </widget>
+      </item>
+      <item row="4" column="0" colspan="6">
        <widget class="QPushButton" name="saveButton">
         <property name="text">
          <string>Save</string>
         </property>
        </widget>
       </item>
-      <item row="2" column="0">
+      <item row="2" column="2" colspan="4">
+       <widget class="QKeySequenceEdit" name="popupShortcut"/>
+      </item>
+      <item row="3" column="2">
+       <widget class="QSpinBox" name="popupWidthSpinBox">
+        <property name="maximum">
+         <number>9999</number>
+        </property>
+       </widget>
+      </item>
+      <item row="3" column="1">
+       <widget class="QLabel" name="label_4">
+        <property name="text">
+         <string>Width</string>
+        </property>
+        <property name="alignment">
+         <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
+        </property>
+       </widget>
+      </item>
+      <item row="2" column="0" colspan="2">
        <widget class="QLabel" name="label_3">
         <property name="text">
          <string>Shortcut</string>
         </property>
        </widget>
       </item>
-      <item row="2" column="1">
-       <widget class="QKeySequenceEdit" name="popupShortcut"/>
+      <item row="3" column="3">
+       <widget class="QLabel" name="label_5">
+        <property name="text">
+         <string>Height</string>
+        </property>
+        <property name="alignment">
+         <set>Qt::AlignRight|Qt::AlignTrailing|Qt::AlignVCenter</set>
+        </property>
+       </widget>
       </item>
      </layout>
     </widget>
    </item>
   </layout>
  </widget>
+ <tabstops>
+  <tabstop>popupDictionaryComboBox</tabstop>
+  <tabstop>popupShortcut</tabstop>
+  <tabstop>popupWidthSpinBox</tabstop>
+  <tabstop>popupHeightSpinBox</tabstop>
+  <tabstop>saveButton</tabstop>
+ </tabstops>
  <resources/>
  <connections/>
 </ui>
diff --git a/src/config.json b/src/config.json
@@ -3,6 +3,8 @@
     "browser_shortcut": "Ctrl+W",
     "popup_shortcut": "Alt+Shift+S",
     "popup_dictionary": "",
+    "popup_width": 800,
+    "popup_height": 700,
     "file_field": "",
     "parser_field": "",
     "word_field": "",

diff --git a/src/gui/settings.py b/src/gui/settings.py
@@ -41,13 +41,21 @@ def setup_ui(self) -> None:
         self.form.popupShortcut.setKeySequence(
             QKeySequence(self.config["popup_shortcut"])
         )
+        self.form.popupWidthSpinBox.setValue(int(self.config["popup_width"]))
+        self.form.popupHeightSpinBox.setValue(int(self.config["popup_height"]))
+
         # TODO: make other shortcuts configurable from here too
 
     def on_save(self) -> None:
         popup_dictionary = self.form.popupDictionaryComboBox.currentText()
         popup_shortcut = self.form.popupShortcut.keySequence().toString()
+        popup_width = self.form.popupWidthSpinBox.value()
+        popup_height = self.form.popupHeightSpinBox.value()
         self.config["popup_dictionary"] = popup_dictionary
         self.config["popup_shortcut"] = popup_shortcut
+        self.config["popup_width"] = popup_width
+        self.config["popup_height"] = popup_height
+
         self.mw.addonManager.writeConfig(__name__, self.config)
         popup.restart_server()
         popup.reset_shortcut()

diff --git a/src/popup.py b/src/popup.py
@@ -52,11 +52,15 @@ def handle_popup_request(
         return handled
     subcmd, word = parts[1:3]
     if subcmd == "popup":
-        # TODO: make width and height configurable
-        contents = f"<iframe src='{zim_server.url}{word}' width='600' height='500' style='display: block;'></iframe>"
+        config = mw.addonManager.getConfig(__name__)
+        width = config["popup_width"]
+        height = config["popup_height"]
+        contents = f"<iframe src='{zim_server.url}{word}' width='{width}' height='{height}' style='display: block;'></iframe>"
         contents = json.dumps(contents)
         web = get_webview_for_context(context)
-        web.eval(f"globalThis.tippyInstance.setContent({contents});")
+        web.eval(
+            f"globalThis.tippyInstance.setContent({contents}); globalThis.tippyInstance.setProps({{maxWidth: {width}}});"
+        )
     return (True, None)
 
 

diff --git a/src/web/popup.js b/src/web/popup.js
@@ -17,8 +17,6 @@ function showTooltipForSelection() {
         trigger: '',
         animation: "scale-extreme",
         appendTo: document.body,
-        // TODO: maybe make configurable and make sure to update the value set on the iframe to match
-        maxWidth: 600,
         onHide() {
             span.insertAdjacentHTML('afterend', span.innerHTML);
             span.remove();