Better styling of editor and updating file draft name on change
This commit is contained in:
parent
f25472aa47
commit
c1f5f82329
|
|
@ -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)">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
width: 93%;
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&_inner {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue