DYN-5426 Setting different font size when the height of the library is smaller (#13578)

filipeotero · web-flow · commit 2717d5b45e37 · 2022-12-01T10:56:13.000+08:00
* Setting different font size when the height is smaller

* calculate the font size based on the screen height
diff --git a/src/LibraryViewExtensionWebView2/LibraryViewController.cs b/src/LibraryViewExtensionWebView2/LibraryViewController.cs
@@ -49,6 +49,12 @@ public class LibraryViewController : IDisposable
         private LibraryViewCustomization customization;
         internal string WebBrowserUserDataFolder { get; set; }
 
+        //Assuming that the fon size is 14px and the screen height is 1080 initially
+        private const int standardFontSize = 14;
+        private const int standardScreenHeight = 1080;
+        private double libraryFontSize;
+
+
         /// <summary>
         /// Creates a LibraryViewController.
         /// </summary>
@@ -313,6 +319,8 @@ private void Browser_CoreWebView2InitializationCompleted(object sender, CoreWebV
             {
                 string msg = ex.Message;
             }
+
+            SetLibraryFontSize();
         }
 
         private void Browser_Loaded(object sender, RoutedEventArgs e)
@@ -328,6 +336,25 @@ private void Browser_SizeChanged(object sender, SizeChangedEventArgs e)
             {
                 browser.InvalidateVisual();
                 UpdatePopupLocation();
+                SetLibraryFontSize();
+            }
+        }
+
+        //Changes the size of the font's library depending of the screen height
+        private async void SetLibraryFontSize()
+        {
+            //Gets the height of the primary monitor
+            var height = SystemParameters.PrimaryScreenHeight;
+
+            //Calculates the proportion of the font size depending on the screen height
+            //Changing the scale also changes the screen height (F.E: height of 1080px with 150% will be actually 720px)
+            var fontSize = (standardFontSize * height) / standardScreenHeight;
+
+            if(fontSize != libraryFontSize)
+            {
+                var result = await ExecuteScriptFunctionAsync(browser, "setLibraryFontSize", fontSize);
+                if(result != null)
+                    libraryFontSize = fontSize;
             }
         }
 
@@ -553,6 +580,9 @@ protected void Dispose(bool disposing)
 
         public static async Task<string> ExecuteScriptFunctionAsync(WebView2 webView2, string functionName, params object[] parameters)
         {
+            if (webView2.CoreWebView2 == null)
+                return null;
+
             string script = functionName + "(";
             for (int i = 0; i < parameters.Length; i++)
             {
diff --git a/src/LibraryViewExtensionWebView2/web/library/library.html b/src/LibraryViewExtensionWebView2/web/library/library.html
@@ -9,10 +9,6 @@
     <!-- input::-ms-clear setting is to disable unnecessary close button of search bar -->
     <style>
 
-        html {
-            font-size: 14px !important;
-        }
-
         body {
             padding: 0;
             margin: 0;
@@ -237,6 +233,10 @@
         });
 
 
+        function setLibraryFontSize(fontSize) {
+            document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px';
+        }
+
         //This will find a specific div in the html and then it will apply the glow animation on it
         function highlightLibraryItem(itemName, enableHighlight) {
             var found_div = null;
