Merge pull request #17 from strem-app/add-more-tasks

Added ability to zoom UI
strem-app · Aug 19, 2022 · c92fd1d · c92fd1d
2 parents e9937cd + 87853d8
commit c92fd1d
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 16 deletions.
diff --git a/src/Strem.Core/Variables/UIVariables.cs b/src/Strem.Core/Variables/UIVariables.cs
@@ -5,4 +5,5 @@ public class UIVariables
     public static readonly VariableEntry ShowHelpersVariable = new VariableEntry("show-helpers", "ui");
     public static readonly VariableEntry BackupFrequencyInDays = new VariableEntry("backup.frequency", "ui");
     public static readonly VariableEntry LastBackupDate = new VariableEntry("backup.last-run", "ui");
+    public static readonly VariableEntry ZoomVariable = new VariableEntry("zoom", "ui");
 }
diff --git a/src/Strem.Infrastructure/Plugin/InfrastructurePluginStartup.cs b/src/Strem.Infrastructure/Plugin/InfrastructurePluginStartup.cs
@@ -36,12 +36,12 @@ public async Task StartPlugin()
     {
         AppState.UserVariables.OnVariableChanged
             .Throttle(TimeSpan.FromSeconds(5))
-            .Subscribe(_ => AppFileHandler.SaveAppState(AppState))
+            .Subscribe(_ => AppFileHandler.SaveUserState(AppState))
             .AddTo(_subs);
 
         AppState.AppVariables.OnVariableChanged
             .Throttle(TimeSpan.FromSeconds(5))
-            .Subscribe(_ => AppFileHandler.SaveUserState(AppState))
+            .Subscribe(_ => AppFileHandler.SaveAppState(AppState))
             .AddTo(_subs);
 
         AppState.UserVariables.OnVariableChanged

diff --git a/src/Strem.UI/Pages/Settings.razor b/src/Strem.UI/Pages/Settings.razor
@@ -5,22 +5,55 @@
 @using Strem.Core.Extensions
 @using Strem.Core.Variables
 
+@inject IJSRuntime JS
 @inject IAppState AppState;
 
 <div class="container is-fluid">
-  <h3 class="title is-3">Settings</h3>
-  <div class="box">
-    <label class="label is-size-4">UI Settings</label>
-    <div class="field">
-        <div class="control">
-            <label class="checkbox">
-                <input type="checkbox" @bind="ShowHelpers">
-                Show Helper Text On UI?
-            </label>
+
+    <h3 class="title is-3">Settings</h3>
+    <div class="box">
+        <label class="label is-size-4">UI Settings</label>
+
+        <div class="field">
+            <label class="label">Helpers</label>
+            <div class="control">
+                <label class="checkbox">
+                    <input type="checkbox" @bind="ShowHelpers">
+                    Show Helper Text On UI?
+                </label>
+            </div>
+            <HelperInfo>This is an example of a helper, if you turn this off you wont see them throughout the system</HelperInfo>
         </div>
-        <HelperInfo>This is an example of a helper, if you turn this off you wont see them throughout the system</HelperInfo>
+
+        <div class="field">
+            <label class="label">Zoom Level</label>
+            <div class="control">
+                <nav class="level">
+                  <div class="level-item has-text-left">
+                    <div>
+                        <span class="tag">75%</span>
+                    </div>
+                  </div>
+                  <div class="level-item has-text-centered">
+                    <div>
+                        <span class="tag">100%</span>
+                    </div>
+                  </div>
+                  <div class="level-item has-text-right">
+                    <div>
+                        <span class="tag">125%</span>
+                    </div>
+                  </div>
+                </nav>
+            </div>
+            <div class="control">
+                <input class="slider is-fullwidth" step="5" min="75" max="125" type="range" @bind="ZoomRate">
+            </div>
+            <HelperInfo>This will make everything bigger/smaller throughout the app</HelperInfo>
+        </div>
+
     </div>
-  </div>
+    
 </div>
 
 @code {
@@ -31,5 +64,18 @@
         set =>  AppState.AppVariables.Set(UIVariables.ShowHelpersVariable, value);
     }
 
+    public int ZoomRate
+    {
+        get => AppState.AppVariables.Get<int>(UIVariables.ZoomVariable);
+        set
+        {
+            if(value is < 50 or > 150){ return; }
+            AppState.AppVariables.Set(UIVariables.ZoomVariable, value);
+            UpdateZoom(value);
+        }
+    }
+
+    public void UpdateZoom(int newValue)
+    { JS.InvokeVoidAsync("setZoom", newValue);}
 
 }
diff --git a/src/Strem.UI/Shared/MainLayout.razor b/src/Strem.UI/Shared/MainLayout.razor
@@ -1,6 +1,13 @@
-@inherits LayoutComponentBase
+@using Strem.Core.State
+@using Strem.Core.Variables
+@using Strem.Core.Extensions
+@inherits LayoutComponentBase
 
 @inject NavigationManager NavManager
+@inject IJSRuntime JS
+@inject IAppState AppState; 
+
+@implements IDisposable
 
 <section class="hero is-dark is-fullheight">
   @if (!IsSplashScreen)
@@ -26,5 +33,26 @@
 @code {
 
   public bool IsSplashScreen => (NavManager.Uri == NavManager.BaseUri);
-
+
+  protected override async Task OnInitializedAsync()
+  {
+    UpdateZoom(null, null);
+    NavManager.LocationChanged += UpdateZoom;
+  }
+
+  private void UpdateZoom(object sender, LocationChangedEventArgs e)
+  {
+    if (IsSplashScreen){ return; }
+    if (!AppState.AppVariables.Has(UIVariables.ZoomVariable)) { return; }
+
+    var zoomVar = AppState.AppVariables.Get<int>(UIVariables.ZoomVariable);
+    if (zoomVar >= 75 && zoomVar <= 125)
+    { JS.InvokeVoidAsync("setZoom", zoomVar); }
+  }
+
+  public void Dispose()
+  {
+    NavManager.LocationChanged -= UpdateZoom;
+  }
+
 }
diff --git a/src/Strem/wwwroot/css/app-styles.less b/src/Strem/wwwroot/css/app-styles.less
@@ -186,4 +186,9 @@ body
 }
 
 .accordion .paged-content-header .title
-{ color: #000; }
+{ color: #000; }
+
+.level-item {
+    &.has-text-left { flex-grow: 0 !important; }
+    &.has-text-right { flex-grow: 0 !important; }
+}
diff --git a/src/Strem/wwwroot/css/bulma-slider.css b/src/Strem/wwwroot/css/bulma-slider.css
diff --git a/src/Strem/wwwroot/index.html b/src/Strem/wwwroot/index.html
@@ -7,13 +7,16 @@
         <base href="/" />
         <link href="css/bulma.css" rel="stylesheet" />
         <link href="css/bulma-tooltip.css" rel="stylesheet" />
+        <link href="css/bulma-slider.css" rel="stylesheet" />
         <link href="css/all.css" rel="stylesheet" />
         <link href="css/app-styles.less" type="text/css" rel="stylesheet/less" />
     </head>    
     <body>
         <div id="app" class="has-background-dark"></div>
 
         <script src="js/less.min.js" ></script>
+        <script src="js/bulma-slider.js" ></script>
+        <script src="js/interop-methods.js" ></script>
         <script src="_framework/blazor.webview.js"></script>
     </body>
 </html>