diff --git a/Seenginx.Models/ConfigFile.cs b/Seenginx.Models/ConfigFile.cs index ace996d..453afc0 100644 --- a/Seenginx.Models/ConfigFile.cs +++ b/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; } } } diff --git a/Seenginx/Components/FileItem.razor b/Seenginx/Components/FileItem.razor index b029276..bba84f1 100644 --- a/Seenginx/Components/FileItem.razor +++ b/Seenginx/Components/FileItem.razor @@ -1,6 +1,6 @@ @inherits FileItemBase -

@File.Folder

-
@File.Name
+
@File.Folder
+
@File.Name
 diff --git a/Seenginx/Components/FilesWithEditor.razor b/Seenginx/Components/FilesWithEditor.razor index e1e6b21..067ccbd 100644 --- a/Seenginx/Components/FilesWithEditor.razor +++ b/Seenginx/Components/FilesWithEditor.razor @@ -2,9 +2,8 @@
-
- -
+
+
@@ -25,49 +24,12 @@
- -
- -
- -
- - - -
-
-
+
@if (IsAnyFileSelected) { - -
- +
+
+ @foreach (var file in Files) + { +
+

@file.Folder

+

@file.Name

+
+ } +
+
+ +
+ @if (IsAnyFileSelected) + {
} else { -

Select any file to start editing...

+ }
+
+
+ + +
+
+
+ @if (IsAnyFileSelected) + { +
+ + + + +
+ } + else + { + + } +
diff --git a/Seenginx/Components/FilesWithEditor.razor.cs b/Seenginx/Components/FilesWithEditor.razor.cs index 2dacd07..e18a1c0 100644 --- a/Seenginx/Components/FilesWithEditor.razor.cs +++ b/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 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); diff --git a/Seenginx/SCSS/base.scss b/Seenginx/SCSS/base.scss index 9250dfb..3283fc6 100644 --- a/Seenginx/SCSS/base.scss +++ b/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; +} diff --git a/Seenginx/SCSS/template.scss b/Seenginx/SCSS/template.scss index 67531c2..a0d0ecb 100644 --- a/Seenginx/SCSS/template.scss +++ b/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; } } diff --git a/Seenginx/SCSS/utility.scss b/Seenginx/SCSS/utility.scss index 6d1bc10..42737fc 100644 --- a/Seenginx/SCSS/utility.scss +++ b/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) } diff --git a/Seenginx/wwwroot/css/main.css b/Seenginx/wwwroot/css/main.css index 5e94f97..ea04225 100644 --- a/Seenginx/wwwroot/css/main.css +++ b/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; } diff --git a/Seenginx/wwwroot/css/main.min.css b/Seenginx/wwwroot/css/main.min.css index caae4df..db2b7c3 100644 --- a/Seenginx/wwwroot/css/main.min.css +++ b/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;} \ No newline at end of file +#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;} \ No newline at end of file