mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
Improved the display of dropdown menus
- Tweaked styling to add a little extra shadow and be more rounded to match other UI areas. - Added slight horizontal inset when in right sidebar to prevent shadow being cut-off in most cases. - Added logic to "drop upwards" if dropping down would take the menu offscreen.
This commit is contained in:
parent
221d910ff2
commit
a0fe6147d8
@ -28,18 +28,31 @@ class DropDown {
|
|||||||
this.menu.classList.add('anim', 'menuIn');
|
this.menu.classList.add('anim', 'menuIn');
|
||||||
this.toggle.setAttribute('aria-expanded', 'true');
|
this.toggle.setAttribute('aria-expanded', 'true');
|
||||||
|
|
||||||
|
const menuOriginalRect = this.menu.getBoundingClientRect();
|
||||||
|
let heightOffset = 0;
|
||||||
|
const toggleHeight = this.toggle.getBoundingClientRect().height;
|
||||||
|
const dropUpwards = menuOriginalRect.bottom > window.innerHeight;
|
||||||
|
|
||||||
|
// If enabled, Move to body to prevent being trapped within scrollable sections
|
||||||
if (this.moveMenu) {
|
if (this.moveMenu) {
|
||||||
// Move to body to prevent being trapped within scrollable sections
|
|
||||||
this.rect = this.menu.getBoundingClientRect();
|
|
||||||
this.body.appendChild(this.menu);
|
this.body.appendChild(this.menu);
|
||||||
this.menu.style.position = 'fixed';
|
this.menu.style.position = 'fixed';
|
||||||
if (this.direction === 'right') {
|
if (this.direction === 'right') {
|
||||||
this.menu.style.right = `${(this.rect.right - this.rect.width)}px`;
|
this.menu.style.right = `${(menuOriginalRect.right - menuOriginalRect.width)}px`;
|
||||||
} else {
|
} else {
|
||||||
this.menu.style.left = `${this.rect.left}px`;
|
this.menu.style.left = `${menuOriginalRect.left}px`;
|
||||||
}
|
}
|
||||||
this.menu.style.top = `${this.rect.top}px`;
|
this.menu.style.width = `${menuOriginalRect.width}px`;
|
||||||
this.menu.style.width = `${this.rect.width}px`;
|
heightOffset = dropUpwards ? (window.innerHeight - menuOriginalRect.top - toggleHeight / 2) : menuOriginalRect.top;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust menu to display upwards if near the bottom of the screen
|
||||||
|
if (dropUpwards) {
|
||||||
|
this.menu.style.top = 'initial';
|
||||||
|
this.menu.style.bottom = `${heightOffset}px`;
|
||||||
|
} else {
|
||||||
|
this.menu.style.top = `${heightOffset}px`;
|
||||||
|
this.menu.style.bottom = 'initial';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set listener to hide on mouse leave or window click
|
// Set listener to hide on mouse leave or window click
|
||||||
@ -74,13 +87,16 @@ class DropDown {
|
|||||||
this.menu.style.display = 'none';
|
this.menu.style.display = 'none';
|
||||||
this.menu.classList.remove('anim', 'menuIn');
|
this.menu.classList.remove('anim', 'menuIn');
|
||||||
this.toggle.setAttribute('aria-expanded', 'false');
|
this.toggle.setAttribute('aria-expanded', 'false');
|
||||||
|
this.menu.style.top = '';
|
||||||
|
this.menu.style.bottom = '';
|
||||||
|
|
||||||
if (this.moveMenu) {
|
if (this.moveMenu) {
|
||||||
this.menu.style.position = '';
|
this.menu.style.position = '';
|
||||||
this.menu.style[this.direction] = '';
|
this.menu.style[this.direction] = '';
|
||||||
this.menu.style.top = '';
|
|
||||||
this.menu.style.width = '';
|
this.menu.style.width = '';
|
||||||
this.container.appendChild(this.menu);
|
this.container.appendChild(this.menu);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.showing = false;
|
this.showing = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -578,8 +578,8 @@ ul.pagination {
|
|||||||
right: 0;
|
right: 0;
|
||||||
margin: $-m 0;
|
margin: $-m 0;
|
||||||
@include lightDark(background-color, #fff, #333);
|
@include lightDark(background-color, #fff, #333);
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
|
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18);
|
||||||
border-radius: 1px;
|
border-radius: 3px;
|
||||||
min-width: 180px;
|
min-width: 180px;
|
||||||
padding: $-xs 0;
|
padding: $-xs 0;
|
||||||
@include lightDark(color, #555, #eee);
|
@include lightDark(color, #555, #eee);
|
||||||
@ -656,6 +656,12 @@ ul.pagination {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Shift in right-sidebar dropdown menus to prevent shadows
|
||||||
|
// being cut by scrollable container.
|
||||||
|
.tri-layout-right .dropdown-menu {
|
||||||
|
right: $-xs;
|
||||||
|
}
|
||||||
|
|
||||||
// Books grid view
|
// Books grid view
|
||||||
.featured-image-container {
|
.featured-image-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -1,13 +1,18 @@
|
|||||||
<div component="dropdown" class="dropdown-container" id="export-menu">
|
<div component="dropdown"
|
||||||
|
class="dropdown-container"
|
||||||
|
id="export-menu">
|
||||||
|
|
||||||
<div refs="dropdown@toggle" class="icon-list-item"
|
<div refs="dropdown@toggle" class="icon-list-item"
|
||||||
aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('entities.export') }}" tabindex="0">
|
aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('entities.export') }}" tabindex="0">
|
||||||
<span>@icon('export')</span>
|
<span>@icon('export')</span>
|
||||||
<span>{{ trans('entities.export') }}</span>
|
<span>{{ trans('entities.export') }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul refs="dropdown@menu" class="wide dropdown-menu" role="menu">
|
<ul refs="dropdown@menu" class="wide dropdown-menu" role="menu">
|
||||||
<li><a href="{{ $entity->getUrl('/export/html') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_html') }}</span><span>.html</span></a></li>
|
<li><a href="{{ $entity->getUrl('/export/html') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_html') }}</span><span>.html</span></a></li>
|
||||||
<li><a href="{{ $entity->getUrl('/export/pdf') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_pdf') }}</span><span>.pdf</span></a></li>
|
<li><a href="{{ $entity->getUrl('/export/pdf') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_pdf') }}</span><span>.pdf</span></a></li>
|
||||||
<li><a href="{{ $entity->getUrl('/export/plaintext') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_text') }}</span><span>.txt</span></a></li>
|
<li><a href="{{ $entity->getUrl('/export/plaintext') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_text') }}</span><span>.txt</span></a></li>
|
||||||
<li><a href="{{ $entity->getUrl('/export/markdown') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_md') }}</span><span>.md</span></a></li>
|
<li><a href="{{ $entity->getUrl('/export/markdown') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_md') }}</span><span>.md</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -65,7 +65,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="action-buttons px-m py-xs">
|
<div class="action-buttons px-m py-xs">
|
||||||
<div component="dropdown" dropdown-move-menu class="dropdown-container">
|
<div component="dropdown"
|
||||||
|
option:dropdown:move-menu="true"
|
||||||
|
class="dropdown-container">
|
||||||
<button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-primary text-button">@icon('edit') <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span></button>
|
<button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-primary text-button">@icon('edit') <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span></button>
|
||||||
<ul refs="dropdown@menu" class="wide dropdown-menu">
|
<ul refs="dropdown@menu" class="wide dropdown-menu">
|
||||||
<li class="px-l py-m">
|
<li class="px-l py-m">
|
||||||
|
Loading…
Reference in New Issue
Block a user