mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-30 07:32:39 +01:00
Polished up code editor design
This commit is contained in:
parent
96d9077479
commit
77cd550fae
@ -33,10 +33,11 @@ class CodeEditor {
|
||||
onSelect(this.languageLinks, event => {
|
||||
const language = event.target.dataset.lang;
|
||||
this.languageInput.value = language;
|
||||
this.updateEditorMode(language);
|
||||
this.languageInputChange(language);
|
||||
});
|
||||
|
||||
onEnterPress(this.languageInput, e => this.save());
|
||||
this.languageInput.addEventListener('input', e => this.languageInputChange(this.languageInput.value));
|
||||
onSelect(this.saveButton, e => this.save());
|
||||
|
||||
onChildEvent(this.historyList, 'button', 'click', (event, elem) => {
|
||||
@ -60,7 +61,7 @@ class CodeEditor {
|
||||
this.callback = callback;
|
||||
|
||||
this.show()
|
||||
.then(() => this.updateEditorMode(language))
|
||||
.then(() => this.languageInputChange(language))
|
||||
.then(() => window.importVersioned('code'))
|
||||
.then(Code => Code.setContent(this.editor, code));
|
||||
}
|
||||
@ -90,6 +91,22 @@ class CodeEditor {
|
||||
Code.setMode(this.editor, language, this.editor.getValue());
|
||||
}
|
||||
|
||||
languageInputChange(language) {
|
||||
this.updateEditorMode(language);
|
||||
const inputLang = language.toLowerCase();
|
||||
let matched = false;
|
||||
|
||||
for (const link of this.languageLinks) {
|
||||
const lang = link.dataset.lang.toLowerCase().trim();
|
||||
const isMatch = inputLang && lang.startsWith(inputLang);
|
||||
link.classList.toggle('active', isMatch);
|
||||
if (isMatch && !matched) {
|
||||
link.scrollIntoView({block: "center", behavior: "smooth"});
|
||||
matched = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loadHistory() {
|
||||
this.history = JSON.parse(window.sessionStorage.getItem(this.historyKey) || '{}');
|
||||
const historyKeys = Object.keys(this.history).reverse();
|
||||
|
@ -1,3 +1,4 @@
|
||||
|
||||
// System wide notifications
|
||||
[notification] {
|
||||
position: fixed;
|
||||
@ -137,33 +138,47 @@
|
||||
}
|
||||
}
|
||||
|
||||
.popup-footer button, .popup-header-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
.popup-header button, .popup-footer button {
|
||||
margin: 0;
|
||||
height: 40px;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
&:active {
|
||||
outline: 0;
|
||||
color: #FFF;
|
||||
padding: $-xs $-m;
|
||||
}
|
||||
|
||||
.popup-header button:not(.popup-header-close) {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.popup-header button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
justify-content: end;
|
||||
button {
|
||||
padding: 10px $-m;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-header-close {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: #FFF;
|
||||
font-size: 16px;
|
||||
padding: 0 $-m;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-header, .popup-footer {
|
||||
display: block !important;
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
flex: none !important;
|
||||
flex: 0;
|
||||
.popup-title {
|
||||
color: #FFF;
|
||||
margin-right: auto;
|
||||
padding: 8px $-m;
|
||||
}
|
||||
&.flex-container-row {
|
||||
@ -633,11 +648,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
}
|
||||
|
||||
.code-editor .CodeMirror {
|
||||
height: 400px;
|
||||
height: auto;
|
||||
min-height: 50vh;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.code-editor .lang-options {
|
||||
overflow-y: scroll;
|
||||
flex-basis: 200px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.code-editor .lang-options button {
|
||||
@ -648,7 +667,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
text-align: left;
|
||||
font-family: $mono;
|
||||
font-size: 0.7rem;
|
||||
&:hover {
|
||||
&:hover, &.active {
|
||||
background-color: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@ -659,32 +678,31 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
width: 100%;
|
||||
color: var(--color-primary);
|
||||
padding: $-xxs $-m;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.code-editor-language-list {
|
||||
position: relative;
|
||||
flex-basis: 200px;
|
||||
border-right: 1px solid #DDD;
|
||||
box-shadow: $bs-card;
|
||||
z-index: 2;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.code-editor-language-list input {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #DDD;
|
||||
padding: $-xs $-m;
|
||||
}
|
||||
|
||||
.code-editor-main {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
.code-editor .lang-options {
|
||||
min-width: 0;
|
||||
.CodeMirror {
|
||||
margin-bottom: 0;
|
||||
z-index: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
.code-editor .CodeMirror {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -4,17 +4,17 @@
|
||||
|
||||
<div class="popup-header flex-container-row primary-background">
|
||||
<div class="popup-title">{{ trans('components.code_editor') }}</div>
|
||||
<div component="dropdown" refs="code-editor@historyDropDown" class="block">
|
||||
<button refs="dropdown@toggle" class="text-small">
|
||||
<div component="dropdown" refs="code-editor@historyDropDown" class="flex-container-row">
|
||||
<button refs="dropdown@toggle">
|
||||
<span>@icon('history')</span>
|
||||
<span>{{ trans('components.code_session_history') }}</span>
|
||||
</button>
|
||||
<ul refs="dropdown@menu code-editor@historyList" class="dropdown-menu"></ul>
|
||||
</div>
|
||||
<button class="popup-header-close" refs="popup@hide">x</button>
|
||||
<button class="popup-header-close" refs="popup@hide">@icon('close')</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-container-row flex-fill gap-m">
|
||||
<div class="flex-container-row flex-fill">
|
||||
<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">
|
||||
@ -49,7 +49,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-editor-main">
|
||||
<div class="code-editor-main flex-fill">
|
||||
<textarea refs="code-editor@editor"></textarea>
|
||||
</div>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user