HxTreeViewItem - fix collapse caret orientation + better clickability

havit · Sep 7, 2023 · 00a0570 · 00a0570
1 parent 322cbad
commit 00a0570
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/Havit.Blazor.Components.Web.Bootstrap/TreeViews/Internal/HxTreeViewItemInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/TreeViews/Internal/HxTreeViewItemInternal.razor
@@ -18,11 +18,9 @@
 	<div class="hx-tree-view-item-expander-container">
 		@if (hasChildren)
 		{
-			<div @onclick:stopPropagation="true">
-				<HxCollapseToggleElement ElementName="div" CollapseTarget="@($"#{collapseId}")" CssClass="hx-tree-view-item-expander">
-					<HxIcon Icon="@BootstrapIcon.ChevronRight" />
-				</HxCollapseToggleElement>
-			</div>
+			<HxCollapseToggleElement ElementName="div" @onclick:stopPropagation CollapseTarget="@($"#{collapseId}")" CssClass="hx-tree-view-item-expander">
+				<HxIcon Icon="@BootstrapIcon.ChevronDown" />
+			</HxCollapseToggleElement>
 		}
 	</div>
     @if (icon != null)

diff --git a/Havit.Blazor.Components.Web.Bootstrap/TreeViews/Internal/HxTreeViewItemInternal.razor.css b/Havit.Blazor.Components.Web.Bootstrap/TreeViews/Internal/HxTreeViewItemInternal.razor.css
@@ -42,12 +42,17 @@
 }
 
 ::deep .hx-tree-view-item-expander {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
 	transition: transform 0.15s ease-in-out;
 	transform: rotate(0deg);
-}
 
-.hx-tree-view-item-expander-container:not(.collapsed) ::deep .hx-tree-view-item-expander {
-	transform: rotate(90deg);
+	&.collapsed {
+		transform: rotate(-90deg);
+	}
 }
 
 .hx-tree-view-item-expander-container {