Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Made a mass of accessibility improvements

Browse Source 
- Changed default focus styles
- Updated dropdowns with keyboard navigation
- Updated modals with esc exiting
- Added accessibility attirbutes where needed
- Made many more elements focusable
- Updated hover effects of many items to also apply when focused within

Related to #1320 and #1198
This commit is contained in:
Dan Brown 2019-08-24 18:26:28 +01:00
parent 1b33a0c5b9
commit b27a5c7fb8
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
35 changed files with 227 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Controllers/PageController.php
View File

@ -495,7 +495,7 @@ class PageController extends Controller
$revision->delete();
session()->flash('success', trans('entities.revision_delete_success'));
return view('pages.revisions', ['page' => $page, 'book' => $page->book, 'current' => $page]);
return redirect($page->getUrl('/revisions'));
}
/**

3
app/helpers.php
View File

@ -134,7 +134,8 @@ function icon($name, $attrs = [])
{
$attrs = array_merge([
'class' => 'svg-icon',
'data-icon' => $name
'data-icon' => $name,
'role' => 'presentation',
], $attrs);
$attrString = ' ';
foreach ($attrs as $attrName => $attr) {

23
resources/assets/js/components/breadcrumb-listing.js
View File

@ -7,35 +7,14 @@ class BreadcrumbListing {
this.searchInput = elem.querySelector('input');
this.loadingElem = elem.querySelector('.loading-container');
this.entityListElem = elem.querySelector('.breadcrumb-listing-entity-list');
this.toggleElem = elem.querySelector('[dropdown-toggle]');
// this.loadingElem.style.display = 'none';
const entityDescriptor = elem.getAttribute('breadcrumb-listing').split(':');
this.entityType = entityDescriptor[0];
this.entityId = Number(entityDescriptor[1]);
this.toggleElem.addEventListener('click', this.onShow.bind(this));
this.elem.addEventListener('show', this.onShow.bind(this));
this.searchInput.addEventListener('input', this.onSearch.bind(this));
this.elem.addEventListener('keydown', this.keyDown.bind(this));
}
keyDown(event) {
if (event.key === 'ArrowDown') {
this.listFocusChange(1);
event.preventDefault();
} else if (event.key === 'ArrowUp') {
this.listFocusChange(-1);
event.preventDefault();
}
}
listFocusChange(indexChange = 1) {
const links = Array.from(this.entityListElem.querySelectorAll('a:not(.hidden)'));
const currentFocused = this.entityListElem.querySelector('a:focus');
const currentFocusedIndex = links.indexOf(currentFocused);
const defaultFocus = (indexChange > 0) ? links[0] : this.searchInput;
const nextElem = links[currentFocusedIndex + indexChange] || defaultFocus;
nextElem.focus();
}
onShow() {

2
resources/assets/js/components/chapter-toggle.js
View File

@ -11,12 +11,14 @@ class ChapterToggle {
open() {
const list = this.elem.parentNode.querySelector('.inset-list');
this.elem.classList.add('open');
this.elem.setAttribute('aria-expanded', 'true');
slideDown(list, 240);
}
close() {
const list = this.elem.parentNode.querySelector('.inset-list');
this.elem.classList.remove('open');
this.elem.setAttribute('aria-expanded', 'false');
slideUp(list, 240);
}

88
resources/assets/js/components/dropdown.js
View File

@ -1,3 +1,5 @@
import {onSelect} from "../services/dom";
/**
* Dropdown
* Provides some simple logic to create simple dropdown menus.
@ -10,14 +12,16 @@ class DropDown {
this.moveMenu = elem.hasAttribute('dropdown-move-menu');
this.toggle = elem.querySelector('[dropdown-toggle]');
this.body = document.body;
this.showing = false;
this.setupListeners();
}
show(event) {
show(event = null) {
this.hideAll();
this.menu.style.display = 'block';
this.menu.classList.add('anim', 'menuIn');
this.toggle.setAttribute('aria-expanded', 'true');
if (this.moveMenu) {
// Move to body to prevent being trapped within scrollable sections
@ -38,11 +42,18 @@ class DropDown {
});
// Focus on first input if existing
let input = this.menu.querySelector('input');
const input = this.menu.querySelector('input');
if (input !== null) input.focus();
this.showing = true;
const showEvent = new Event('show');
this.container.dispatchEvent(showEvent);
if (event) {
event.stopPropagation();
}
}
hideAll() {
for (let dropdown of window.components.dropdown) {
@ -53,6 +64,7 @@ class DropDown {
hide() {
this.menu.style.display = 'none';
this.menu.classList.remove('anim', 'menuIn');
this.toggle.setAttribute('aria-expanded', 'false');
if (this.moveMenu) {
this.menu.style.position = '';
this.menu.style.left = '';
@ -60,22 +72,74 @@ class DropDown {
this.menu.style.width = '';
this.container.appendChild(this.menu);
}
this.showing = false;
}
getFocusable() {
return Array.from(this.menu.querySelectorAll('[tabindex],[href],button,input:not([type=hidden])'));
}
focusNext() {
const focusable = this.getFocusable();
const currentIndex = focusable.indexOf(document.activeElement);
let newIndex = currentIndex + 1;
if (newIndex >= focusable.length) {
newIndex = 0;
}
focusable[newIndex].focus();
}
focusPrevious() {
const focusable = this.getFocusable();
const currentIndex = focusable.indexOf(document.activeElement);
let newIndex = currentIndex - 1;
if (newIndex < 0) {
newIndex = focusable.length - 1;
}
focusable[newIndex].focus();
}
setupListeners() {
// Hide menu on option click
this.container.addEventListener('click', event => {
let possibleChildren = Array.from(this.menu.querySelectorAll('a'));
if (possibleChildren.indexOf(event.target) !== -1) this.hide();
});
// Show dropdown on toggle click
this.toggle.addEventListener('click', this.show.bind(this));
// Hide menu on enter press
this.container.addEventListener('keypress', event => {
if (event.keyCode !== 13) return true;
event.preventDefault();
const possibleChildren = Array.from(this.menu.querySelectorAll('a'));
if (possibleChildren.includes(event.target)) {
this.hide();
return false;
}
});
onSelect(this.toggle, event => {
event.stopPropagation();
console.log('cat', event);
this.show(event);
if (event instanceof KeyboardEvent) {
this.focusNext();
}
});
// Arrow navigation
this.container.addEventListener('keydown', event => {
if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
this.focusNext();
event.preventDefault();
} else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
this.focusPrevious();
event.preventDefault();
} else if (event.key === 'Escape') {
this.hide();
event.stopPropagation();
}
});
// Hide menu on enter press or escape
this.menu.addEventListener('keydown ', event => {
if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
this.hide();
}
});
}

21
resources/assets/js/components/overlay.js
View File

@ -6,12 +6,22 @@ class Overlay {
elem.addEventListener('click', event => {
if (event.target === elem) return this.hide();
});
window.addEventListener('keyup', event => {
if (event.key === 'Escape') {
this.hide();
}
});
let closeButtons = elem.querySelectorAll('.popup-header-close');
for (let i=0; i < closeButtons.length; i++) {
closeButtons[i].addEventListener('click', this.hide.bind(this));
}
}
hide() { this.toggle(false); }
show() { this.toggle(true); }
toggle(show = true) {
let start = Date.now();
let duration = 240;
@ -22,6 +32,9 @@ class Overlay {
this.container.style.opacity = targetOpacity;
if (elapsedTime > duration) {
this.container.style.display = show ? 'flex' : 'none';
if (show) {
this.focusOnBody();
}
this.container.style.opacity = '';
} else {
requestAnimationFrame(setOpacity.bind(this));
@ -31,8 +44,12 @@ class Overlay {
requestAnimationFrame(setOpacity.bind(this));
}
hide() { this.toggle(false); }
show() { this.toggle(true); }
focusOnBody() {
const body = this.container.querySelector('.popup-body');
if (body) {
body.focus();
}
}
}

16
resources/assets/js/services/dom.js
View File

@ -22,6 +22,22 @@ export function onEvents(listenerElement, events, callback) {
}
}
/**
* Helper to run an action when an element is selected.
* A "select" is made to be accessible, So can be a click, space-press or enter-press.
* @param listenerElement
* @param callback
*/
export function onSelect(listenerElement, callback) {
listenerElement.addEventListener('click', callback);
listenerElement.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
callback(event);
}
});
}
/**
* Set a listener on an element for an event emitted by a child
* matching the given childSelector param.

4
resources/assets/js/vues/code-editor.js
View File

@ -3,10 +3,10 @@ import codeLib from "../services/code";
const methods = {
show() {
if (!this.editor) this.editor = codeLib.popupEditor(this.$refs.editor, this.language);
this.$refs.overlay.style.display = 'flex';
this.$refs.overlay.components.overlay.show();
},
hide() {
this.$refs.overlay.style.display = 'none';
this.$refs.overlay.components.overlay.hide();
},
updateEditorMode(language) {
codeLib.setMode(this.editor, language);

9
resources/assets/sass/_buttons.scss
View File

@ -1,4 +1,6 @@
button {
background-color: transparent;
border: 0;
font-size: 100%;
}
@ -47,7 +49,12 @@ $button-border-radius: 2px;
&:hover, &:focus {
text-decoration: none;
}
&:focus {
outline: 1px dotted currentColor;
outline-offset: -$-xs;
}
&:active {
outline: 0;
background-color: darken($primary, 8%);
}
}
@ -83,7 +90,7 @@ $button-border-radius: 2px;
user-select: none;
font-size: 0.75rem;
line-height: 1.4em;
&:focus, &:active {
&:active {
outline: 0;
}
&:hover {

6
resources/assets/sass/_components.scss
View File

@ -115,6 +115,9 @@
.popup-content {
overflow-y: auto;
}
&:focus {
outline: 0;
}
}
.popup-footer button, .popup-header-close {
@ -620,7 +623,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
opacity: 0;
transition: opacity ease-in-out 120ms;
}
&:hover .actions {
&:hover .actions, &:focus-within .actions {
opacity: 1;
}
}
@ -637,7 +640,6 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
}
a { color: #666; }
span {
color: #888;
padding-left: $-xxs;
}
}

3
resources/assets/sass/_forms.scss
View File

@ -19,9 +19,6 @@
&.disabled, &[disabled] {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
}
&:focus {
outline: 0;
}
}
.fake-input {

17
resources/assets/sass/_header.scss
View File

@ -47,9 +47,7 @@ header {
}
.user-name {
vertical-align: top;
padding-top: $-m;
position: relative;
top: -3px;
display: inline-block;
cursor: pointer;
> * {
@ -73,6 +71,9 @@ header {
}
}
.header *, .primary-background * {
outline-color: #FFF;
}
.header-search {
@ -88,6 +89,10 @@ header .search-box {
color: #EEE;
z-index: 2;
padding-left: 40px;
&:focus {
outline: none;
border: 1px solid rgba(255, 255, 255, 0.6);
}
}
button {
fill: #EEE;
@ -103,12 +108,6 @@ header .search-box {
::-moz-placeholder { /* Firefox 19+ */
color: #DDD;
}
:-ms-input-placeholder { /* IE 10+ */
color: #DDD;
}
:-moz-placeholder { /* Firefox 18- */
color: #DDD;
}
@include between($l, $xl) {
max-width: 200px;
}
@ -243,7 +242,7 @@ header .search-box {
line-height: 0.8;
margin: -2px 0 0;
}
&:hover {
&:hover, &:focus-within {
opacity: 1;
}
}

5
resources/assets/sass/_html.scss
View File

@ -1,5 +1,10 @@
* {
box-sizing: border-box;
outline-color: #444444;
}
*:focus {
outline-style: dotted;
}
html {

4
resources/assets/sass/_layout.scss
View File

@ -307,7 +307,11 @@ body.flexbox {
&:hover {
opacity: 1;
}
&:focus-within {
opacity: 1;
}
}
}
@include smaller-than($m) {

11
resources/assets/sass/_lists.scss
View File

@ -414,6 +414,11 @@ ul.pagination {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.1);
}
&:focus {
background-color: #eee;
outline: 1px dotted #666;
outline-offset: -2px;
}
}
.entity-list-item-path-sep {
@ -551,10 +556,14 @@ ul.pagination {
color: #555;
fill: #555;
white-space: nowrap;
&:hover {
&:hover, &:focus {
text-decoration: none;
background-color: #EEE;
}
&:focus {
outline: 1px solid rgba(0, 0, 0, 0.2);
outline-offset: -2px;
}
svg {
margin-right: $-s;
display: inline-block;

5
resources/lang/en/common.php
View File

@ -40,6 +40,10 @@ return [
'add' => 'Add',
// Sort Options
'sort_options' => 'Sort Options',
'sort_direction_toggle' => 'Sort Direction Toggle',
'sort_ascending' => 'Sort Ascending',
'sort_descending' => 'Sort Descending',
'sort_name' => 'Name',
'sort_created_at' => 'Created Date',
'sort_updated_at' => 'Updated Date',
@ -57,6 +61,7 @@ return [
'default' => 'Default',
// Header
'profile_menu' => 'Profile Menu',
'view_profile' => 'View Profile',
'edit_profile' => 'Edit Profile',

1
resources/lang/en/entities.php
View File

@ -176,6 +176,7 @@ return [
'pages_delete_confirm' => 'Are you sure you want to delete this page?',
'pages_delete_draft_confirm' => 'Are you sure you want to delete this draft page?',
'pages_editing_named' => 'Editing Page :pageName',
'pages_edit_draft_options' => 'Draft Options',
'pages_edit_save_draft' => 'Save Draft',
'pages_edit_draft' => 'Edit Page Draft',
'pages_editing_draft' => 'Editing Draft',

12
resources/views/books/show.blade.php
View File

@ -121,17 +121,7 @@
<hr class="primary-background">
<div dropdown class="dropdown-container">
<div dropdown-toggle class="icon-list-item">
<span>@icon('export')</span>
<span>{{ trans('entities.export') }}</span>
</div>
<ul class="wide dropdown-menu">
<li><a href="{{ $book->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
<li><a href="{{ $book->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
<li><a href="{{ $book->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
</ul>
</div>
@include('partials.entity-export-menu', ['entity' => $book])
</div>
</div>

9
resources/views/chapters/child-menu.blade.php
View File

@ -1,10 +1,11 @@
<div class="chapter-child-menu">
<p chapter-toggle class="text-muted @if($bookChild->matchesOrContains($current)) open @endif">
<button chapter-toggle type="button" aria-expanded="{{ $isOpen ? 'true' : 'false' }}" aria-label="{{ trans('common.profile_menu') }}"
class="text-muted @if($isOpen) open @endif">
@icon('caret-right') @icon('page') <span>{{ trans_choice('entities.x_pages', $bookChild->pages->count()) }}</span>
</p>
<ul class="sub-menu inset-list @if($bookChild->matchesOrContains($current)) open @endif">
</button>
<ul class="sub-menu inset-list @if($isOpen) open @endif" @if($isOpen) style="display: block;" @endif role="menu">
@foreach($bookChild->pages as $childPage)
<li class="list-item-page {{ $childPage->isA('page') && $childPage->draft ? 'draft' : '' }}">
<li class="list-item-page {{ $childPage->isA('page') && $childPage->draft ? 'draft' : '' }}" role="presentation">
@include('partials.entity-list-item-basic', ['entity' => $childPage, 'classes' => $current->matches($childPage)? 'selected' : '' ])
</li>
@endforeach

12
resources/views/chapters/show.blade.php
View File

@ -123,17 +123,7 @@
<hr class="primary-background"/>
<div dropdown class="dropdown-container">
<div dropdown-toggle class="icon-list-item">
<span>@icon('export')</span>
<span>{{ trans('entities.export') }}</span>
</div>
<ul class="wide dropdown-menu">
<li><a href="{{ $chapter->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
<li><a href="{{ $chapter->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
<li><a href="{{ $chapter->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
</ul>
</div>
@include('partials.entity-export-menu', ['entity' => $chapter])
</div>
</div>
@stop

16
resources/views/comments/comment.blade.php
View File

@ -1,8 +1,8 @@
<div class="comment-box mb-m" comment="{{ $comment->id }}" local-id="{{$comment->local_id}}" parent-id="{{$comment->parent_id}}" id="comment{{$comment->local_id}}">
<div class="header p-s">
<div class="grid half no-gap v-center">
<div class="meta">
<a href="#comment{{$comment->local_id}}" class="text-muted">#{{$comment->local_id}}</a>
<div class="grid half left-focus no-gap v-center">
<div class="meta text-muted text-small">
<a href="#comment{{$comment->local_id}}">#{{$comment->local_id}}</a>
&nbsp;&nbsp;
@if ($comment->createdBy)
<img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar" alt="{{ $comment->createdBy->name }}">
@ -21,17 +21,17 @@
</div>
<div class="actions text-right">
@if(userCan('comment-update', $comment))
<button type="button" class="text-button" action="edit" title="{{ trans('common.edit') }}">@icon('edit')</button>
<button type="button" class="text-button" action="edit" aria-label="{{ trans('common.edit') }}" title="{{ trans('common.edit') }}">@icon('edit')</button>
@endif
@if(userCan('comment-create-all'))
<button type="button" class="text-button" action="reply" title="{{ trans('common.reply') }}">@icon('reply')</button>
<button type="button" class="text-button" action="reply" aria-label="{{ trans('common.reply') }}" title="{{ trans('common.reply') }}">@icon('reply')</button>
@endif
@if(userCan('comment-delete', $comment))
<div dropdown class="dropdown-container">
<button type="button" dropdown-toggle class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
<ul class="dropdown-menu">
<button type="button" dropdown-toggle aria-haspopup="true" aria-expanded="false" class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
<ul class="dropdown-menu" role="menu">
<li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li>
<li><a action="delete" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</a></li>
<li><a action="delete" href="#" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</a></li>
</ul>
</div>
@endif

9
resources/views/common/header.blade.php
View File

@ -16,8 +16,8 @@
<div class="header-search hide-under-l">
@if (hasAppAccess())
<form action="{{ url('/search') }}" method="GET" class="search-box">
<button id="header-search-box-button" type="submit" aria-label="{{ trans('common.search') }}">@icon('search') </button>
<input id="header-search-box-input" type="text" name="term" tabindex="2"
<button id="header-search-box-button" type="submit" aria-label="{{ trans('common.search') }}" tabindex="-1">@icon('search') </button>
<input id="header-search-box-input" type="text" name="term"
aria-label="{{ trans('common.search') }}" placeholder="{{ trans('common.search') }}"
value="{{ isset($searchTerm) ? $searchTerm : '' }}">
</form>
@ -51,11 +51,12 @@
@if(signedInUser())
<?php $currentUser = user(); ?>
<div class="dropdown-container" dropdown>
<span class="user-name hide-under-l" dropdown-toggle>
<span class="user-name py-s hide-under-l" dropdown-toggle
aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.profile_menu') }}" tabindex="0">
<img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
<span class="name">{{ $currentUser->getShortName(9) }}</span> @icon('caret-down')
</span>
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ url("/user/{$currentUser->id}") }}">@icon('user'){{ trans('common.view_profile') }}</a>
</li>

2
resources/views/components/code-editor.blade.php
View File

@ -1,6 +1,6 @@
<div id="code-editor">
<div overlay ref="overlay" v-cloak @click="hide()">
<div class="popup-body" @click.stop>
<div class="popup-body" tabindex="-1" @click.stop>
<div class="popup-header primary-background">
<div class="popup-title">{{ trans('components.code_editor') }}</div>

2
resources/views/components/entity-selector-popup.blade.php
View File

@ -1,6 +1,6 @@
<div id="entity-selector-wrap">
<div overlay entity-selector-popup>
<div class="popup-body small">
<div class="popup-body small" tabindex="-1">
<div class="popup-header primary-background">
<div class="popup-title">{{ trans('entities.entity_select') }}</div>
<button type="button" class="popup-header-close">x</button>

4
resources/views/components/expand-toggle.blade.php
View File

@ -3,13 +3,13 @@ $target - CSS selector of items to expand
$key - Unique key for checking existing stored state.
--}}
<?php $isOpen = setting()->getForCurrentUser('section_expansion#'. $key); ?>
<a expand-toggle="{{ $target }}"
<button type="button" expand-toggle="{{ $target }}"
expand-toggle-update-endpoint="{{ url('/settings/users/'. $currentUser->id .'/update-expansion-preference/' . $key) }}"
expand-toggle-is-open="{{ $isOpen ? 'yes' : 'no' }}"
class="text-muted icon-list-item text-primary">
<span>@icon('expand-text')</span>
<span>{{ trans('common.toggle_details') }}</span>
</a>
</button>
@if($isOpen)
@push('head')
<style>

2
resources/views/components/image-manager.blade.php
View File

@ -9,7 +9,7 @@
])
<div overlay v-cloak @click="hide">
<div class="popup-body" @click.stop="">
<div class="popup-body" tabindex="-1" @click.stop>
<div class="popup-header primary-background">
<div class="popup-title">{{ trans('components.image_select') }}</div>

4
resources/views/pages/form.blade.php
View File

@ -26,9 +26,9 @@
<div class="text-center px-m py-xs">
<div v-show="draftsEnabled" dropdown dropdown-move-menu class="dropdown-container draft-display text">
<a dropdown-toggle class="text-primary text-button"><span class="faded-text" v-text="draftText"></span>&nbsp; @icon('more')</a>
<a dropdown-toggle aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-primary text-button"><span class="faded-text" v-text="draftText"></span>&nbsp; @icon('more')</a>
@icon('check-circle', ['class' => 'text-pos draft-notification svg-icon', ':class' => '{visible: draftUpdated}'])
<ul class="dropdown-menu">
<ul class="dropdown-menu" role="menu">
<li>
<a @click="saveDraft()" class="text-pos">@icon('save'){{ trans('entities.pages_edit_save_draft') }}</a>
</li>

9
resources/views/pages/revisions.blade.php
View File

@ -50,10 +50,9 @@
@else
<a href="{{ $revision->getUrl() }}" target="_blank">{{ trans('entities.pages_revisions_preview') }}</a>
<span class="text-muted">&nbsp;|&nbsp;</span>
<a href="{{ $revision->getUrl('restore') }}"></a>
<div dropdown class="dropdown-container">
<a dropdown-toggle>{{ trans('entities.pages_revisions_restore') }}</a>
<ul class="dropdown-menu">
<a dropdown-toggle href="#" aria-haspopup="true" aria-expanded="false">{{ trans('entities.pages_revisions_restore') }}</a>
<ul class="dropdown-menu" role="menu">
<li class="px-m py-s"><small class="text-muted">{{trans('entities.revision_restore_confirm')}}</small></li>
<li>
<form action="{{ $revision->getUrl('/restore') }}" method="POST">
@ -66,8 +65,8 @@
</div>
<span class="text-muted">&nbsp;|&nbsp;</span>
<div dropdown class="dropdown-container">
<a dropdown-toggle>{{ trans('common.delete') }}</a>
<ul class="dropdown-menu">
<a dropdown-toggle href="#" aria-haspopup="true" aria-expanded="false">{{ trans('common.delete') }}</a>
<ul class="dropdown-menu" role="menu">
<li class="px-m py-s"><small class="text-muted">{{trans('entities.revision_delete_confirm')}}</small></li>
<li>
<form action="{{ $revision->getUrl('/delete/') }}" method="POST">

12
resources/views/pages/show.blade.php
View File

@ -158,17 +158,7 @@
<hr class="primary-background"/>
{{--Export--}}
<div dropdown class="dropdown-container block">
<div dropdown-toggle class="icon-list-item">
<span>@icon('export')</span>
<span>{{ trans('entities.export') }}</span>
</div>
<ul class="dropdown-menu wide">
<li><a href="{{ $page->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
<li><a href="{{ $page->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
<li><a href="{{ $page->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
</ul>
</div>
@include('partials.entity-export-menu', ['entity' => $page])
</div>
</div>

10
resources/views/partials/book-tree.blade.php
View File

@ -14,11 +14,13 @@
@if($bookChild->isA('chapter') && count($bookChild->pages) > 0)
<div class="entity-list-item no-hover">
<span class="icon text-chapter">
</span>
<span role="presentation" class="icon text-chapter"></span>
<div class="content">
@include('chapters.child-menu', ['chapter' => $bookChild, 'current' => $current])
@include('chapters.child-menu', [
'chapter' => $bookChild,
'current' => $current,
'isOpen' => $bookChild->matchesOrContains($current)
])
</div>
</div>

7
resources/views/partials/breadcrumb-listing.blade.php
View File

@ -1,11 +1,12 @@
<div class="breadcrumb-listing" dropdown breadcrumb-listing="{{ $entity->getType() }}:{{ $entity->id }}">
<div class="breadcrumb-listing-toggle" dropdown-toggle>
<div class="breadcrumb-listing-toggle" dropdown-toggle
aria-haspopup="true" aria-expanded="false" tabindex="0">
<div class="separator">@icon('chevron-right')</div>
</div>
<div dropdown-menu class="breadcrumb-listing-dropdown card">
<div dropdown-menu class="breadcrumb-listing-dropdown card" role="menu">
<div class="breadcrumb-listing-search">
@icon('search')
<input autocomplete="off" type="text" name="entity-search">
<input autocomplete="off" type="text" name="entity-search" placeholder="{{ trans('common.search') }}" aria-label="{{ trans('common.search') }}">
</div>
@include('partials.loading-icon')
<div class="breadcrumb-listing-entity-list px-m"></div>

7
resources/views/partials/entity-dashboard-search-box.blade.php
View File

@ -1,7 +1,8 @@
<div class="mb-xl">
<form v-on:submit.prevent="searchBook" class="search-box flexible">
<input v-model="searchTerm" v-on:change="checkSearchForm" type="text" name="term" placeholder="{{ trans('entities.books_search_this') }}">
<button type="submit">@icon('search')</button>
<button v-if="searching" v-cloak class="search-box-cancel text-neg" v-on:click="clearSearch" type="button">@icon('close')</button>
<input v-model="searchTerm" v-on:change="checkSearchForm" type="text" aria-label="{{ trans('entities.books_search_this') }}" name="term" placeholder="{{ trans('entities.books_search_this') }}">
<button type="submit" aria-label="{{ trans('common.search') }}">@icon('search')</button>
<button v-if="searching" v-cloak class="search-box-cancel text-neg" v-on:click="clearSearch"
type="button" aria-label="{{ trans('common.search_clear') }}">@icon('close')</button>
</form>
</div>

12
resources/views/partials/entity-export-menu.blade.php Normal file
View File

@ -0,0 +1,12 @@
<div dropdown class="dropdown-container" >
<div dropdown-toggle class="icon-list-item"
aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('entities.export') }}" tabindex="0">
<span>@icon('export')</span>
<span>{{ trans('entities.export') }}</span>
</div>
<ul class="wide dropdown-menu" role="menu">
<li><a href="{{ $entity->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
<li><a href="{{ $entity->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
<li><a href="{{ $entity->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
</ul>
</div>

2
resources/views/partials/entity-list-item-basic.blade.php
View File

@ -1,6 +1,6 @@
<?php $type = $entity->getType(); ?>
<a href="{{ $entity->getUrl() }}" class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} {{$classes ?? ''}} entity-list-item" data-entity-type="{{$type}}" data-entity-id="{{$entity->id}}">
<span class="icon text-{{$type}}">@icon($type)</span>
<span role="presentation" class="icon text-{{$type}}">@icon($type)</span>
<div class="content">
<h4 class="entity-list-item-name break-text">{{ $entity->name }}</h4>
{{ $slot ?? '' }}

7
resources/views/partials/sort.blade.php
View File

@ -13,16 +13,17 @@
<div class="list-sort">
<div class="list-sort-type dropdown-container" dropdown>
<div dropdown-toggle>{{ $options[$selectedSort] }}</div>
<div dropdown-toggle aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.sort_options') }}" tabindex="0">{{ $options[$selectedSort] }}</div>
<ul class="dropdown-menu">
@foreach($options as $key => $label)
<li @if($key === $selectedSort) class="active" @endif><a href="#" data-sort-value="{{$key}}">{{ $label }}</a></li>
@endforeach
</ul>
</div>
<div class="list-sort-dir" data-sort-dir>
<button href="#" class="list-sort-dir" type="button" data-sort-dir
aria-label="{{ trans('common.sort_direction_toggle') }} - {{ $order === 'asc' ? trans('common.sort_ascending') : trans('common.sort_descending') }}" tabindex="0">
@icon($order === 'desc' ? 'sort-up' : 'sort-down')
</div>
</button>
</div>
</form>
</div>