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.

diff --git a/resources/js/components/dropdown.js b/resources/js/components/dropdown.js
index f761ecf011541590963caf66daf4b145f43c8cde..e8407650287162042e90b21472bbfe8e1439607c 100644 (file)
--- a/resources/js/components/dropdown.js
+++ b/resources/js/components/dropdown.js
@@ -28,18 +28,31 @@ class DropDown {
         this.menu.classList.add('anim', 'menuIn');
         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) {
-            // Move to body to prevent being trapped within scrollable sections
-            this.rect = this.menu.getBoundingClientRect();
             this.body.appendChild(this.menu);
             this.menu.style.position = 'fixed';
             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 {
-                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 = `${this.rect.width}px`;
+            this.menu.style.width = `${menuOriginalRect.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
@@ -74,13 +87,16 @@ class DropDown {
         this.menu.style.display = 'none';
         this.menu.classList.remove('anim', 'menuIn');
         this.toggle.setAttribute('aria-expanded', 'false');
+        this.menu.style.top = '';
+        this.menu.style.bottom = '';
+
         if (this.moveMenu) {
             this.menu.style.position = '';
             this.menu.style[this.direction] = '';
-            this.menu.style.top = '';
             this.menu.style.width = '';
             this.container.appendChild(this.menu);
         }
+
         this.showing = false;
     }
 

diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index dfde5a28252fb4dacf2ab1dac981287fa774249c..3d36fd7bdbb37fc256da595f518bc3befcd1a8d9 100644 (file)
--- a/resources/sass/_lists.scss
+++ b/resources/sass/_lists.scss
@@ -578,8 +578,8 @@ ul.pagination {
   right: 0;
   margin: $-m 0;
   @include lightDark(background-color, #fff, #333);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
-  border-radius: 1px;
+  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18);
+  border-radius: 3px;
   min-width: 180px;
   padding: $-xs 0;
   @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
 .featured-image-container {
   position: relative;

diff --git a/resources/views/entities/export-menu.blade.php b/resources/views/entities/export-menu.blade.php
index dd7231095b8f6ebf3e7e14ec9d9674adfbceb999..bac240b1eed0c2a493b3ba8b09727067c08bf4c6 100644 (file)
--- a/resources/views/entities/export-menu.blade.php
+++ b/resources/views/entities/export-menu.blade.php
@@ -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"
          aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('entities.export') }}" tabindex="0">
         <span>@icon('export')</span>
         <span>{{ trans('entities.export') }}</span>
     </div>
+
     <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/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/markdown') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_md') }}</span><span>.md</span></a></li>
     </ul>
+
 </div>

diff --git a/resources/views/pages/parts/editor-toolbar.blade.php b/resources/views/pages/parts/editor-toolbar.blade.php
index 4846f4b761299adf6822ae5d8097ff7d4ca469d9..fa5cb7374eb31586db5d89a2e115f35f1400166b 100644 (file)
--- a/resources/views/pages/parts/editor-toolbar.blade.php
+++ b/resources/views/pages/parts/editor-toolbar.blade.php
@@ -65,7 +65,9 @@
         </div>
 
         <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>
                 <ul refs="dropdown@menu" class="wide dropdown-menu">
                     <li class="px-l py-m">