improved Editor UI

suxrobGM · Aug 1, 2024 · 23af91c · 23af91c
1 parent 067730b
commit 23af91c
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 47 deletions.
diff --git a/src/FormBuilder.DesignerApp/Layout/MainLayout.razor b/src/FormBuilder.DesignerApp/Layout/MainLayout.razor
@@ -9,7 +9,7 @@
             <RadzenColumn class="d-flex" Size="3">
                 <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                     <RadzenSidebarToggle Click="@ToggleSidebar"/>
-                    <RadzenText class="ms-2" Text="Blazor Form Builder" TextStyle="TextStyle.H5" />
+                    <RadzenText class="rz-color-base-200" Text="Blazor Form Builder" TextStyle="TextStyle.H5"/>
                 </RadzenStack>
             </RadzenColumn>
         </RadzenRow>

diff --git a/src/FormBuilder.DesignerApp/Pages/Renderer.razor b/src/FormBuilder.DesignerApp/Pages/Renderer.razor
@@ -2,7 +2,7 @@
 
 <RadzenText TextStyle="TextStyle.H3">Renderer</RadzenText>
 
-<RadzenStack Class="vh-100" Orientation="Orientation.Vertical" Gap="1rem">
+<RadzenStack class="vh-100" Orientation="Orientation.Vertical" Gap="1rem">
     <FormRenderer @ref="_formRendererRef" @bind-IsLoadingForm="_isLoading" />
 
     <RadzenText TextStyle="TextStyle.Subtitle1">

diff --git a/src/FormBuilder.DesignerApp/wwwroot/index.html b/src/FormBuilder.DesignerApp/wwwroot/index.html
@@ -8,7 +8,7 @@
     <base href="/" />
     <link rel="icon" type="image/png" href="favicon.png" />
 <!--    <link href="_content/FormBuilder/css/app.css" rel="stylesheet" />-->
-    <link href="_content/Radzen.Blazor/css/standard-base.css" rel="stylesheet" /> <!-- Radzen CSS, specified explicitly for GitHub Pages -->
+    <link href="_content/Radzen.Blazor/css/material-base.css" rel="stylesheet" /> <!-- Radzen CSS, specified explicitly for GitHub Pages -->
     <link href="_content/FormBuilder/css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <!-- Bootstrap 5 CSS, specified explicitly for GitHub Pages -->
     <link href="css/app.css" rel="stylesheet" />
     <link href="FormBuilder.DesignerApp.styles.css" rel="stylesheet" />

diff --git a/src/FormBuilder/Components/FieldPropertyEditor.razor b/src/FormBuilder/Components/FieldPropertyEditor.razor
@@ -2,7 +2,7 @@
 
 @if (Field is not null)
 {
-    <RadzenStack Orientation="Orientation.Vertical">
+    <RadzenStack class="@ContainerClass" Orientation="Orientation.Vertical">
         <RadzenFormField Text="ID">
             <RadzenTextBox @bind-Value="Field.Name" Disabled="true"/>
         </RadzenFormField>
@@ -24,14 +24,14 @@
         <RadzenFormField Text="Hint" AllowFloatingLabel="false">
             <RadzenTextBox @bind-Value="Field.Hint"/>
         </RadzenFormField>
-        <div>
-            <RadzenCheckBox Name="ReadOnlyInput" @bind-Value="@ReadOnly"/>
+        <RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" AlignItems="AlignItems.Center">
             <RadzenLabel Text="Read only" Component="ReadOnlyInput"/>
-        </div>
-        <div>
-            <RadzenCheckBox Name="DisabledInput" @bind-Value="@Disabled"/>
+            <RadzenSwitch Name="ReadOnlyInput" @bind-Value="@ReadOnly"/>
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" AlignItems="AlignItems.Center">
             <RadzenLabel Text="Disabled" Component="DisabledInput"/>
-        </div>
+            <RadzenSwitch Name="DisabledInput" @bind-Value="@Disabled"/>
+        </RadzenStack>
 
         @if (Field is TextField textField)
         {
@@ -84,6 +84,6 @@
             }
         }
 
-        <RadzenText Text="Validators" TextStyle="TextStyle.H6" />
+        <RadzenText Text="Validators" TextStyle="TextStyle.H6" TextAlign="TextAlign.Center" />
     </RadzenStack>
 }
diff --git a/src/FormBuilder/Components/FieldPropertyEditor.razor.cs b/src/FormBuilder/Components/FieldPropertyEditor.razor.cs
@@ -45,10 +45,15 @@ public partial class FieldPropertyEditor : ComponentBase
     /// </summary>
     [Parameter]
     public EventCallback<FieldPropertyChangedArgs> PropertyChanged { get; set; }
+
+    /// <summary>
+    /// The CSS class for the container element.
+    /// </summary>
+    [Parameter]
+    public string? ContainerClass { get; set; }
 
     #endregion
 
-
     #region Binding Properties
 
     private string? Label

diff --git a/src/FormBuilder/Components/FormEditor.razor b/src/FormBuilder/Components/FormEditor.razor
@@ -1,6 +1,6 @@
 @using FormBuilder.Models
 
-<RadzenRow Class="vh-100">
+<RadzenRow class="vh-100">
     <RadzenColumn Size="12" SizeMD="9" SizeLG="10">
         <RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
             @if (_formDefinition.Id is not null)
@@ -47,34 +47,43 @@
         </RadzenStack>
     </RadzenColumn>
 
-    <RadzenColumn Class="border bg-light px-1" Size="12" SizeMD="3" SizeLG="2">
-        <RadzenStack Class="pt-2" Orientation="Orientation.Vertical">
-            <RadzenText TextStyle="TextStyle.H5" TextAlign="TextAlign.Center">Fields</RadzenText>
-            <Dragable Data="() => AddField(FieldType.Text)" Zone="FieldsZone">
-                <RadzenButton Class="w-100" Text="Text Field" Click="() => AddField(FieldType.Text)"/>
-            </Dragable>
-            <Dragable Data="() => AddField(FieldType.NumericInt)" Zone="FieldsZone">
-                <RadzenButton Class="w-100" Text="Integer Field" Click="() => AddField(FieldType.NumericInt)"/>
-            </Dragable>
-            <Dragable Data="() => AddField(FieldType.NumericDecimal)" Zone="FieldsZone">
-                <RadzenButton Class="w-100" Text="Decimal Field" Click="() => AddField(FieldType.NumericDecimal)"/>
-            </Dragable>
-            <Dragable Data="() => AddField(FieldType.Date)" Zone="FieldsZone">
-                <RadzenButton Class="w-100" Text="Date Field" Click="() => AddField(FieldType.Date)"/>
-            </Dragable>
-            <Dragable Data="() => AddField(FieldType.Select)" Zone="FieldsZone">
-                <RadzenButton Class="w-100" Text="Select Field" Click="() => AddField(FieldType.Select)"/>
-            </Dragable>
-            <hr/>
-        </RadzenStack>
-        <RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
-            <RadzenText TextStyle="TextStyle.H5" TextAlign="TextAlign.Center">Properties</RadzenText>
-            <FieldPropertyEditor 
-                @bind-Field="SelectedField" 
-                PropertyChanged="(e) => HandleFieldPropertyChanged(e)">
-            </FieldPropertyEditor>
-            <hr/>
-            <RadzenButton Text="Save Form" Click="SaveFormAsync" Disabled="IsLoading"/>
+    <RadzenColumn class="border rz-background-color-base-100" Size="12" SizeMD="3" SizeLG="2">
+        <RadzenStack Orientation="Orientation.Vertical" Gap="0.5rem">
+            <RadzenPanelMenu>
+                <RadzenPanelMenuItem Text="Fields" Icon="payment">
+                    <Dragable Data="() => AddField(FieldType.Text)" Zone="FieldsZone">
+                        <RadzenPanelMenuItem Text="Text Field" Icon="input" Click="() => AddField(FieldType.Text)"/>
+                    </Dragable>
+                    <Dragable Data="() => AddField(FieldType.NumericInt)" Zone="FieldsZone">
+                        <RadzenPanelMenuItem Text="Integer Field" Icon="pin" Click="() => AddField(FieldType.NumericInt)"/>
+                    </Dragable>
+                    <Dragable Data="() => AddField(FieldType.NumericDecimal)" Zone="FieldsZone">
+                        <RadzenPanelMenuItem Text="Decimal Field" Icon="pin" Click="() => AddField(FieldType.NumericDecimal)"/>
+                    </Dragable>
+                    <Dragable Data="() => AddField(FieldType.Date)" Zone="FieldsZone">
+                        <RadzenPanelMenuItem Text="Date Field" Icon="calendar_month" Click="() => AddField(FieldType.Date)"/>
+                    </Dragable>
+                    <Dragable Data="() => AddField(FieldType.Select)" Zone="FieldsZone">
+                        <RadzenPanelMenuItem Text="Select Field" Icon="list_alt" Click="() => AddField(FieldType.Select)"/>
+                    </Dragable>
+                </RadzenPanelMenuItem>
+            </RadzenPanelMenu>
+
+            @if (SelectedField is not null)
+            {
+                <RadzenText TextStyle="TextStyle.H5" TextAlign="TextAlign.Center">Properties</RadzenText>
+                <FieldPropertyEditor
+                    ContainerClass="px-1"
+                    @bind-Field="SelectedField"
+                    PropertyChanged="(e) => HandleFieldPropertyChanged(e)">
+                </FieldPropertyEditor>
+            }
+
+            @if (_formDefinition.Fields.Count > 0)
+            {
+                <RadzenButton Text="Save Form" Click="SaveFormAsync" Disabled="IsLoading"/>
+            }
+
             <RadzenButton Text="Load Form" Click="OpenLoadFormDialogAsync" Disabled="IsLoading"/>
         </RadzenStack>
     </RadzenColumn>

diff --git a/src/FormBuilder/Components/FormField.razor b/src/FormBuilder/Components/FormField.razor
@@ -1,6 +1,6 @@
 @using FormBuilder.Models
 
-<RadzenFormField Class="w-100" Text="@Field.Label" AllowFloatingLabel="true">
+<RadzenFormField class="w-100" Text="@Field.Label" AllowFloatingLabel="true">
     <Start>@Prepend</Start>
     <ChildContent>
         @switch (Field)

diff --git a/src/FormBuilder/Components/NumericFieldPropertyEditor.razor b/src/FormBuilder/Components/NumericFieldPropertyEditor.razor
@@ -9,10 +9,10 @@
 <RadzenFormField Text="Step">
     <RadzenNumeric TValue="decimal" />
 </RadzenFormField>
-<div>
-    <RadzenCheckBox TValue="bool" Name="ShowUpDownInput" Value="Field.ShowUpDown" ValueChanged="OnShowUpDownChanged"/>
+<RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" AlignItems="AlignItems.Center">
     <RadzenLabel Component="ShowUpDownInput" Text="Show Up Down" />
-</div>
+    <RadzenSwitch TValue="bool" Name="ShowUpDownInput" Value="Field.ShowUpDown" ValueChanged="OnShowUpDownChanged"/>
+</RadzenStack>
 
 <RadzenFormField Text="Format">
     <RadzenTextBox Value="@Field.Format" ValueChanged="OnFormatChanged"/>

diff --git a/src/FormBuilder/Services/FormService.cs b/src/FormBuilder/Services/FormService.cs
@@ -9,7 +9,7 @@
 
 namespace FormBuilder.Services;
 
-internal class FormService
+public class FormService
 {
     private readonly HttpClient _httpClient;
     private readonly JsonSerializerOptions _jsonSerializerDefaultOptions;

diff --git a/src/FormBuilder/wwwroot/css/app.css b/src/FormBuilder/wwwroot/css/app.css
@@ -1,2 +1,2 @@
-@import "/_content/Radzen.Blazor/css/standard-base.css";
+@import "/_content/Radzen.Blazor/css/material-base.css";
 @import "/_content/FormBuilder/css/bootstrap/bootstrap.min.css";