Updating icons, bulma, new switch draft mode

Seenginx/Components/FilesWithEditor.razor

@@ -17,26 +17,24 @@
 		@if (IsAnyFileSelected)
 		{
 			<div class="field is-grouped">
+				<div class="control">
+					<div class="button is-small is-rounded neoBtnSmallPlain">
+						<div class="field">
+							<input @onchange="OnDraftModeSwitch" id="switchRoundedOutlinedWarning" type="checkbox" name="switchRoundedOutlinedWarning" class="switch is-rounded is-outlined is-danger" checked="@IsDraftMode">
+							<label for="switchRoundedOutlinedWarning">Draft mode @DraftMode</label>
+						</div>
+					</div>
+				</div>
 				<div class="control is-expanded borderRBig neomorphXSmall has-icons-left has-text-centered">
 					<span>@SelectedFile.Name</span>
 				</div>
-				<p class="control">
+				<p class="control @(IsDraftMode ? "is-hidden" : null)">
 					<button class="button is-small is-rounded neoBtnSmall" @onclick="OnFileRenameClick" title="Rename configuration">
 						<span class="icon is-medium">
 							<i class="mdi mdi-pencil"></i>
 						</span>
 					</button>
 				</p>
-				@if (!string.IsNullOrEmpty(SelectedFile.DraftBody))
-				{
-					<p class="control">
-						<button class="button is-small is-rounded neoBtnSmall" @onclick="OnLoadDraftClick" title="Load draft">
-							<span class="icon is-medium">
-								<i class="mdi mdi-content-save-edit"></i>
-							</span>
-						</button>
-					</p>
-				}
 				<p class="control">
 					<button class="button is-small is-rounded neoBtnSmall" @onclick="OnFileCloseClick" title="Close">
 						<span class="icon is-medium">
@@ -95,12 +93,18 @@
 		{
 			<div class="buttons is-centered">
 				<button @onclick="OnUndoChanges" class="button is-rounded neoBtnSmall is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-dark"><i class="mdi mdi-undo-variant"></i></span> <span>Undo changes</span></button>
-				@if (HasTesting)
+				@if (HasTesting && !IsDraftMode)
 				{
 					<button @onclick="OnTest" class="button is-rounded neoBtnSmall is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-danger"><i class="mdi mdi-alert"></i></span> <span>Test</span></button>
 				}
-				<button @onclick="OnSaveDraft" class="button is-rounded neoBtnSmall is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-light"><i class="mdi mdi-content-save"></i></span> <span>@(string.IsNullOrEmpty(SelectedFile.DraftBody) ? "Create" : "Save") draft</span></button>
-				<button @onclick="OnSave" class="button is-rounded neoBtnSmall is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-success"><i class="mdi mdi-content-save-all"></i></span> <span>Save</span></button>
+				@if (IsDraftMode)
+				{
+					<button @onclick="OnSaveDraft" class="button is-rounded neoBtnSmall is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-light"><i class="mdi mdi-content-save"></i></span> <span>@(string.IsNullOrEmpty(SelectedFile.DraftBody) ? "Create" : "Save") draft</span></button>
+				}
+				else
+				{
+					<button @onclick="OnSave" class="button is-rounded neoBtnSmall is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-success"><i class="mdi mdi-content-save-all"></i></span> <span>Save</span></button>
+				}
 			</div>
 		}
 		else

Seenginx/Components/FilesWithEditor.razor.cs

@@ -1,6 +1,6 @@
-using Blazorise;
-using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Extensions.Logging;
 using Microsoft.JSInterop;
 using Seenginx.Models;
 using System;
@@ -15,6 +15,7 @@ namespace Seenginx.Components
 		where CFile : ConfigFile
 	{
 		[Inject] public IJSRuntime JsRuntime { get; set; }
+		[Inject] public ILogger<FilesWithEditor<CFile>> logger { get; set; }
 
 		[Parameter] public List<CFile> Files { get; set; } = new List<CFile>();
 
@@ -33,6 +34,9 @@ namespace Seenginx.Components
 		[Parameter] public CFile SelectedFile { get; set; } = default;
 
 		protected string SearchInput { get; set; }
+		protected string DraftMode { get; set; } = "off";
+		protected bool IsDraftMode { get; set; } = false;
+
 
 		protected bool IsAnyFileSelected => SelectedFile != default;
 		protected string IsSelectedFileDeletable
@@ -76,12 +80,21 @@ namespace Seenginx.Components
 			});
 		}
 
+		protected async Task OnDraftModeSwitch(ChangeEventArgs e)
+		{
+			IsDraftMode = (bool)e.Value;
+			DraftMode = IsDraftMode ? "on" : "off";
+			if (IsDraftMode)
+				await JsRuntime.InvokeVoidAsync("UpdateEditor", SelectedFile.DraftBody ?? SelectedFile.Body);
+		}
+
 		protected async Task OnFileClick(MouseEventArgs e, CFile file)
 		{
 			Files.ForEach(f => f.Deselect());
 			file.Select();
 			await JsRuntime.InvokeVoidAsync("UpdateEditor", file.Body);
 			await SelectedFileChanged.InvokeAsync(file);
+			IsDraftMode = false;
 		}
 
 		protected async Task OnFileRenameClick(MouseEventArgs e)
@@ -89,16 +102,12 @@ namespace Seenginx.Components
 			await RenameFileCallback.InvokeAsync(null);
 		}
 
-		protected async Task OnLoadDraftClick(MouseEventArgs e)
-		{
-			await JsRuntime.InvokeVoidAsync("UpdateEditor", SelectedFile.DraftBody);
-		}
-
 		protected async Task OnFileCloseClick(MouseEventArgs e)
 		{
 			Files.ForEach(f => f.Deselect());
 			SelectedFile = null;
 			await JsRuntime.InvokeVoidAsync("ClearEditor");
+			IsDraftMode = false;
 		}
 
 		protected async Task OnSaveDraft(MouseEventArgs e)
@@ -117,7 +126,10 @@ namespace Seenginx.Components
 
 		protected async Task OnUndoChanges(MouseEventArgs e)
 		{
-			await JsRuntime.InvokeVoidAsync("UpdateEditor", SelectedFile.Body);
+			if (IsDraftMode)
+				await JsRuntime.InvokeVoidAsync("UpdateEditor", SelectedFile.DraftBody ?? SelectedFile.Body);
+			else
+				await JsRuntime.InvokeVoidAsync("UpdateEditor", SelectedFile.Body);
 		}
 
 		protected async Task OnTest(MouseEventArgs e)

Seenginx/Pages/Nginx.razor.cs

@@ -1,6 +1,5 @@
 using Blazored.Modal;
 using Blazored.Modal.Services;
-using Blazorise;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using Seenginx.Models;

Seenginx/Pages/_Host.cshtml

@@ -13,17 +13,17 @@
 	<link rel="icon" href="~/favicon.png" />
 	<title>Seenginx</title>
 	<base href="~/" />
-	<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
-	<link href="_content/Blazorise.Bulma/blazorise.bulma.css" rel="stylesheet" />
 	<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet"/>
 	<environment include="Staging,Production">
 		<link rel="stylesheet" href="~/css/materialdesignicons.min.css" asp-append-version="true" />
 		<link rel="stylesheet" href="~/css/bulma.min.css" asp-append-version="true" />
+		<link rel="stylesheet" href="~/css/bulma-switch.min.css" asp-append-version="true" />
 		<link rel="stylesheet" href="~/css/main.min.css" asp-append-version="true" />
 	</environment>
 	<environment include="Development">
 		<link rel="stylesheet" href="~/css/materialdesignicons.css" asp-append-version="true" />
 		<link rel="stylesheet" href="~/css/bulma.css" asp-append-version="true" />
+		<link rel="stylesheet" href="~/css/bulma-switch.min.css" asp-append-version="true" />
 		<link rel="stylesheet" href="~/css/main.css" asp-append-version="true" />
 	</environment>
 </head>
@@ -45,8 +45,6 @@
 
 	<script src="_framework/blazor.server.js"></script>
 	<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
-	<script src="_content/Blazorise/blazorise.js"></script>
-	<script src="_content/Blazorise.Bulma/blazorise.bulma.js"></script>
 	<script src="_content/Blazored.Modal/blazored.modal.js"></script>
 	<script src="~/js/ace.js" type="text/javascript" charset="utf-8" asp-append-version="true"></script>
 	<script src="~/js/index.js" asp-append-version="true"></script>

Seenginx/SCSS/override-framework.scss

@@ -97,3 +97,7 @@ html {
 		}
 	}
 }
+
+.switch[type="checkbox"] + label {
+	font-size: inherit
+}

Seenginx/SCSS/utility.scss

@@ -106,7 +106,7 @@
 			}
 
 			&Plain {
-				box-shadow: -2px -2px 4px rgba($light-shadow, .5), 2px 2px 4px rgba($dark-shadow, .5);
+				box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
 				background: none !important;
 				border: none !important;
 			}

Seenginx/Seenginx.csproj

@@ -19,8 +19,6 @@
 
   <ItemGroup>
     <PackageReference Include="Blazored.Modal" Version="5.0.2" />
-    <PackageReference Include="Blazorise.Bulma" Version="0.9.1.2" />
-    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.1.2" />
     <PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="3.1.6" />
     <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.1.3" />
     <PackageReference Include="Mono.Posix.NETStandard" Version="1.0.0" />

Seenginx/Startup.cs

@@ -3,9 +3,6 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
 using Blazored.Modal;
-using Blazorise;
-using Blazorise.Bulma;
-using Blazorise.Icons.FontAwesome;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Hosting;
@@ -34,10 +31,6 @@ namespace Seenginx
 #endif
 				;
 			services.AddServerSideBlazor();
-			services.AddBlazorise(options =>
-			{
-				options.ChangeTextOnKeyPress = true; // optional
-			}).AddBulmaProviders();
 			services.AddBlazoredModal();
 
 			var configPaths = new ConfigPaths();
@@ -66,8 +59,6 @@ namespace Seenginx
 
 			app.UseRouting();
 
-			app.ApplicationServices.UseBulmaProviders();
-
 			app.UseAuthentication();
 
 			app.UseEndpoints(endpoints =>

Seenginx/_Imports.razor

@@ -10,8 +10,6 @@
 @using Seenginx.Shared
 @using Seenginx.Models
 @using Seenginx.Components
-@using Blazorise
-@using Blazorise.Bulma
 @using Blazored.Modal
 @using Blazored.Modal.Services
 

Seenginx/wwwroot/css/main.css

@@ -107,7 +107,7 @@ html {
       border: none !important;
       transform: scale(1.1); }
     .neoBtnSmallPlain {
-      box-shadow: -2px -2px 4px rgba(251, 238, 208, 0.5), 2px 2px 4px rgba(241, 185, 65, 0.5);
+      box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5);
       background: none !important;
       border: none !important; }
 
@@ -232,6 +232,9 @@ html {
   .blazored-modal-overlay {
     background: #f6d287; }
 
+.switch[type="checkbox"] + label {
+  font-size: inherit; }
+
 .main {
   display: flex;
   flex-wrap: nowrap;