github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-26 18:30:50 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Editors: Adjusted new design for mobile and dark mode

Browse Source 
Tested new design across FF, Chrome, and Gnome web (webkit)
This commit is contained in:
Dan Brown 2023-10-14 17:10:07 +01:00
parent 8c10959339
commit 8ffa436f3d
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 56 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/editor-toolbox.js
View File

@ -8,6 +8,7 @@ export class EditorToolbox extends Component {
this.buttons = this.$manyRefs.tabButton; this.buttons = this.$manyRefs.tabButton;
this.contentElements = this.$manyRefs.tabContent; this.contentElements = this.$manyRefs.tabContent;
this.toggleButton = this.$refs.toggle; this.toggleButton = this.$refs.toggle;
this.editorWrapEl = this.container.closest('.page-editor');
this.setupListeners(); this.setupListeners();
@ -30,8 +31,9 @@ export class EditorToolbox extends Component {
toggle() { toggle() {
this.container.classList.toggle('open'); this.container.classList.toggle('open');
const expanded = this.container.classList.contains('open') ? 'true' : 'false'; const isOpen = this.container.classList.contains('open');
this.toggleButton.setAttribute('aria-expanded', expanded); this.toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
this.editorWrapEl.classList.toggle('toolbox-open', isOpen);
} }
setActiveTab(tabName, openToolbox = false) { setActiveTab(tabName, openToolbox = false) {

65
resources/sass/_pages.scss
View File

@ -23,7 +23,7 @@
width: 100%; width: 100%;
border-radius: 8px; border-radius: 8px;
box-shadow: $bs-card; box-shadow: $bs-card;
background-color: #FFF; @include lightDark(background-color, #FFF, #333)
} }
.page-edit-toolbar { .page-edit-toolbar {
@ -34,13 +34,23 @@
align-items: center; align-items: center;
} }
.page-editor-wysiwyg .page-edit-toolbar, @include larger-than($xxl) {
.page-editor-wysiwyg .page-editor-page-area { .page-editor-wysiwyg .page-edit-toolbar,
max-width: 1140px; .page-editor-wysiwyg .page-editor-page-area {
max-width: 1140px;
}
.page-editor-wysiwyg .floating-toolbox {
position: absolute;
}
} }
.page-editor-markdown .floating-toolbox { @include smaller-than($m) {
position: relative; .page-edit-toolbar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
} }
.title-input.page-title { .title-input.page-title {
@ -88,8 +98,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
overflow-x: scroll; overflow-x: scroll;
overflow-y: visible; overflow-y: visible;
} }
.page-edit-toolbar .grid.third { .page-edit-toolbar {
display: block;
white-space: nowrap; white-space: nowrap;
> div { > div {
display: inline-block; display: inline-block;
@ -101,10 +110,10 @@ body.tox-fullscreen, body.markdown-fullscreen {
position: fixed; position: fixed;
z-index: 30; z-index: 30;
border-radius: 50%; border-radius: 50%;
width: 56px; width: 52px;
height: 56px; height: 52px;
font-size: 24px; font-size: 26px;
right: $-m; right: $-xs;
bottom: $-s; bottom: $-s;
box-shadow: $bs-hover; box-shadow: $bs-hover;
background-color: currentColor; background-color: currentColor;
@ -202,7 +211,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
} }
} }
// Attribute form // Page editor sidebar toolbox
.floating-toolbox { .floating-toolbox {
@include lightDark(background-color, #FFF, #222); @include lightDark(background-color, #FFF, #222);
overflow: hidden; overflow: hidden;
@ -214,7 +223,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
box-shadow: $bs-card; box-shadow: $bs-card;
margin-bottom: auto; margin-bottom: auto;
margin-left: $-l; margin-left: $-l;
position: absolute; position: relative;
&.open { &.open {
position: relative; position: relative;
right: 0; right: 0;
@ -242,6 +251,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
} }
.tabs { .tabs {
border-right: 1px solid #DDD; border-right: 1px solid #DDD;
@include lightDark(border-right-color, #DDD, #000);
width: 40px; width: 40px;
flex: 0 1 auto; flex: 0 1 auto;
margin-right: -1px; margin-right: -1px;
@ -300,6 +310,33 @@ body.tox-fullscreen, body.markdown-fullscreen {
} }
} }
@include smaller-than($xxl) {
.floating-toolbox {
margin-left: $-s;
}
}
@include smaller-than($s) {
.page-editor-page-area-wrap {
margin: 4px !important;
}
.floating-toolbox {
margin-left: 4px;
}
.floating-toolbox .tabs {
width: 32px;
}
.floating-toolbox .tabs-inner > button {
font-size: 12px;
}
.page-edit-toolbar {
padding-block: 0 !important;
}
.page-editor.toolbox-open .page-editor-page-area {
display: none;
}
}
.toolbox-tab-content { .toolbox-tab-content {
display: none; display: none;
overflow-y: auto; overflow-y: auto;

2
resources/views/pages/parts/form.blade.php
View File

@ -20,7 +20,7 @@
{{--Header Toolbar--}} {{--Header Toolbar--}}
@include('pages.parts.editor-toolbar', ['model' => $model, 'editor' => $editor, 'isDraft' => $isDraft, 'draftsEnabled' => $draftsEnabled]) @include('pages.parts.editor-toolbar', ['model' => $model, 'editor' => $editor, 'isDraft' => $isDraft, 'draftsEnabled' => $draftsEnabled])
<div class="flex flex-fill mx-s mb-s justify-center"> <div class="flex flex-fill mx-s mb-s justify-center page-editor-page-area-wrap">
<div class="page-editor-page-area flex-container-column flex flex-fill"> <div class="page-editor-page-area flex-container-column flex flex-fill">
{{--Title input--}} {{--Title input--}}
<div class="title-input page-title clearfix"> <div class="title-input page-title clearfix">