mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 04:05:57 +00:00
Made chapter toggle in book sidebar nav more consistent
- Now has a hover state to match other items. - Now spans the full sidebar with like other items. - Also updated chapter-toggle to a chapter-contents component, following the newer component system.
This commit is contained in:
parent
eeccc2ef10
commit
cb10ad804f
37
resources/js/components/chapter-contents.js
Normal file
37
resources/js/components/chapter-contents.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import {slideUp, slideDown} from "../services/animations";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @extends {Component}
|
||||||
|
*/
|
||||||
|
class ChapterContents {
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
this.list = this.$refs.list;
|
||||||
|
this.toggle = this.$refs.toggle;
|
||||||
|
|
||||||
|
this.isOpen = this.toggle.classList.contains('open');
|
||||||
|
this.toggle.addEventListener('click', this.click.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
open() {
|
||||||
|
this.toggle.classList.add('open');
|
||||||
|
this.toggle.setAttribute('aria-expanded', 'true');
|
||||||
|
slideDown(this.list, 180);
|
||||||
|
this.isOpen = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
this.toggle.classList.remove('open');
|
||||||
|
this.toggle.setAttribute('aria-expanded', 'false');
|
||||||
|
slideUp(this.list, 180);
|
||||||
|
this.isOpen = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
click(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
this.isOpen ? this.close() : this.open();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ChapterContents;
|
@ -1,33 +0,0 @@
|
|||||||
import {slideUp, slideDown} from "../services/animations";
|
|
||||||
|
|
||||||
class ChapterToggle {
|
|
||||||
|
|
||||||
constructor(elem) {
|
|
||||||
this.elem = elem;
|
|
||||||
this.isOpen = elem.classList.contains('open');
|
|
||||||
elem.addEventListener('click', this.click.bind(this));
|
|
||||||
}
|
|
||||||
|
|
||||||
open() {
|
|
||||||
const list = this.elem.parentNode.querySelector('.inset-list');
|
|
||||||
this.elem.classList.add('open');
|
|
||||||
this.elem.setAttribute('aria-expanded', 'true');
|
|
||||||
slideDown(list, 180);
|
|
||||||
}
|
|
||||||
|
|
||||||
close() {
|
|
||||||
const list = this.elem.parentNode.querySelector('.inset-list');
|
|
||||||
this.elem.classList.remove('open');
|
|
||||||
this.elem.setAttribute('aria-expanded', 'false');
|
|
||||||
slideUp(list, 180);
|
|
||||||
}
|
|
||||||
|
|
||||||
click(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
this.isOpen ? this.close() : this.open();
|
|
||||||
this.isOpen = !this.isOpen;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ChapterToggle;
|
|
@ -6,7 +6,7 @@ import attachmentsList from "./attachments-list.js"
|
|||||||
import autoSuggest from "./auto-suggest.js"
|
import autoSuggest from "./auto-suggest.js"
|
||||||
import backToTop from "./back-to-top.js"
|
import backToTop from "./back-to-top.js"
|
||||||
import bookSort from "./book-sort.js"
|
import bookSort from "./book-sort.js"
|
||||||
import chapterToggle from "./chapter-toggle.js"
|
import chapterContents from "./chapter-contents.js"
|
||||||
import codeEditor from "./code-editor.js"
|
import codeEditor from "./code-editor.js"
|
||||||
import codeHighlighter from "./code-highlighter.js"
|
import codeHighlighter from "./code-highlighter.js"
|
||||||
import codeTextarea from "./code-textarea.js"
|
import codeTextarea from "./code-textarea.js"
|
||||||
@ -63,7 +63,7 @@ const componentMapping = {
|
|||||||
"auto-suggest": autoSuggest,
|
"auto-suggest": autoSuggest,
|
||||||
"back-to-top": backToTop,
|
"back-to-top": backToTop,
|
||||||
"book-sort": bookSort,
|
"book-sort": bookSort,
|
||||||
"chapter-toggle": chapterToggle,
|
"chapter-contents": chapterContents,
|
||||||
"code-editor": codeEditor,
|
"code-editor": codeEditor,
|
||||||
"code-highlighter": codeHighlighter,
|
"code-highlighter": codeHighlighter,
|
||||||
"code-textarea": codeTextarea,
|
"code-textarea": codeTextarea,
|
||||||
|
@ -61,7 +61,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[chapter-toggle] {
|
.chapter-contents-toggle {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
transition: all ease-in-out 180ms;
|
transition: all ease-in-out 180ms;
|
||||||
@ -77,7 +77,7 @@
|
|||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
svg[data-icon="caret-right"] + * {
|
svg[data-icon="caret-right"] + * {
|
||||||
margin-inline-start: $-xs;
|
margin-inline-start: $-xxs;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -56,13 +56,13 @@
|
|||||||
> .content {
|
> .content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.chapter-expansion-toggle {
|
.chapter-contents-toggle {
|
||||||
border-radius: 0 4px 4px 0;
|
border-radius: 0 4px 4px 0;
|
||||||
padding: $-xs ($-m + $-xxs);
|
padding: $-xs ($-m + $-xxs);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
.chapter-expansion-toggle:hover {
|
.chapter-contents-toggle:hover {
|
||||||
background-color: rgba(0, 0, 0, 0.06);
|
background-color: rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -171,6 +171,7 @@
|
|||||||
border-radius: 0 3px 3px 0;
|
border-radius: 0 3px 3px 0;
|
||||||
padding-inline-end: 0;
|
padding-inline-end: 0;
|
||||||
.content {
|
.content {
|
||||||
|
width: 100%;
|
||||||
padding-top: $-xs;
|
padding-top: $-xs;
|
||||||
padding-bottom: $-xs;
|
padding-bottom: $-xs;
|
||||||
max-width: calc(100% - 20px);
|
max-width: calc(100% - 20px);
|
||||||
@ -193,9 +194,18 @@
|
|||||||
margin-top: -.2rem;
|
margin-top: -.2rem;
|
||||||
margin-inline-start: -1rem;
|
margin-inline-start: -1rem;
|
||||||
}
|
}
|
||||||
[chapter-toggle] {
|
.chapter-contents-toggle {
|
||||||
padding-inline-start: .7rem;
|
display: block;
|
||||||
padding-bottom: .2rem;
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
padding: $-xxs $-s ($-xxs * 2) $-s;
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
line-height: 1;
|
||||||
|
margin-top: -$-xxs;
|
||||||
|
margin-bottom: -$-xxs;
|
||||||
|
&:hover {
|
||||||
|
@include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.entity-list-item .icon {
|
.entity-list-item .icon {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@ -214,16 +224,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapter-child-menu {
|
.chapter-child-menu ul.sub-menu {
|
||||||
ul.sub-menu {
|
|
||||||
display: none;
|
display: none;
|
||||||
padding-inline-start: 0;
|
padding-inline-start: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
|
||||||
[chapter-toggle].open + .sub-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sortable Lists
|
// Sortable Lists
|
||||||
@ -457,7 +462,7 @@ ul.pagination {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.entity-list-item-children {
|
.entity-list-item-children {
|
||||||
padding: $-m;
|
padding: $-m $-l;
|
||||||
> div {
|
> div {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0 0 $-xs 0;
|
padding: 0 0 $-xs 0;
|
||||||
|
@ -1,9 +1,14 @@
|
|||||||
<div class="chapter-child-menu">
|
<div component="chapter-contents" class="chapter-child-menu">
|
||||||
<button chapter-toggle type="button" aria-expanded="{{ $isOpen ? 'true' : 'false' }}"
|
<button type="button"
|
||||||
class="text-muted @if($isOpen) open @endif">
|
refs="chapter-contents@toggle"
|
||||||
|
aria-expanded="{{ $isOpen ? 'true' : 'false' }}"
|
||||||
|
class="text-muted chapter-contents-toggle @if($isOpen) open @endif">
|
||||||
@icon('caret-right') @icon('page') <span>{{ trans_choice('entities.x_pages', $bookChild->visible_pages->count()) }}</span>
|
@icon('caret-right') @icon('page') <span>{{ trans_choice('entities.x_pages', $bookChild->visible_pages->count()) }}</span>
|
||||||
</button>
|
</button>
|
||||||
<ul class="sub-menu inset-list @if($isOpen) open @endif" @if($isOpen) style="display: block;" @endif role="menu">
|
<ul refs="chapter-contents@list"
|
||||||
|
class="chapter-contents-list sub-menu inset-list @if($isOpen) open @endif" @if($isOpen)
|
||||||
|
style="display: block;" @endif
|
||||||
|
role="menu">
|
||||||
@foreach($bookChild->visible_pages as $childPage)
|
@foreach($bookChild->visible_pages as $childPage)
|
||||||
<li class="list-item-page {{ $childPage->isA('page') && $childPage->draft ? 'draft' : '' }}" role="presentation">
|
<li class="list-item-page {{ $childPage->isA('page') && $childPage->draft ? 'draft' : '' }}" role="presentation">
|
||||||
@include('entities.list-item-basic', ['entity' => $childPage, 'classes' => $current->matches($childPage)? 'selected' : '' ])
|
@include('entities.list-item-basic', ['entity' => $childPage, 'classes' => $current->matches($childPage)? 'selected' : '' ])
|
||||||
|
@ -12,11 +12,12 @@
|
|||||||
@if ($chapter->visible_pages->count() > 0)
|
@if ($chapter->visible_pages->count() > 0)
|
||||||
<div class="chapter chapter-expansion">
|
<div class="chapter chapter-expansion">
|
||||||
<span class="icon text-chapter">@icon('page')</span>
|
<span class="icon text-chapter">@icon('page')</span>
|
||||||
<div class="content">
|
<div component="chapter-contents" class="content">
|
||||||
<button type="button" chapter-toggle
|
<button type="button"
|
||||||
|
refs="chapter-contents@toggle"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
class="text-muted chapter-expansion-toggle">@icon('caret-right') <span>{{ trans_choice('entities.x_pages', $chapter->visible_pages->count()) }}</span></button>
|
class="text-muted chapter-contents-toggle">@icon('caret-right') <span>{{ trans_choice('entities.x_pages', $chapter->visible_pages->count()) }}</span></button>
|
||||||
<div class="inset-list">
|
<div refs="chapter-contents@list" class="inset-list chapter-contents-list">
|
||||||
<div class="entity-list-item-children">
|
<div class="entity-list-item-children">
|
||||||
@include('entities.list', ['entities' => $chapter->visible_pages])
|
@include('entities.list', ['entities' => $chapter->visible_pages])
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user