Styling the files and editor

Seenginx.Models/ConfigFile.cs

@@ -21,7 +21,7 @@ namespace Seenginx.Models
 
 		public void Hide() { IsVisible = "is-hidden"; }
 		public void Unhide() { IsVisible = string.Empty; }
-		public void Select() { IsSelected = "is-active"; }
+		public void Select() { IsSelected = "isSelected"; }
 		public void Deselect() { IsSelected = string.Empty; }
 	}
 }

Seenginx/Components/FileItem.razor

@@ -1,6 +1,6 @@
 @inherits FileItemBase
 
 <a class="@File.IsSelected" @onclick="SelectFile">
-	<p class="subtitle is-6"><sub>@File.Folder</sub></p>
+	<h6 class="is-7"><sub>@File.Folder</sub></h6>
-	<h6 class="title is-6 @(File.CanBeDeleted ? null : "has-text-danger")">@File.Name</h6>
+	<h5 class="title is-6 @(File.CanBeDeleted ? null : "has-text-danger")">@File.Name</h5>
 </a>

Seenginx/Components/FilesWithEditor.razor

@@ -2,9 +2,8 @@
 
 <div class="filesWithEditor">
 
-	<div class="files">
+	<div class="filterFiles">
-
+		<div class="field has-addons">
-		<div class="field has-addons sameMarginBottom">
 			<div class="control has-icons-left is-expanded">
 				<input formnovalidate @oninput="e => SearchInputChanged(e.Value.ToString())" class="input is-rounded is-small" type="text" placeholder="Search...">
 				<span class="icon is-small is-left">
@@ -25,49 +24,12 @@
 				</span>
 			</div>
 		</div>
-
-		<div class="filesList neomorphInsetSmall borderRSmall sameMarginBottom">
-			<aside class="menu">
-				<ul class="menu-list">
-					@foreach (var file in Files)
-					{
-						<li @onclick="e => OnFileClick(e,file)" @key="file" class="@file.IsVisible">
-							<FileItem File="file" @key="file"></FileItem>
-						</li>
-					}
-				</ul>
-			</aside>
-		</div>
-
-		<div class="buttons are-small">
-			<button class="button is-rounded is-primary" @onclick="OnAddDialog">
-				<span class="icon is-small">
-					<i class="mdi mdi-plus-box-outline"></i>
-				</span>
-				<span>Add</span>
-			</button>
-			<button class="button is-rounded is-warning" @onclick="OnUpdateDialog">
-				<span class="icon is-small">
-					<i class="mdi mdi-pencil-box-outline"></i>
-				</span>
-				<span>Update</span>
-			</button>
-			<button class="button is-rounded is-danger" @onclick="OnDeleteDialog">
-				<span class="icon is-small">
-					<i class="mdi mdi-minus-box-outline"></i>
-				</span>
-				<span>Delete</span>
-			</button>
-		</div>
-
 	</div>
 
-	<div class="tile is-parent is-vertical">
+	<div class="fileTitle">
 		@if (IsAnyFileSelected)
 		{
-
+			<div class="level">
-			<nav class="level">
-
 				<div class="level-left">
 					<div class="level-item">
 						<p class="subtitle is-5">
@@ -75,30 +37,80 @@
 						</p>
 					</div>
 				</div>
-
 				<div class="level-right">
 					<div class="level-item">
-						<div class="buttons has-addons-right">
+						<button class="button is-small is-rounded neoBtn" @onclick="OnFileClick">
-							<button class="button is-rounded is-light is-small has-icon-left"><span class="icon is-small is-left"><i class="mdi mdi-content-save-alert-outline"></i></span> <span>Save draft</span></button>
+							<span class="icon is-medium">
-							<button class="button is-rounded is-dark is-small has-icon-left"><span class="icon is-small is-left"><i class="mdi mdi-undo-variant"></i></span> <span>Undo changes</span></button>
+								<i class="mdi mdi-close"></i>
-							<button class="button is-rounded is-success is-small has-icon-left"><span class="icon is-small is-left"><i class="mdi mdi-content-save-all-outline"></i></span> <span>Save</span></button>
+							</span>
-							<button class="button is-rounded is-warning is-small has-icon-left"><span class="icon is-small is-left"><i class="mdi mdi-alert-outline"></i></span> <span>Test</span></button>
+						</button>
-						</div>
 					</div>
 				</div>
+			</div>
+		}
+		else
+		{
+			<p>Select any file to start editing...</p>
+		}
+	</div>
 
-			</nav>
+	<div class="files">
+		<div class="filesList neomorphInsetSmall borderR sameMarginBottom">
+			@foreach (var file in Files)
+			{
+			<div @onclick="e => OnFileClick(e,file)" @key="file" class="confFile borderRSmall neoFile @file.IsVisible @file.IsSelected">
+				<p class="is-7">@file.Folder</p>
+				<p class="has-text-weight-bold @(file.CanBeDeleted ? null : "has-text-danger")">@file.Name</p>
+			</div>
+			}
+		</div>
+	</div>
+
+	<div class="codeEditor">
+		@if (IsAnyFileSelected)
+		{
 			<div class="content">
 				<textarea class="textarea" placeholder="Uhu" rows="20" @bind="SelectedFile.OriginalBody"></textarea>
 			</div>
 		}
 		else
 		{
-			<p class="title">Select any file to start editing...</p>
+			<span></span>
 		}
 	</div>
 
+	<div class="filesActions">
+		<div class="buttons is-centered">
+			<button class="button is-rounded neoBtn is-small noBottomMargin" @onclick="OnAddDialog">
+				<span class="icon is-small has-text-success">
+					<i class="mdi mdi-plus-box-outline"></i>
+				</span>
+				<span>Add</span>
+			</button>
+			<button class="button is-rounded neoBtn is-small noBottomMargin @IsSelectedFileDeletable" @onclick="OnDeleteDialog">
+				<span class="icon is-small has-text-danger">
+					<i class="mdi mdi-minus-box-outline"></i>
+				</span>
+				<span>Delete</span>
+			</button>
+		</div>
+	</div>
 
+	<div class="editorActions">
+		@if (IsAnyFileSelected)
+		{
+			<div class="buttons is-centered">
+				<button class="button is-rounded neoBtn is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-light"><i class="mdi mdi-content-save-outline"></i></span> <span>Save draft</span></button>
+				<button class="button is-rounded neoBtn 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>
+				<button class="button is-rounded neoBtn is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-success"><i class="mdi mdi-content-save-all-outline"></i></span> <span>Save</span></button>
+				<button class="button is-rounded neoBtn is-small has-icon-left noBottomMargin"><span class="icon is-left has-text-danger"><i class="mdi mdi-alert-outline"></i></span> <span>Test</span></button>
+			</div>
+		}
+		else
+		{
+			<span></span>
+		}
+	</div>
 
 </div>
 

Seenginx/Components/FilesWithEditor.razor.cs

@@ -43,6 +43,16 @@ namespace Seenginx.Components
 		protected string SearchInput { get; set; }
 
 		protected bool IsAnyFileSelected => SelectedFile != default;
+		protected string IsSelectedFileDeletable
+		{
+			get
+			{
+				if (SelectedFile != null && SelectedFile.CanBeDeleted)
+					return string.Empty;
+				else
+					return "is-hidden";
+			}
+		}
 
 		[Parameter]
 		public EventCallback<CFile> SelectedFileChanged { get; set; }
@@ -128,17 +138,21 @@ namespace Seenginx.Components
 
 		protected async Task OnFileClick(MouseEventArgs e, CFile file)
 		{
+			Files.ForEach(f => f.Deselect());
+			file.Select();
 			await SelectedFileChanged.InvokeAsync(file);
 		}
 
+		protected async Task OnFileClick()
+		{
+			Files.ForEach(f => f.Deselect());
+			SelectedFile = null;
+		}
+
 		protected async Task OnAddDialog()
 		{
 			await AddFile.InvokeAsync(null);
 		}
-		protected async Task OnUpdateDialog()
-		{
-			await UpdateFile.InvokeAsync(SelectedFile);
-		}
 		protected async Task OnDeleteDialog()
 		{
 			await UpdateFile.InvokeAsync(SelectedFile);

Seenginx/SCSS/base.scss

@@ -16,3 +16,19 @@
 		top: 0.5rem;
 	}
 }
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+	border: 0
+}
+
+html {
+	scrollbar-color: $dark-shadow $light-shadow;
+	scrollbar-width: thin;
+	scrollbar-arrow-color: $light-shadow;
+	scrollbar-base-color: $background;
+	scrollbar-darkshadow-color: $dark-shadow;
+}
+
+* {
+	scrollbar-width: inherit;
+}

Seenginx/SCSS/template.scss

@@ -21,24 +21,56 @@
 	}
 }
 
+.filesWithEditor {
+	display: grid;
+	grid-template-areas: "filterFiles fileTitle" "files codeEditor" "filesActions editorActions";
+	grid-gap: 20px;
+	height: 100%;
+	grid-template-rows: 30px calc(100% - 60px) 30px;
+	grid-template-columns: 30% auto;
+
+	& .filterFiles {
+		grid-area: filterFiles
+	}
+
+	& .fileTitle {
+		grid-area: fileTitle
+	}
+
+	& .files {
+		grid-area: files;
+		display: flex;
+		flex-flow: row;
+		height: 100%;
+
+		& .confFile {
+			padding: 4% 6%;
+			margin-bottom: 2%;
+		}
+	}
+
+	& .codeEditor {
+		grid-area: codeEditor
+	}
+
+	& .filesActions {
+		grid-area: filesActions
+	}
+
+	& .editorActions {
+		grid-area: editorActions
+	}
+}
+
 .files {
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
 
-	&WithEditor {
-		display: flex;
-		align-items: stretch;
-		height: 100%;
-	}
-
-	& .buttons {
-		justify-content: space-between;
-		align-items: stretch;
-	}
-
 	&List {
 		height: 100%;
+		width: 100%;
+		padding: 8%;
 		overflow-y: auto;
 	}
 }

Seenginx/SCSS/utility.scss

@@ -18,6 +18,12 @@
 	align-items: center
 }
 
+.no {
+	&BottomMargin {
+		margin-bottom: 0 !important;
+	}
+}
+
 .is {
 	&NoWrap {
 		white-space: nowrap
@@ -50,6 +56,44 @@
 	}
 }
 
+.neo {
+	&Btn {
+		box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
+		background: none !important;
+		border: none !important;
+		transition: all .2s linear;
+		-webkit-backface-visibility: hidden;
+		backface-visibility: hidden;
+
+		&:focus {
+			box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5) !important;
+		}
+
+		&:hover {
+			box-shadow: -6px -6px 12px rgba($light-shadow, .5), 6px 6px 12px rgba($dark-shadow, .5);
+			background: none !important;
+			border: none !important;
+			transform: scale(1.1);
+		}
+	}
+
+	&File {
+		box-shadow: 0px 0px 0px rgba($light-shadow, .5), 0px 0px 0px rgba($dark-shadow, .5);
+		transition: all .2s linear;
+		-webkit-backface-visibility: hidden;
+		backface-visibility: hidden;
+		background: $background;
+
+		&:hover {
+			box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
+		}
+
+		&.isSelected {
+			box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
+		}
+	}
+}
+
 .gradientBackground {
 	background: linear-gradient(to right bottom,$background-light,$background-dark)
 }

Seenginx/wwwroot/css/main.css

@@ -21,6 +21,19 @@
     right: 0.75rem;
     top: 0.5rem; }
 
+button::-moz-focus-inner, input::-moz-focus-inner {
+  border: 0; }
+
+html {
+  scrollbar-color: #f1b941 #fbeed0;
+  scrollbar-width: thin;
+  scrollbar-arrow-color: #fbeed0;
+  scrollbar-base-color: #f6d287;
+  scrollbar-darkshadow-color: #f1b941; }
+
+* {
+  scrollbar-width: inherit; }
+
 .isHidden {
   display: none; }
   @media only screen and (max-width: 37.5em) {
@@ -35,6 +48,9 @@
   align-content: center;
   align-items: center; }
 
+.noBottomMargin {
+  margin-bottom: 0 !important; }
+
 .isNoWrap {
   white-space: nowrap; }
 
@@ -54,6 +70,32 @@
     .neomorphInsetSmall {
       box-shadow: inset 6px 6px 12px rgba(241, 185, 65, 0.5), inset -6px -6px 12px rgba(251, 238, 208, 0.5); }
 
+.neoBtn {
+  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;
+  transition: all .2s linear;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden; }
+  .neoBtn:focus {
+    box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5) !important; }
+  .neoBtn:hover {
+    box-shadow: -6px -6px 12px rgba(251, 238, 208, 0.5), 6px 6px 12px rgba(241, 185, 65, 0.5);
+    background: none !important;
+    border: none !important;
+    transform: scale(1.1); }
+
+.neoFile {
+  box-shadow: 0px 0px 0px rgba(251, 238, 208, 0.5), 0px 0px 0px rgba(241, 185, 65, 0.5);
+  transition: all .2s linear;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background: #f6d287; }
+  .neoFile:hover {
+    box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5); }
+  .neoFile.isSelected {
+    box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5); }
+
 .gradientBackground {
   background: linear-gradient(to right bottom, #f7d794, #f5cd79); }
 
@@ -114,17 +156,38 @@ html {
     width: calc(83% - 40px);
     align-self: stretch; }
 
+.filesWithEditor {
+  display: grid;
+  grid-template-areas: "filterFiles fileTitle" "files codeEditor" "filesActions editorActions";
+  grid-gap: 20px;
+  height: 100%;
+  grid-template-rows: 30px calc(100% - 60px) 30px;
+  grid-template-columns: 30% auto; }
+  .filesWithEditor .filterFiles {
+    grid-area: filterFiles; }
+  .filesWithEditor .fileTitle {
+    grid-area: fileTitle; }
+  .filesWithEditor .files {
+    grid-area: files;
+    display: flex;
+    flex-flow: row;
+    height: 100%; }
+    .filesWithEditor .files .confFile {
+      padding: 4% 6%;
+      margin-bottom: 2%; }
+  .filesWithEditor .codeEditor {
+    grid-area: codeEditor; }
+  .filesWithEditor .filesActions {
+    grid-area: filesActions; }
+  .filesWithEditor .editorActions {
+    grid-area: editorActions; }
+
 .files {
   display: flex;
   flex-direction: column;
   align-items: stretch; }
-  .filesWithEditor {
-    display: flex;
-    align-items: stretch;
-    height: 100%; }
-  .files .buttons {
-    justify-content: space-between;
-    align-items: stretch; }
   .filesList {
     height: 100%;
+    width: 100%;
+    padding: 8%;
     overflow-y: auto; }

Seenginx/wwwroot/css/main.min.css

@@ -1 +1 @@
-#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}.flexCenter{display:flex;align-content:center;align-items:center;}.isNoWrap{white-space:nowrap;}.isFinger{cursor:pointer;}.neomorph{box-shadow:-8px -8px 16px rgba(251,238,208,.5),8px 8px 16px rgba(241,185,65,.5);}.neomorphSmall{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);}.neomorphBottom{filter:drop-shadow(8px 8px 14px #f1b941);}.neomorphInset{box-shadow:inset 8px 8px 16px rgba(241,185,65,.5),inset -8px -8px 16px rgba(251,238,208,.5);}.neomorphInsetSmall{box-shadow:inset 6px 6px 12px rgba(241,185,65,.5),inset -6px -6px 12px rgba(251,238,208,.5);}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px;}.borderRBig{border-radius:28px;}.bg{background:#f6d287;}.sameMarginBottom{margin-bottom:1rem !important;}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.menu-list li a{font-family:Ubuntu-Mono,'Noto Mono';}.menu-list a.active{background-color:#3273dc;color:#fff;}.main{display:flex;flex-wrap:nowrap;align-items:start;width:100%;height:100vh;padding:2.5%;}.mainNav{overflow-y:auto;padding:14px;width:17%;margin-right:40px;}.mainPage{overflow-y:auto;padding:28px;width:calc(83% - 40px);align-self:stretch;}.files{display:flex;flex-direction:column;align-items:stretch;}.filesWithEditor{display:flex;align-items:stretch;height:100%;}.files .buttons{justify-content:space-between;align-items:stretch;}.filesList{height:100%;overflow-y:auto;}
+#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;}html{scrollbar-color:#f1b941 #fbeed0;scrollbar-width:thin;scrollbar-arrow-color:#fbeed0;scrollbar-base-color:#f6d287;scrollbar-darkshadow-color:#f1b941;}*{scrollbar-width:inherit;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}.flexCenter{display:flex;align-content:center;align-items:center;}.noBottomMargin{margin-bottom:0 !important;}.isNoWrap{white-space:nowrap;}.isFinger{cursor:pointer;}.neomorph{box-shadow:-8px -8px 16px rgba(251,238,208,.5),8px 8px 16px rgba(241,185,65,.5);}.neomorphSmall{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);}.neomorphBottom{filter:drop-shadow(8px 8px 14px #f1b941);}.neomorphInset{box-shadow:inset 8px 8px 16px rgba(241,185,65,.5),inset -8px -8px 16px rgba(251,238,208,.5);}.neomorphInsetSmall{box-shadow:inset 6px 6px 12px rgba(241,185,65,.5),inset -6px -6px 12px rgba(251,238,208,.5);}.neoBtn{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);background:none !important;border:none !important;transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;}.neoBtn:focus{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoBtn:hover{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);background:none !important;border:none !important;transform:scale(1.1);}.neoFile{box-shadow:0 0 0 rgba(251,238,208,.5),0 0 0 rgba(241,185,65,.5);transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#f6d287;}.neoFile:hover{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);}.neoFile.isSelected{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px;}.borderRBig{border-radius:28px;}.bg{background:#f6d287;}.sameMarginBottom{margin-bottom:1rem !important;}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.menu-list li a{font-family:Ubuntu-Mono,'Noto Mono';}.menu-list a.active{background-color:#3273dc;color:#fff;}.main{display:flex;flex-wrap:nowrap;align-items:start;width:100%;height:100vh;padding:2.5%;}.mainNav{overflow-y:auto;padding:14px;width:17%;margin-right:40px;}.mainPage{overflow-y:auto;padding:28px;width:calc(83% - 40px);align-self:stretch;}.filesWithEditor{display:grid;grid-template-areas:"filterFiles fileTitle" "files codeEditor" "filesActions editorActions";grid-gap:20px;height:100%;grid-template-rows:30px calc(100% - 60px) 30px;grid-template-columns:30% auto;}.filesWithEditor .filterFiles{grid-area:filterFiles;}.filesWithEditor .fileTitle{grid-area:fileTitle;}.filesWithEditor .files{grid-area:files;display:flex;flex-flow:row;height:100%;}.filesWithEditor .files .confFile{padding:4% 6%;margin-bottom:2%;}.filesWithEditor .codeEditor{grid-area:codeEditor;}.filesWithEditor .filesActions{grid-area:filesActions;}.filesWithEditor .editorActions{grid-area:editorActions;}.files{display:flex;flex-direction:column;align-items:stretch;}.filesList{height:100%;width:100%;padding:8%;overflow-y:auto;}