HxListLayout and ChipList implementation and demo cleanup (#1012)

* ChipList - new visual, added missing CSS vars to docs, spacing with gap * HxListLayout - fine tuned demo with search, added top margin of ChipList, moved utility classes to css isolation, switched order of filter/command buttons
havit · Feb 11, 2025 · 7a4d3d2 · 7a4d3d2
1 parent 9911fdd
commit 7a4d3d2
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 23 deletions.
diff --git a/Havit.Blazor.Components.Web.Bootstrap/Chips/HxChipList.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Chips/HxChipList.razor.css
@@ -4,14 +4,18 @@
     gap: var(--hx-chip-list-gap);
 }
 ::deep .badge {
+    --bs-badge-border-radius: var(--bs-border-radius-pill);
+    --bs-badge-padding-y: .45em;
+    --bs-badge-padding-x: .75em;
+    padding-right: .35rem;
     display: inline-flex;
     align-items: center;
+    gap: var(--hx-chip-list-chip-gap);
 }
 
- .hx-chip-list-remove-btn {
+.hx-chip-list-remove-btn {
     display: flex;
     align-items: center;
-    margin: var(--hx-chip-list-chip-remove-btn-margin);
     opacity: var(--hx-chip-list-chip-remove-btn-opacity);
 }
 
@@ -21,11 +25,13 @@
 
 ::deep .hx-chip-list-remove-btn:hover {
     opacity: 1;
+    border-radius: 50%;
+    color: var(--bs-white);
+    background-color: rgba(var(--bs-dark-rgb), .5);
 }
 
 ::deep .hx-chip-list-label {
     font-weight: var(--hx-chip-list-chip-label-font-weight);
-    margin-right: var(--hx-chip-list-chip-label-margin);
     opacity: var(--hx-chip-list-chip-label-opacity);
 }
 

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Layouts/HxListLayout.razor b/Havit.Blazor.Components.Web.Bootstrap/Layouts/HxListLayout.razor
@@ -4,7 +4,7 @@
 <div class="@CssClassHelper.Combine("hx-list-layout", CssClassEffective)">
 	<HxCard Settings="CardSettingsEffective">
 		<BodyTemplate>
-			<div class="hx-list-layout-header hstack gap-2">
+			<div class="hx-list-layout-header">
 				@if ((NamedViews != null) && NamedViews.Any())
 				{
 					<div class="hx-list-layout-named-view dropdown">
@@ -51,14 +51,14 @@
 				{
 					@SearchTemplate
 				}
-				@if (FilterTemplate != null)
-				{
-					<HxButton Settings="FilterOpenButtonSettingsEffective" OnClick="HandleFilterButtonClick" />
-				}
 				@if (CommandsTemplate != null)
 				{
 					@CommandsTemplate
 				}
+				@if (FilterTemplate != null)
+				{
+					<HxButton Settings="FilterOpenButtonSettingsEffective" OnClick="HandleFilterButtonClick" />
+				}
 			</div>
 			@if (FilterModel != null)
 			{

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Layouts/HxListLayout.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Layouts/HxListLayout.razor.css
@@ -16,6 +16,18 @@
 	overflow: hidden;
 }
 
+.hx-list-layout-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-self: stretch;
+    gap: .5rem;
+}
+
+::deep .hx-chip-list {
+    margin-top: .5rem;
+}
+
 .hx-list-layout-header ::deep button {
     white-space: nowrap;
 }
@@ -64,15 +76,12 @@
 	margin-right: auto;
 }
 
-.hx-list-layout-named-view .card-title {
+.card-title {
     display: flex;
     align-items: center;
+    margin-bottom: 0;
 }
 
 .hx-list-layout-named-view ::deep .hx-icon {
     font-size: .75rem;
-}
-
-.hx-list-layout-header .card-title {
-    margin-bottom: 0;
 }
diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css
@@ -75,11 +75,10 @@
 
 	/* HxChipList */
 	--hx-chip-list-chip-margin:										0.75rem 0.25rem .375rem 0;
-	--hx-chip-list-chip-remove-btn-margin: 							0 0 0 .25rem;
-	--hx-chip-list-chip-remove-btn-opacity: 							.75;
-	--hx-chip-list-chip-reset-btn-padding: 							.35em .65em;
+	--hx-chip-list-chip-gap:										.25rem;
+	--hx-chip-list-chip-remove-btn-opacity: 						.75;
+	--hx-chip-list-chip-reset-btn-padding: 							.45em .75em;
 	--hx-chip-list-chip-label-font-weight: 							400;
-	--hx-chip-list-chip-label-margin: 								.25rem;
 	--hx-chip-list-chip-label-opacity: 								.75;
     --hx-chip-list-gap:												.25rem;
 

diff --git a/Havit.Blazor.Documentation/Pages/Components/HxChipListDoc/HxChipList_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxChipListDoc/HxChipList_Documentation.razor
@@ -13,21 +13,21 @@
         <ComponentApiDocCssVariable Name="--hx-chip-list-chip-margin" Default=".25rem">
             Gap between chips.
         </ComponentApiDocCssVariable>
-        <ComponentApiDocCssVariable Name="--hx-chip-list-chip-remove-btn-margin" Default="0 0 0 .25rem">
-            Margin of chip remove button.
+        <ComponentApiDocCssVariable Name="--hx-chip-list-chip-gap" Default=".25rem">
+            Gap between chip content.
         </ComponentApiDocCssVariable>
         <ComponentApiDocCssVariable Name="--hx-chip-list-chip-remove-btn-margin" Default=".5">
-            Opacity of chip remove button.
+            Initial opacity of chip remove button.
         </ComponentApiDocCssVariable>
         <ComponentApiDocCssVariable Name="--hx-chip-list-chip-label-font-weight" Default="400">
             Font weight of chip label.
         </ComponentApiDocCssVariable>
-        <ComponentApiDocCssVariable Name="--hx-chip-list-chip-label-margin" Default="400">
-            Margin of chip label.
-        </ComponentApiDocCssVariable>
         <ComponentApiDocCssVariable Name="--hx-chip-list-chip-label-opacity" Default=".5">
             Opacity of chip label.
         </ComponentApiDocCssVariable>
+        <ComponentApiDocCssVariable Name="--hx-chip-list-chip-reset-btn-padding" Default=".45em .75em">
+            Reset button padding.
+        </ComponentApiDocCssVariable>
     </CssVariables>
 
 </ComponentApiDoc>
diff --git a/...zor.Documentation/Pages/Components/HxListLayoutDoc/HxListLayout_Demo_SearchTemplate.razor b/...zor.Documentation/Pages/Components/HxListLayoutDoc/HxListLayout_Demo_SearchTemplate.razor
@@ -4,6 +4,7 @@
 	<SearchTemplate>
 		<HxInputText Placeholder="Search by name"
 					 Type="InputType.Search"
+					 CssClass="px-3 mx-auto flex-fill"
 					 @bind-Value="filterModel.Name"
 					 @bind-Value:after="gridComponent.RefreshDataAsync" />
 	</SearchTemplate>