Merge pull request #712 from winstonwumbo/master

Some holiday goodies :) (Tweaks to Menu Components)
haxtheweb · Dec 28, 2024 · 456ec0b · 456ec0b
2 parents 7e3148c + 10b5f74
commit 456ec0b
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 92 deletions.
diff --git a/elements/haxcms-elements/lib/ui-components/blocks/site-children-block.js b/elements/haxcms-elements/lib/ui-components/blocks/site-children-block.js
@@ -78,7 +78,21 @@ class SiteChildrenBlock extends LitElement {
     this.start = 0;
     this.end = 1000;
     this.fixedId = false;
+    this.activeId = "";
     this.__items = [];
+
+    autorun((reaction) => {
+      this.editMode = toJS(store.editMode);
+      this.__disposer.push(reaction);
+    });
+    autorun((reaction) => {
+      this.manifest = toJS(store.manifest);
+      this.__disposer.push(reaction);
+    });
+    autorun((reaction) => {
+      this.activeId = toJS(store.activeId);
+      this.__disposer.push(reaction);
+    });
   }
 
   static get styles() {
@@ -103,12 +117,14 @@ class SiteChildrenBlock extends LitElement {
         .link button:hover,
         .link button:focus {
           text-decoration: underline;
+          color: var(--site-children-block-link-hover-color, #000000);
         }
         button {
           cursor: pointer;
           display: block;
           line-height: inherit;
           font-size: inherit;
+          font-family: inherit;
           padding: 0;
           margin: 0;
           text-align: left;
@@ -129,11 +145,22 @@ class SiteChildrenBlock extends LitElement {
         }
         li {
           margin: 0;
-          padding: 0;
+          padding: var(--site-children-block-li-padding, 0);
+          border-bottom: var(--site-children-block-border-bottom, none);
+        }
+        .top-level {
+          font-size: 20px;
+          border-bottom-width: 2px;
+          padding: 0px 0px 8px;
+          text-transform: uppercase;
         }
         .active {
-          color: var(--site-children-block-link-active-color, #000000);
           background-color: var(--site-children-block-link-active-bg);
+          border-left: var(--site-children-block-active-border-left, 4px solid #000000);
+        }
+        .active button {
+          font-weight: 700;
+          color: var(--site-children-block-link-active-color, #000000);
         }
         .spacing .indent {
           display: inline-flex;
@@ -192,10 +219,9 @@ class SiteChildrenBlock extends LitElement {
             item.metadata.published === false
               ? ``
               : html`
-                  <li class="spacing">
+                  <li class="spacing ${item.indent === 0 ? 'top-level' : ''}">
                     <a
-                      data-id="${item.id}"
-                      class="link"
+                      class="link ${item.id === this.activeId ? 'active' : ''}"
                       tabindex="-1"
                       href="${item.slug}"
                     >
@@ -257,7 +283,6 @@ class SiteChildrenBlock extends LitElement {
        */
       activeId: {
         type: String,
-        attribute: "active-id",
       },
       editMode: {
         type: Boolean,
@@ -266,89 +291,7 @@ class SiteChildrenBlock extends LitElement {
       },
     };
   }
-  /**
-   * When active ID changes, see if we know what to highlight automatically
-   */
-  _activeIdChanged(newValue) {
-    if (newValue) {
-      let el = null;
-      //ensure that this level is included
-      if (this.shadowRoot.querySelector('[data-id="' + newValue + '"]')) {
-        el = this.shadowRoot.querySelector('[data-id="' + newValue + '"]');
-      } else {
-        let tmpItem = this.manifest.items.find((i) => i.id == newValue);
-        // fallback, maybe there's a child of this currently active
-        while (el === null && tmpItem && tmpItem.parent != null) {
-          // take the parent object of this current item
-          tmpItem = this.manifest.items.find((i) => i.id == tmpItem.parent);
-          // see if IT lives in the dom, if not, keep going until we run out
-          if (
-            tmpItem &&
-            this.shadowRoot.querySelector('[data-id="' + tmpItem.id + '"]')
-          ) {
-            el = this.shadowRoot.querySelector(
-              '[data-id="' + tmpItem.id + '"]',
-            );
-          }
-        }
-      }
-      if (this._prevEl) {
-        this._prevEl.classList.remove("active");
-      }
-      if (el) {
-        el.classList.add("active");
-        this._prevEl = el;
-      }
-    } else {
-      // shouldn't be possible but might as well list
-      if (this._prevEl) {
-        this._prevEl.classList.remove("active");
-      }
-    }
-  }
 
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    changedProperties.forEach((oldValue, propName) => {
-      if (propName === "__items") {
-        this.dispatchEvent(
-          new CustomEvent(`${this[propName]}-changed`, {
-            detail: this[propName],
-          }),
-        );
-      }
-      if (propName === "_activeId" && this.shadowRoot) {
-        this._activeIdChanged(this[(propName, oldValue)]);
-      }
-    });
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    autorun((reaction) => {
-      this.editMode = toJS(store.editMode);
-      this.__disposer.push(reaction);
-    });
-    autorun((reaction) => {
-      this.manifest = toJS(store.manifest);
-      this.__disposer.push(reaction);
-    });
-    // minor timing thing to ensure store has picked active
-    // needed if routes set on first paint or lifecycles miss
-    setTimeout(() => {
-      autorun((reaction) => {
-        this.activeId = toJS(store.activeId);
-        this.__disposer.push(reaction);
-      });
-    }, 250);
-  }
-  disconnectedCallback() {
-    // clean up state
-    for (var i in this.__disposer) {
-      this.__disposer[i].dispose();
-    }
-    super.disconnectedCallback();
-  }
 }
 customElements.define(SiteChildrenBlock.tag, SiteChildrenBlock);
 export { SiteChildrenBlock };
diff --git a/elements/map-menu/lib/map-menu-header.js b/elements/map-menu/lib/map-menu-header.js
@@ -141,6 +141,9 @@ class MapMenuHeader extends I18NMixin(LitElement) {
         :host(:not([icon=""])) button {
           padding-left: 0;
         }
+        :host(:not([icon=""])[is-flex]) button {
+          padding: var(--map-menu-header-button-padding);
+        }
         .ops {
           position: absolute;
           display: block;
@@ -210,6 +213,7 @@ class MapMenuHeader extends I18NMixin(LitElement) {
   constructor() {
     super();
     this.editControls = false;
+    this.isFlex = false;
     this.iconLabel = null;
     this.icon = null;
     this.url = "";
@@ -275,6 +279,10 @@ class MapMenuHeader extends I18NMixin(LitElement) {
         type: Boolean,
         attribute: "edit-controls",
       },
+      isFlex: { 
+        type: Boolean, 
+        attribute: "is-flex" 
+      },
       url: {
         type: String,
       },

diff --git a/elements/map-menu/lib/map-menu-submenu.js b/elements/map-menu/lib/map-menu-submenu.js
@@ -190,6 +190,7 @@ class MapMenuSubmenu extends LitElement {
         <map-menu-header
           id="${this.id}"
           ?edit-controls="${this.editControls}"
+          ?is-flex="${this.isFlex}"
           itemtitle="${this.itemtitle}"
           label="${this.label}"
           ?hovered="${this.hovered}"
@@ -262,7 +263,10 @@ class MapMenuSubmenu extends LitElement {
       collapsable: {
         type: Boolean,
       },
-      isFlex: { type: Boolean, attribute: "is-flex" },
+      isFlex: { 
+        type: Boolean, 
+        attribute: "is-flex" 
+      },
       isNested: {
         type: Boolean,
         attribute: "is-nested",

diff --git a/elements/polaris-theme/lib/polaris-flex-theme.js b/elements/polaris-theme/lib/polaris-flex-theme.js
@@ -807,9 +807,12 @@ class PolarisFlexTheme extends LTIResizingMixin(
               part="page-tags"
               auto-accent-color
             ></site-active-tags>
-            <section id="slot" part="slot">
-              <slot></slot>
-            </section>
+            <div class="main-section">
+              ${this.renderSideBar()}
+              <section id="slot" part="slot">
+                <slot></slot>
+              </section>
+            </div>
           </article>
         </main>
       </div>