Added language list favourites sorting, updated styles
- Also made code box be greedier with vertical space.
This commit is contained in:
parent
7fdc7c68b9
commit
8e5f7c6425
3 changed files with 38 additions and 10 deletions
|
@ -10,7 +10,8 @@ class CodeEditor {
|
|||
this.container = this.$refs.container;
|
||||
this.popup = this.$el;
|
||||
this.editorInput = this.$refs.editor;
|
||||
this.languageLinks = this.$manyRefs.languageLink;
|
||||
this.languageButtons = this.$manyRefs.languageButton;
|
||||
this.languageOptionsContainer = this.$refs.languageOptionsContainer;
|
||||
this.saveButton = this.$refs.saveButton;
|
||||
this.languageInput = this.$refs.languageInput;
|
||||
this.historyDropDown = this.$refs.historyDropDown;
|
||||
|
@ -32,7 +33,7 @@ class CodeEditor {
|
|||
}
|
||||
});
|
||||
|
||||
onSelect(this.languageLinks, event => {
|
||||
onSelect(this.languageButtons, event => {
|
||||
const language = event.target.dataset.lang;
|
||||
this.languageInput.value = language;
|
||||
this.languageInputChange(language);
|
||||
|
@ -52,7 +53,7 @@ class CodeEditor {
|
|||
}
|
||||
|
||||
setupFavourites() {
|
||||
for (const button of this.languageLinks) {
|
||||
for (const button of this.languageButtons) {
|
||||
this.setupFavouritesForButton(button);
|
||||
}
|
||||
|
||||
|
@ -85,7 +86,22 @@ class CodeEditor {
|
|||
}
|
||||
|
||||
sortLanguageList() {
|
||||
// TODO
|
||||
const sortedParents = this.languageButtons.sort((a, b) => {
|
||||
const aFav = a.dataset.favourite === 'true';
|
||||
const bFav = b.dataset.favourite === 'true';
|
||||
|
||||
if (aFav && !bFav) {
|
||||
return -1;
|
||||
} else if (bFav && !aFav) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return a.dataset.lang > b.dataset.lang ? 1 : -1;
|
||||
}).map(button => button.parentElement);
|
||||
|
||||
for (const parent of sortedParents) {
|
||||
this.languageOptionsContainer.append(parent);
|
||||
}
|
||||
}
|
||||
|
||||
save() {
|
||||
|
@ -134,7 +150,7 @@ class CodeEditor {
|
|||
this.updateEditorMode(language);
|
||||
const inputLang = language.toLowerCase();
|
||||
|
||||
for (const link of this.languageLinks) {
|
||||
for (const link of this.languageButtons) {
|
||||
const lang = link.dataset.lang.toLowerCase().trim();
|
||||
const isMatch = inputLang === lang;
|
||||
link.classList.toggle('active', isMatch);
|
||||
|
|
|
@ -666,7 +666,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
text-align: left;
|
||||
font-family: $mono;
|
||||
font-size: 0.7rem;
|
||||
padding-left: 24px + $-s;
|
||||
padding-left: 24px + $-xs;
|
||||
&:hover, &.active {
|
||||
background-color: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
|
@ -696,11 +696,18 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.code-editor .action-favourite {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.code-editor button:hover ~ .action-favourite {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.code-editor label {
|
||||
background-color: var(--color-primary-light);
|
||||
width: 100%;
|
||||
color: var(--color-primary);
|
||||
padding: $-xxs $-m;
|
||||
padding: $-xxs $-s;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
@ -715,7 +722,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
border-radius: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #DDD;
|
||||
padding: $-xs $-m;
|
||||
padding: $-xs $-s;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.code-editor-main {
|
||||
|
@ -729,6 +737,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
}
|
||||
}
|
||||
|
||||
.code-editor-body-wrap {
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
@include smaller-than($s) {
|
||||
.code-editor .lang-options {
|
||||
display: none;
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
<div class="code-editor-language-list flex-container-column flex-fill">
|
||||
<label for="code-editor-language">{{ trans('components.code_language') }}</label>
|
||||
<input refs="code-editor@languageInput" id="code-editor-language" type="text">
|
||||
<div class="lang-options">
|
||||
<div refs="code-editor@language-options-container" class="lang-options">
|
||||
@php
|
||||
$languages = [
|
||||
'Bash', 'CSS', 'C', 'C++', 'C#', 'Diff', 'Fortran', 'F#', 'Go', 'Haskell', 'HTML', 'INI',
|
||||
|
@ -32,7 +32,7 @@
|
|||
|
||||
@foreach($languages as $language)
|
||||
<div class="relative">
|
||||
<button type="button" refs="code-editor@languageLink" data-favourite="false" data-lang="{{ strtolower($language) }}">{{ $language }}</button>
|
||||
<button type="button" refs="code-editor@language-button" data-favourite="false" data-lang="{{ strtolower($language) }}">{{ $language }}</button>
|
||||
<button class="lang-option-favorite-toggle action-favourite" data-title="{{ trans('common.favourite') }}">@icon('star-outline')</button>
|
||||
<button class="lang-option-favorite-toggle action-unfavourite" data-title="{{ trans('common.unfavourite') }}">@icon('star')</button>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue