Merge pull request #408 from Sidekick-Poe/feature/tri-state

Clarify the corrupted checkbox tristate
Sidekick-Poe · Dec 27, 2024 · 7e19b3e · 7e19b3e
2 parents 8984955 + d1ae88a
commit 7e19b3e
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 28 deletions.
diff --git a/src/Sidekick.Common.Ui/Forms/FormCheckbox.razor b/src/Sidekick.Common.Ui/Forms/FormCheckbox.razor
@@ -1,12 +1,5 @@
-<div class="flex items-center min-h-5 @(NoMargin ? "" : "mb-3")">
-    @if (Value)
-    {
-        <input name="custom-checkbox" id="@Id" type="checkbox" class="hidden peer" checked @onchange="OnChange">
-    }
-    else
-    {
-        <input name="custom-checkbox" id="@Id" type="checkbox" class="hidden peer" @onchange="OnChange">
-    }
+<div class="flex items-center min-h-5 @(NoMargin ? "" : "mb-3")">
+    <input name="custom-checkbox" id="@Id" type="checkbox" class="hidden peer" checked="@Value" @onchange="OnChange">
     <label for="@Id"
            @onmouseenter="OnMouseEnter"
            @onmousedown="OnMouseDown"

diff --git a/src/Sidekick.Common.Ui/Forms/FormTriStateCheckbox.razor b/src/Sidekick.Common.Ui/Forms/FormTriStateCheckbox.razor
@@ -1,17 +1,6 @@
-<div class="flex items-center h-5 @(NoMargin ? "" : "mb-3")">
-    @if (Value == null)
-    {
-        <input name="custom-checkbox" id="@Id" type="checkbox" class="hidden peer" checked @onchange="OnChange">
-    }
-    else if (Value == true)
-    {
-        <input name="custom-checkbox" id="@Id" type="checkbox" class="hidden peer" checked @onchange="OnChange">
-    }
-    else
-    {
-        <input name="custom-checkbox" id="@Id" type="checkbox" class="hidden peer" @onchange="OnChange">
-    }
-    <label for="@Id" class="leading-none peer-checked:[&_svg]:scale-100 peer-checked:text-zinc-600 [&_svg]:scale-0 peer-checked:[&_.custom-checkbox]:border-zinc-500 peer-checked:[&_.custom-checkbox]:bg-zinc-500 select-none flex items-center space-x-2">
+<div class="flex items-center h-5 @(NoMargin ? "" : "mb-3")">
+    <input name="custom-checkbox" id="@Id" type="checkbox" class="hidden peer" checked="@Value" @onchange="OnChange">
+    <label for="@Id" tabindex="0" class="leading-none peer-checked:[&_svg]:scale-100 peer-checked:text-zinc-600 [&_svg]:scale-0 peer-checked:[&_.custom-checkbox]:border-zinc-500 peer-checked:[&_.custom-checkbox]:bg-zinc-500 select-none flex items-center space-x-2">
         <span class="flex items-center justify-center w-5 h-5 border-2 rounded custom-checkbox dark:bg-zinc-700 dark:border-zinc-600">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-3 h-3 text-white duration-300 ease-out">
                 @if (Value == null)

diff --git a/src/Sidekick.Common.Ui/wwwroot/css/app.css b/src/Sidekick.Common.Ui/wwwroot/css/app.css
@@ -1508,6 +1508,11 @@ video {
   margin-bottom: 0px;
 }
 
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1539,6 +1544,10 @@ video {
   margin-bottom: 0.75rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .ml-0 {
   margin-left: 0px;
 }
@@ -1563,10 +1572,22 @@ video {
   margin-left: auto;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -1583,6 +1604,10 @@ video {
   margin-top: 1rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .mt-9 {
   margin-top: 2.25rem;
 }
@@ -1915,6 +1940,10 @@ video {
   flex-grow: 1;
 }
 
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
 .grow {
   flex-grow: 1;
 }
@@ -3318,6 +3347,10 @@ video {
   padding-bottom: 1rem;
 }
 
+.pb-0 {
+  padding-bottom: 0px;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -3338,6 +3371,10 @@ video {
   padding-bottom: 4px;
 }
 
+.pl-12 {
+  padding-left: 3rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -3354,10 +3391,22 @@ video {
   padding-right: 0.5rem;
 }
 
+.pr-4 {
+  padding-right: 1rem;
+}
+
+.pt-0 {
+  padding-top: 0px;
+}
+
 .pt-2 {
   padding-top: 0.5rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .pt-\[4px\] {
   padding-top: 4px;
 }

diff --git a/src/Sidekick.Modules.Trade/Components/Filters/PropertyFilterComponent.razor b/src/Sidekick.Modules.Trade/Components/Filters/PropertyFilterComponent.razor
@@ -1,6 +1,7 @@
 @using Sidekick.Apis.Poe.Trade.Models
 @using Sidekick.Common.Game.Languages
 @using Sidekick.Common.Settings
+@using Sidekick.Modules.Trade.Localization;
 
 <FilterWrapper>
     <div class="flex flex-nowrap items-center">
@@ -9,9 +10,15 @@
             {
                 <FormTriStateCheckbox @bind-Value="Filter.Checked"
                                       NoMargin="true">
-                    <ItemPropertyText Label="@Filter.Text"
-                                      Value="@Filter.ValueString"
-                                      OnlyShowLabel="true"/>
+                    <div class="flex items-center gap-1">
+                        <ItemPropertyText Label="@Filter.Text"
+                                          Value="@Filter.ValueString"
+                                          OnlyShowLabel="true"/>
+                        @if (Filter.Checked == null)
+                        {
+                        <span class="dark:text-zinc-200 text-sm">(@Resources["Any"])</span>
+                        }
+                    </div>
                 </FormTriStateCheckbox>
             }
             else
@@ -71,6 +78,7 @@
 @inject PriceCheckService PriceCheckService
 @inject IGameLanguageProvider GameLanguageProvider
 @inject ISettingsService SettingsService
+@inject IStringLocalizer<TradeResources> Resources
 
 @code {
 

diff --git a/src/Sidekick.Modules.Trade/Localization/TradeResources.fr.resx b/src/Sidekick.Modules.Trade/Localization/TradeResources.fr.resx
@@ -240,4 +240,7 @@
   <data name="Open_Website" xml:space="preserve">
     <value>Ouvrir le site web</value>
   </data>
-</root>
+  <data name="Any" xml:space="preserve">
+    <value>Tous</value>
+  </data>
+</root>
diff --git a/src/Sidekick.Modules.Trade/Localization/TradeResources.resx b/src/Sidekick.Modules.Trade/Localization/TradeResources.resx
@@ -240,4 +240,7 @@
   <data name="Open_Website" xml:space="preserve">
     <value>Open Website</value>
   </data>
-</root>
+  <data name="Any" xml:space="preserve">
+    <value>Any</value>
+  </data>
+</root>