github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-25 18:44:28 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: card section toggle (#31644)

Browse Source 
Demo

https://github.com/user-attachments/assets/17e2b6d9-ba49-4312-85d9-6ff2ccad2290
This commit is contained in:
Krzysztof Kotlarek 2025-03-06 10:31:29 +11:00 committed by GitHub
parent f6860dcb92
commit 6882453ab7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 45 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/assets/javascripts/admin/addon/components/admin-config-area-card-section.gjs
View File

@ -1,7 +1,8 @@
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { on } from "@ember/modifier";
import { action } from "@ember/object";
import DButton from "discourse/components/d-button";
import concatClass from "discourse/helpers/concat-class";
import icon from "discourse/helpers/d-icon";
export default class AdminConfigAreaCardSection extends Component {
@ -13,21 +14,25 @@ export default class AdminConfigAreaCardSection extends Component {
@action
toggleSectionDisplay() {
if (!this.args.collapsable) {
return;
}
this.collapsed = !this.collapsed;
}
<template>
<section class="admin-config-area-card-section" ...attributes>
<div class="admin-config-area-card-section__header-wrapper">
<div
class={{concatClass
"admin-config-area-card-section__header-wrapper"
(if @collapsable "collapsable")
}}
role="button"
{{on "click" this.toggleSectionDisplay}}
>
<h4 class="admin-config-area-card-section__title">{{@heading}}</h4>
{{#if @collapsable}}
<DButton
@title="sidebar.toggle_section"
@action={{this.toggleSectionDisplay}}
class="admin-config-area-card-section__toggle-button btn-transparent"
>
{{icon this.headerCaretIcon}}
</DButton>
{{icon this.headerCaretIcon}}
{{/if}}
</div>
{{#unless this.collapsed}}

30
app/assets/javascripts/discourse/tests/integration/components/admin-config-area-card-section-test.gjs
View File

@ -8,7 +8,7 @@ module(
function (hooks) {
setupRenderingTest(hooks);
test("renders admin config area card section without toggle button", async function (assert) {
test("renders admin config area card section without toggle icon", async function (assert) {
await render(
<template>
<AdminConfigAreaCardSection @heading="test heading"><:content
@ -21,11 +21,14 @@ module(
.hasText("test heading");
assert.dom(".admin-config-area-card-section__content").exists();
assert
.dom(".admin-config-area-card-section__toggle-button")
.dom(".admin-config-area-card-section__header-wrapper.collapsable")
.doesNotExist();
assert
.dom(".admin-config-area-card-section__header-wrapper svg")
.doesNotExist();
});
test("renders admin config area card section with toggle button", async function (assert) {
test("renders admin config area card section with toggle icon", async function (assert) {
await render(
<template>
<AdminConfigAreaCardSection
@ -39,16 +42,25 @@ module(
.dom(".admin-config-area-card-section__title")
.hasText("test heading");
assert.dom(".admin-config-area-card-section__content").hasText("test");
assert.dom(".admin-config-area-card-section__toggle-button").exists();
assert
.dom(".admin-config-area-card-section__header-wrapper svg")
.exists();
assert
.dom(".admin-config-area-card-section__header-wrapper.collapsable")
.exists();
await click(".admin-config-area-card-section__toggle-button");
await click(
".admin-config-area-card-section__header-wrapper.collapsable"
);
assert.dom(".admin-config-area-card-section__content").doesNotExist();
await click(".admin-config-area-card-section__toggle-button");
await click(
".admin-config-area-card-section__header-wrapper.collapsable"
);
assert.dom(".admin-config-area-card-section__content").exists();
});
test("renders admin config area card section with toggle button and collapsed by default", async function (assert) {
test("renders admin config area card section with toggle icon and collapsed by default", async function (assert) {
await render(
<template>
<AdminConfigAreaCardSection
@ -60,7 +72,9 @@ module(
);
assert.dom(".admin-config-area-card-section__title").exists();
assert.dom(".admin-config-area-card-section__toggle-button").exists();
assert
.dom(".admin-config-area-card-section__header-wrapper svg")
.exists();
assert.dom(".admin-config-area-card-section__content").doesNotExist();
});
}

8
app/assets/stylesheets/admin/admin_config_area.scss
View File

@ -129,8 +129,9 @@
flex-wrap: nowrap;
gap: var(--space-4);
flex-direction: column;
width: 100%;
width: calc(100% - 1em);
border: 1px solid var(--primary-low);
padding: 0.5em;
@media (max-width: $mobile-breakpoint) {
flex-direction: column;
@ -140,7 +141,10 @@
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.5em;
&.collapsable {
cursor: pointer;
}
}
&__title {

10
spec/system/page_objects/components/admin_branding_logo_form.rb
View File

@ -32,19 +32,15 @@ module PageObjects
end
def expand_mobile_section
find(
".admin-logo-form__mobile-section .admin-config-area-card-section__toggle-button",
).click
find(".admin-logo-form__mobile-section .collapsable").click
end
def expand_email_section
find(".admin-logo-form__email-section .admin-config-area-card-section__toggle-button").click
find(".admin-logo-form__email-section .collapsable").click
end
def expand_social_media_section
find(
".admin-logo-form__social-media-section .admin-config-area-card-section__toggle-button",
).click
find(".admin-logo-form__social-media-section .collapsable").click
end
def submit