Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: Use the glimmer header in the Styleguide (#28427)

This commit is contained in:
Sérgio Saquetim 2024-08-20 19:44:26 -03:00 committed by GitHub
parent eb0b2c9308
commit 649cbad216
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 92 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs
View File

@ -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}}
/>
</div>
</template>

5
app/assets/javascripts/discourse/app/components/header.gjs
View File

@ -255,11 +255,14 @@ export default class GlimmerHeader extends Component {
@sidebarEnabled={{@sidebarEnabled}}
@toggleNavigationMenu={{this.toggleNavigationMenu}}
@showSidebar={{@showSidebar}}
@topicInfo={{@topicInfo}}
@topicInfoVisible={{@topicInfoVisible}}
>
<span class="header-buttons">
{{#each (headerButtons.resolve) as |entry|}}
{{#if (and (eq entry.key "auth") (not this.currentUser))}}
<AuthButtons
@topicInfoVisible={{@topicInfoVisible}}
@showCreateAccount={{@showCreateAccount}}
@showLogin={{@showLogin}}
@canSignUp={{@canSignUp}}
@ -312,7 +315,7 @@ export default class GlimmerHeader extends Component {
</div>
<PluginOutlet
@name="after-header"
@outletArgs={{hash minimized=(this.header.topicInfoVisible)}}
@outletArgs={{hash minimized=(@topicInfoVisible)}}
/>
</header>
</template>

2
app/assets/javascripts/discourse/app/components/header/auth-buttons.gjs
View File

@ -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
);
}

22
app/assets/javascripts/discourse/app/components/header/contents.gjs
View File

@ -29,8 +29,8 @@ export default class Contents extends Component {
<PluginOutlet
@name="header-contents__before"
@outletArgs={{hash
topicInfo=this.header.topicInfo
topicInfoVisible=this.header.topicInfoVisible
topicInfo=@topicInfo
topicInfoVisible=@topicInfoVisible
}}
@deprecatedArgs={{hash
topic=(deprecatedOutletArgument
@ -55,12 +55,12 @@ export default class Contents extends Component {
<div class="home-logo-wrapper-outlet">
<PluginOutlet @name="home-logo-wrapper">
<HomeLogo @minimized={{this.header.topicInfoVisible}} />
<HomeLogo @minimized={{@topicInfoVisible}} />
</PluginOutlet>
</div>
{{#if this.header.topicInfoVisible}}
<TopicInfo @topic={{this.header.topicInfo}} />
{{#if @topicInfoVisible}}
<TopicInfo @topicInfo={{@topicInfo}} />
{{else if
(and
this.siteSettings.bootstrap_mode_enabled
@ -77,8 +77,8 @@ export default class Contents extends Component {
<PluginOutlet
@name="before-header-panel"
@outletArgs={{hash
topicInfo=this.header.topicInfo
topicInfoVisible=this.header.topicInfoVisible
topicInfo=@topicInfo
topicInfoVisible=@topicInfoVisible
}}
@deprecatedArgs={{hash
topic=(deprecatedOutletArgument
@ -97,8 +97,8 @@ export default class Contents extends Component {
<PluginOutlet
@name="after-header-panel"
@outletArgs={{hash
topicInfo=this.header.topicInfo
topicInfoVisible=this.header.topicInfoVisible
topicInfo=@topicInfo
topicInfoVisible=@topicInfoVisible
}}
@deprecatedArgs={{hash
topic=(deprecatedOutletArgument
@ -115,8 +115,8 @@ export default class Contents extends Component {
<PluginOutlet
@name="header-contents__after"
@outletArgs={{hash
topicInfo=this.header.topicInfo
topicInfoVisible=this.header.topicInfoVisible
topicInfo=@topicInfo
topicInfoVisible=@topicInfoVisible
}}
@deprecatedArgs={{hash
topic=(deprecatedOutletArgument

5
app/assets/javascripts/discourse/app/components/header/topic/featured-link.gjs
View File

@ -1,13 +1,10 @@
import Component from "@glimmer/component";
import { service } from "@ember/service";
import { extractLinkMeta } from "discourse/lib/render-topic-featured-link";
import icon from "discourse-common/helpers/d-icon";
export default class FeaturedLink extends Component {
@service header;
get meta() {
return extractLinkMeta(this.header.topicInfo);
return extractLinkMeta(this.args.topicInfo);
}
<template>

65
app/assets/javascripts/discourse/app/components/header/topic/info.gjs
View File

@ -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 {
>
<PluginOutlet
@name="header-topic-info__before"
@outletArgs={{hash topic=@topic}}
@outletArgs={{hash topic=@topicInfo}}
/>
<div class={{concatClass (if this.twoRows "two-rows") "extra-info"}}>
<div class="title-wrapper">
@ -102,56 +104,59 @@ export default class Info extends Component {
</a>
{{/if}}
{{#if (and @topic.fancyTitle @topic.url)}}
<Status @topic={{@topic}} @disableActions={{@disableActions}} />
{{#if (and @topicInfo.fancyTitle @topicInfo.url)}}
<Status
@topicInfo={{@topicInfo}}
@disableActions={{@disableActions}}
/>
<a
class="topic-link"
{{on "click" this.jumpToTopPost}}
href={{@topic.url}}
data-topic-id={{@topic.id}}
href={{@topicInfo.url}}
data-topic-id={{@topicInfo.id}}
>
<span>{{htmlSafe @topic.fancyTitle}}</span>
<span>{{htmlSafe @topicInfo.fancyTitle}}</span>
</a>
<span class="header-topic-title-suffix">
<PluginOutlet
@name="header-topic-title-suffix"
@outletArgs={{hash topic=@topic}}
@outletArgs={{hash topic=@topicInfo}}
/>
</span>
{{/if}}
</h1>
{{#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)
)
)
}}
<div class="categories-wrapper">
{{#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}}
</div>
{{/if}}
@ -172,8 +177,8 @@ export default class Info extends Component {
<a
class="more-participants"
{{on "click" this.jumpToTopPost}}
href={{@topic.url}}
data-topic-id={{@topic.id}}
href={{@topicInfo.url}}
data-topic-id={{@topicInfo.id}}
>
+{{this.remainingParticipantCount}}
</a>
@ -181,7 +186,7 @@ export default class Info extends Component {
</div>
{{/if}}
{{#if this.siteSettings.topic_featured_link_enabled}}
<FeaturedLink />
<FeaturedLink @topicInfo={{@topicInfo}} />
{{/if}}
</div>
{{/if}}
@ -189,7 +194,7 @@ export default class Info extends Component {
</div>
<PluginOutlet
@name="header-topic-info__after"
@outletArgs={{hash topic=@topic}}
@outletArgs={{hash topic=@topicInfo}}
/>
</div>
</template>

4
app/assets/javascripts/discourse/app/components/header/topic/status.gjs
View File

@ -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();
}
}

29
plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.gjs Normal file
View File

@ -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;
}
<template>
<StyleguideExample @title="site header">
<div inert class="d-header-wrap">
<Header @sidebarEnabled={{this.sidebarEnabled}} />
</div>
</StyleguideExample>
<StyleguideExample @title="site header - in topic - scrolled">
<div inert class="d-header-wrap">
<Header
@sidebarEnabled={{this.sidebarEnabled}}
@topicInfo={{@dummy.topic}}
@topicInfoVisible={{true}}
/>
</div>
</StyleguideExample>
</template>
}

19
plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/site-header.hbs
View File

@ -1,19 +0,0 @@
<StyleguideExample @title="site header - in topic - scrolled">
<div class="d-header-wrap">
<header class="d-header">
<div class="wrap">
<div class="contents">
<MountWidget @widget="home-logo" @args={{hash minimized=true}} />
<MountWidget @widget="header-topic-info" @args={{@dummy}} />
<div class="panel clearfix">
<MountWidget
@widget="header-icons"
@args={{hash user=@dummy.user}}
/>
</div>
</div>
</div>
</header>
</div>
</StyleguideExample>

7
plugins/styleguide/assets/stylesheets/styleguide.scss
View File

@ -268,3 +268,10 @@
}
}
}
.styleguide-example {
.d-header-wrap {
position: relative;
z-index: 0;
}
}