Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-28 08:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

UX: chat channel info area > classname changes (#24954)

Browse Source
This commit is contained in:
chapoi 2023-12-18 23:09:47 +02:00 committed by GitHub
parent 608ce620fb
commit dce5e811ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 49 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs
View File

@ -130,19 +130,19 @@ export default class ChatRouteChannelInfoMembers extends Component {
@onCancel={{this.hideAddMember}} @onCancel={{this.hideAddMember}}
/> />
{{else}} {{else}}
<div class="chat-channel-members"> <div class="c-channel-members">
<DcFilterInput <DcFilterInput
{{autoFocus}} {{autoFocus}}
@filterAction={{this.mutFilter}} @filterAction={{this.mutFilter}}
@icons={{hash right="search"}} @icons={{hash right="search"}}
@containerClass="chat-channel-members__filter" @containerClass="c-channel-members__filter"
placeholder={{this.filterPlaceholder}} placeholder={{this.filterPlaceholder}}
/> />
<ul class="chat-channel-members__list" {{this.fill}}> <ul class="c-channel-members__list" {{this.fill}}>
{{#if @channel.chatable.group}} {{#if @channel.chatable.group}}
<li <li
class="chat-channel-members__list-item -add-member" class="c-channel-members__list-item -add-member"
role="button" role="button"
{{on "click" this.addMember}} {{on "click" this.addMember}}
{{this.onEnter this.addMember}} {{this.onEnter this.addMember}}
@ -154,7 +154,7 @@ export default class ChatRouteChannelInfoMembers extends Component {
{{/if}} {{/if}}
{{#each this.members as |membership|}} {{#each this.members as |membership|}}
<li <li
class="chat-channel-members__list-item -member" class="c-channel-members__list-item -member"
{{on "click" (fn this.openMemberCard membership.user)}} {{on "click" (fn this.openMemberCard membership.user)}}
{{this.onEnter (fn this.openMemberCard membership.user)}} {{this.onEnter (fn this.openMemberCard membership.user)}}
tabindex="0" tabindex="0"
@ -168,7 +168,7 @@ export default class ChatRouteChannelInfoMembers extends Component {
{{else}} {{else}}
{{#if this.noResults}} {{#if this.noResults}}
<li <li
class="chat-channel-members__list-item -no-results alert alert-info" class="c-channel-members__list-item -no-results alert alert-info"
> >
{{this.noMembershipsFoundLabel}} {{this.noMembershipsFoundLabel}}
</li> </li>

20
plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs
View File

@ -327,17 +327,17 @@ export default class ChatRouteChannelInfoSettings extends Component {
} }
<template> <template>
<div class="chat-channel-settings"> <div class="c-channel-settings">
<ChatForm as |form|> <ChatForm as |form|>
<form.section @title={{this.titleSectionTitle}} as |section|> <form.section @title={{this.titleSectionTitle}} as |section|>
<section.row> <section.row>
<:default> <:default>
<div class="chat-channel-settings__name"> <div class="c-channel-settings__name">
{{replaceEmoji @channel.title}} {{replaceEmoji @channel.title}}
</div> </div>
{{#if @channel.isCategoryChannel}} {{#if @channel.isCategoryChannel}}
<div class="chat-channel-settings__slug"> <div class="c-channel-settings__slug">
<LinkTo <LinkTo
@route="chat.channel" @route="chat.channel"
@models={{@channel.routeModels}} @models={{@channel.routeModels}}
@ -405,7 +405,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
<:action> <:action>
<DToggleSwitch <DToggleSwitch
@state={{@channel.currentUserMembership.muted}} @state={{@channel.currentUserMembership.muted}}
class="chat-channel-settings__mute-switch" class="c-channel-settings__mute-switch"
{{on "click" this.onToggleMuted}} {{on "click" this.onToggleMuted}}
/> />
</:action> </:action>
@ -423,7 +423,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
"desktopNotificationLevel" "desktopNotificationLevel"
"desktop_notification_level" "desktop_notification_level"
}} }}
class="chat-channel-settings__selector chat-channel-settings__desktop-notifications-selector" class="c-channel-settings__selector c-channel-settings__desktop-notifications-selector"
/> />
</:action> </:action>
</section.row> </section.row>
@ -441,7 +441,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
"mobileNotificationLevel" "mobileNotificationLevel"
"mobile_notification_level" "mobile_notification_level"
}} }}
class="chat-channel-settings__selector chat-channel-settings__mobile-notifications-selector" class="c-channel-settings__selector c-channel-settings__mobile-notifications-selector"
/> />
</:action> </:action>
</section.row> </section.row>
@ -476,7 +476,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
<:action> <:action>
<DToggleSwitch <DToggleSwitch
@state={{@channel.autoJoinUsers}} @state={{@channel.autoJoinUsers}}
class="chat-channel-settings__auto-join-switch" class="c-channel-settings__auto-join-switch"
{{on {{on
"click" "click"
(fn this.onToggleAutoJoinUsers @channel.autoJoinUsers) (fn this.onToggleAutoJoinUsers @channel.autoJoinUsers)
@ -490,7 +490,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
<section.row @label={{this.channelWideMentionsLabel}}> <section.row @label={{this.channelWideMentionsLabel}}>
<:action> <:action>
<DToggleSwitch <DToggleSwitch
class="chat-channel-settings__channel-wide-mentions" class="c-channel-settings__channel-wide-mentions"
@state={{@channel.allowChannelWideMentions}} @state={{@channel.allowChannelWideMentions}}
{{on {{on
"click" "click"
@ -513,7 +513,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
<:action> <:action>
<DToggleSwitch <DToggleSwitch
@state={{@channel.threadingEnabled}} @state={{@channel.threadingEnabled}}
class="chat-channel-settings__threading-switch" class="c-channel-settings__threading-switch"
{{on {{on
"click" "click"
(fn (fn
@ -594,7 +594,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
</:action> </:action>
</section.row> </section.row>
{{#if @channel.chatable.group}} {{#if @channel.chatable.group}}
<div class="chat-channel-settings__leave-info"> <div class="c-channel-settings__leave-info">
{{icon "exclamation-triangle"}} {{icon "exclamation-triangle"}}
{{i18n "chat.channel_settings.leave_groupchat_info"}} {{i18n "chat.channel_settings.leave_groupchat_info"}}
</div> </div>

4
plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info.gjs
View File

@ -58,9 +58,9 @@ export default class ChatRoutesChannelInfo extends Component {
<ChatChannelStatus @channel={{@channel}} /> <ChatChannelStatus @channel={{@channel}} />
<div class="chat-channel-info"> <div class="c-channel-info">
{{#if this.showTabs}} {{#if this.showTabs}}
<nav class="chat-channel-info__nav"> <nav class="c-channel-info__nav">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li> <li>
<LinkTo <LinkTo

8
plugins/chat/assets/stylesheets/common/chat-channel-info.scss
View File

@ -1,4 +1,4 @@
.chat-channel-info { .c-channel-info {
display: flex; display: flex;
padding: 1rem; padding: 1rem;
flex-direction: column; flex-direction: column;
@ -15,7 +15,7 @@
} }
} }
.chat-channel-members__add-members { .c-channel-members__add-members {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
@ -25,7 +25,7 @@
} }
// Info header // Info header
.chat-channel-info-header { .c-channel-info-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
@ -33,7 +33,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
.chat-channel-info-header__title { .c-channel-info-header__title {
font-size: var(--font-up-2); font-size: var(--font-up-2);
margin: 0; margin: 0;
} }

2
plugins/chat/assets/stylesheets/common/chat-channel-members.scss
View File

@ -1,4 +1,4 @@
.chat-channel-members { .c-channel-members {
max-width: 500px; max-width: 500px;
width: 100%; width: 100%;

6
plugins/chat/assets/stylesheets/common/chat-channel-settings.scss
View File

@ -1,7 +1,7 @@
.chat-channel-settings { .c-channel-settings {
width: 100%; width: 100%;
.chat-channel-settings__slug { .c-channel-settings__slug {
max-width: 250px; max-width: 250px;
@include ellipsis; @include ellipsis;
} }
@ -19,7 +19,7 @@
} }
} }
.chat-form__section-content:has(.chat-channel-settings__leave-info) { .chat-form__section-content:has(.c-channel-settings__leave-info) {
gap: 0.25rem; gap: 0.25rem;
} }
} }

2
plugins/chat/assets/stylesheets/desktop/chat-channel-info.scss
View File

@ -1,3 +1,3 @@
.chat-channel-info { .c-channel-info {
max-width: 500px; max-width: 500px;
} }

2
plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss
View File

@ -1,3 +1,3 @@
.chat-channel-members { .c-channel-members {
width: 100%; width: 100%;
} }

2
plugins/chat/assets/stylesheets/mobile/chat-channel-settings.scss
View File

@ -1,3 +1,3 @@
.chat-channel-settings { .c-channel-settings {
min-width: 320px; min-width: 320px;
} }

18
plugins/chat/spec/system/channel_members_page_spec.rb
View File

@ -43,23 +43,23 @@ RSpec.describe "Channel - Info - Members page", type: :system do
xit "shows all members" do xit "shows all members" do
chat_page.visit_channel_members(channel_1) chat_page.visit_channel_members(channel_1)
expect(page).to have_selector(".chat-channel-members__list-item", count: 60) expect(page).to have_selector(".c-channel-members__list-item", count: 60)
scroll_to(find(".chat-channel-members__list-item:nth-child(60)")) scroll_to(find(".c-channel-members__list-item:nth-child(60)"))
expect(page).to have_selector(".chat-channel-members__list-item", count: 100) expect(page).to have_selector(".c-channel-members__list-item", count: 100)
scroll_to(find(".chat-channel-members__list-item:nth-child(100)")) scroll_to(find(".c-channel-members__list-item:nth-child(100)"))
expect(page).to have_selector(".chat-channel-members__list-item", count: 100) expect(page).to have_selector(".c-channel-members__list-item", count: 100)
end end
context "with filter" do context "with filter" do
it "filters members" do it "filters members" do
chat_page.visit_channel_members(channel_1) chat_page.visit_channel_members(channel_1)
find(".chat-channel-members__filter").fill_in(with: "cat") find(".c-channel-members__filter").fill_in(with: "cat")
expect(page).to have_selector(".chat-channel-members__list-item", count: 1, text: "cat") expect(page).to have_selector(".c-channel-members__list-item", count: 1, text: "cat")
end end
end end
end end
@ -69,7 +69,7 @@ RSpec.describe "Channel - Info - Members page", type: :system do
it "doesn’t allow to add members" do it "doesn’t allow to add members" do
chat_page.visit_channel_members(channel_1) chat_page.visit_channel_members(channel_1)
expect(chat_page).to have_no_css(".chat-channel-members__list-item.-add-member") expect(chat_page).to have_no_css(".c-channel-members__list-item.-add-member")
end end
end end
@ -86,7 +86,7 @@ RSpec.describe "Channel - Info - Members page", type: :system do
it "allows to add members" do it "allows to add members" do
new_user = Fabricate(:user) new_user = Fabricate(:user)
chat_page.visit_channel_members(channel_1) chat_page.visit_channel_members(channel_1)
chat_page.find(".chat-channel-members__list-item.-add-member").click chat_page.find(".c-channel-members__list-item.-add-member").click
chat_page.find(".chat-message-creator__members-input").fill_in(with: new_user.username) chat_page.find(".chat-message-creator__members-input").fill_in(with: new_user.username)
chat_page.find(".chat-message-creator__list-item").click chat_page.find(".chat-message-creator__list-item").click
chat_page.find(".add-to-channel").click chat_page.find(".add-to-channel").click

22
plugins/chat/spec/system/channel_settings_page_spec.rb
View File

@ -78,8 +78,8 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
chat_page.visit_channel_settings(channel_1) chat_page.visit_channel_settings(channel_1)
expect(page.find(".badge-category__name")).to have_content(channel_1.chatable.name) expect(page.find(".badge-category__name")).to have_content(channel_1.chatable.name)
expect(page.find(".chat-channel-settings__name")).to have_content(channel_1.title) expect(page.find(".c-channel-settings__name")).to have_content(channel_1.title)
expect(page.find(".chat-channel-settings__slug")).to have_content(channel_1.slug) expect(page.find(".c-channel-settings__slug")).to have_content(channel_1.slug)
end end
it "can’t edit name or slug" do it "can’t edit name or slug" do
@ -98,7 +98,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
channel_1.update!(name: "<script>alert('hello')</script>") channel_1.update!(name: "<script>alert('hello')</script>")
chat_page.visit_channel_settings(channel_1) chat_page.visit_channel_settings(channel_1)
expect(page.find(".chat-channel-settings__name")["innerHTML"].strip).to eq( expect(page.find(".c-channel-settings__name")["innerHTML"].strip).to eq(
"&lt;script&gt;alert('hello')&lt;/script&gt;", "&lt;script&gt;alert('hello')&lt;/script&gt;",
) )
expect(page.find(".chat-channel-title__name")["innerHTML"].strip).to eq( expect(page.find(".chat-channel-title__name")["innerHTML"].strip).to eq(
@ -117,7 +117,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
membership = channel_1.membership_for(current_user) membership = channel_1.membership_for(current_user)
expect { expect {
PageObjects::Components::DToggleSwitch.new(".chat-channel-settings__mute-switch").toggle PageObjects::Components::DToggleSwitch.new(".c-channel-settings__mute-switch").toggle
expect(toasts).to have_success(I18n.t("js.saved")) expect(toasts).to have_success(I18n.t("js.saved"))
}.to change { membership.reload.muted }.from(false).to(true) }.to change { membership.reload.muted }.from(false).to(true)
@ -130,7 +130,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
expect { expect {
select_kit = select_kit =
PageObjects::Components::SelectKit.new( PageObjects::Components::SelectKit.new(
".chat-channel-settings__desktop-notifications-selector", ".c-channel-settings__desktop-notifications-selector",
) )
select_kit.expand select_kit.expand
select_kit.select_row_by_name("Never") select_kit.select_row_by_name("Never")
@ -146,7 +146,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
expect { expect {
select_kit = select_kit =
PageObjects::Components::SelectKit.new( PageObjects::Components::SelectKit.new(
".chat-channel-settings__mobile-notifications-selector", ".c-channel-settings__mobile-notifications-selector",
) )
select_kit.expand select_kit.expand
select_kit.select_row_by_name("Never") select_kit.select_row_by_name("Never")
@ -260,9 +260,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
chat_page.visit_channel_settings(channel_1) chat_page.visit_channel_settings(channel_1)
expect { expect {
PageObjects::Components::DToggleSwitch.new( PageObjects::Components::DToggleSwitch.new(".c-channel-settings__auto-join-switch").toggle
".chat-channel-settings__auto-join-switch",
).toggle
find("#dialog-holder .btn-primary").click find("#dialog-holder .btn-primary").click
expect(toasts).to have_success(I18n.t("js.saved")) expect(toasts).to have_success(I18n.t("js.saved"))
@ -274,7 +272,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
expect { expect {
PageObjects::Components::DToggleSwitch.new( PageObjects::Components::DToggleSwitch.new(
".chat-channel-settings__channel-wide-mentions", ".c-channel-settings__channel-wide-mentions",
).toggle ).toggle
expect(toasts).to have_success(I18n.t("js.saved")) expect(toasts).to have_success(I18n.t("js.saved"))
@ -296,9 +294,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
chat_page.visit_channel_settings(channel_1) chat_page.visit_channel_settings(channel_1)
expect { expect {
PageObjects::Components::DToggleSwitch.new( PageObjects::Components::DToggleSwitch.new(".c-channel-settings__threading-switch").toggle
".chat-channel-settings__threading-switch",
).toggle
expect(toasts).to have_success(I18n.t("js.saved")) expect(toasts).to have_success(I18n.t("js.saved"))
}.to change { channel_1.reload.threading_enabled }.from(false).to(true) }.to change { channel_1.reload.threading_enabled }.from(false).to(true)

4
plugins/chat/spec/system/page_objects/chat/chat_channel_settings.rb
View File

@ -12,11 +12,11 @@ module PageObjects
end end
def has_slug?(slug) def has_slug?(slug)
page.has_css?(".chat-channel-settings__slug", text: slug) page.has_css?(".c-channel-settings__slug", text: slug)
end end
def has_name?(name) def has_name?(name)
page.has_css?(".chat-channel-settings__name", text: name) page.has_css?(".c-channel-settings__name", text: name)
end end
end end
end end