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

Better styling of editor and updating file draft name on change

Browse Source
This commit is contained in:
Eugene ;) 2020-04-27 22:29:45 +02:00
parent f25472aa47
commit c1f5f82329
7 changed files with 65 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
Seenginx/Components/FilesWithEditor.razor
View File

@ -31,7 +31,10 @@
{
<div class="field is-grouped">
<div class="control is-expanded borderRBig neoInput has-text-centered">
<input class="input is-5 is-rounded is-small neoInput" type="text" placeholder="Search..." value="@SelectedFile.Name" disabled>
<input class="input is-5 is-rounded is-small neoInput"
type="text" placeholder="Search..."
value="@SelectedFile.Name" disabled="@(SelectedFile.CanBeDeleted ? null : "disabled")"
@onchange="e => SelectedFile.DraftName = e.Value.ToString()">
</div>
<div class="control">
<button class="button is-small is-rounded neoBtn" @onclick="OnFileCloseClick">
@ -50,19 +53,19 @@
}
</div>
<div class="files neomorphInsetSmall borderR">
<div class="files neomorphInsetXSmall borderR">
<div class="filesList">
@foreach (var file in Files)
{
<div @onclick="e => OnFileClick(e,file)" @key="file" class="confFile borderRSmall isFinger 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>
<p class="has-text-weight-bold ellipsis @(file.CanBeDeleted ? null : "has-text-danger")">@file.Name</p>
</div>
}
</div>
</div>
<div class="codeEditor neomorphInsetSmall borderR">
<div class="codeEditor neomorphXSmall borderR">
<pre id="editor" class="borderR @(IsAnyFileSelected ? string.Empty : "is-hidden")">
</pre>
<div class="stripe borderR @(IsAnyFileSelected ? "is-hidden" : string.Empty)">

12
Seenginx/SCSS/override-framework.scss
View File

@ -26,7 +26,6 @@ html {
right: 0;
bottom: 0;
left: 0;
margin: 3%;
}
.select:not(.is-multiple):not(.is-loading)::after {
@ -38,9 +37,18 @@ html {
}
.ace-solarized-light {
background: $background-light;
background: $background;
& .ace_gutter {
background: $background-dark;
}
& .ace_gutter-active-line {
border-radius: 50px 0 0 50px;
}
& .ace_marker-layer .ace_active-line {
border-radius: 0 50px 50px 0;
}
}

4
Seenginx/SCSS/stripeAnimation.scss
View File

@ -11,8 +11,8 @@
justify-content: center;
align-items: center;
justify-items: center;
width: 93%;
height: 90%;
width: 100%;
height: 100%;
overflow: hidden;
&_inner {

8
Seenginx/SCSS/template.scss
View File

@ -24,7 +24,7 @@
.filesWithEditor {
display: grid;
grid-template-areas: "filterFiles fileTitle" "files codeEditor" "filesActions editorActions";
grid-gap: 20px;
grid-gap: 25px;
height: 100%;
max-height: 100%;
min-height: 10%;
@ -37,7 +37,11 @@
}
& .fileTitle {
grid-area: fileTitle
grid-area: fileTitle;
& .field, & .control {
height: 100%
}
}
& .files {

16
Seenginx/SCSS/utility.scss
View File

@ -43,6 +43,11 @@
box-shadow: -6px -6px 12px rgba($light-shadow, .5), 6px 6px 12px rgba($dark-shadow, .5);
}
&XSmall {
/*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: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
}
&Bottom {
filter: drop-shadow(8px 8px 14px rgba($dark-shadow, 1));
}
@ -53,6 +58,11 @@
&Small {
box-shadow: inset 6px 6px 12px rgba($dark-shadow, .5), inset -6px -6px 12px rgba($light-shadow, .5);
}
&XSmall {
/*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: inset 3px 3px 6px rgba($dark-shadow, .5), inset -3px -3px 6px rgba($light-shadow, .5);
}
}
}
@ -132,3 +142,9 @@
.sameMarginBottom {
margin-bottom: 1rem !important
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

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

@ -63,12 +63,18 @@ html {
.neomorphSmall {
/*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(251, 238, 208, 0.5), 6px 6px 12px rgba(241, 185, 65, 0.5); }
.neomorphXSmall {
/*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: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5); }
.neomorphBottom {
filter: drop-shadow(8px 8px 14px #f1b941); }
.neomorphInset {
box-shadow: inset 8px 8px 16px rgba(241, 185, 65, 0.5), inset -8px -8px 16px rgba(251, 238, 208, 0.5); }
.neomorphInsetSmall {
box-shadow: inset 6px 6px 12px rgba(241, 185, 65, 0.5), inset -6px -6px 12px rgba(251, 238, 208, 0.5); }
.neomorphInsetXSmall {
/*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: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px 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);
@ -122,6 +128,11 @@ html {
.sameMarginBottom {
margin-bottom: 1rem !important; }
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
@font-face {
font-family: 'Ubuntu';
src: url(/fonts/ubuntu-light-webfont.woff2) format("woff2");
@ -145,8 +156,7 @@ html {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 3%; }
left: 0; }
.select:not(.is-multiple):not(.is-loading)::after {
border-color: #f1b941; }
@ -155,9 +165,13 @@ html {
border-color: #be860e; }
.ace-solarized-light {
background: #f7d794; }
background: #f6d287; }
.ace-solarized-light .ace_gutter {
background: #f5cd79; }
.ace-solarized-light .ace_gutter-active-line {
border-radius: 50px 0 0 50px; }
.ace-solarized-light .ace_marker-layer .ace_active-line {
border-radius: 0 50px 50px 0; }
:root {
--stripe-size: 200px;
@ -171,8 +185,8 @@ html {
justify-content: center;
align-items: center;
justify-items: center;
width: 93%;
height: 90%;
width: 100%;
height: 100%;
overflow: hidden; }
.stripe_inner {
position: relative;
@ -238,7 +252,7 @@ html {
.filesWithEditor {
display: grid;
grid-template-areas: "filterFiles fileTitle" "files codeEditor" "filesActions editorActions";
grid-gap: 20px;
grid-gap: 25px;
height: 100%;
max-height: 100%;
min-height: 10%;
@ -249,6 +263,8 @@ html {
grid-area: filterFiles; }
.filesWithEditor .fileTitle {
grid-area: fileTitle; }
.filesWithEditor .fileTitle .field, .filesWithEditor .fileTitle .control {
height: 100%; }
.filesWithEditor .files {
grid-area: files;
display: block;

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

File diff suppressed because one or more lines are too long