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