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

Styling the editor and progressing with design

Browse Source
This commit is contained in:
Eugene ;) 2020-04-25 00:13:52 +02:00
parent dcf0a46c44
commit f25472aa47
10 changed files with 222 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
Seenginx/Components/FilesWithEditor.razor
View File

@ -5,21 +5,21 @@
<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">
<input formnovalidate @oninput="e => SearchInputChanged(e.Value.ToString())" class="input is-rounded is-small neoInput" type="text" placeholder="Search...">
<span class="icon is-small is-left has-text-dark">
<i class="mdi mdi-search-web"></i>
</span>
</div>
<div class="control has-icons-left">
<div class="select is-small is-rounded">
<select @onchange="e => OnFilterClick(e.Value.ToString())">
<select class="neoInput" @onchange="e => OnFilterClick(e.Value.ToString())">
@foreach (var filter in Filters)
{
<option value="@filter">@filter</option>
}
</select>
</div>
<span class="icon is-small is-left">
<span class="icon is-small is-left has-text-dark">
<i class="mdi mdi-folder-cog-outline"></i>
</span>
</div>
@ -29,28 +29,24 @@
<div class="fileTitle">
@if (IsAnyFileSelected)
{
<div class="level">
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">
@SelectedFile.Name
</p>
</div>
<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>
</div>
<div class="level-right">
<div class="level-item">
<button class="button is-small is-rounded neoBtn" @onclick="OnFileCloseClick">
<span class="icon is-medium">
<i class="mdi mdi-close"></i>
</span>
</button>
</div>
<div class="control">
<button class="button is-small is-rounded neoBtn" @onclick="OnFileCloseClick">
<span class="icon is-medium">
<i class="mdi mdi-close"></i>
</span>
</button>
</div>
</div>
}
else
{
<p>Select any file to start editing...</p>
<div class="field">
<div class="control is-expanded borderRBig neoInput has-text-centered"><span>...</span></div>
</div>
}
</div>
@ -66,9 +62,12 @@
</div>
</div>
<div class="codeEditor">
<pre id="editor" class="@(IsAnyFileSelected ? string.Empty : "is-hidden")">
<div class="codeEditor neomorphInsetSmall borderR">
<pre id="editor" class="borderR @(IsAnyFileSelected ? string.Empty : "is-hidden")">
</pre>
<div class="stripe borderR @(IsAnyFileSelected ? "is-hidden" : string.Empty)">
<div class="stripe_inner">Select a file</div>
</div>
</div>
<div class="filesActions">

1
Seenginx/SCSS/main.scss
View File

@ -3,4 +3,5 @@
@import "base.scss";
@import "utility.scss";
@import "override-framework.scss";
@import "stripeAnimation.scss";
@import "template.scss";

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

@ -26,4 +26,21 @@ html {
right: 0;
bottom: 0;
left: 0;
margin: 3%;
}
.select:not(.is-multiple):not(.is-loading)::after {
border-color: $dark-shadow;
}
.select:not(.is-multiple):not(.is-loading):hover::after {
border-color: darken($dark-shadow, 20%);
}
.ace-solarized-light {
background: $background-light;
& .ace_gutter {
background: $background-dark;
}
}

73
Seenginx/SCSS/stripeAnimation.scss Normal file
View File

@ -0,0 +1,73 @@
:root {
--stripe-size: 200px;
--color1: $background;
--color2: $dark-shadow;
--duration: 10s;
}
.stripe {
position: relative;
display: flex;
justify-content: center;
align-items: center;
justify-items: center;
width: 93%;
height: 90%;
overflow: hidden;
&_inner {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 8rem;
text-align: center;
font-family: 'Anton', sans-serif;
color: rgba(#fff, 0);
background: repeating-linear-gradient( 45deg, var(--color1) 25%, var(--color1) 50%, var(--color2) 50%, var(--color2) 75% );
background-size: var(--stripe-size) var(--stripe-size);
background-clip: text;
animation: stripeBackgroundPosition var(--duration) linear infinite;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: calc(100% + var(--stripe-size));
height: 100%;
background: repeating-linear-gradient( 45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75% );
background-size: var(--stripe-size) var(--stripe-size);
animation: stripeTransform var(--duration) linear infinite;
}
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
}
}
@keyframes stripeTransform {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(var(--stripe-size) * -1));
}
}
@keyframes stripeBackgroundPosition {
0% {
background-position: 0 0;
}
100% {
background-position: calc(var(--stripe-size) * -1) 0;
}
}

3
Seenginx/SCSS/template.scss
View File

@ -69,6 +69,9 @@
height: 100%;
/*overflow-x: auto;*/
position: relative;
display: flex;
justify-content: center;
align-items: center;
& .editor {
height: 100%;

10
Seenginx/SCSS/utility.scss
View File

@ -97,6 +97,16 @@
color: $color-black !important;
}
}
&Input {
box-shadow: inset 2px 2px 4px rgba($dark-shadow, .5),inset -2px -2px 4px rgba($light-shadow, .5) !important;
background: $background !important;
border: none !important;
&:focus{
border: none !important;
}
}
}
.gradientBackground {

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

@ -99,6 +99,13 @@ html {
box-shadow: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px rgba(251, 238, 208, 0.5) !important;
color: #181515 !important; }
.neoInput {
box-shadow: inset 2px 2px 4px rgba(241, 185, 65, 0.5), inset -2px -2px 4px rgba(251, 238, 208, 0.5) !important;
background: #f6d287 !important;
border: none !important; }
.neoInput:focus {
border: none !important; }
.gradientBackground {
background: linear-gradient(to right bottom, #f7d794, #f5cd79); }
@ -138,7 +145,77 @@ html {
top: 0;
right: 0;
bottom: 0;
left: 0; }
left: 0;
margin: 3%; }
.select:not(.is-multiple):not(.is-loading)::after {
border-color: #f1b941; }
.select:not(.is-multiple):not(.is-loading):hover::after {
border-color: #be860e; }
.ace-solarized-light {
background: #f7d794; }
.ace-solarized-light .ace_gutter {
background: #f5cd79; }
:root {
--stripe-size: 200px;
--color1: #f6d287;
--color2: #f1b941;
--duration: 10s; }
.stripe {
position: relative;
display: flex;
justify-content: center;
align-items: center;
justify-items: center;
width: 93%;
height: 90%;
overflow: hidden; }
.stripe_inner {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 8rem;
text-align: center;
font-family: 'Anton', sans-serif;
color: rgba(255, 255, 255, 0);
background: repeating-linear-gradient(45deg, var(--color1) 25%, var(--color1) 50%, var(--color2) 50%, var(--color2) 75%);
background-size: var(--stripe-size) var(--stripe-size);
background-clip: text;
animation: stripeBackgroundPosition var(--duration) linear infinite; }
.stripe::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: calc(100% + var(--stripe-size));
height: 100%;
background: repeating-linear-gradient(45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
background-size: var(--stripe-size) var(--stripe-size);
animation: stripeTransform var(--duration) linear infinite; }
.stripe::after {
content: '';
position: absolute;
width: 100%;
height: 100%; }
@keyframes stripeTransform {
0% {
transform: translateX(0); }
100% {
transform: translateX(calc(var(--stripe-size) * -1)); } }
@keyframes stripeBackgroundPosition {
0% {
background-position: 0 0; }
100% {
background-position: calc(var(--stripe-size) * -1) 0; } }
.main {
display: flex;
@ -194,7 +271,10 @@ html {
min-height: 0;
height: 100%;
/*overflow-x: auto;*/
position: relative; }
position: relative;
display: flex;
justify-content: center;
align-items: center; }
.filesWithEditor .codeEditor .editor {
height: 100%;
margin: 0;

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

File diff suppressed because one or more lines are too long

10
Seenginx/wwwroot/js/index.js
View File

@ -9,23 +9,23 @@ window.InitEditor = () => {
highlightActiveLine: true,
highlightSelectedWord: true,
readOnly: false,
cursorStyle: "smooth",
cursorStyle: "smooth slim",
mergeUndoDeltas: true,
behavioursEnabled: true,
wrapBehavioursEnabled: true,
copyWithEmptySelection: true,
navigateWithinSoftTabs: true,
printMargin: false,
scrollPastEnd: 0.1,
theme: "ace/theme/merbivore_soft",
scrollPastEnd: 0.2,
theme: "ace/theme/solarized_light",
mode: "ace/mode/nginx",
fixedWidthGutter: true,
firstLineNumber: 1,
newLineMode: "auto",
tabSize: 2,
//keybinding: "ace/keyboard/vscode",
keyboardHandler: "ace/keyboard/vscode",
//enableBasicAutocompletion: true,
//enableLiveAutocompletion: true,
enableLiveAutocompletion: true,
//enableSnippets: true
})
}

8
Seenginx/wwwroot/js/theme-solarized_light.js Normal file
View File

@ -0,0 +1,8 @@
ace.define("ace/theme/solarized_light",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!1,t.cssClass="ace-solarized-light",t.cssText=".ace-solarized-light .ace_gutter {background: #fbf1d3;color: #333}.ace-solarized-light .ace_print-margin {width: 1px;background: #e8e8e8}.ace-solarized-light {background-color: #FDF6E3;color: #586E75}.ace-solarized-light .ace_cursor {color: #000000}.ace-solarized-light .ace_marker-layer .ace_selection {background: rgba(7, 54, 67, 0.09)}.ace-solarized-light.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #FDF6E3;}.ace-solarized-light .ace_marker-layer .ace_step {background: rgb(255, 255, 0)}.ace-solarized-light .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid rgba(147, 161, 161, 0.50)}.ace-solarized-light .ace_marker-layer .ace_active-line {background: #EEE8D5}.ace-solarized-light .ace_gutter-active-line {background-color : #EDE5C1}.ace-solarized-light .ace_marker-layer .ace_selected-word {border: 1px solid #7f9390}.ace-solarized-light .ace_invisible {color: rgba(147, 161, 161, 0.50)}.ace-solarized-light .ace_keyword,.ace-solarized-light .ace_meta,.ace-solarized-light .ace_support.ace_class,.ace-solarized-light .ace_support.ace_type {color: #859900}.ace-solarized-light .ace_constant.ace_character,.ace-solarized-light .ace_constant.ace_other {color: #CB4B16}.ace-solarized-light .ace_constant.ace_language {color: #B58900}.ace-solarized-light .ace_constant.ace_numeric {color: #D33682}.ace-solarized-light .ace_fold {background-color: #268BD2;border-color: #586E75}.ace-solarized-light .ace_entity.ace_name.ace_function,.ace-solarized-light .ace_entity.ace_name.ace_tag,.ace-solarized-light .ace_support.ace_function,.ace-solarized-light .ace_variable,.ace-solarized-light .ace_variable.ace_language {color: #268BD2}.ace-solarized-light .ace_storage {color: #073642}.ace-solarized-light .ace_string {color: #2AA198}.ace-solarized-light .ace_string.ace_regexp {color: #D30102}.ace-solarized-light .ace_comment,.ace-solarized-light .ace_entity.ace_other.ace_attribute-name {color: #93A1A1}.ace-solarized-light .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWNgYGBgYHjy8NJ/AAjgA5fzQUmBAAAAAElFTkSuQmCC) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)}); (function() {
ace.require(["ace/theme/solarized_light"], function(m) {
if (typeof module == "object" && typeof exports == "object" && module) {
module.exports = m;
}
});
})();