The sidebar in the price overlay can now be resized

Sidekick-Poe · Dec 27, 2024 · 23b2726 · 23b2726
1 parent 7e19b3e
commit 23b2726
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 19 deletions.
diff --git a/src/Sidekick.Common.Ui/Layouts/LayoutTwoColumn.razor b/src/Sidekick.Common.Ui/Layouts/LayoutTwoColumn.razor
@@ -3,7 +3,7 @@
         @TopContent
     </div>
     <div class="grow flex flex-nowrap items-stretch">
-        <div class="@(HasChildContent ? "w-[22em]" : "grow") relative">
+        <div id="@LeftContentId" class="@LeftContentClasses" style="@($"width: {LeftContentWidth}px")">
             <div class="absolute top-0 left-0 w-full h-full overflow-y-auto overflow-x-hidden dark:bg-stone-950">
                 @LeftContent
             </div>
@@ -22,6 +22,35 @@
     </div>
 </div>
 
+<script>
+    /**
+     * https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore?tab=readme-ov-file#_debounce
+     */
+    function debounce(func, wait, immediate) {
+        var timeout;
+        return function () {
+            var context = this, args = arguments;
+            clearTimeout(timeout);
+            if (immediate && !timeout) func.apply(context, args);
+            timeout = setTimeout(function () {
+                timeout = null;
+                if (!immediate) func.apply(context, args);
+            }, wait);
+        };
+    }
+
+    function attachResizeObserver(elementId, callbackName, dotNetHelper) {
+        try {
+            const resizeObserver = new ResizeObserver(debounce(async (e) => await dotNetHelper.invokeMethodAsync(callbackName, e[0].contentRect.width), 100));
+            const element = document.getElementById(elementId);
+            resizeObserver.observe(element);
+            element.classList.add("resize-x");
+        } catch { }
+    }
+</script>
+
+@inject IJSRuntime jsRuntime
+
 @code {
 
     [Parameter]
@@ -30,6 +59,9 @@
     [Parameter]
     public RenderFragment? LeftContent { get; set; }
 
+    [Parameter]
+    public int LeftContentWidth { get; set; }
+
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
@@ -39,4 +71,43 @@
     [Parameter]
     public RenderFragment? BottomContent { get; set; }
 
+    [Parameter]
+    public EventCallback<int> OnLeftContentResize { get; set; }
+
+    private string LeftContentId { get; } = UiUtilities.GenerateId();
+
+    private string LeftContentClasses
+    {
+        get
+        {
+            var classes = new List<string> { "relative", "overflow-auto", "min-w-[22em]", };
+
+            if (HasChildContent) classes.Add("max-w-[35em]");
+            else classes.Add("w-full");
+
+            return string.Join(" ", classes);
+        }
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && HasChildContent && OnLeftContentResize.HasDelegate)
+        {
+            try
+            {
+                var dotNetReference = DotNetObjectReference.Create(this);
+                await jsRuntime.InvokeVoidAsync("attachResizeObserver", LeftContentId, nameof(ResizeLeftContent), dotNetReference);
+            }
+            catch { }
+        }
+    }
+
+    [JSInvokable]
+    public void ResizeLeftContent(int width)
+    {
+        if (width != 0)
+        {
+            OnLeftContentResize.InvokeAsync(width);
+        }
+    }
 }
diff --git a/src/Sidekick.Common.Ui/wwwroot/css/app.css b/src/Sidekick.Common.Ui/wwwroot/css/app.css
@@ -1859,10 +1859,6 @@ video {
   width: 1em;
 }
 
-.w-\[22em\] {
-  width: 22em;
-}
-
 .w-\[450px\] {
   width: 450px;
 }
@@ -1908,6 +1904,10 @@ video {
   min-width: 1em;
 }
 
+.min-w-\[22em\] {
+  min-width: 22em;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -1916,6 +1916,10 @@ video {
   max-width: 15rem;
 }
 
+.max-w-\[35em\] {
+  max-width: 35em;
+}
+
 .max-w-\[800px\] {
   max-width: 800px;
 }
@@ -3355,10 +3359,6 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.pb-9 {
-  padding-bottom: 2.25rem;
-}
-
 .pb-\[21\.75\%\] {
   padding-bottom: 21.75%;
 }

diff --git a/src/Sidekick.Common/Settings/SettingKeys.cs b/src/Sidekick.Common/Settings/SettingKeys.cs
@@ -48,6 +48,7 @@ public static class SettingKeys
     public const string PriceCheckCurrencyMode = nameof(PriceCheckCurrencyMode);
     public const string PriceCheckNormalizeValue = nameof(PriceCheckNormalizeValue);
     public const string PriceCheckCompactMode = nameof(PriceCheckCompactMode);
+    public const string PriceCheckSidebarWidth = nameof(PriceCheckSidebarWidth);
 
     public const string SaveWindowPositions = nameof(SaveWindowPositions);
 

diff --git a/src/Sidekick.Modules.Maps/PoeWikiMapInfo.razor b/src/Sidekick.Modules.Maps/PoeWikiMapInfo.razor
@@ -37,7 +37,7 @@ else if (Map != null)
 
             @if (Map.Screenshot != null)
             {
-                <figure class="max-w-lg">
+                <figure class="max-w-lg self-center">
                     @if (Map.AreaTypeTags?.Any() ?? false)
                     {
                         <figcaption class="mb-2 text-center">

diff --git a/src/Sidekick.Modules.Trade/Components/Filters/FiltersComponent.razor b/src/Sidekick.Modules.Trade/Components/Filters/FiltersComponent.razor
@@ -18,7 +18,7 @@
                     Influences="PriceCheckService.Item.Influences"/>
     </div>
 
-    <div class="grow overflow-y-auto pb-9">
+    <div class="grow overflow-y-auto py-2">
         <SidekickErrorBoundary>
             <PriceNinjaComponent/>
         </SidekickErrorBoundary>

diff --git a/src/Sidekick.Modules.Trade/Prices.razor b/src/Sidekick.Modules.Trade/Prices.razor
@@ -9,32 +9,32 @@
 
 @inherits Sidekick.Common.Ui.Views.SidekickView
 
-<AppTitle Title="@Resources.Trade"/>
+<AppTitle Title="@Resources.Trade" />
 
-<LayoutTwoColumn>
+<LayoutTwoColumn LeftContentWidth="@LeftContentWidth" OnLeftContentResize="@OnLeftContentResize">
     <TopContent>
         <AppBar>
             <AppSettings Href="/settings/price">
-                <SettingsContent/>
+                <SettingsContent />
             </AppSettings>
-            <AppClose/>
+            <AppClose />
         </AppBar>
     </TopContent>
     <LeftContent>
         @if (PriceCheckService.IsFilterLoading)
         {
-            <AppLoading/>
+            <AppLoading />
         }
         else
         {
-            <FiltersComponent/>
+            <FiltersComponent />
         }
     </LeftContent>
     <ChildContent>
         <SidekickErrorBoundary>
             <AppContainer>
-                <BulkResult/>
-                <ItemsResult/>
+                <BulkResult />
+                <ItemsResult />
             </AppContainer>
         </SidekickErrorBoundary>
     </ChildContent>
@@ -55,11 +55,14 @@
 
     public override SidekickViewType ViewType => SidekickViewType.Overlay;
 
+    private int LeftContentWidth { get; set; }
+
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();
         PriceCheckService.FilterLoadingChanged += StateHasChanged;
         CloseOnBlur = await SettingsService.GetBool(SettingKeys.PriceCheckCloseWithMouse);
+        LeftContentWidth = await SettingsService.GetInt(SettingKeys.PriceCheckSidebarWidth);
     }
 
     protected override async Task OnParametersSetAsync()
@@ -74,6 +77,11 @@
         await PriceCheckService.Initialize(ItemText.DecodeBase64Url() ?? string.Empty);
     }
 
+    private async Task OnLeftContentResize(int width)
+    {
+        await SettingsService.Set(SettingKeys.PriceCheckSidebarWidth, width);
+    }
+
     public void Dispose()
     {
         PriceCheckService.FilterLoadingChanged -= StateHasChanged;