Started code-editor lang favorites system
- Split bash from shell in language list - Updated code-lang highlighting to be exact match only to prevent confusion scenarios (Java matching JavaScript, etc..) - Added design for favorites - Changed blade language list to be generated from array.
This commit is contained in:
Dan Brown
parent
da6169159d
commit
ebc5a53410
|
|
@ -39,6 +39,7 @@ import 'codemirror/addon/scroll/scrollpastend';
|
||||||
// Value can be a mode string or a function that will receive the code content & return the mode string.
|
// Value can be a mode string or a function that will receive the code content & return the mode string.
|
||||||
// The function option is used in the event the exact mode could be dynamic depending on the code.
|
// The function option is used in the event the exact mode could be dynamic depending on the code.
|
||||||
const modeMap = {
|
const modeMap = {
|
||||||
|
bash: 'shell',
|
||||||
css: 'css',
|
css: 'css',
|
||||||
c: 'text/x-csrc',
|
c: 'text/x-csrc',
|
||||||
java: 'text/x-java',
|
java: 'text/x-java',
|
||||||
|
|
@ -88,7 +89,6 @@ const modeMap = {
|
||||||
shell: 'shell',
|
shell: 'shell',
|
||||||
sh: 'shell',
|
sh: 'shell',
|
||||||
stext: 'text/x-stex',
|
stext: 'text/x-stex',
|
||||||
bash: 'shell',
|
|
||||||
toml: 'toml',
|
toml: 'toml',
|
||||||
ts: 'text/typescript',
|
ts: 'text/typescript',
|
||||||
typescript: 'text/typescript',
|
typescript: 'text/typescript',
|
||||||
|
|
|
||||||
|
|
@ -94,15 +94,13 @@ class CodeEditor {
|
||||||
languageInputChange(language) {
|
languageInputChange(language) {
|
||||||
this.updateEditorMode(language);
|
this.updateEditorMode(language);
|
||||||
const inputLang = language.toLowerCase();
|
const inputLang = language.toLowerCase();
|
||||||
let matched = false;
|
|
||||||
|
|
||||||
for (const link of this.languageLinks) {
|
for (const link of this.languageLinks) {
|
||||||
const lang = link.dataset.lang.toLowerCase().trim();
|
const lang = link.dataset.lang.toLowerCase().trim();
|
||||||
const isMatch = inputLang && lang.startsWith(inputLang);
|
const isMatch = inputLang === lang;
|
||||||
link.classList.toggle('active', isMatch);
|
link.classList.toggle('active', isMatch);
|
||||||
if (isMatch && !matched) {
|
if (isMatch) {
|
||||||
link.scrollIntoView({block: "center", behavior: "smooth"});
|
link.scrollIntoView({block: "center", behavior: "smooth"});
|
||||||
matched = true;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -666,12 +666,29 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-family: $mono;
|
font-family: $mono;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
|
padding-right: 24px + $-m;
|
||||||
&:hover, &.active {
|
&:hover, &.active {
|
||||||
background-color: var(--color-primary-light);
|
background-color: var(--color-primary-light);
|
||||||
color: var(--color-primary);
|
color: var(--color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.code-editor button.lang-option-favorite-toggle {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: 28px;
|
||||||
|
font-size: 1rem;
|
||||||
|
border: 0;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 2px;
|
||||||
|
z-index: 2;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
svg {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.code-editor label {
|
.code-editor label {
|
||||||
background-color: var(--color-primary-light);
|
background-color: var(--color-primary-light);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -19,41 +19,24 @@
|
||||||
<label for="code-editor-language">{{ trans('components.code_language') }}</label>
|
<label for="code-editor-language">{{ trans('components.code_language') }}</label>
|
||||||
<input refs="code-editor@languageInput" id="code-editor-language" type="text">
|
<input refs="code-editor@languageInput" id="code-editor-language" type="text">
|
||||||
<div class="lang-options">
|
<div class="lang-options">
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="CSS">CSS</button>
|
@php
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="C">C</button>
|
$languages = [
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="C++">C++</button>
|
'Bash', 'CSS', 'C', 'C++', 'C#', 'Diff', 'Fortran', 'F#', 'Go', 'Haskell', 'HTML', 'INI',
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="C#">C#</button>
|
'Java', 'JavaScript', 'JSON', 'Julia', 'Kotlin', 'LaTeX', 'Lua', 'MarkDown', 'Nginx', 'OCaml',
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="diff">Diff</button>
|
'Pascal', 'Perl', 'PHP', 'Powershell', 'Python', 'Ruby', 'Rust', 'Shell', 'SQL', 'TypeScript',
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="Fortran">Fortran</button>
|
'VBScript', 'VB.NET', 'XML', 'YAML',
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="F#">F#</button>
|
];
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="Go">Go</button>
|
@endphp
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="Haskell">Haskell</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="HTML">HTML</button>
|
@foreach($languages as $language)
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="INI">INI</button>
|
<div class="relative">
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="Java">Java</button>
|
<button type="button" refs="code-editor@languageLink" data-lang="{{ strtolower($language) }}">{{ $language }}</button>
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="JavaScript">JavaScript</button>
|
<button class="lang-option-favorite-toggle" title="{{ trans('common.favourite') }}" data-alt-title="{{ trans('common.unfavourite') }}">
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="JSON">JSON</button>
|
<div class="pre-favorite">@icon('star-outline')</div>
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="Julia">Julia</button>
|
<div class="post-favorite" style="display: none;">@icon('star')</div>
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="kotlin">Kotlin</button>
|
</button>
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="LaTeX">LaTeX</button>
|
</div>
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="Lua">Lua</button>
|
@endforeach
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="MarkDown">MarkDown</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="Nginx">Nginx</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="ocaml">OCaml</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="PASCAL">Pascal</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="Perl">Perl</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="PHP">PHP</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="Powershell">Powershell</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="Python">Python</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="Ruby">Ruby</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="rust">Rust</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="shell">Shell/Bash</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="SQL">SQL</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="typescript">TypeScript</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="VBScript">VBScript</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="VB.NET">VB.NET</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="XML">XML</button>
|
|
||||||
<button type="button" refs="code-editor@languageLink" data-lang="YAML">YAML</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue