mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 01:36:00 -04:00
Editors: Adjusted new design for mobile and dark mode
Tested new design across FF, Chrome, and Gnome web (webkit)
This commit is contained in:
parent
8c10959339
commit
8ffa436f3d
@ -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) {
|
||||||
|
@ -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;
|
||||||
|
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user