mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-12-18 09:53:52 +08:00
Started design changes to the code-editor
This commit is contained in:
Dan Brown
parent
be1d691529
commit
96d9077479
|
|
@ -166,6 +166,9 @@
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
padding: 8px $-m;
|
padding: 8px $-m;
|
||||||
}
|
}
|
||||||
|
&.flex-container-row {
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||||
height: 444px;
|
height: 444px;
|
||||||
|
|
@ -634,14 +637,48 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-editor .lang-options {
|
.code-editor .lang-options {
|
||||||
max-width: 540px;
|
overflow-y: scroll;
|
||||||
margin-bottom: $-s;
|
}
|
||||||
a {
|
|
||||||
margin-inline-end: $-xs;
|
.code-editor .lang-options button {
|
||||||
text-decoration: underline;
|
display: block;
|
||||||
|
padding: $-xs $-m;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
font-family: $mono;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--color-primary-light);
|
||||||
|
color: var(--color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.code-editor label {
|
||||||
|
background-color: var(--color-primary-light);
|
||||||
|
width: 100%;
|
||||||
|
color: var(--color-primary);
|
||||||
|
padding: $-xxs $-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-editor-language-list {
|
||||||
|
flex-basis: 200px;
|
||||||
|
border-right: 1px solid #DDD;
|
||||||
|
box-shadow: $bs-card;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-editor-language-list input {
|
||||||
|
border-radius: 0;
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1px solid #DDD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-editor-main {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
@include smaller-than($m) {
|
@include smaller-than($m) {
|
||||||
.code-editor .lang-options {
|
.code-editor .lang-options {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -2,69 +2,61 @@
|
||||||
<div components="popup code-editor" class="popup-background code-editor">
|
<div components="popup code-editor" class="popup-background code-editor">
|
||||||
<div refs="code-editor@container" class="popup-body" tabindex="-1">
|
<div refs="code-editor@container" class="popup-body" tabindex="-1">
|
||||||
|
|
||||||
<div class="popup-header 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">
|
||||||
|
<button refs="dropdown@toggle" class="text-small">
|
||||||
|
<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">x</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-l popup-content">
|
<div class="flex-container-row flex-fill gap-m">
|
||||||
<div class="form-group">
|
<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>
|
||||||
<div class="lang-options">
|
|
||||||
<small>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="CSS">CSS</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="C">C</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="C++">C++</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="C#">C#</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="Fortran">Fortran</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="Go">Go</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="HTML">HTML</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="INI">INI</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="Java">Java</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="JavaScript">JavaScript</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="JSON">JSON</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="LaTeX">LaTeX</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="Lua">Lua</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="MarkDown">MarkDown</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="Nginx">Nginx</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="PASCAL">Pascal</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="Perl">Perl</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="PHP">PHP</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="Powershell">Powershell</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="Python">Python</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="Ruby">Ruby</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="shell">Shell/Bash</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="SQL">SQL</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="VBScript">VBScript</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="VB.NET">VB.NET</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="XML">XML</a>
|
|
||||||
<a refs="code-editor@languageLink" data-lang="YAML">YAML</a>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<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">
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="CSS">CSS</button>
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="C">C</button>
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="C++">C++</button>
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="C#">C#</button>
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="Fortran">Fortran</button>
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="Go">Go</button>
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="HTML">HTML</button>
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="INI">INI</button>
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="Java">Java</button>
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="JavaScript">JavaScript</button>
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="JSON">JSON</button>
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="LaTeX">LaTeX</button>
|
||||||
|
<button type="button" refs="code-editor@languageLink" data-lang="Lua">Lua</button>
|
||||||
|
<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="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="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="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 class="form-group">
|
<div class="code-editor-main">
|
||||||
<div class="grid half no-break v-end mb-xs">
|
|
||||||
<div>
|
|
||||||
<label for="code-editor-content">{{ trans('components.code_content') }}</label>
|
|
||||||
</div>
|
|
||||||
<div class="text-right">
|
|
||||||
<div component="dropdown" refs="code-editor@historyDropDown" class="inline block">
|
|
||||||
<button refs="dropdown@toggle" class="text-button text-small">@icon('history') {{ trans('components.code_session_history') }}</button>
|
|
||||||
<ul refs="dropdown@menu code-editor@historyList" class="dropdown-menu"></ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clearfix"></div>
|
|
||||||
<textarea refs="code-editor@editor"></textarea>
|
<textarea refs="code-editor@editor"></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
</div>
|
||||||
<button refs="code-editor@saveButton" type="button" class="button">{{ trans('components.code_save') }}</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div class="popup-footer primary-background-light">
|
||||||
|
<button refs="code-editor@saveButton" type="button" class="button corner-button">{{ trans('components.code_save') }}</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user