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

DEV: Use button for sidebar section header

Browse Source 
Buttons can be focused and action triggered via the enter key compared
to a span.
This commit is contained in:
Alan Guo Xiang Tan 2022-08-18 20:14:44 +08:00
parent 21d5904d7c
commit 2d1e50911b
3 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs
View File

@ -1,12 +1,11 @@
{{#if @collapsable}}
<span
role="button"
title={{i18n "sidebar.toggle_section"}}
class="sidebar-section-header sidebar-section-header-collapsable"
{{on "click" @toggleSectionDisplay}}
>
<DButton
@title="sidebar.toggle_section"
@class="sidebar-section-header sidebar-section-header-collapsable btn-flat"
@action={{@toggleSectionDisplay}} >
{{yield}}
</span>
</DButton>
{{else}}
<span class="sidebar-section-header" title={{i18n "sidebar.toggle_section"}}>
{{yield}}

4
app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
View File

@ -202,7 +202,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
assert.strictEqual(
query(
".sidebar-section-test-chat-channels .sidebar-section-header"
".sidebar-section-test-chat-channels .sidebar-section-header-text"
).textContent.trim(),
"chat channels text",
"displays header with correct text"
@ -381,7 +381,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
assert.strictEqual(
query(
".sidebar-section-test-chat-channels .sidebar-section-header"
".sidebar-section-test-chat-channels .sidebar-section-header-text"
).textContent.trim(),
"chat channels text",
"displays header with correct text"

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

@ -3,8 +3,6 @@
.sidebar-section-header-wrapper {
display: flex;
text-transform: uppercase;
font-weight: bold;
align-items: stretch;
box-sizing: border-box;
@ -31,12 +29,15 @@
.sidebar-section-header {
@include ellipsis;
flex: 1 1 auto;
text-transform: uppercase;
font-weight: bold;
font-size: var(--font-1);
color: var(--primary);
align-items: center;
&.sidebar-section-header-collapsable {
cursor: pointer;
justify-content: flex-start;
padding: 0;
}
}