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

DEV: implements styleguide for chat header icon (#22033) 

This commit also uses this opportunity to change component name from: `ChatHeaderIcon` to `Chat::Header::Icon`
This commit is contained in:
Joffrey JAFFEUX 2023-06-09 18:40:34 +02:00 committed by GitHub
parent 6e395786bf
commit 99f0ace229
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 169 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
plugins/chat/assets/javascripts/discourse/components/chat-header-icon.hbs
View File

@ -1,11 +0,0 @@
<a
href={{this.href}}
tabindex="0"
class={{concat-class "icon btn-flat" (if this.isActive "active")}}
>
{{d-icon "d-chat"}}
{{#unless this.currentUserInDnD}}
<ChatHeaderIconUnreadIndicator />
{{/unless}}
</a>

14
plugins/chat/assets/javascripts/discourse/components/chat/header/icon.hbs Normal file
View File

@ -0,0 +1,14 @@
<a
href={{this.href}}
tabindex="0"
class={{concat-class "icon" "btn-flat" (if this.isActive "active")}}
>
{{d-icon "d-chat"}}
{{#unless this.currentUserInDnD}}
<Chat::Header::Icon::UnreadIndicator
@urgentCount={{@urgentCount}}
@unreadCount={{@unreadCount}}
@indicatorPreference={{@indicatorPreference}}
/>
{{/unless}}
</a>

17
plugins/chat/assets/javascripts/discourse/components/chat-header-icon.js → plugins/chat/assets/javascripts/discourse/components/chat/header/icon.js
View File

@ -9,7 +9,15 @@ export default class ChatHeaderIcon extends Component {
@service router;
get currentUserInDnD() {
return this.currentUser.isInDoNotDisturb();
return this.args.currentUserInDnD || this.currentUser.isInDoNotDisturb();
}
get isActive() {
return (
this.args.isActive ||
this.chatStateManager.isFullPageActive ||
this.chatStateManager.isDrawerActive
);
}
get href() {
@ -27,11 +35,4 @@ export default class ChatHeaderIcon extends Component {
return getURL(this.chatStateManager.lastKnownChatURL || "/chat");
}
get isActive() {
return (
this.chatStateManager.isFullPageActive ||
this.chatStateManager.isDrawerActive
);
}
}

0
plugins/chat/assets/javascripts/discourse/components/chat-header-icon-unread-indicator.hbs → plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.hbs
View File

37
plugins/chat/assets/javascripts/discourse/components/chat-header-icon-unread-indicator.js → plugins/chat/assets/javascripts/discourse/components/chat/header/icon/unread-indicator.js
View File

@ -4,15 +4,36 @@ import {
HEADER_INDICATOR_PREFERENCE_ALL_NEW,
HEADER_INDICATOR_PREFERENCE_DM_AND_MENTIONS,
HEADER_INDICATOR_PREFERENCE_NEVER,
} from "../controllers/preferences-chat";
} from "discourse/plugins/chat/discourse/controllers/preferences-chat";
export default class ChatHeaderIconUnreadIndicator extends Component {
@service chatTrackingStateManager;
@service currentUser;
get urgentCount() {
return (
this.args.urgentCount ||
this.chatTrackingStateManager.allChannelUrgentCount
);
}
get unreadCount() {
return (
this.args.unreadCount ||
this.chatTrackingStateManager.publicChannelUnreadCount
);
}
get indicatorPreference() {
return (
this.args.indicatorPreference ||
this.currentUser.user_option.chat_header_indicator_preference
);
}
get showUrgentIndicator() {
return (
this.chatTrackingStateManager.allChannelUrgentCount > 0 &&
this.urgentCount > 0 &&
this.#hasAnyIndicatorPreference([
HEADER_INDICATOR_PREFERENCE_ALL_NEW,
HEADER_INDICATOR_PREFERENCE_DM_AND_MENTIONS,
@ -22,13 +43,13 @@ export default class ChatHeaderIconUnreadIndicator extends Component {
get showUnreadIndicator() {
return (
this.chatTrackingStateManager.publicChannelUnreadCount > 0 &&
this.unreadCount > 0 &&
this.#hasAnyIndicatorPreference([HEADER_INDICATOR_PREFERENCE_ALL_NEW])
);
}
get indicatorPreference() {
return this.currentUser.user_option.chat_header_indicator_preference;
get unreadCountLabel() {
return this.urgentCount > 99 ? "99+" : this.urgentCount;
}
#hasAnyIndicatorPreference(preferences) {
@ -41,10 +62,4 @@ export default class ChatHeaderIconUnreadIndicator extends Component {
return preferences.includes(this.indicatorPreference);
}
get unreadCountLabel() {
return this.chatTrackingStateManager.allChannelUrgentCount > 99
? "99+"
: this.chatTrackingStateManager.allChannelUrgentCount;
}
}

1
plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.js
View File

@ -18,6 +18,7 @@ export default class ChatStyleguideChatComposer extends Component {
this.channel.status = CHANNEL_STATUSES.open;
}
}
@action
toggleSending() {
this.chatChannelPane.sending = !this.chatChannelPane.sending;

59
plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.hbs Normal file
View File

@ -0,0 +1,59 @@
<StyleguideExample @title="<Chat::Header::Icon>">
<Styleguide::Component>
<header
class="d-header"
style="display: flex; align-items: center; justify-content: center;"
>
<ul class="d-header-icons">
<li class="header-dropdown-toggle chat-header-icon">
<Chat::Header::Icon
@isActive={{this.isActive}}
@currentUserInDnD={{this.currentUserInDnD}}
@unreadCount={{this.unreadCount}}
@urgentCount={{this.urgentCount}}
@indicatorPreference={{this.indicatorPreference}}
/>
</li>
</ul>
</header>
</Styleguide::Component>
<Styleguide::Controls>
<Styleguide::Controls::Row @name="isActive">
<DToggleSwitch
@state={{this.isActive}}
{{on "click" this.toggleIsActive}}
/>
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="currentUserInDnD">
<DToggleSwitch
@state={{this.currentUserInDnD}}
{{on "click" this.toggleCurrentUserInDnD}}
/>
</Styleguide::Controls::Row>
</Styleguide::Controls>
<Styleguide::Controls::Row @name="Unread count">
<input
type="number"
{{on "input" this.updateUnreadCount}}
value={{this.unreadCount}}
/>
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="Urgent count">
<input
type="number"
{{on "input" this.updateUrgentCount}}
value={{this.urgentCount}}
/>
</Styleguide::Controls::Row>
<Styleguide::Controls::Row @name="Indicator preference">
<ComboBox
@value={{this.indicatorPreference}}
@content={{this.indicatorPreferences}}
@onChange={{this.updateIndicatorPreference}}
@valueProperty={{null}}
@nameProperty={{null}}
/>
</Styleguide::Controls::Row>
</StyleguideExample>

49
plugins/chat/assets/javascripts/discourse/components/styleguide/chat-header-icon.js Normal file
View File

@ -0,0 +1,49 @@
import Component from "@glimmer/component";
import { action } from "@ember/object";
import {
HEADER_INDICATOR_PREFERENCE_ALL_NEW,
HEADER_INDICATOR_PREFERENCE_DM_AND_MENTIONS,
HEADER_INDICATOR_PREFERENCE_NEVER,
} from "discourse/plugins/chat/discourse/controllers/preferences-chat";
import { tracked } from "@glimmer/tracking";
export default class ChatStyleguideChatHeaderIcon extends Component {
@tracked isActive = false;
@tracked currentUserInDnD = false;
@tracked urgentCount;
@tracked unreadCount;
@tracked indicatorPreference = HEADER_INDICATOR_PREFERENCE_ALL_NEW;
get indicatorPreferences() {
return [
HEADER_INDICATOR_PREFERENCE_ALL_NEW,
HEADER_INDICATOR_PREFERENCE_DM_AND_MENTIONS,
HEADER_INDICATOR_PREFERENCE_NEVER,
];
}
@action
toggleIsActive() {
this.isActive = !this.isActive;
}
@action
toggleCurrentUserInDnD() {
this.currentUserInDnD = !this.currentUserInDnD;
}
@action
updateUnreadCount(event) {
this.unreadCount = event.target.value;
}
@action
updateUrgentCount(event) {
this.urgentCount = event.target.value;
}
@action
updateIndicatorPreference(value) {
this.indicatorPreference = value;
}
}

3
plugins/chat/assets/javascripts/discourse/components/styleguide/organisms/chat.hbs
View File

@ -1,4 +1,5 @@
<Styleguide::ChatMessage />
<Styleguide::ChatComposer />
<Styleguide::ChatThreadListItem />
<Styleguide::ChatComposerMessageDetails />
<Styleguide::ChatComposerMessageDetails />
<Styleguide::ChatHeaderIcon />

2
plugins/chat/assets/javascripts/discourse/widgets/chat-header-icon.js
View File

@ -17,7 +17,7 @@ export default createWidget("chat-header-icon", {
new RenderGlimmer(
this,
"div.widget-component-connector",
hbs`<ChatHeaderIcon />`
hbs`<Chat::Header::Icon />`
),
];
},

8
plugins/styleguide/assets/stylesheets/styleguide.scss
View File

@ -84,11 +84,19 @@
.component-properties {
width: 100%;
&__row {
align-items: center;
display: flex;
}
&__cell {
padding: 0.5rem 0;
width: 70%;
box-sizing: border-box;
&:first-child {
width: 30%;
box-sizing: border-box;
}
textarea,