github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 09:42:02 +08:00
Code Issues Actions 1 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}}
/>
{{else}}
<div class="chat-channel-members">
<div class="c-channel-members">
<DcFilterInput
{{autoFocus}}
@filterAction={{this.mutFilter}}
@icons={{hash right="search"}}
@containerClass="chat-channel-members__filter"
@containerClass="c-channel-members__filter"
placeholder={{this.filterPlaceholder}}
/>
<ul class="chat-channel-members__list" {{this.fill}}>
<ul class="c-channel-members__list" {{this.fill}}>
{{#if @channel.chatable.group}}
<li
class="chat-channel-members__list-item -add-member"
class="c-channel-members__list-item -add-member"
role="button"
{{on "click" this.addMember}}
{{this.onEnter this.addMember}}
@ -154,7 +154,7 @@ export default class ChatRouteChannelInfoMembers extends Component {
{{/if}}
{{#each this.members as |membership|}}
<li
class="chat-channel-members__list-item -member"
class="c-channel-members__list-item -member"
{{on "click" (fn this.openMemberCard membership.user)}}
{{this.onEnter (fn this.openMemberCard membership.user)}}
tabindex="0"
@ -168,7 +168,7 @@ export default class ChatRouteChannelInfoMembers extends Component {
{{else}}
{{#if this.noResults}}
<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}}
</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>
<div class="chat-channel-settings">
<div class="c-channel-settings">
<ChatForm as |form|>
<form.section @title={{this.titleSectionTitle}} as |section|>
<section.row>
<:default>
<div class="chat-channel-settings__name">
<div class="c-channel-settings__name">
{{replaceEmoji @channel.title}}
</div>
{{#if @channel.isCategoryChannel}}
<div class="chat-channel-settings__slug">
<div class="c-channel-settings__slug">
<LinkTo
@route="chat.channel"
@models={{@channel.routeModels}}
@ -405,7 +405,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
<:action>
<DToggleSwitch
@state={{@channel.currentUserMembership.muted}}
class="chat-channel-settings__mute-switch"
class="c-channel-settings__mute-switch"
{{on "click" this.onToggleMuted}}
/>
</:action>
@ -423,7 +423,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
"desktopNotificationLevel"
"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>
</section.row>
@ -441,7 +441,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
"mobileNotificationLevel"
"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>
</section.row>
@ -476,7 +476,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
<:action>
<DToggleSwitch
@state={{@channel.autoJoinUsers}}
class="chat-channel-settings__auto-join-switch"
class="c-channel-settings__auto-join-switch"
{{on
"click"
(fn this.onToggleAutoJoinUsers @channel.autoJoinUsers)
@ -490,7 +490,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
<section.row @label={{this.channelWideMentionsLabel}}>
<:action>
<DToggleSwitch
class="chat-channel-settings__channel-wide-mentions"
class="c-channel-settings__channel-wide-mentions"
@state={{@channel.allowChannelWideMentions}}
{{on
"click"
@ -513,7 +513,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
<:action>
<DToggleSwitch
@state={{@channel.threadingEnabled}}
class="chat-channel-settings__threading-switch"
class="c-channel-settings__threading-switch"
{{on
"click"
(fn
@ -594,7 +594,7 @@ export default class ChatRouteChannelInfoSettings extends Component {
</:action>
</section.row>
{{#if @channel.chatable.group}}
<div class="chat-channel-settings__leave-info">
<div class="c-channel-settings__leave-info">
{{icon "exclamation-triangle"}}
{{i18n "chat.channel_settings.leave_groupchat_info"}}
</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}} />
<div class="chat-channel-info">
<div class="c-channel-info">
{{#if this.showTabs}}
<nav class="chat-channel-info__nav">
<nav class="c-channel-info__nav">
<ul class="nav nav-pills">
<li>
<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;
padding: 1rem;
flex-direction: column;
@ -15,7 +15,7 @@
}
}
.chat-channel-members__add-members {
.c-channel-members__add-members {
display: flex;
gap: 1rem;
@ -25,7 +25,7 @@
}
// Info header
.chat-channel-info-header {
.c-channel-info-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
@ -33,7 +33,7 @@
box-sizing: border-box;
}
.chat-channel-info-header__title {
.c-channel-info-header__title {
font-size: var(--font-up-2);
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;
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%;
.chat-channel-settings__slug {
.c-channel-settings__slug {
max-width: 250px;
@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;
}
}

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;
}

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

@ -1,3 +1,3 @@
.chat-channel-members {
.c-channel-members {
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;
}

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
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
context "with filter" do
it "filters members" do
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
@ -69,7 +69,7 @@ RSpec.describe "Channel - Info - Members page", type: :system do
it "doesn’t allow to add members" do
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
@ -86,7 +86,7 @@ RSpec.describe "Channel - Info - Members page", type: :system do
it "allows to add members" do
new_user = Fabricate(:user)
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__list-item").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)
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(".chat-channel-settings__slug")).to have_content(channel_1.slug)
expect(page.find(".c-channel-settings__name")).to have_content(channel_1.title)
expect(page.find(".c-channel-settings__slug")).to have_content(channel_1.slug)
end
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>")
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;",
)
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)
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"))
}.to change { membership.reload.muted }.from(false).to(true)
@ -130,7 +130,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
expect {
select_kit =
PageObjects::Components::SelectKit.new(
".chat-channel-settings__desktop-notifications-selector",
".c-channel-settings__desktop-notifications-selector",
)
select_kit.expand
select_kit.select_row_by_name("Never")
@ -146,7 +146,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
expect {
select_kit =
PageObjects::Components::SelectKit.new(
".chat-channel-settings__mobile-notifications-selector",
".c-channel-settings__mobile-notifications-selector",
)
select_kit.expand
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)
expect {
PageObjects::Components::DToggleSwitch.new(
".chat-channel-settings__auto-join-switch",
).toggle
PageObjects::Components::DToggleSwitch.new(".c-channel-settings__auto-join-switch").toggle
find("#dialog-holder .btn-primary").click
expect(toasts).to have_success(I18n.t("js.saved"))
@ -274,7 +272,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do
expect {
PageObjects::Components::DToggleSwitch.new(
".chat-channel-settings__channel-wide-mentions",
".c-channel-settings__channel-wide-mentions",
).toggle
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)
expect {
PageObjects::Components::DToggleSwitch.new(
".chat-channel-settings__threading-switch",
).toggle
PageObjects::Components::DToggleSwitch.new(".c-channel-settings__threading-switch").toggle
expect(toasts).to have_success(I18n.t("js.saved"))
}.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
def has_slug?(slug)
page.has_css?(".chat-channel-settings__slug", text: slug)
page.has_css?(".c-channel-settings__slug", text: slug)
end
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