PDFileModal, PDFileExplorer: an even, aligned layout, a line under the toolbar, and button size and cancel icon settings

PanoramicData.Blazor.Demo/Pages/PDFileExplorerDocumentation.razor

@@ -55,6 +55,14 @@
 		</table>
 	</section>
 
+	<section id="styling">
+		<h2 class="doc-section">Styling</h2>
+		<p>
+			A line separates the toolbar from the folders and files below it. It is drawn with <code>--pd-file-explorer-toolbar-border</code>,
+			which defaults to <code>1px solid var(--bs-border-color)</code>. Set it to <code>none</code> to leave the line out.
+		</p>
+	</section>
+
 	<section id="methods">
 		<h2 class="doc-section">Methods</h2>
 		<table class="table table-sm doc-props-table">

PanoramicData.Blazor.Demo/Pages/PDFileModalsDocumentation.razor

@@ -9,6 +9,8 @@
 			<thead><tr><th>Parameter</th><th>Type</th><th>Description</th></tr></thead>
 			<tbody>
 				<tr><td><code>DataProvider</code></td><td><code>IFileExplorerDataProvider</code></td><td>File system provider</td></tr>
+				<tr><td><code>ButtonSize</code></td><td><code>ButtonSizes</code></td><td>Size of every button in the dialog: the explorer's toolbar, the foot of the dialog and its overwrite confirmation. Defaults to Medium</td></tr>
+				<tr><td><code>CancelButtonIconCssClass</code></td><td><code>string</code></td><td>Icon on the Cancel button, and on No when asked whether to overwrite. Defaults to <code>fas fa-fw fa-times</code></td></tr>
 			</tbody>
 		</table>
 	</section>

PanoramicData.Blazor.Demo/Pages/PDFileModalsPage.razor

@@ -60,7 +60,8 @@
 	<h4>Customised Button Text and Icons</h4>
 	<p class="text-muted">
 		Use <code>OpenButtonText</code>, <code>OpenButtonIconCssClass</code>, <code>SaveButtonText</code>, and <code>SaveButtonIconCssClass</code>
-		to replace the default button labels and icons.
+		to replace the default button labels and icons, <code>CancelButtonIconCssClass</code> for the Cancel and No buttons' icon,
+		and <code>ButtonSize</code> for the size of every button, the toolbar's included. Below, every button is small and Cancel shows a circled cross.
 	</p>
 	<PDToolbar>
 		<PDToolbarButton Text="Custom Open"
@@ -72,7 +73,10 @@
 	</PDToolbar>
 
 	<PDFileModal @ref="CustomButtonModal"
+				 ButtonSize="ButtonSizes.Small"
+				 CancelButtonIconCssClass="fas fa-fw fa-times-circle"
 				 DataProvider="_dataProvider"
+				 ShowToolbar="true"
 				 OpenButtonText="Pick this file"
 				 OpenButtonIconCssClass="fas fa-fw fa-check"
 				 SaveButtonText="Write here"

PanoramicData.Blazor.Test/Components/PDFileModalTests.cs

@@ -3,6 +3,7 @@
 using Bunit;
 using Microsoft.AspNetCore.Components.Web;
 using PanoramicData.Blazor.Extensions;
+using PanoramicData.Blazor.Models;
 
 namespace PanoramicData.Blazor.Test;
 
@@ -43,6 +44,37 @@ public async Task Texts_and_icons_can_be_replaced()
 		Row(component, "/readme.txt").QuerySelector(".icon-readme\\.txt").Should().NotBeNull();
 	}
 
+	/// <summary>Verifies that, unless chosen otherwise, the buttons stay medium sized and Cancel keeps its cross.</summary>
+	[Fact]
+	public async Task Buttons_are_medium_with_a_cross_on_cancel_by_default()
+	{
+		var component = RenderModal();
+
+		await ShowOpenAsync(component);
+
+		FooterButton(component, "Cancel").ClassList.Should().NotContain("btn-sm");
+		FooterButton(component, "Cancel").QuerySelector(".fa-times").Should().NotBeNull();
+	}
+
+	/// <summary>Verifies that the button size reaches every button, toolbar included, and the dismissing icon reaches Cancel and the overwrite confirmation's No.</summary>
+	[Fact]
+	public async Task Button_size_and_the_dismissing_icon_can_be_replaced()
+	{
+		var component = RenderModal(p => p
+			.Add(x => x.ButtonSize, ButtonSizes.Small)
+			.Add(x => x.CancelButtonIconCssClass, "fa-regular fa-fw fa-circle-xmark")
+			.Add(x => x.ShowToolbar, true));
+
+		await ShowOpenAsync(component);
+
+		component.Find(".pdfe-toolbar #pd-tbr-btn-refresh").ClassList.Should().Contain("btn-sm");
+		OkButton(component).ClassList.Should().Contain("btn-sm");
+		FooterButton(component, "Cancel").ClassList.Should().Contain("btn-sm");
+		FooterButton(component, "Cancel").QuerySelector(".fa-circle-xmark").Should().NotBeNull();
+		ConfirmButton(component, "No").ClassList.Should().Contain("btn-sm");
+		ConfirmButton(component, "No").QuerySelector(".fa-circle-xmark").Should().NotBeNull();
+	}
+
 	/// <summary>Verifies that refreshing asks the data provider for the folder contents again.</summary>
 	[Fact]
 	public async Task Refreshing_requests_the_contents_again()

PanoramicData.Blazor/PDFileExplorer.razor.css

@@ -21,8 +21,10 @@
 	font-style: italic;
 }
 
+/* As tall as its buttons and their padding, with a line below; set --pd-file-explorer-toolbar-border to none to leave it out */
 .pdfileexplorer .pdfe-toolbar {
-	height: 50px;
+	flex: none;
+	border-bottom: var(--pd-file-explorer-toolbar-border, 1px solid var(--bs-border-color, #dee2e6));
 }
 
 .pdfileexplorer .preview-header {

PanoramicData.Blazor/PDFileModal.razor

@@ -1,13 +1,16 @@
 <PDModal @ref="Modal"
 		 Title="@_modalTitle"
 		 ButtonClick="OnButtonClick"
+		 BodyCssClass="p-0"
 		 Buttons="_toolbarItems"
+		 ButtonSize="ButtonSize"
 		 CloseOnEscape="CloseOnEscape"
 		 HideOnBackgroundClick="HideOnBackgroundClick"
 		 Size="Size">
 
 	<div class="pdfilemodalexplorer" style="height: @Height">
 		<PDFileExplorer @ref="FileExplorer"
+						ButtonSize="ButtonSize"
 						DataProvider="DataProvider"
 						AllowDrag="false"
 						AllowDrop="false"
@@ -32,6 +35,7 @@
 
 <PDModal @ref="ModalConfirm"
 		 Title="Confirm Overwrite"
+		 ButtonSize="ButtonSize"
 		 HideOnBackgroundClick="HideOnBackgroundClick"
 		 Buttons="_confirmToolbarItems">
 	<span>Are you sure you wish to overwrite '<b>@_filenameTextbox.Value</b>'?</span>

PanoramicData.Blazor/PDFileModal.razor.cs

@@ -106,6 +106,16 @@ public partial class PDFileModal
 	/// </summary>
 	[Parameter] public ModalSizes Size { get; set; } = ModalSizes.Large;
 
+	/// <summary>
+	/// Gets or sets the size of every button in the dialog: the explorer's toolbar, the foot of the modal and its overwrite confirmation.
+	/// </summary>
+	[Parameter] public ButtonSizes ButtonSize { get; set; } = ButtonSizes.Medium;
+
+	/// <summary>
+	/// Gets or sets the icon on the buttons that dismiss the dialog: Cancel, and No when asked whether to overwrite.
+	/// </summary>
+	[Parameter] public string CancelButtonIconCssClass { get; set; } = "fas fa-fw fa-times";
+
 	/// <summary>
 	/// Gets or sets whether the modal should hide when the background is clicked.
 	/// </summary>
@@ -169,6 +179,13 @@ protected override void OnInitialized()
 		_filenameTextbox.Keypress = OnFilenameKeypress;
 	}
 
+	/// <inheritdoc />
+	protected override void OnParametersSet()
+	{
+		_cancelButton.IconCssClass = CancelButtonIconCssClass;
+		_noButton.IconCssClass = CancelButtonIconCssClass;
+	}
+
 	private string? GetItemIconCssClassInternal(FileExplorerItem item) => GetItemIconCssClass is null ? null : GetItemIconCssClass(item);
 
 	/// <summary>

PanoramicData.Blazor/wwwroot/css/main.css

@@ -157,7 +157,7 @@
 
 /* PDSplitter - the gutters are created by split.js */
 .pdsplitter .gutter {
-  background-color: var(--pd-splitter-gutter-bg, #eee);
+  background-color: var(--pd-splitter-gutter-bg, var(--bs-border-color, #eee));
   transition: background-color 0.1s ease-out;
 }
 
@@ -527,12 +527,22 @@
 }
 
 /* PDFileExplorer */
+/* The top folder sits a little below whatever is above the tree, rather than against it */
 .pdfileexplorer.pdfileexplorer .pdtree {
   height: 0;
+  box-sizing: border-box;
+  padding-top: 0.5rem;
 }
 
+/* The top folder lines up with the toolbar's first button: the toolbar's padding, less the drop zone's 1px border */
+.pdfileexplorer.pdfileexplorer .pdtree > .pdtreenode {
+  padding-left: calc(0.5rem - 1px);
+}
+
+/* The splitter takes the height the toolbar leaves */
 .pdfileexplorer.pdfileexplorer .pdsplitter.horizontal {
-  height: calc(100% - 50px);
+  flex: 1 1 0;
+  min-height: 0;
 }
 
 .pdfileexplorer.pdfileexplorer.pdfe-no-toolbar .pdsplitter.horizontal {
@@ -555,14 +565,26 @@
 }
 
 /* PDFileModal */
+/* The dialog's body has no padding (p-0), so the toolbar's own spacing is the only spacing and the panes run edge to edge */
 .pdfilemodalexplorer.pdfilemodalexplorer .pdfileexplorer {
   height: 100%;
+  padding-bottom: 0;
 }
 
 .pdfilemodalexplorer.pdfilemodalexplorer .pdsplitter {
   flex-grow: 1;
 }
 
+/* In the dialog the toolbar's buttons and the top folder line up with the title and the footer's buttons, 1rem in */
+.pdfilemodalexplorer.pdfilemodalexplorer .pdfe-toolbar .pdtoolbar {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.pdfilemodalexplorer.pdfilemodalexplorer .pdtree > .pdtreenode {
+  padding-left: calc(1rem - 1px);
+}
+
 /* PDFilter */
 .pd-filter.pd-filter .filter-icon {
   color: var(--bs-primary) !important;
@@ -842,6 +864,12 @@
   padding-left: 0;
 }
 
+/* A hidden first item, such as an Up button turned off, must not leave the next one indented */
+.pdtoolbar .pdtoolbaritem.pd-hidden:first-child + .pdtoolbaritem,
+.pdtoolbar .pdtoolbaritem.d-none:first-child + .pdtoolbaritem {
+  padding-left: 0;
+}
+
 .pdtoolbar .pdtoolbaritem:last-child {
   padding-right: 0;
 }