mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-30 07:32:39 +01:00
Editor: Started attempts to improve design elements
This commit is contained in:
Dan Brown
parent
ccb3c2516a
commit
a12b60e1ad
@ -295,6 +295,7 @@ return [
|
||||
'pages_is_template' => 'Page Template',
|
||||
|
||||
// Editor Sidebar
|
||||
'toggle_sidebar' => 'Toggle Sidebar',
|
||||
'page_tags' => 'Page Tags',
|
||||
'chapter_tags' => 'Chapter Tags',
|
||||
'book_tags' => 'Book Tags',
|
||||
|
||||
@ -19,6 +19,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.page-edit-toolbar .text-button {
|
||||
font-size: $fs-m;
|
||||
}
|
||||
|
||||
body.tox-fullscreen .page-editor .edit-area,
|
||||
body.markdown-fullscreen .page-editor .edit-area {
|
||||
z-index: 12;
|
||||
@ -151,17 +155,15 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
||||
|
||||
// Attribute form
|
||||
.floating-toolbox {
|
||||
border: 1px solid #DDD;
|
||||
@include lightDark(background-color, #fff, #222);
|
||||
//border-left: 1px solid #CCC;
|
||||
@include lightDark(background-color, #FFF, #222);
|
||||
@include lightDark(border-color, #DDD, #000);
|
||||
right: $-xl*2;
|
||||
width: 48px;
|
||||
width: 40px;
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
transition: width ease-in-out 180ms;
|
||||
margin-top: -1px;
|
||||
min-height: 0;
|
||||
&.open {
|
||||
width: 480px;
|
||||
@ -183,24 +185,30 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
||||
position: relative;
|
||||
}
|
||||
.tabs {
|
||||
display: block;
|
||||
border-inline-end: 1px solid #DDD;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
width: 48px;
|
||||
border: 1px solid #CCC;
|
||||
width: 40px;
|
||||
flex: 0 1 auto;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.tabs-inner {
|
||||
//box-shadow: $bs-large;
|
||||
@include lightDark(background-color, #FFFFFF, #222);
|
||||
//border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tabs svg {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.tabs > button {
|
||||
@include lightDark(color, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
|
||||
.tabs-inner > button {
|
||||
//border-block-end: 1px solid #CCC;
|
||||
//@include lightDark(border-color, #CCC, #000);
|
||||
@include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding: $-s $-m;
|
||||
padding: 10px $-xs;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
&.open .tabs > button.active {
|
||||
@include lightDark(color, #444, #EEE);
|
||||
@ -241,6 +249,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 45px;
|
||||
border-block-start: 1px solid #CCC;
|
||||
}
|
||||
|
||||
.suggestion-box {
|
||||
|
||||
@ -9,6 +9,11 @@
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
// Editor wrapper edits
|
||||
.tox.tox-tinymce {
|
||||
border-inline: 0;
|
||||
}
|
||||
|
||||
// In editor body overrides
|
||||
.page-content.mce-content-body {
|
||||
padding-block-start: 1rem;
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
|
||||
@if(!$isDraft) {{ method_field('PUT') }} @endif
|
||||
@include('pages.parts.form', ['model' => $page])
|
||||
@include('pages.parts.editor-toolbox')
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="primary-background-light toolbar page-edit-toolbar">
|
||||
<div class="primary-background-light toolbar page-edit-toolbar px-l">
|
||||
<div class="grid third no-break v-center">
|
||||
|
||||
<div class="action-buttons text-left px-m py-xs">
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
<div component="editor-toolbox" class="floating-toolbox">
|
||||
|
||||
<div class="tabs primary-background-light">
|
||||
<button type="button" refs="editor-toolbox@toggle" aria-expanded="false" class="toolbox-toggle">@icon('caret-left-circle')</button>
|
||||
<button type="button" refs="editor-toolbox@tab-button" data-tab="tags" title="{{ trans('entities.page_tags') }}" class="active">@icon('tag')</button>
|
||||
@if(userCan('attachment-create-all'))
|
||||
<button type="button" refs="editor-toolbox@tab-button" data-tab="files" title="{{ trans('entities.attachments') }}">@icon('attach')</button>
|
||||
@endif
|
||||
<button type="button" refs="editor-toolbox@tab-button" data-tab="templates" title="{{ trans('entities.templates') }}">@icon('template')</button>
|
||||
@if($comments->enabled())
|
||||
<button type="button" refs="editor-toolbox@tab-button" data-tab="comments" title="{{ trans('entities.comments') }}">@icon('comment')</button>
|
||||
@endif
|
||||
<div class="tabs flex-container-column justify-flex-start">
|
||||
<div class="tabs-inner flex-container-column justify-center">
|
||||
<button type="button" refs="editor-toolbox@toggle" title="{{ trans('entities.toggle_sidebar') }}" aria-expanded="false" class="toolbox-toggle">@icon('caret-left-circle')</button>
|
||||
<button type="button" refs="editor-toolbox@tab-button" data-tab="tags" title="{{ trans('entities.page_tags') }}" class="active">@icon('tag')</button>
|
||||
@if(userCan('attachment-create-all'))
|
||||
<button type="button" refs="editor-toolbox@tab-button" data-tab="files" title="{{ trans('entities.attachments') }}">@icon('attach')</button>
|
||||
@endif
|
||||
<button type="button" refs="editor-toolbox@tab-button" data-tab="templates" title="{{ trans('entities.templates') }}">@icon('template')</button>
|
||||
@if($comments->enabled())
|
||||
<button type="button" refs="editor-toolbox@tab-button" data-tab="comments" title="{{ trans('entities.comments') }}">@icon('comment')</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div refs="editor-toolbox@tab-content" data-tab-content="tags" class="toolbox-tab-content">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div component="page-editor" class="page-editor flex-fill flex"
|
||||
<div component="page-editor" class="page-editor flex-fill flex bg-white"
|
||||
option:page-editor:drafts-enabled="{{ $draftsEnabled ? 'true' : 'false' }}"
|
||||
@if(config('services.drawio'))
|
||||
drawio-url="{{ is_string(config('services.drawio')) ? config('services.drawio') : 'https://embed.diagrams.net/?embed=1&proto=json&spin=1&configure=1' }}"
|
||||
@ -27,19 +27,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{--Editors--}}
|
||||
<div class="edit-area flex-fill flex">
|
||||
<div class="flex-fill flex">
|
||||
{{--Editors--}}
|
||||
<div class="edit-area flex-fill flex">
|
||||
|
||||
{{--WYSIWYG Editor--}}
|
||||
@if($editor === 'wysiwyg')
|
||||
@include('pages.parts.wysiwyg-editor', ['model' => $model])
|
||||
@endif
|
||||
{{--WYSIWYG Editor--}}
|
||||
@if($editor === 'wysiwyg')
|
||||
@include('pages.parts.wysiwyg-editor', ['model' => $model])
|
||||
@endif
|
||||
|
||||
{{--Markdown Editor--}}
|
||||
@if($editor === 'markdown')
|
||||
@include('pages.parts.markdown-editor', ['model' => $model])
|
||||
@endif
|
||||
{{--Markdown Editor--}}
|
||||
@if($editor === 'markdown')
|
||||
@include('pages.parts.markdown-editor', ['model' => $model])
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
@include('pages.parts.editor-toolbox')
|
||||
</div>
|
||||
|
||||
{{--Mobile Save Button--}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user