From 649cbad21664942a73b5df55c6d929fea479b18d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Saquetim?= <1108771+megothss@users.noreply.github.com> Date: Tue, 20 Aug 2024 19:44:26 -0300 Subject: [PATCH] DEV: Use the glimmer header in the Styleguide (#28427) --- .../app/components/glimmer-site-header.gjs | 2 + .../discourse/app/components/header.gjs | 5 +- .../app/components/header/auth-buttons.gjs | 2 +- .../app/components/header/contents.gjs | 22 +++---- .../components/header/topic/featured-link.gjs | 5 +- .../app/components/header/topic/info.gjs | 65 ++++++++++--------- .../app/components/header/topic/status.gjs | 4 +- .../sections/organisms/site-header.gjs | 29 +++++++++ .../sections/organisms/site-header.hbs | 19 ------ .../assets/stylesheets/styleguide.scss | 7 ++ 10 files changed, 92 insertions(+), 68 deletions(-) create mode 100644 plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.gjs delete mode 100644 plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.hbs diff --git a/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs b/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs index b0971a8d6b7..690dde544a8 100644 --- a/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs +++ b/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs @@ -439,6 +439,8 @@ export default class GlimmerSiteHeader extends Component { @showCreateAccount={{@showCreateAccount}} @showLogin={{@showLogin}} @animateMenu={{this.animateMenu}} + @topicInfo={{this.header.topicInfo}} + @topicInfoVisible={{this.header.topicInfoVisible}} /> diff --git a/app/assets/javascripts/discourse/app/components/header.gjs b/app/assets/javascripts/discourse/app/components/header.gjs index 4b0284ffdc3..32ac3e3ac26 100644 --- a/app/assets/javascripts/discourse/app/components/header.gjs +++ b/app/assets/javascripts/discourse/app/components/header.gjs @@ -255,11 +255,14 @@ export default class GlimmerHeader extends Component { @sidebarEnabled={{@sidebarEnabled}} @toggleNavigationMenu={{this.toggleNavigationMenu}} @showSidebar={{@showSidebar}} + @topicInfo={{@topicInfo}} + @topicInfoVisible={{@topicInfoVisible}} > {{#each (headerButtons.resolve) as |entry|}} {{#if (and (eq entry.key "auth") (not this.currentUser))}} diff --git a/app/assets/javascripts/discourse/app/components/header/auth-buttons.gjs b/app/assets/javascripts/discourse/app/components/header/auth-buttons.gjs index fb3a576a0c7..a3d0ed15386 100644 --- a/app/assets/javascripts/discourse/app/components/header/auth-buttons.gjs +++ b/app/assets/javascripts/discourse/app/components/header/auth-buttons.gjs @@ -9,7 +9,7 @@ export default class AuthButtons extends Component { return ( this.args.canSignUp && !this.header.headerButtonsHidden.includes("signup") && - !this.header.topicInfoVisible + !this.args.topicInfoVisible ); } diff --git a/app/assets/javascripts/discourse/app/components/header/contents.gjs b/app/assets/javascripts/discourse/app/components/header/contents.gjs index e6ee1beea75..d4f79427000 100644 --- a/app/assets/javascripts/discourse/app/components/header/contents.gjs +++ b/app/assets/javascripts/discourse/app/components/header/contents.gjs @@ -29,8 +29,8 @@ export default class Contents extends Component { - + - {{#if this.header.topicInfoVisible}} - + {{#if @topicInfoVisible}} + {{else if (and this.siteSettings.bootstrap_mode_enabled @@ -77,8 +77,8 @@ export default class Contents extends Component { diff --git a/app/assets/javascripts/discourse/app/components/header/topic/info.gjs b/app/assets/javascripts/discourse/app/components/header/topic/info.gjs index 0029a976533..b10dbeb77db 100644 --- a/app/assets/javascripts/discourse/app/components/header/topic/info.gjs +++ b/app/assets/javascripts/discourse/app/components/header/topic/info.gjs @@ -23,18 +23,20 @@ export default class Info extends Component { @service siteSettings; get showPM() { - return !this.args.topic.is_warning && this.args.topic.isPrivateMessage; + return ( + !this.args.topicInfo.is_warning && this.args.topicInfo.isPrivateMessage + ); } get totalParticipants() { return ( - (this.args.topic.details.allowed_users?.length || 0) + - (this.args.topic.allowed_groups?.length || 0) + (this.args.topicInfo.details.allowed_users?.length || 0) + + (this.args.topicInfo.allowed_groups?.length || 0) ); } get maxExtraItems() { - return this.args.topic.tags?.length > 0 ? 5 : 10; + return this.args.topicInfo.tags?.length > 0 ? 5 : 10; } get twoRows() { @@ -46,8 +48,8 @@ export default class Info extends Component { } get tags() { - if (this.args.topic.tags) { - return renderTags(this.args.topic); + if (this.args.topicInfo.tags) { + return renderTags(this.args.topicInfo); } } @@ -57,14 +59,14 @@ export default class Info extends Component { get participants() { const participants = [ - ...this.args.topic.details.allowed_users, - ...this.args.topic.details.allowed_groups, + ...this.args.topicInfo.details.allowed_users, + ...this.args.topicInfo.details.allowed_groups, ]; return participants.slice(0, this.maxExtraItems); } get pmHref() { - return this.currentUser.pmPath(this.args.topic); + return this.currentUser.pmPath(this.args.topicInfo); } @action @@ -74,8 +76,8 @@ export default class Info extends Component { } e.preventDefault(); - if (this.args.topic) { - DiscourseURL.routeTo(this.args.topic.firstPostUrl, { + if (this.args.topicInfo) { + DiscourseURL.routeTo(this.args.topicInfo.firstPostUrl, { keepFilter: true, }); } @@ -87,7 +89,7 @@ export default class Info extends Component { >
@@ -102,56 +104,59 @@ export default class Info extends Component { {{/if}} - {{#if (and @topic.fancyTitle @topic.url)}} - + {{#if (and @topicInfo.fancyTitle @topicInfo.url)}} + - {{htmlSafe @topic.fancyTitle}} + {{htmlSafe @topicInfo.fancyTitle}} {{/if}} - {{#if (or @topic.details.loaded @topic.category)}} + {{#if (or @topicInfo.details.loaded @topicInfo.category)}} {{#if (and - @topic.category + @topicInfo.category (or - (not @topic.category.isUncategorizedCategory) + (not @topicInfo.category.isUncategorizedCategory) (not this.siteSettings.suppress_uncategorized_badge) ) ) }}
- {{#if @topic.category.parentCategory}} + {{#if @topicInfo.category.parentCategory}} {{#if (and - @topic.category.parentCategory.parentCategory + @topicInfo.category.parentCategory.parentCategory this.site.desktopView ) }} {{categoryLink - @topic.category.parentCategory.parentCategory + @topicInfo.category.parentCategory.parentCategory }} {{/if}} {{categoryLink - @topic.category.parentCategory + @topicInfo.category.parentCategory (hash hideParent="true") }} {{/if}} - {{categoryLink @topic.category}} + {{categoryLink @topicInfo.category}}
{{/if}} @@ -172,8 +177,8 @@ export default class Info extends Component { +{{this.remainingParticipantCount}} @@ -181,7 +186,7 @@ export default class Info extends Component {
{{/if}} {{#if this.siteSettings.topic_featured_link_enabled}} - + {{/if}}
{{/if}} @@ -189,7 +194,7 @@ export default class Info extends Component { diff --git a/app/assets/javascripts/discourse/app/components/header/topic/status.gjs b/app/assets/javascripts/discourse/app/components/header/topic/status.gjs index 6d29d1e1679..662f135bf12 100644 --- a/app/assets/javascripts/discourse/app/components/header/topic/status.gjs +++ b/app/assets/javascripts/discourse/app/components/header/topic/status.gjs @@ -17,7 +17,7 @@ export default class Status extends Component { get topicStatuses() { let topicStatuses = []; - TopicStatusIcons.render(this.args.topic, (name, key) => { + TopicStatusIcons.render(this.args.topicInfo, (name, key) => { const iconArgs = { class: key === "unpinned" ? "unpinned" : null }; const statusIcon = { name, iconArgs }; @@ -42,7 +42,7 @@ export default class Status extends Component { } const parent = e.target.closest(".topic-statuses"); if (parent?.querySelector(".pin-toggle-button")?.contains(e.target)) { - this.args.topic.togglePinnedForUser(); + this.args.topicInfo.togglePinnedForUser(); } } diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.gjs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.gjs new file mode 100644 index 00000000000..a90b0a6e0db --- /dev/null +++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.gjs @@ -0,0 +1,29 @@ +import Component from "@glimmer/component"; +import { inject as controller } from "@ember/controller"; +import Header from "discourse/components/header"; +import StyleguideExample from "../../styleguide-example"; + +export default class SiteHeaderStyleguideExample extends Component { + @controller application; + + get sidebarEnabled() { + return this.application.sidebarEnabled; + } + + +} diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.hbs b/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.hbs deleted file mode 100644 index 6c6f1b75217..00000000000 --- a/plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.hbs +++ /dev/null @@ -1,19 +0,0 @@ - -
-
-
-
- - - -
- -
-
-
-
-
- \ No newline at end of file diff --git a/plugins/styleguide/assets/stylesheets/styleguide.scss b/plugins/styleguide/assets/stylesheets/styleguide.scss index cc799b631c1..cd2952d2c18 100644 --- a/plugins/styleguide/assets/stylesheets/styleguide.scss +++ b/plugins/styleguide/assets/stylesheets/styleguide.scss @@ -268,3 +268,10 @@ } } } + +.styleguide-example { + .d-header-wrap { + position: relative; + z-index: 0; + } +}