github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-28 11:05:43 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Moved overlay component, migrated code-editor & added features

Browse Source 
- Moved Code-editor from vue to component.
- Updated popup code so it background click only hides if the click
originated on the same background. Clicks within the popup will no
longer cause it to hide.
- Added session-level history tracking to code editor.
This commit is contained in:
Dan Brown
2020-06-27 23:56:01 +01:00
parent 9023f78cdc
commit a5fa745749
17 changed files with 289 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
resources/views/components/code-editor.blade.php
View File

@ -1,10 +1,10 @@
<div id="code-editor">
<div overlay ref="overlay" v-cloak @click="hide()">
<div class="popup-body" tabindex="-1" @click.stop @keydown.enter.ctrl="save">
<div>
<div components="popup code-editor" class="popup-background code-editor">
<div refs="code-editor@container" class="popup-body" tabindex="-1">
<div class="popup-header primary-background">
<div class="popup-title">{{ trans('components.code_editor') }}</div>
<button class="popup-header-close" @click="hide()">x</button>
<button class="popup-header-close" refs="popup@hide">x</button>
</div>
<div class="p-l popup-content">
@ -12,46 +12,58 @@
<label for="code-editor-language">{{ trans('components.code_language') }}</label>
<div class="lang-options">
<small>
<a @click="updateLanguage('CSS')">CSS</a>
<a @click="updateLanguage('C')">C</a>
<a @click="updateLanguage('C++')">C++</a>
<a @click="updateLanguage('C#')">C#</a>
<a @click="updateLanguage('Fortran')">Fortran</a>
<a @click="updateLanguage('Go')">Go</a>
<a @click="updateLanguage('HTML')">HTML</a>
<a @click="updateLanguage('INI')">INI</a>
<a @click="updateLanguage('Java')">Java</a>
<a @click="updateLanguage('JavaScript')">JavaScript</a>
<a @click="updateLanguage('JSON')">JSON</a>
<a @click="updateLanguage('Lua')">Lua</a>
<a @click="updateLanguage('MarkDown')">MarkDown</a>
<a @click="updateLanguage('Nginx')">Nginx</a>
<a @click="updateLanguage('PASCAL')">Pascal</a>
<a @click="updateLanguage('Perl')">Perl</a>
<a @click="updateLanguage('PHP')">PHP</a>
<a @click="updateLanguage('Powershell')">Powershell</a>
<a @click="updateLanguage('Python')">Python</a>
<a @click="updateLanguage('Ruby')">Ruby</a>
<a @click="updateLanguage('shell')">Shell/Bash</a>
<a @click="updateLanguage('SQL')">SQL</a>
<a @click="updateLanguage('XML')">XML</a>
<a @click="updateLanguage('YAML')">YAML</a>
<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="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="XML">XML</a>
<a refs="code-editor@languageLink" data-lang="YAML">YAML</a>
</small>
</div>
<input @keypress.enter="save()" id="code-editor-language" type="text" @input="updateEditorMode(language)" v-model="language">
<input refs="code-editor@languageInput" id="code-editor-language" type="text">
</div>
<div class="form-group">
<label for="code-editor-content">{{ trans('components.code_content') }}</label>
<textarea ref="editor" v-model="code"></textarea>
<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>
</div>
<div class="form-group">
<button type="button" class="button" @click="save()">{{ trans('components.code_save') }}</button>
<button refs="code-editor@saveButton" type="button" class="button">{{ trans('components.code_save') }}</button>
</div>
</div>
</div>
</div>
</div>
</div>