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

DEV: Remove default button classes from sidebar buttons (#26893)

Browse Source
This commit is contained in:
Kris 2024-05-07 09:20:30 -04:00 committed by GitHub
parent 26c8eab1f3
commit 01e725a225
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 28 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,13 +3,18 @@
{{/if}}
<li class="sidebar-section-link-wrapper">
<DButton
@icon="ellipsis-v"
@action={{this.toggleSectionLinks}}
@label="sidebar.more"
class="btn-flat sidebar-more-section-links-details-summary"
<button
class="sidebar-section-link sidebar-row sidebar-more-section-links-details-summary --link-button"
aria-expanded={{if this.open "true" "false"}}
/>
{{on "click" this.toggleSectionLinks}}
>
<span class="sidebar-section-link-prefix icon">
{{d-icon "ellipsis-v"}}
</span>
<span class="sidebar-section-link-content-text">
{{i18n "sidebar.more"}}
</span>
</button>
</li>
{{#if this.open}}
@ -33,6 +38,7 @@
@action={{@moreButtonAction}}
@icon={{@moreButtonIcon}}
@text={{@moreButtonText}}
@name="customize"
/>
</div>
{{/if}}

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

@ -47,10 +47,14 @@ export default class SidebarMoreSectionLinks extends Component {
@bind
closeDetails(event) {
if (event.target.closest(".sidebar-more-section-links-details-summary")) {
return;
}
if (this.open) {
const isLinkClick =
event.target.className.includes("sidebar-section-link") ||
event.target.className.includes("sidebar-section-link-button");
event.target.className.includes("--link-button");
if (isLinkClick || this.#isOutsideDetailsClick(event)) {
this.open = false;
@ -69,7 +73,8 @@ export default class SidebarMoreSectionLinks extends Component {
}
@action
toggleSectionLinks() {
toggleSectionLinks(event) {
event.stopPropagation();
this.open = !this.open;
}

2
app/assets/javascripts/discourse/app/components/sidebar/section-link-button.hbs
View File

@ -1,7 +1,7 @@
<div class="sidebar-section-link-wrapper">
<button
type="button"
class="btn btn-flat sidebar-section-link-button sidebar-row"
class="sidebar-section-link sidebar-row --link-button"
{{on "click" @action}}
>
<span class="sidebar-section-link-prefix icon">

2
app/assets/javascripts/discourse/app/widgets/header.js
View File

@ -357,7 +357,6 @@ createWidget("hamburger-dropdown-wrapper", {
click(event) {
if (
event.target.closest(".sidebar-section-header-button") ||
event.target.closest(".sidebar-section-link-button") ||
event.target.closest(".sidebar-section-link")
) {
this.sendWidgetAction("toggleHamburger");
@ -649,7 +648,6 @@ export default createWidget("header", {
} else {
this.state.hamburgerVisible = !this.state.hamburgerVisible;
this.toggleBodyScrolling(this.state.hamburgerVisible);
schedule("afterRender", () => {
// Remove focus from hamburger toggle button
document.querySelector("#toggle-hamburger-menu")?.blur();

1
app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js
View File

@ -6,6 +6,7 @@ export default createWidget("sidebar-toggle", {
html() {
const attrs = this.attrs;
return [
this.attach("button", {
title: "sidebar.title",

4
app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js
View File

@ -295,7 +295,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.strictEqual(
query(
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary .sidebar-section-link-content-text"
).textContent.trim(),
I18n.t("sidebar.more"),
"displays the right count as users link is currently active"
@ -404,7 +404,7 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) {
assert.strictEqual(
query(
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary"
".sidebar-section[data-section-name='community'] .sidebar-more-section-links-details-summary .sidebar-section-link-content-text"
).textContent.trim(),
I18n.t("sidebar.more"),
"displays the right count as groups link is currently active"

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

@ -1,30 +1,3 @@
.btn-flat.sidebar-more-section-links-details-summary {
&:focus-within,
&:active,
&:hover {
background: var(--d-sidebar-highlight-background);
svg.d-icon {
color: var(--d-sidebar-highlight-color);
}
}
height: var(--d-sidebar-row-height);
color: var(--d-sidebar-link-color);
display: flex;
list-style: none;
box-sizing: border-box;
width: 100%;
padding: 0 var(--d-sidebar-row-horizontal-padding);
justify-content: left;
.d-icon {
width: var(--d-sidebar-section-link-prefix-width);
margin-right: var(--d-sidebar-section-link-prefix-margin-right);
color: var(--d-sidebar-link-icon-color);
font-size: var(--font-down-1);
}
}
.sidebar-more-section-links-details-content {
background-color: var(--d-sidebar-background);
transition: background-color 0.25s;

21
app/assets/stylesheets/common/base/sidebar-section-link.scss
View File

@ -83,24 +83,9 @@
}
}
.sidebar-section-link-button {
color: var(--d-sidebar-link-color);
background-color: var(--secondary);
width: 100%;
justify-content: flex-start;
&:hover {
color: var(--d-sidebar-link-color);
background-color: var(--primary-low);
.d-icon {
color: var(--d-sidebar-link-icon-color);
}
}
.d-icon {
color: var(--d-sidebar-link-icon-color);
}
.--link-button {
border: none;
background: inherit;
}
.sidebar-section-link[data-link-name="personal-messages-sent"],

2
spec/system/homepage_spec.rb
View File

@ -83,7 +83,7 @@ describe "Homepage", type: :system do
expect(page).to have_css(".new-home", text: "Hi friends!")
expect(page).to have_no_css(".list-container")
find("#sidebar-section-content-community .sidebar-section-link:first-child").click
find("#sidebar-section-content-community li:first-child").click
expect(page).to have_css(".list-container")
find("#site-logo").click

2
spec/system/page_objects/components/navigation_menu/sidebar.rb
View File

@ -18,7 +18,7 @@ module PageObjects
end
def has_no_customize_community_section_button?
community_section.has_no_button?(class: "sidebar-section-link-button")
community_section.has_no_button?('[data-list-item-name="customize"]')
end
def click_customize_community_section_button