Sticky content footer + move element actions into it

# Conflicts: # src/web/assets/cp/dist/cp.js # src/web/assets/cp/dist/cp.js.map # src/web/assets/cp/dist/css/cp.css # src/web/assets/cp/dist/css/cp.css.map
craftcms · Sep 8, 2022 · 104ce22 · 104ce22
1 parent c0e6171
commit 104ce22
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 20 deletions.
diff --git a/src/templates/_layouts/elementindex.twig b/src/templates/_layouts/elementindex.twig
@@ -59,6 +59,7 @@
 {% block footer %}
     <div id="count-spinner" class="spinner small hidden"></div>
     <div id="count-container" class="light flex-grow">&nbsp;</div>
+    <div id="actions-container" class="flex"></div>
     <button type="button" id="export-btn" class="btn hidden" aria-expanded="false">{{ 'Export…'|t('app') }}</button>
 {% endblock %}
 

diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js
diff --git a/src/web/assets/cp/dist/cp.js.map b/src/web/assets/cp/dist/cp.js.map
diff --git a/src/web/assets/cp/dist/css/cp.css b/src/web/assets/cp/dist/css/cp.css
diff --git a/src/web/assets/cp/dist/css/cp.css.map b/src/web/assets/cp/dist/css/cp.css.map
diff --git a/src/web/assets/cp/src/css/_cp.scss b/src/web/assets/cp/src/css/_cp.scss
@@ -1025,6 +1025,8 @@ li.breadcrumb-toggle-wrapper {
 }
 
 #footer {
+  position: sticky;
+  bottom: 0;
   z-index: 1;
   margin: 25px calc(var(--xl) * -1) calc(var(--xl) * -1); // 1px extra on top is intentional
   padding: var(--s) var(--xl);
@@ -1037,6 +1039,17 @@ li.breadcrumb-toggle-wrapper {
     display: none;
   }
 
+  &.stuck {
+    border-radius: 0;
+
+    @supports (backdrop-filter: blur(10px)) {
+      & {
+        background-color: transparentize($grey100, 0.25);
+        backdrop-filter: blur(10px);
+      }
+    }
+  }
+
   & > *,
   .flex > * {
     margin-bottom: 0;

diff --git a/src/web/assets/cp/src/js/BaseElementIndex.js b/src/web/assets/cp/src/js/BaseElementIndex.js
@@ -69,6 +69,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
     _autoSelectElements: null,
     $countSpinner: null,
     $countContainer: null,
+    $actionsContainer: null,
     page: 1,
     resultSet: null,
     totalResults: null,
@@ -82,7 +83,6 @@ Craft.BaseElementIndex = Garnish.Base.extend(
     showingActionTriggers: false,
     exporters: null,
     exportersByType: null,
-    _$detachedToolbarItems: null,
     _$triggers: null,
 
     _ignoreFailedRequest: false,
@@ -156,6 +156,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
 
       this.$countSpinner = this.$container.find('#count-spinner');
       this.$countContainer = this.$container.find('#count-container');
+      this.$actionsContainer = this.$container.find('#actions-container');
       this.$exportBtn = this.$container.find('#export-btn');
 
       // Hide sidebar if needed
@@ -864,18 +865,10 @@ Craft.BaseElementIndex = Garnish.Base.extend(
         return;
       }
 
-      // Hard-code the min toolbar height in case it was taller than the actions toolbar
-      // (prevents the elements from jumping if this ends up being a double-click)
-      this.$toolbar.css('min-height', this.$toolbar.height());
-
-      // Hide any toolbar inputs
-      this._$detachedToolbarItems = this.$toolbar.children();
-      this._$detachedToolbarItems.detach();
-
       if (!this._$triggers) {
         this._createTriggers();
       } else {
-        this._$triggers.appendTo(this.$toolbar);
+        this._$triggers.appendTo(this.$actionsContainer);
       }
 
       this.showingActionTriggers = true;
@@ -980,12 +973,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
         return;
       }
 
-      this._$detachedToolbarItems.appendTo(this.$toolbar);
       this._$triggers.detach();
-      // this._$detachedToolbarItems.removeClass('hidden');
-
-      // Unset the min toolbar height
-      this.$toolbar.css('min-height', '');
 
       this.showingActionTriggers = false;
     },
@@ -2248,7 +2236,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
         this._$triggers = this._$triggers.add($div);
       }
 
-      this._$triggers.appendTo(this.$toolbar);
+      this._$triggers.appendTo(this.$actionsContainer);
       Craft.appendHeadHtml(this.actionsHeadHtml);
       Craft.appendBodyHtml(this.actionsBodyHtml);
 

diff --git a/src/web/assets/cp/src/js/CP.js b/src/web/assets/cp/src/js/CP.js
@@ -301,6 +301,22 @@ Craft.CP = Garnish.Base.extend(
           }
         });
       }
+
+      // Add .stuck class to #footer when stuck
+      // h/t https://stackoverflow.com/a/61115077/1688568
+      const footer = document.getElementById('footer');
+      if (footer) {
+        const observer = new IntersectionObserver(
+          ([ev]) => {
+            ev.target.classList.toggle('stuck', ev.intersectionRatio < 1);
+          },
+          {
+            rootMargin: '0px 0px -1px 0px',
+            threshold: [1],
+          }
+        );
+        observer.observe(footer);
+      }
     },
 
     get $contentHeader() {