From a71e9997480c76dd33c62a710155e4c26f733b03 Mon Sep 17 00:00:00 2001
From: Alperen Elhan <alperen@elhan.io>
Date: Mon, 6 Mar 2023 20:07:56 +0300
Subject: [PATCH] fix: use correct scaling when calculating the height. fixes
 #151

---
 src/components/panoItem.ts   | 23 ++++++++++++++++-------
 src/components/searchBox.ts  | 11 +++++++++--
 src/containers/panoWindow.ts | 13 ++++++++++---
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/components/panoItem.ts b/src/components/panoItem.ts
index 16939304..f171c1b3 100644
--- a/src/components/panoItem.ts
+++ b/src/components/panoItem.ts
@@ -22,7 +22,7 @@ import { MetaInfo, TYPE_STRING } from '@gi-types/gobject2';
 import { Point } from '@gi-types/graphene1';
 import { Cursor } from '@gi-types/meta10';
 import { Global } from '@gi-types/shell0';
-import { BoxLayout } from '@gi-types/st1';
+import { BoxLayout, ThemeContext } from '@gi-types/st1';
 import { PanoItemHeader } from '@pano/components/panoItemHeader';
 import { DBItem } from '@pano/utils/db';
 import { registerGObjectClass } from '@pano/utils/gjs';
@@ -140,16 +140,25 @@ export class PanoItem extends BoxLayout {
     this.add_child(this.header);
     this.add_child(this.body);
 
-    this.set_height(this.settings.get_int('window-height') - 80);
-    this.set_width(this.settings.get_int('window-height') - 80);
-    this.body.set_height(this.settings.get_int('window-height') - 80 - 57);
+    const themeContext = ThemeContext.get_for_stage(Global.get().get_stage());
+
+    themeContext.connect('notify::scale-factor', () => {
+      this.setWindowHeight();
+    });
+
+    this.setWindowHeight();
     this.settings.connect('changed::window-height', () => {
-      this.set_height(this.settings.get_int('window-height') - 80);
-      this.set_width(this.settings.get_int('window-height') - 80);
-      this.body.set_height(this.settings.get_int('window-height') - 80 - 57);
+      this.setWindowHeight();
     });
   }
 
+  private setWindowHeight() {
+    const { scaleFactor } = ThemeContext.get_for_stage(Global.get().get_stage());
+    this.set_height((this.settings.get_int('window-height') - 80) * scaleFactor);
+    this.set_width((this.settings.get_int('window-height') - 80) * scaleFactor);
+    this.body.set_height((this.settings.get_int('window-height') - 80 - 57) * scaleFactor);
+  }
+
   private setSelected(selected: boolean) {
     if (selected) {
       const activeItemBorderColor = this.settings.get_string('active-item-border-color');
diff --git a/src/components/searchBox.ts b/src/components/searchBox.ts
index 443f31bc..3df34156 100644
--- a/src/components/searchBox.ts
+++ b/src/components/searchBox.ts
@@ -17,7 +17,7 @@ import { icon_new_for_string, IconPrototype } from '@gi-types/gio2';
 import { MetaInfo, TYPE_BOOLEAN, TYPE_INT, TYPE_STRING } from '@gi-types/gobject2';
 import { Cursor } from '@gi-types/meta10';
 import { Global } from '@gi-types/shell0';
-import { BoxLayout, Entry, Icon } from '@gi-types/st1';
+import { BoxLayout, Entry, Icon, ThemeContext } from '@gi-types/st1';
 import { registerGObjectClass } from '@pano/utils/gjs';
 import { PanoItemTypes } from '@pano/utils/panoItemType';
 import { _, getCurrentExtension } from '@pano/utils/shell';
@@ -51,15 +51,22 @@ export class SearchBox extends BoxLayout {
       vertical: false,
     });
 
+    const themeContext = ThemeContext.get_for_stage(Global.get().get_stage());
+
     this.search = new Entry({
       can_focus: true,
       hint_text: _('Type to search, Tab to cycle'),
       track_hover: true,
-      width: 300,
+      width: 300 * themeContext.scaleFactor,
       primary_icon: this.createSearchEntryIcon('edit-find-symbolic', 'search-entry-icon'),
       secondary_icon: this.createSearchEntryIcon('starred-symbolic', 'search-entry-fav-icon'),
     });
 
+    themeContext.connect('notify::scale-factor', () => {
+      const { scaleFactor } = ThemeContext.get_for_stage(Global.get().get_stage());
+      this.search.set_width(300 * scaleFactor);
+    });
+
     this.search.connect('primary-icon-clicked', () => {
       this.focus();
       this.toggleItemType(false);
diff --git a/src/containers/panoWindow.ts b/src/containers/panoWindow.ts
index e215eaee..8c501964 100644
--- a/src/containers/panoWindow.ts
+++ b/src/containers/panoWindow.ts
@@ -1,6 +1,7 @@
 import { ActorAlign, AnimationMode, EVENT_PROPAGATE, KEY_Escape, KeyEvent } from '@gi-types/clutter10';
 import { Settings } from '@gi-types/gio2';
-import { BoxLayout } from '@gi-types/st1';
+import { Global } from '@gi-types/shell0';
+import { BoxLayout, ThemeContext } from '@gi-types/st1';
 import { MonitorBox } from '@pano/components/monitorBox';
 import { PanoScrollView } from '@pano/components/panoScrollView';
 import { SearchBox } from '@pano/components/searchBox';
@@ -30,9 +31,15 @@ export class PanoWindow extends BoxLayout {
     });
 
     this.settings = getCurrentExtensionSettings();
-    this.set_height(this.settings.get_int('window-height'));
+    const themeContext = ThemeContext.get_for_stage(Global.get().get_stage());
+    this.set_height(this.settings.get_int('window-height') * themeContext.scaleFactor);
     this.settings.connect('changed::window-height', () => {
-      this.set_height(this.settings.get_int('window-height'));
+      this.set_height(this.settings.get_int('window-height') * themeContext.scaleFactor);
+    });
+
+    themeContext.connect('notify::scale-factor', () => {
+      const { scaleFactor } = ThemeContext.get_for_stage(Global.get().get_stage());
+      this.set_height(this.settings.get_int('window-height') * scaleFactor);
     });
 
     this.settings.connect('changed::window-background-color', () => {