From ae1726ce7a6062819d2a0d2ef7dec963bc213613 Mon Sep 17 00:00:00 2001 From: ThePra Date: Fri, 17 Apr 2020 00:50:23 +0200 Subject: [PATCH] New styling and files functionality --- Seenginx.Components/FileItem.razor | 4 +- Seenginx.Components/FilesWithEditor.razor | 46 +++++---- Seenginx.Components/FilesWithEditor.razor.cs | 21 ++-- Seenginx.Models/ConfigFile.cs | 2 +- Seenginx/Components/FileItem.razor | 12 +++ Seenginx/Components/FileItem.razor.cs | 16 +++ Seenginx/Components/FilesWithEditor.razor | 72 +++++++++++++ Seenginx/Components/FilesWithEditor.razor.cs | 101 +++++++++++++++++++ Seenginx/Pages/Nginx.razor.cs | 8 ++ Seenginx/Pages/_Host.cshtml | 2 +- Seenginx/SCSS/main.scss | 6 +- Seenginx/SCSS/template.scss | 44 ++++++++ Seenginx/SCSS/utility.scss | 51 +++++++++- Seenginx/SCSS/variables.scss | 8 ++ Seenginx/Seenginx.csproj | 1 - Seenginx/Shared/MainLayout.razor | 23 ++--- Seenginx/Shared/NavMenu.razor | 4 +- Seenginx/wwwroot/css/main.css | 67 +++++++++++- Seenginx/wwwroot/css/main.min.css | 2 +- 19 files changed, 432 insertions(+), 58 deletions(-) create mode 100644 Seenginx/Components/FileItem.razor create mode 100644 Seenginx/Components/FileItem.razor.cs create mode 100644 Seenginx/Components/FilesWithEditor.razor create mode 100644 Seenginx/Components/FilesWithEditor.razor.cs create mode 100644 Seenginx/SCSS/template.scss create mode 100644 Seenginx/SCSS/variables.scss diff --git a/Seenginx.Components/FileItem.razor b/Seenginx.Components/FileItem.razor index 0af9c04..8053436 100644 --- a/Seenginx.Components/FileItem.razor +++ b/Seenginx.Components/FileItem.razor @@ -1,6 +1,6 @@ @inherits FileItemBase -
+

@File.Folder

@@ -9,4 +9,4 @@

-
\ No newline at end of file + \ No newline at end of file diff --git a/Seenginx.Components/FilesWithEditor.razor b/Seenginx.Components/FilesWithEditor.razor index 026b900..e2ad1be 100644 --- a/Seenginx.Components/FilesWithEditor.razor +++ b/Seenginx.Components/FilesWithEditor.razor @@ -1,61 +1,65 @@ @typeparam CFile -
+
-
-
-

+

+
+
+ @foreach (var filter in Filters) { - @filter + } -

-
-
-
-
- -
-
+
+
+

+ + + + +

+
+
+
-
-
+
+
-
+
@Editor
diff --git a/Seenginx.Components/FilesWithEditor.razor.cs b/Seenginx.Components/FilesWithEditor.razor.cs index 171a3eb..73f626a 100644 --- a/Seenginx.Components/FilesWithEditor.razor.cs +++ b/Seenginx.Components/FilesWithEditor.razor.cs @@ -1,4 +1,5 @@ using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; using Seenginx.Models; using System; using System.Collections.Generic; @@ -47,7 +48,7 @@ namespace Seenginx.Components [Parameter] public CFile SelectedFile { get; set; } - protected string SearchInput { get; set; } + protected string SearchInput { get; set; } = string.Empty; protected async Task OnDeselectClick() { @@ -55,20 +56,20 @@ namespace Seenginx.Components await SelectedFileChanged.InvokeAsync(SelectedFile); } - protected async Task OnFilterClick(EventArgs e, string filter) + protected async Task OnFilterClick(MouseEventArgs e, string filter) { await ApplyFilter.InvokeAsync(filter); - for (int index = 0; index < Files.Count; index++) - if (FilteredOutFiles.Contains(index)) - Files[index].Hide(); - else - Files[index].Unhide(); + //for (int index = 0; index < Files.Count; index++) + // if (FilteredOutFiles.Contains(index)) + // Files[index].Hide(); + // else + // Files[index].Unhide(); } - protected void SearchInputChanged() + protected async Task SearchInputChanged(ChangeEventArgs e) { if (string.IsNullOrEmpty(SearchInput)) - Files.ForEach(f => f.Hide()); + Files.ForEach(f => f.Unhide()); else Files.ForEach(f => { @@ -79,7 +80,7 @@ namespace Seenginx.Components }); } - protected async Task OnFileClick(CFile file) + protected async Task OnFileClick(MouseEventArgs e, CFile file) { await SelectedFileChanged.InvokeAsync(file); } diff --git a/Seenginx.Models/ConfigFile.cs b/Seenginx.Models/ConfigFile.cs index 47baeff..240022e 100644 --- a/Seenginx.Models/ConfigFile.cs +++ b/Seenginx.Models/ConfigFile.cs @@ -18,7 +18,7 @@ namespace Seenginx.Models public bool CanBeDeleted { get; set; } = true; public string IsVisible { get; set; } = string.Empty; - public void Hide() { IsVisible = "hide"; } + public void Hide() { IsVisible = "is-hidden"; } public void Unhide() { IsVisible = string.Empty; } } } diff --git a/Seenginx/Components/FileItem.razor b/Seenginx/Components/FileItem.razor new file mode 100644 index 0000000..8053436 --- /dev/null +++ b/Seenginx/Components/FileItem.razor @@ -0,0 +1,12 @@ +@inherits FileItemBase + + +
+
+

@File.Folder

+

+ @File.Name +

+
+
+ \ No newline at end of file diff --git a/Seenginx/Components/FileItem.razor.cs b/Seenginx/Components/FileItem.razor.cs new file mode 100644 index 0000000..d59ef73 --- /dev/null +++ b/Seenginx/Components/FileItem.razor.cs @@ -0,0 +1,16 @@ +using Microsoft.AspNetCore.Components; +using Seenginx.Models; +using System; +using System.Collections.Generic; +using System.Text; + +namespace Seenginx.Components +{ + public class FileItemBase : ComponentBase + { + [Parameter] + public ConfigFile File { get; set; } + + + } +} diff --git a/Seenginx/Components/FilesWithEditor.razor b/Seenginx/Components/FilesWithEditor.razor new file mode 100644 index 0000000..2a26c00 --- /dev/null +++ b/Seenginx/Components/FilesWithEditor.razor @@ -0,0 +1,72 @@ +@typeparam CFile + +
+ +
+ +
+
+
+ +
+ + + +
+

+ + + + +

+
+ +
+ +
+ +
+ + + +
+ +
+ +
+ @Editor +
+ + + +
+ diff --git a/Seenginx/Components/FilesWithEditor.razor.cs b/Seenginx/Components/FilesWithEditor.razor.cs new file mode 100644 index 0000000..8046a36 --- /dev/null +++ b/Seenginx/Components/FilesWithEditor.razor.cs @@ -0,0 +1,101 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; +using Seenginx.Models; +using System; +using System.Collections.Generic; +using System.Linq; +using System.Text; +using System.Threading.Tasks; + +namespace Seenginx.Components +{ + public partial class FilesWithEditor : ComponentBase + where CFile : ConfigFile + { + [Parameter] + public List Files { get; set; } = new List(); + + [Parameter] + public List Filters { get; set; } = new List(); + [Parameter] + public List FilteredOutFiles { get; set; } = new List(); + [Parameter] + public EventCallback ApplyFilter { get; set; } + + [Parameter] + public EventCallback AddFile { get; set; } + [Parameter] + public EventCallback UpdateFile { get; set; } + [Parameter] + public EventCallback DeleteFile { get; set; } + + [Parameter] + public RenderFragment Editor { get; set; } + + [Parameter] + public RenderFragment CreateDialog { get; set; } + + [Parameter] + public RenderFragment UpdateDialog { get; set; } + + [Parameter] + public RenderFragment DeleteDialog { get; set; } + + protected string SelectedFilter { get; set; } + + protected bool IsAnyFileSelected => SelectedFile != default; + + [Parameter] + public EventCallback SelectedFileChanged { get; set; } + [Parameter] + public CFile SelectedFile { get; set; } + + protected async Task OnDeselectClick() + { + SelectedFile = null; + await SelectedFileChanged.InvokeAsync(SelectedFile); + } + + protected async Task OnFilterClick(string filter) + { + await ApplyFilter.InvokeAsync(filter); + //for (int index = 0; index < Files.Count; index++) + // if (FilteredOutFiles.Contains(index)) + // Files[index].Hide(); + // else + // Files[index].Unhide(); + } + + protected async Task SearchInputChanged(string searchInput) + { + if (string.IsNullOrEmpty(searchInput)) + Files.ForEach(f => f.Unhide()); + else + Files.ForEach(f => + { + if (f.Name.ToLower().Contains(searchInput.ToLower())) + f.Unhide(); + else + f.Hide(); + }); + } + + protected async Task OnFileClick(MouseEventArgs e, CFile file) + { + await SelectedFileChanged.InvokeAsync(file); + } + + protected async Task OnAddDialog() + { + await AddFile.InvokeAsync(null); + } + protected async Task OnUpdateDialog() + { + await UpdateFile.InvokeAsync(SelectedFile); + } + protected async Task OnDeleteDialog() + { + await UpdateFile.InvokeAsync(SelectedFile); + } + } +} diff --git a/Seenginx/Pages/Nginx.razor.cs b/Seenginx/Pages/Nginx.razor.cs index 458546d..60d6049 100644 --- a/Seenginx/Pages/Nginx.razor.cs +++ b/Seenginx/Pages/Nginx.razor.cs @@ -41,6 +41,14 @@ namespace Seenginx.Pages { if (filter == "All") ConfigFiles.ForEach(f => f.Unhide()); + else if (filter == "Root") + ConfigFiles.ForEach(f => + { + if (f.Folder == FilterFolder[filter]) + f.Unhide(); + else + f.Hide(); + }); else ConfigFiles.ForEach(f => { diff --git a/Seenginx/Pages/_Host.cshtml b/Seenginx/Pages/_Host.cshtml index 36cf702..6870890 100644 --- a/Seenginx/Pages/_Host.cshtml +++ b/Seenginx/Pages/_Host.cshtml @@ -25,7 +25,7 @@ - + diff --git a/Seenginx/SCSS/main.scss b/Seenginx/SCSS/main.scss index 6726688..ca1d700 100644 --- a/Seenginx/SCSS/main.scss +++ b/Seenginx/SCSS/main.scss @@ -1,4 +1,6 @@ -@import "mixins.scss"; +@import "variables.scss"; +@import "mixins.scss"; @import "base.scss"; @import "utility.scss"; -@import "override-framework.scss"; \ No newline at end of file +@import "override-framework.scss"; +@import "template.scss"; \ No newline at end of file diff --git a/Seenginx/SCSS/template.scss b/Seenginx/SCSS/template.scss new file mode 100644 index 0000000..67531c2 --- /dev/null +++ b/Seenginx/SCSS/template.scss @@ -0,0 +1,44 @@ +.main { + display: flex; + flex-wrap: nowrap; + align-items: start; + width: 100%; + height: 100vh; + padding: 2.5%; + + &Nav { + overflow-y: auto; + padding: $border-radius; + width: 17%; + margin-right: 40px; + } + + &Page { + overflow-y: auto; + padding: $border-radius-b; + width: calc(83% - 40px); + align-self: stretch; + } +} + +.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%; + overflow-y: auto; + } +} diff --git a/Seenginx/SCSS/utility.scss b/Seenginx/SCSS/utility.scss index 2be3a5a..8260613 100644 --- a/Seenginx/SCSS/utility.scss +++ b/Seenginx/SCSS/utility.scss @@ -14,5 +14,54 @@ .flexCenter { display: flex; - align-content: center + align-content: center; + align-items: center } + +.is { + &NoWrap { + white-space: nowrap + } + + &Finger { + cursor: pointer + } +} + +.neomorph { + /*box-shadow: 0px 0px 4px 4px rgba($background, 1), -8px -8px 16px rgba($light-shadow, 1), 8px 8px 16px rgba($dark-shadow, 1);*/ + box-shadow: -8px -8px 16px rgba($light-shadow, .5), 8px 8px 16px rgba($dark-shadow, .5); + + &Small { + /*box-shadow: 0px 0px 3px 3px rgba($background, 1), -6px -6px 12px rgba($light-shadow, 1), 6px 6px 12px rgba($dark-shadow, 1);*/ + box-shadow: -6px -6px 12px rgba($light-shadow, .5), 6px 6px 12px rgba($dark-shadow, .5); + } + + &Bottom { + filter: drop-shadow(8px 8px 14px rgba($dark-shadow, 1)); + } +} + +.gradientBackground { + background: linear-gradient(to right bottom,$background-light,$background-dark) +} + +.borderR { + border-radius: $border-radius; + + &Small { + border-radius: $border-radius-s; + } + + &Big { + border-radius: $border-radius-b; + } +} + +.bg { + background: $background +} + +.sameMarginBottom{ + margin-bottom: 1rem !important +} \ No newline at end of file diff --git a/Seenginx/SCSS/variables.scss b/Seenginx/SCSS/variables.scss new file mode 100644 index 0000000..91b884d --- /dev/null +++ b/Seenginx/SCSS/variables.scss @@ -0,0 +1,8 @@ +$border-radius: 14px; +$border-radius-s: 7px; +$border-radius-b: 28px; +$background: rgba(246,210,135,1); +$background-light: rgba(247, 215, 148,1); +$background-dark: rgba(245, 205, 121,1); +$light-shadow: hsl(41, 86%, 90%); +$dark-shadow: hsl(41, 86%, 60%); \ No newline at end of file diff --git a/Seenginx/Seenginx.csproj b/Seenginx/Seenginx.csproj index c51e9c1..3097dc6 100644 --- a/Seenginx/Seenginx.csproj +++ b/Seenginx/Seenginx.csproj @@ -24,7 +24,6 @@ - diff --git a/Seenginx/Shared/MainLayout.razor b/Seenginx/Shared/MainLayout.razor index 18947ec..3786523 100644 --- a/Seenginx/Shared/MainLayout.razor +++ b/Seenginx/Shared/MainLayout.razor @@ -1,21 +1,14 @@ @inherits LayoutComponentBase -
- -
- -
-
- -
-
- -
-
- @Body -
-
+
+
+
+
+ @Body +
+ +
\ No newline at end of file diff --git a/Seenginx/Shared/NavMenu.razor b/Seenginx/Shared/NavMenu.razor index 6dec249..c7d1d17 100644 --- a/Seenginx/Shared/NavMenu.razor +++ b/Seenginx/Shared/NavMenu.razor @@ -1,10 +1,10 @@ @inherits NavMenuBase