Taking away filtering by folder

Seenginx/Components/FilesWithEditor.razor

@@ -3,26 +3,13 @@
 <div class="filesWithEditor">
 
 	<div class="filterFiles">
-		<div class="field has-addons">
+		<div class="field">
 			<div class="control has-icons-left is-expanded">
 				<input formnovalidate @oninput="e => SearchInputChanged(e.Value.ToString())" @bind-value="SearchInput" class="input is-rounded is-small neoInput" type="text" placeholder="Search...">
 				<span class="icon is-small is-left has-text-dark">
 					<i class="mdi mdi-search-web"></i>
 				</span>
 			</div>
-			<div class="control has-icons-left">
-				<div class="select is-small is-rounded neoSelect">
-					<select @oninput="e => OnFilterClick(e.Value.ToString())" @bind="SelectedFilter">
-						@foreach (var filter in Filters)
-						{
-							<option value="@filter" selected="@(SelectedFilter == filter ? "selected" : null)">@filter</option>
-						}
-					</select>
-				</div>
-				<span class="icon is-small is-left has-text-dark">
-					<i class="mdi mdi-folder-cog-outline"></i>
-				</span>
-			</div>
 		</div>
 	</div>
 
@@ -48,7 +35,7 @@
 		else
 		{
 			<div class="field">
-				<div class="control is-expanded borderRBig neoInput has-text-centered"><span>...</span></div>
+				<div class="control is-expanded borderRBig neoInput has-text-centered"><span>···</span></div>
 			</div>
 		}
 	</div>
@@ -69,7 +56,7 @@
 		<pre id="editor" class="borderR @(IsAnyFileSelected ? string.Empty : "is-hidden")">
 		</pre>
 		<div class="stripe borderR @(IsAnyFileSelected ? "is-hidden" : string.Empty)">
-			<div class="stripe_inner">Select a file</div>
+			<div class="stripe_inner"><span class="icon"><i class="mdi mdi-chevron-double-left"></i></span> Select a configuration</div>
 		</div>
 	</div>
 

Seenginx/Components/FilesWithEditor.razor.cs

@@ -18,21 +18,16 @@ namespace Seenginx.Components
 
 		[Parameter] public List<CFile> Files { get; set; } = new List<CFile>();
 
-		[Parameter] public List<string> Filters { get; set; } = new List<string>();
-		[Parameter] public Dictionary<string, string> FilterFolder { get; set; } = new Dictionary<string, string>();
-
 		[Parameter] public EventCallback<CFile> UpdateFile { get; set; }
 
 		[Parameter] public RenderFragment<CFile> Editor { get; set; } = null;
 
 		[Parameter] public EventCallback TestConfiguration { get; set; }
-		[Parameter] public Result<string> TestResult { get; set; }
 		[Parameter] public EventCallback ShowAddFileModal { get; set; }
 		[Parameter] public EventCallback DeleteFileCallback { get; set; }
 		[Parameter] public EventCallback<CFile> SelectedFileChanged { get; set; }
 		[Parameter] public CFile SelectedFile { get; set; } = default;
 
-		protected string SelectedFilter { get; set; }
 		protected string SearchInput { get; set; }
 
 		protected bool IsAnyFileSelected => SelectedFile != default;
@@ -47,19 +42,6 @@ namespace Seenginx.Components
 			}
 		}
 
-		protected override async Task OnParametersSetAsync()
-		{
-			try
-			{
-				SelectedFilter = Filters.FirstOrDefault();
-				await base.OnParametersSetAsync();
-			}
-			catch (Exception ex)
-			{
-				throw ex;
-			}
-		}
-
 		protected async override Task OnAfterRenderAsync(bool firstRender)
 		{
 			try
@@ -73,12 +55,6 @@ namespace Seenginx.Components
 			}
 		}
 
-		protected void OnFilterClick(string filter)
-		{
-			SelectedFilter = filter;
-			SearchFile();
-		}
-
 		protected void SearchInputChanged(string searchInput)
 		{
 			SearchInput = searchInput;
@@ -87,55 +63,13 @@ namespace Seenginx.Components
 
 		private void SearchFile()
 		{
-			if (string.IsNullOrEmpty(SearchInput))
+			Files.ForEach(f =>
 			{
-				if (SelectedFilter == "All")
+				if (f.Name.ToLower().Contains(SearchInput.ToLower()))
-					Files.ForEach(f => f.Unhide());
+					f.Unhide();
-				else if (SelectedFilter == "Root")
-				{
-					Files.ForEach(f =>
-					{
-						if (f.Folder == FilterFolder[SelectedFilter])
-							f.Unhide();
-						else
-							f.Hide();
-					});
-				}
 				else
-					Files.ForEach(f =>
+					f.Hide();
-					{
+			});
-						if (f.Folder.Contains(FilterFolder[SelectedFilter]))
-							f.Unhide();
-						else
-							f.Hide();
-					});
-			}
-			else
-			{
-				if (SelectedFilter == "All")
-					Files.ForEach(f => { if (f.Name.ToLower().Contains(SearchInput)) f.Unhide(); else f.Hide(); });
-				else
-					Files.ForEach(f =>
-					{
-						if (SelectedFilter == "Root")
-						{
-							if (f.Folder == FilterFolder[SelectedFilter] && f.Name.ToLower().Contains(SearchInput.ToLower()))
-								f.Unhide();
-							else
-								f.Hide();
-						}
-						else
-						{
-							Files.ForEach(f =>
-							{
-								if (f.Folder.Contains(FilterFolder[SelectedFilter]) && f.Name.ToLower().Contains(SearchInput.ToLower()))
-									f.Unhide();
-								else
-									f.Hide();
-							});
-						}
-					});
-			}
 		}
 
 		protected async Task OnFileClick(MouseEventArgs e, CFile file)
@@ -183,7 +117,6 @@ namespace Seenginx.Components
 			if (SelectedFile != null)
 			{
 				await JsRuntime.InvokeVoidAsync("UpdateEditor", SelectedFile.Body);
-				SelectedFilter = "All";
 				SearchInput = string.Empty;
 				SearchFile();
 			}
@@ -193,7 +126,6 @@ namespace Seenginx.Components
 		{
 			await DeleteFileCallback.InvokeAsync(null);
 			await JsRuntime.InvokeVoidAsync("ClearEditor");
-			SelectedFilter = "All";
 			SearchInput = string.Empty;
 			SearchFile();
 		}

Seenginx/Pages/Nginx.razor

@@ -1,8 +1,6 @@
 @inherits NginxBase
 @page "/nginx"
-<FilesWithEditor CFile="ConfigFile" Filters="Filters" Files="ConfigFiles" FilterFolder="FilterFolder"
+<FilesWithEditor CFile="ConfigFile" Files="ConfigFiles" SelectedFile="SelectedFile" SelectedFileChanged="SelectedFileChanged"
-								 SelectedFile="SelectedFile" SelectedFileChanged="SelectedFileChanged"
+								 TestConfiguration="TestConfiguration" DeleteFileCallback="DeleteFile" ShowAddFileModal="ShowAddFileModal">
-								 TestConfiguration="TestConfiguration" TestResult="TestResult"
-								 DeleteFileCallback="DeleteFile" ShowAddFileModal="ShowAddFileModal" >
 </FilesWithEditor>
 

Seenginx/SCSS/base.scss

@@ -22,11 +22,13 @@ button::-moz-focus-inner, input::-moz-focus-inner {
 }
 
 html {
-	scrollbar-color: $dark-shadow $light-shadow;
+	scrollbar-color: $dark-shadow transparent;
 	scrollbar-width: thin;
 	scrollbar-arrow-color: $light-shadow;
 	scrollbar-base-color: $background;
 	scrollbar-darkshadow-color: $dark-shadow;
+	overflow-x: auto;
+	overflow-y: auto;
 }
 
 * {

Seenginx/SCSS/main.scss

@@ -3,5 +3,4 @@
 @import "base.scss";
 @import "utility.scss";
 @import "override-framework.scss";
-@import "stripeAnimation.scss";
 @import "template.scss";

Seenginx/SCSS/stripeAnimation.scss

@@ -1,73 +0,0 @@
-:root {
-	--stripe-size: 200px;
-	--color1: $background;
-	--color2: $dark-shadow;
-	--duration: 10s;
-}
-
-.stripe {
-	position: relative;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	justify-items: center;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-
-	&_inner {
-		position: relative;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: 100%;
-		height: 100%;
-		font-size: 8rem;
-		text-align: center;
-		font-family: 'Anton', sans-serif;
-		color: rgba(#fff, 0);
-		background: repeating-linear-gradient( 45deg, var(--color1) 25%, var(--color1) 50%, var(--color2) 50%, var(--color2) 75% );
-		background-size: var(--stripe-size) var(--stripe-size);
-		background-clip: text;
-		animation: stripeBackgroundPosition var(--duration) linear infinite;
-	}
-
-	&::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: calc(100% + var(--stripe-size));
-		height: 100%;
-		background: repeating-linear-gradient( 45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75% );
-		background-size: var(--stripe-size) var(--stripe-size);
-		animation: stripeTransform var(--duration) linear infinite;
-	}
-
-	&::after {
-		content: '';
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
-}
-
-@keyframes stripeTransform {
-	0% {
-		transform: translateX(0);
-	}
-
-	100% {
-		transform: translateX(calc(var(--stripe-size) * -1));
-	}
-}
-
-@keyframes stripeBackgroundPosition {
-	0% {
-		background-position: 0 0;
-	}
-
-	100% {
-		background-position: calc(var(--stripe-size) * -1) 0;
-	}
-}

Seenginx/SCSS/template.scss

@@ -96,6 +96,14 @@
 .confFile {
 	padding: 4% 6%;
 	margin-bottom: 3%;
-
+}
-
+
+.stripe {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	align-items: center;
+	justify-content: center;
+	font-size: 300%;
+	background: radial-gradient(90% 90%, $background-light, $background-dark)
 }

Seenginx/SCSS/utility.scss

@@ -149,16 +149,6 @@
 	}
 }
 
-.field.has-addons {
-	& > .control.is-expanded > .neoInput {
-		box-shadow: inset 2px 2px 4px rgba($dark-shadow, .5),inset 2px -2px 4px rgba($light-shadow, .5) !important;
-	}
-
-	& > .control > .neoSelect > select {
-		box-shadow: inset -2px 2px 4px rgba($dark-shadow, .5),inset -2px -2px 4px rgba($light-shadow, .5) !important;
-	}
-}
-
 .gradientBackground {
 	background: linear-gradient(to right bottom,$background-light,$background-dark)
 }

Seenginx/wwwroot/css/main.css

@@ -25,11 +25,13 @@ button::-moz-focus-inner, input::-moz-focus-inner {
   border: 0; }
 
 html {
-  scrollbar-color: #f1b941 #fbeed0;
+  scrollbar-color: #f1b941 transparent;
   scrollbar-width: thin;
   scrollbar-arrow-color: #fbeed0;
   scrollbar-base-color: #f6d287;
-  scrollbar-darkshadow-color: #f1b941; }
+  scrollbar-darkshadow-color: #f1b941;
+  overflow-x: auto;
+  overflow-y: auto; }
 
 * {
   scrollbar-width: inherit; }
@@ -133,12 +135,6 @@ html {
   .neoSelect > select:focus {
     border: none !important; }
 
-.field.has-addons > .control.is-expanded > .neoInput {
-  box-shadow: inset 2px 2px 4px rgba(241, 185, 65, 0.5), inset 2px -2px 4px rgba(251, 238, 208, 0.5) !important; }
-
-.field.has-addons > .control > .neoSelect > select {
-  box-shadow: inset -2px 2px 4px rgba(241, 185, 65, 0.5), inset -2px -2px 4px rgba(251, 238, 208, 0.5) !important; }
-
 .gradientBackground {
   background: linear-gradient(to right bottom, #f7d794, #f5cd79); }
 
@@ -232,64 +228,6 @@ html {
   .blazored-modal-overlay {
     background: #f6d287; }
 
-:root {
-  --stripe-size: 200px;
-  --color1: #f6d287;
-  --color2: #f1b941;
-  --duration: 10s; }
-
-.stripe {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  justify-items: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden; }
-  .stripe_inner {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    font-size: 8rem;
-    text-align: center;
-    font-family: 'Anton', sans-serif;
-    color: rgba(255, 255, 255, 0);
-    background: repeating-linear-gradient(45deg, var(--color1) 25%, var(--color1) 50%, var(--color2) 50%, var(--color2) 75%);
-    background-size: var(--stripe-size) var(--stripe-size);
-    background-clip: text;
-    animation: stripeBackgroundPosition var(--duration) linear infinite; }
-  .stripe::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: calc(100% + var(--stripe-size));
-    height: 100%;
-    background: repeating-linear-gradient(45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
-    background-size: var(--stripe-size) var(--stripe-size);
-    animation: stripeTransform var(--duration) linear infinite; }
-  .stripe::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%; }
-
-@keyframes stripeTransform {
-  0% {
-    transform: translateX(0); }
-  100% {
-    transform: translateX(calc(var(--stripe-size) * -1)); } }
-
-@keyframes stripeBackgroundPosition {
-  0% {
-    background-position: 0 0; }
-  100% {
-    background-position: calc(var(--stripe-size) * -1) 0; } }
-
 .main {
   display: flex;
   flex-wrap: nowrap;
@@ -362,3 +300,12 @@ html {
 .confFile {
   padding: 4% 6%;
   margin-bottom: 3%; }
+
+.stripe {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  font-size: 300%;
+  background: radial-gradient(90% 90%, #f7d794, #f5cd79); }