Taking away filtering by folder

This commit is contained in:
Eugene ;) 2020-07-03 00:37:23 +02:00
parent ca43e89583
commit a64ff28d68
11 changed files with 37 additions and 247 deletions

View File

@ -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>

View File

@ -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")
Files.ForEach(f => f.Unhide());
else if (SelectedFilter == "Root")
{
Files.ForEach(f =>
{
if (f.Folder == FilterFolder[SelectedFilter])
f.Unhide();
else
f.Hide();
});
}
if (f.Name.ToLower().Contains(SearchInput.ToLower()))
f.Unhide();
else
Files.ForEach(f =>
{
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();
});
}
});
}
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();
}

View File

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

View File

@ -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;
}
* {

View File

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

View File

@ -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;
}
}

View File

@ -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)
}

View File

@ -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)
}

View File

@ -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); }

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB