thepra/Seenginx
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Styling the files and editor

Browse Source
This commit is contained in:
Eugene ;)
2020-04-22 00:25:21 +02:00
parent b73c401ff4
commit 9f1e6b9e2d
9 changed files with 258 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Seenginx.Models/ConfigFile.cs
View File

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

4
Seenginx/Components/FileItem.razor
View File

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

114
Seenginx/Components/FilesWithEditor.razor
View File

@@ -2,9 +2,8 @@
<div class="filesWithEditor">
<div class="files">
<div class="field has-addons sameMarginBottom">
<div class="filterFiles">
<div class="field has-addons">
<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)
{
<nav class="level">
<div 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-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>
<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>
<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>
<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>
</div>
<button class="button is-small is-rounded neoBtn" @onclick="OnFileClick">
<span class="icon is-medium">
<i class="mdi mdi-close"></i>
</span>
</button>
</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>

22
Seenginx/Components/FilesWithEditor.razor.cs
View File

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

16
Seenginx/SCSS/base.scss
View File

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

54
Seenginx/SCSS/template.scss
View File

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

44
Seenginx/SCSS/utility.scss
View File

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

77
Seenginx/wwwroot/css/main.css
View File

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

2
Seenginx/wwwroot/css/main.min.css vendored
View File

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