IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 10:20:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Move About and FAQ links into secondary section in More... dropdown (#17793)

Browse Source 
This commit does not change any behaviour of the links and is simply
changing the positions of the links being displayed.
This commit is contained in:
Alan Guo Xiang Tan 2022-08-04 13:41:08 +08:00 committed by GitHub
parent fc421ca41e
commit e09fd7cde2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/assets/javascripts/discourse/app/components/sidebar/community-section.js
View File

@ -24,25 +24,21 @@ const MAIN_SECTION_LINKS = [
const ADMIN_MAIN_SECTION_LINKS = [AdminSectionLink];
const MORE_SECTION_LINKS = [
GroupsSectionLink,
UsersSectionLink,
AboutSectionLink,
FAQSectionLink,
];
const MORE_SECTION_LINKS = [GroupsSectionLink, UsersSectionLink];
const MORE_SECONDARY_SECTION_LINKS = [AboutSectionLink, FAQSectionLink];
export default class SidebarCommunitySection extends GlimmerComponent {
@service router;
moreSectionLinks = [...MORE_SECTION_LINKS, ...customSectionLinks].map(
(sectionLinkClass) => {
return new sectionLinkClass({
topicTrackingState: this.topicTrackingState,
currentUser: this.currentUser,
appEvents: this.appEvents,
router: this.router,
siteSettings: this.siteSettings,
});
return this.#initializeSectionLink(sectionLinkClass);
}
);
moreSecondarySectionLinks = MORE_SECONDARY_SECTION_LINKS.map(
(sectionLinkClass) => {
return this.#initializeSectionLink(sectionLinkClass);
}
);
@ -51,11 +47,7 @@ export default class SidebarCommunitySection extends GlimmerComponent {
: [...MAIN_SECTION_LINKS];
sectionLinks = this.#mainSectionLinks.map((sectionLinkClass) => {
return new sectionLinkClass({
topicTrackingState: this.topicTrackingState,
currentUser: this.currentUser,
appEvents: this.appEvents,
});
return this.#initializeSectionLink(sectionLinkClass);
});
willDestroy() {
@ -80,4 +72,14 @@ export default class SidebarCommunitySection extends GlimmerComponent {
getOwner(this).lookup("controller:composer").open(composerArgs);
});
}
#initializeSectionLink(sectionLinkClass) {
return new sectionLinkClass({
topicTrackingState: this.topicTrackingState,
currentUser: this.currentUser,
appEvents: this.appEvents,
router: this.router,
siteSettings: this.siteSettings,
});
}
}

18
app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js
View File

@ -24,14 +24,26 @@ export default class SidebarMoreSectionLinks extends GlimmerComponent {
get sectionLinks() {
if (this.activeSectionLink) {
return this.args.sectionLinks.filter((sectionLink) => {
return sectionLink.name !== this.activeSectionLink.name;
});
return this.#filterActiveSectionLink(this.args.sectionLinks);
} else {
return this.args.sectionLinks;
}
}
get secondarySectionLinks() {
if (this.activeSectionLink) {
return this.#filterActiveSectionLink(this.args.secondarySectionLinks);
} else {
return this.args.secondarySectionLinks;
}
}
#filterActiveSectionLink(sectionLinks) {
return sectionLinks.filter((sectionLink) => {
return sectionLink.name !== this.activeSectionLink.name;
});
}
@bind
closeDetails(event) {
if (this.shouldDisplaySectionLinks) {

2
app/assets/javascripts/discourse/app/templates/components/sidebar/community-section.hbs
View File

@ -22,5 +22,5 @@
@models={{sectionLink.models}} />
{{/each}}
<Sidebar::MoreSectionLinks @sectionLinks={{this.moreSectionLinks}} />
<Sidebar::MoreSectionLinks @sectionLinks={{this.moreSectionLinks}} @secondarySectionLinks={{this.moreSecondarySectionLinks}} />
</Sidebar::Section>

11
app/assets/javascripts/discourse/app/templates/components/sidebar/more-section-link.hbs Normal file
View File

@ -0,0 +1,11 @@
<Sidebar::SectionLink
@linkName={{@sectionLink.name}}
@route={{@sectionLink.route}}
@href={{@sectionLink.href}}
@query={{@sectionLink.query}}
@title={{@sectionLink.title}}
@content={{@sectionLink.text}}
@currentWhen={{@sectionLink.currentWhen}}
@badgeText={{@sectionLink.badgeText}}
@model={{@sectionLink.model}}
@models={{@sectionLink.models}} />

37
app/assets/javascripts/discourse/app/templates/components/sidebar/more-section-links.hbs
View File

@ -1,14 +1,5 @@
{{#if this.activeSectionLink}}
<Sidebar::SectionLink
@linkName={{this.activeSectionLink.name}}
@route={{this.activeSectionLink.route}}
@query={{this.activeSectionLink.query}}
@title={{this.activeSectionLink.title}}
@content={{this.activeSectionLink.text}}
@currentWhen={{this.activeSectionLink.currentWhen}}
@badgeText={{this.activeSectionLink.badgeText}}
@model={{this.activeSectionLink.model}}
@models={{this.activeSectionLink.models}} />
<Sidebar::MoreSectionLink @sectionLink={{this.activeSectionLink}} />
{{/if}}
<details class="sidebar-more-section-links-details" {{on "toggle" this.toggleSectionLinks}}>
@ -21,19 +12,19 @@
{{did-insert this.registerClickListener}}
{{will-destroy this.unregisterClickListener}} >
{{#each this.sectionLinks as |sectionLink|}}
<Sidebar::SectionLink
@linkName={{sectionLink.name}}
@route={{sectionLink.route}}
@href={{sectionLink.href}}
@query={{sectionLink.query}}
@title={{sectionLink.title}}
@content={{sectionLink.text}}
@currentWhen={{sectionLink.currentWhen}}
@badgeText={{sectionLink.badgeText}}
@model={{sectionLink.model}}
@models={{sectionLink.models}} />
{{/each}}
<div class="sidebar-more-section-links-details-content-main">
{{#each this.sectionLinks as |sectionLink|}}
<Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
{{/each}}
</div>
{{#if (gt this.secondarySectionLinks.length 0)}}
<div class="sidebar-more-section-links-details-content-secondary">
{{#each this.secondarySectionLinks as |sectionLink|}}
<Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
{{/each}}
</div>
{{/if}}
</div>
{{/if}}
</details>

4
app/assets/stylesheets/common/base/sidebar-more-section-links.scss
View File

@ -36,4 +36,8 @@
margin-left: none;
}
}
.sidebar-more-section-links-details-content-secondary {
border-top: 1.5px solid var(--primary-low);
}
}