luisgulo/BookStack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Editor: Started attempts to improve design elements

Browse source
This commit is contained in:
Dan Brown 2023-10-08 15:04:07 +01:00
parent ccb3c2516a
commit a12b60e1ad
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
7 changed files with 56 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
lang/en/entities.php
View file

@ -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',

35
resources/sass/_pages.scss
View file

@ -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 {

5
resources/sass/_tinymce.scss
View file

@ -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;

1
resources/views/pages/edit.blade.php
View file

@ -10,7 +10,6 @@
@if(!$isDraft) {{ method_field('PUT') }} @endif
@include('pages.parts.form', ['model' => $page])
@include('pages.parts.editor-toolbox')
</form>
</div>

2
resources/views/pages/parts/editor-toolbar.blade.php
View file

@ -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">

22
resources/views/pages/parts/editor-toolbox.blade.php
View file

@ -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">

26
resources/views/pages/parts/form.blade.php
View file

@ -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--}}