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

Styling the editor and progressing with design

master
Eugene ;) 2 years ago
parent
dcf0a46c44
commit
f25472aa47
10 changed files with 222 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 43
      Seenginx/Components/FilesWithEditor.razor
  2. 1
      Seenginx/SCSS/main.scss
  3. 19
      Seenginx/SCSS/override-framework.scss
  4. 73
      Seenginx/SCSS/stripeAnimation.scss
  5. 3
      Seenginx/SCSS/template.scss
  6. 10
      Seenginx/SCSS/utility.scss
  7. 84
      Seenginx/wwwroot/css/main.css
  8. 2
      Seenginx/wwwroot/css/main.min.css
  9. 10
      Seenginx/wwwroot/js/index.js
  10. 8
      Seenginx/wwwroot/js/theme-solarized_light.js

43
Seenginx/Components/FilesWithEditor.razor
Unescape 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
Unescape View File

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

19
Seenginx/SCSS/override-framework.scss
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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;
}
});
})();
Write Preview
Loading…
Cancel
Save