From 4ededa8487515d8f29b1f3b6c755294e5df64009 Mon Sep 17 00:00:00 2001 From: Jan Cernik <66427541+jancernik@users.noreply.github.com> Date: Mon, 25 Mar 2024 16:23:24 -0300 Subject: [PATCH] DEV: Update for glimmer header (#34) --- common/common.scss | 2 +- .../home-logo__before/mobile-brand-header.gjs | 28 +++++++++++++ .../initializers/initialize-brand-header.js | 4 +- .../initialize-mobile-decorator.js | 17 -------- .../widgets/brand-header-container.js | 39 ------------------- .../discourse/widgets/brand-header-icon.js | 20 ---------- .../discourse/widgets/hamburger-brand-menu.js | 23 ----------- mobile/mobile.scss | 19 ++++++++- 8 files changed, 49 insertions(+), 103 deletions(-) create mode 100644 javascripts/discourse/connectors/home-logo__before/mobile-brand-header.gjs delete mode 100644 javascripts/discourse/initializers/initialize-mobile-decorator.js delete mode 100644 javascripts/discourse/widgets/brand-header-container.js delete mode 100644 javascripts/discourse/widgets/brand-header-icon.js delete mode 100644 javascripts/discourse/widgets/hamburger-brand-menu.js diff --git a/common/common.scss b/common/common.scss index 4137511..90465da 100644 --- a/common/common.scss +++ b/common/common.scss @@ -1,5 +1,5 @@ .b-header, -.brand-header-widgetized { +.brand-header-contents { #brand-logo { max-height: 32px; } diff --git a/javascripts/discourse/connectors/home-logo__before/mobile-brand-header.gjs b/javascripts/discourse/connectors/home-logo__before/mobile-brand-header.gjs new file mode 100644 index 0000000..d147230 --- /dev/null +++ b/javascripts/discourse/connectors/home-logo__before/mobile-brand-header.gjs @@ -0,0 +1,28 @@ +import Component from "@glimmer/component"; +import { service } from "@ember/service"; +import { not, and } from "truth-helpers"; +import MountWidget from "discourse/components/mount-widget"; +import DMenu from "float-kit/components/d-menu"; +import BrandHeaderContents from "../../components/brand-header-contents"; +import dIcon from "discourse-common/helpers/d-icon"; + +export default class MobileBrandHeader extends Component { + @service site; + + +} diff --git a/javascripts/discourse/initializers/initialize-brand-header.js b/javascripts/discourse/initializers/initialize-brand-header.js index 7ea2aaf..bc3ce9b 100644 --- a/javascripts/discourse/initializers/initialize-brand-header.js +++ b/javascripts/discourse/initializers/initialize-brand-header.js @@ -8,8 +8,8 @@ export default { initialize() { registerWidgetShim( - "brand-header-widgetized", - "div.brand-header-widgetized", + "brand-header-contents", + "div.brand-header-contents", hbs`` ); diff --git a/javascripts/discourse/initializers/initialize-mobile-decorator.js b/javascripts/discourse/initializers/initialize-mobile-decorator.js deleted file mode 100644 index 865c33a..0000000 --- a/javascripts/discourse/initializers/initialize-mobile-decorator.js +++ /dev/null @@ -1,17 +0,0 @@ -import { withPluginApi } from "discourse/lib/plugin-api"; - -export default { - name: "mobile-brand-header", - - initialize() { - withPluginApi("0.1", (api) => { - const mobileView = api.container.lookup("site:main").mobileView; - - if (!settings.show_bar_on_mobile && mobileView) { - api.decorateWidget("home-logo:before", (helper) => { - return [helper.widget.attach("brand-header-container")]; - }); - } - }); - }, -}; diff --git a/javascripts/discourse/widgets/brand-header-container.js b/javascripts/discourse/widgets/brand-header-container.js deleted file mode 100644 index 5bfdc6b..0000000 --- a/javascripts/discourse/widgets/brand-header-container.js +++ /dev/null @@ -1,39 +0,0 @@ -import { createWidget } from "discourse/widgets/widget"; - -createWidget("brand-header-container", { - buildKey: () => `brand-header-container`, - - defaultState() { - let states = { - brandMenuVisible: false, - }; - - return states; - }, - - toggleBrandMenu() { - this.state.brandMenuVisible = !this.state.brandMenuVisible; - - if (!this.state.brandMenuVisible) { - const headerCloak = document.querySelector(".header-cloak"); - headerCloak.classList.remove("animate"); - headerCloak.removeAttribute("style"); - } - }, - - html(attrs, state) { - const panelContents = []; - - panelContents.push( - this.attach("brand-header-icon", { - brandMenuVisible: state.brandMenuVisible, - }) - ); - - if (state.brandMenuVisible) { - panelContents.push(this.attach("hamburger-brand-menu")); - } - - return panelContents; - }, -}); diff --git a/javascripts/discourse/widgets/brand-header-icon.js b/javascripts/discourse/widgets/brand-header-icon.js deleted file mode 100644 index 9b6197c..0000000 --- a/javascripts/discourse/widgets/brand-header-icon.js +++ /dev/null @@ -1,20 +0,0 @@ -import { createWidget } from "discourse/widgets/widget"; - -createWidget("brand-header-icon", { - tagName: "ul.icons.brand-header-toggle", - buildAttributes() { - return { role: "navigation" }; - }, - - html(attrs) { - const hamburger = this.attach("header-dropdown", { - title: "hamburger_brand_menu", - icon: "bars", - iconId: "toggle-hamburger-brand-menu", - active: attrs.brandMenuVisible, - action: "toggleBrandMenu", - }); - const icons = [hamburger]; - return icons; - }, -}); diff --git a/javascripts/discourse/widgets/hamburger-brand-menu.js b/javascripts/discourse/widgets/hamburger-brand-menu.js deleted file mode 100644 index c7dc2eb..0000000 --- a/javascripts/discourse/widgets/hamburger-brand-menu.js +++ /dev/null @@ -1,23 +0,0 @@ -import { createWidget } from "discourse/widgets/widget"; -import { later } from "@ember/runloop"; - -createWidget("hamburger-brand-menu", { - tagName: "div.hamburger-panel", - - html() { - return this.attach("menu-panel", { - contents: () => this.attach("brand-header-widgetized"), - }); - }, - - clickOutside() { - const panel = document.querySelector(".menu-panel"); - panel.classList.add("animate"); - panel.style.left = `${-window.innerWidth}px`; - - const headerCloak = document.querySelector(".header-cloak"); - headerCloak.classList.add("animate"); - headerCloak.style.opacity = 0; - later(() => this.sendWidgetAction("toggleBrandMenu"), 200); - }, -}); diff --git a/mobile/mobile.scss b/mobile/mobile.scss index 3c56724..b864672 100644 --- a/mobile/mobile.scss +++ b/mobile/mobile.scss @@ -19,7 +19,23 @@ } } -.brand-header-widgetized { +.home-logo-wrapper-outlet { + display: flex; + .brand-header-container { + display: flex; + justify-content: center; + align-items: center; + } +} + +.brand-header-contents { + padding: 0.5em; + width: 320px; + ul { + list-style: none; + margin: 0; + } + .nav { border-top: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low); @@ -45,6 +61,7 @@ .icons { display: flex; + height: 26px; a { padding: 0.33em 0.6em; .d-icon {