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

DEV: Use button for sidebar section header 

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}} {{#if @collapsable}}
<span <DButton
role="button" @title="sidebar.toggle_section"
title={{i18n "sidebar.toggle_section"}} @class="sidebar-section-header sidebar-section-header-collapsable btn-flat"
class="sidebar-section-header sidebar-section-header-collapsable" @action={{@toggleSectionDisplay}} >
{{on "click" @toggleSectionDisplay}}
>
{{yield}} {{yield}}
</span> </DButton>
{{else}} {{else}}
<span class="sidebar-section-header" title={{i18n "sidebar.toggle_section"}}> <span class="sidebar-section-header" title={{i18n "sidebar.toggle_section"}}>
{{yield}} {{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( assert.strictEqual(
query( query(
".sidebar-section-test-chat-channels .sidebar-section-header" ".sidebar-section-test-chat-channels .sidebar-section-header-text"
).textContent.trim(), ).textContent.trim(),
"chat channels text", "chat channels text",
"displays header with correct text" "displays header with correct text"
@ -381,7 +381,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
assert.strictEqual( assert.strictEqual(
query( query(
".sidebar-section-test-chat-channels .sidebar-section-header" ".sidebar-section-test-chat-channels .sidebar-section-header-text"
).textContent.trim(), ).textContent.trim(),
"chat channels text", "chat channels text",
"displays header with correct 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 { .sidebar-section-header-wrapper {
display: flex; display: flex;
text-transform: uppercase;
font-weight: bold;
align-items: stretch; align-items: stretch;
box-sizing: border-box; box-sizing: border-box;
@ -31,12 +29,15 @@
.sidebar-section-header { .sidebar-section-header {
@include ellipsis; @include ellipsis;
flex: 1 1 auto; flex: 1 1 auto;
text-transform: uppercase;
font-weight: bold;
font-size: var(--font-1); font-size: var(--font-1);
color: var(--primary); color: var(--primary);
align-items: center; align-items: center;
&.sidebar-section-header-collapsable { &.sidebar-section-header-collapsable {
cursor: pointer; justify-content: flex-start;
padding: 0;
} }
} }