FR-181 - added sized adjustment

Author: revenz

Components/PanelUserSettings/PanelUserSettings.razor

@@ -66,6 +66,25 @@
                               Code="UpdateDashboardSetting('LinkTarget', event)" />
         </span>
     </div>
+    
+    
+    <div class="setting integer">
+        <span class="label">@Translator.Instant($"Labels.SizeAdjustment")</span>
+        <span class="value">
+            @{
+                var value = 0;
+                int min = -5;
+                int max = 5;
+                var percent = (double)(value - min) / (max - min) * 100;
+                var style = $"background-size: {percent}% 100%";
+                <input onchange="UpdateSetting('SizeAdjustment', event)" id="slider-SizeAdjustment" style="@style" type="range" min="@min" max="@max" value="@value" />
+                <span class="range-value" id="SizeAdjustment-value">@value</span>
+            }
+        </span>
+    </div>
+    
+    
+    
     @if (SearchEngines?.Any() == true || SystemSearchEngines?.Any() == true)
     {
         <div class="setting">

Controllers/DashboardAppController.cs

@@ -63,7 +63,6 @@ public IActionResult Icon([FromRoute] string name, [FromRoute] string iconFile)
     /// <returns>the app</returns>
     private AppInstance? GetAppInstance(Guid userUid, string name, Guid uid)
     {
-
         List<Group> groups;
         string groupKey = userUid + "_Groups";
         lock (Cache)
@@ -77,7 +76,6 @@ public IActionResult Icon([FromRoute] string name, [FromRoute] string iconFile)
             }
         }
 
-
         if (groups.SelectMany(x => x.Items).FirstOrDefault(x => x.Uid == uid) is AppItem userApp == false)
             return null;
 

Models/UserSettings.cs

@@ -28,7 +28,7 @@ public class UserSettings: IModal
     /// Gets or sets the language for this user
     /// </summary>
     public string Language { get; set; }
-
+    
     /// <summary>
     /// Gets or sets the users theme settings
     /// </summary>

Views/Shared/_Layout.cshtml

@@ -12,7 +12,7 @@
     var themeInstance = ViewBag.Theme;
     var theme = themeInstance.Name;
     bool isGuest = ViewBag.IsGuest;
-    var userSettings = ViewBag.UserSettings;
+    var userSettings = ViewBag.UserSettings as UserSettings;
     var dashboards = ViewBag.Dashboards;
     var dashboard = ViewBag.Dashboard;
     var searchEngines = ViewBag.SearchEngines;
@@ -42,6 +42,7 @@
         </style>
     }
 
+    
     @{
         var accentColor = ViewBag.AccentColor ?? "#FF0090";
         var bkgColor = ViewBag.BackgroundColor ?? "#009099";

i18n/en.json

@@ -65,7 +65,8 @@
     "Address": "Address",
     "Icon": "Icon",
     "UnsavedTitle": "Warning Unsaved Changed", 
-    "UnsavedMessage": "Warning: Leaving this page without saving will result in the loss of any unsaved changes. Please make sure to save your work before navigating away."
+    "UnsavedMessage": "Warning: Leaving this page without saving will result in the loss of any unsaved changes. Please make sure to save your work before navigating away.",
+    "SizeAdjustment": "Zoom"
   },
   "ContextMenu": {
     "EditDashboard": "Edit Dashboard",

wwwroot/css/01_site.scss

@@ -15,14 +15,10 @@ html {
     min-height: 100%;
     // font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
     font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    font-size:13px;
+    --site-font-size:13px;
+    font-size:var(--site-font-size);
     font-weight: 400;
 }
-@media only screen and (min-resolution: 108dpi), only screen and (min-resolution: 1.08dppx) {
-    html {
-        font-size: 13px;
-    }
-}
 body {
     /* variables */
     --color-rgb: 240, 240, 240;

wwwroot/fenrus.png

@@ -218,6 +218,12 @@ function UpdateSetting(setting, event)
         changeDashboard(event);
         return;
     }
+    if(setting === 'SizeAdjustment'){
+        let value = event.target.value;
+        localStorage.setItem('SizeAdjustment', value);
+        sizeAdjustment(value);
+        return;
+    }
     UpdateSettingValue(`/settings/update-setting/${setting}/#VALUE#`, event);
 }
 
@@ -367,6 +373,7 @@ async function UpdateThemeSetting(theme, setting, event)
 
 function UpdateSettingValue(url, event)
 {
+    let dashboardSetting = url.indexOf('/dashboard') >= 0;
     return new Promise((resolve, reject) => {
 
         if(event?.target?.className === 'slider round') {
@@ -399,6 +406,9 @@ function UpdateSettingValue(url, event)
                 window.location.reload();
                 return;
             }
+            
+            if(!dashboardSetting)
+                return;
 
             let eleDashboard = document.querySelector('.dashboard');
             eleDashboard.classList.remove('hide-group-titles');
@@ -515,3 +525,27 @@ window.focusElement = (element, delay) => {
         element.focus();
     }
 };
+
+
+document.addEventListener("DOMContentLoaded", function() {
+    let size = parseInt(localStorage.getItem('SizeAdjustment') || 0);
+    if (isNaN(size))
+        size = 0;
+    sizeAdjustment(size);
+});
+
+function sizeAdjustment(size){
+    document.documentElement.style.fontSize = `calc(var(--site-font-size) + ${size}px)`;
+    let ele = document.getElementById('slider-SizeAdjustment');
+    if(ele) {
+        let min = -5;
+        let max = 5;
+        let percent = ((size - min) / (max - min)) * 100;
+        ele.style.backgroundSize = `${percent}% 100%`;
+        if(ele.value !== size)
+            ele.value = size;
+    }
+    let eleValue = document.getElementById('SizeAdjustment-value');
+    if(eleValue)
+        eleValue.innerText = size;
+}