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

UX: chat channel header icons (#21887) 

* UX: BEM fix for has-unreads

* UX: small refactor for chat channel header icons

* UX: refactor chat thread unread indicator

* UX: channel header thread icon hover styling

* DEV: Spec fixes

* UX: fix font + line-height

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
This commit is contained in:
chapoi 2023-06-02 17:34:19 +09:00 committed by GitHub
parent 20982ef875
commit d40649c648
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 96 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/chat/assets/javascripts/discourse/components/chat-full-page-header.hbs
View File

@ -35,7 +35,7 @@
<DButton
@icon="discourse-compress"
@title="chat.close_full_page"
class="open-drawer-btn btn-flat no-text"
class="open-drawer-btn btn-flat"
@action={{@onCloseFullScreen}}
/>
{{/if}}

8
plugins/chat/assets/javascripts/discourse/components/chat/thread/header-unread-indicator.hbs
View File

@ -4,10 +4,8 @@
aria-label={{i18n "chat.unread_threads_count" count=this.unreadCountLabel}}
title={{i18n "chat.unread_threads_count" count=this.unreadCountLabel}}
>
<div class="chat-thread-header-unread-indicator__number-wrap">
<div
class="chat-thread-header-unread-indicator__number"
>{{this.unreadCountLabel}}</div>
</div>
<div
class="chat-thread-header-unread-indicator__number"
>{{this.unreadCountLabel}}</div>
</div>
{{/if}}

8
plugins/chat/assets/javascripts/discourse/components/chat/thread/list-item-unread-indicator.hbs
View File

@ -1,9 +1,7 @@
{{#if this.showUnreadIndicator}}
<div class="chat-thread-list-item-unread-indicator">
<div class="chat-thread-list-item-unread-indicator__number-wrap">
<div
class="chat-thread-list-item-unread-indicator__number"
>{{this.unreadCountLabel}}</div>
</div>
<div
class="chat-thread-list-item-unread-indicator__number"
>{{this.unreadCountLabel}}</div>
</div>
{{/if}}

2
plugins/chat/assets/javascripts/discourse/components/chat/thread/threads-list-button.hbs
View File

@ -4,7 +4,7 @@
title={{i18n "chat.threads.list"}}
class={{concat-class
"chat-threads-list-button btn btn-flat"
(if @channel.unreadThreadCount "-has-unreads")
(if @channel.unreadThreadCount "has-unreads")
}}
>
{{d-icon "discourse-threads"}}

115
plugins/chat/assets/stylesheets/common/base-common.scss
View File

@ -260,120 +260,6 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
}
}
.chat-channel {
display: flex;
flex-direction: column;
width: 100%;
min-height: 1px;
position: relative;
overflow: hidden;
.open-drawer-btn {
color: var(--primary-low-mid);
&:visited {
color: var(--primary-low-mid);
}
&:hover {
color: var(--primary);
}
> * {
pointer-events: none;
}
}
.chat-messages-scroll {
flex-grow: 1;
overflow-y: scroll;
overscroll-behavior: contain;
display: flex;
flex-direction: column-reverse;
z-index: 1;
margin: 0 1px 0 0;
will-change: transform;
@include chat-scrollbar();
.join-channel-btn.in-float {
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 10px;
z-index: 10;
}
.all-loaded-message {
text-align: center;
color: var(--primary-medium);
font-size: var(--font-down-1);
padding: 0.5em 0.25em 0.25em;
}
}
.scroll-stick-wrap {
display: flex;
justify-content: center;
margin: 0 1rem;
position: relative;
}
.chat-scroll-to-bottom {
align-items: center;
justify-content: center;
position: absolute;
z-index: 1;
flex-direction: column;
bottom: -25px;
background: none;
opacity: 0;
transition: opacity 0.25s ease, transform 0.5s ease;
transform: scale(0.1);
padding: 0;
> * {
pointer-events: none;
}
&:hover,
&:active,
&:focus {
background: none !important;
}
&.visible {
transform: translateY(-32px) scale(1);
opacity: 0.8;
}
&__arrow {
display: flex;
background: var(--primary-medium);
border-radius: 100%;
align-items: center;
justify-content: center;
height: 32px;
width: 32px;
position: relative;
.d-icon {
color: var(--secondary);
margin-left: 1px; // "fixes" the 1px svg shift
}
}
&:hover {
opacity: 1;
.chat-scroll-to-bottom__arrow {
.d-icon {
color: var(--secondary);
}
}
}
}
}
.topic-title-chat-icon {
display: inline-block;
* {
@ -456,6 +342,7 @@ body.has-full-page-chat {
align-items: stretch;
display: flex;
flex-grow: 1;
gap: 0.5rem;
font-size: var(--font-up-1);
justify-content: flex-end;
}

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

@ -1,34 +1,14 @@
@mixin chat-channel-header-button {
color: var(--primary-low-mid);
&:visited {
color: var(--primary-low-mid);
}
&:hover {
color: var(--primary);
}
> * {
pointer-events: none;
}
}
.chat-channel {
display: flex;
flex-direction: column;
width: 100%;
min-height: 1px;
position: relative;
overflow: hidden;
grid-area: main;
width: 100%;
min-width: 250px;
@include chat-height;
.open-drawer-btn {
@include chat-channel-header-button;
}
.chat-messages-scroll {
flex-grow: 1;
overflow-y: scroll;
@ -91,18 +71,6 @@
opacity: 0.8;
}
&__text {
color: var(--secondary);
padding: 0.5rem;
margin-bottom: 0.5rem;
background: var(--primary-medium);
border-radius: 3px;
text-align: center;
font-size: var(--font-down-1);
bottom: 40px;
position: absolute;
}
&__arrow {
display: flex;
background: var(--primary-medium);

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

@ -249,7 +249,7 @@ a.chat-drawer-header__title {
}
}
&__thread-list-btn.-has-unreads {
&__thread-list-btn.has-unreads {
margin-right: 0.5rem;
}
}

37
plugins/chat/assets/stylesheets/common/chat-thread-header-button.scss
View File

@ -1,37 +0,0 @@
.chat-threads-list-button {
position: relative;
display: flex;
align-items: center;
border-radius: 5px;
padding: 0.5rem 0;
@include chat-channel-header-button;
&.-has-unreads {
.d-icon {
color: var(--tertiary-med-or-tertiary);
}
&:hover {
.d-icon {
color: var(--tertiary-med-or-tertiary);
}
}
}
.d-icon {
margin-right: 0;
}
&:hover {
.discourse-touch & {
background: none !important;
}
}
&:active {
.discourse-touch & {
background: var(--secondary-very-high) !important;
}
}
}

66
plugins/chat/assets/stylesheets/common/chat-thread-header-buttons.scss Normal file
View File

@ -0,0 +1,66 @@
@mixin chat-channel-header-button {
color: var(--primary-low-mid);
padding: 0.25em 0.4em;
.d-icon {
color: inherit;
}
&:visited {
color: var(--primary-low-mid);
}
&:hover {
color: var(--primary-medium);
background: var(--primary-very-low);
border-radius: 5px;
&:hover {
.d-icon {
color: inherit;
}
}
}
> * {
pointer-events: none;
}
}
.chat-channel {
.chat-threads-list-button {
@include chat-channel-header-button;
position: relative;
display: flex;
align-items: center;
&.has-unreads {
color: var(--tertiary-med-or-tertiary);
gap: 0.25rem;
&:hover {
color: var(--tertiary-hover);
}
}
.d-icon {
margin-right: 0;
}
&:hover {
.discourse-touch & {
background: none !important;
}
}
&:active {
.discourse-touch & {
background: var(--secondary-very-high) !important;
}
}
}
.open-drawer-btn {
@include chat-channel-header-button;
}
}

26
plugins/chat/assets/stylesheets/common/chat-thread-unread-indicator.scss
View File

@ -1,22 +1,18 @@
@mixin chat-thread-unread-indicator {
color: var(--tertiary);
padding-left: 0.25rem;
&__number-wrap {
background-color: var(--tertiary-med-or-tertiary);
display: flex;
padding: 0.25rem 0.5rem;
border-radius: 20px;
width: 35px;
box-sizing: border-box;
flex-direction: column;
align-items: center;
}
display: flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 14px;
padding: 3px;
font-size: 0.8rem;
border-radius: 1em;
background: var(--tertiary-med-or-tertiary);
&__number {
color: var(--secondary);
font-size: var(--font-down-3);
font-weight: bold;
color: var(--secondary);
line-height: 1;
}
}

2
plugins/chat/assets/stylesheets/common/index.scss
View File

@ -51,6 +51,6 @@
@import "chat-thread-list-item";
@import "chat-threads-list";
@import "chat-composer-separator";
@import "chat-thread-header-button";
@import "chat-thread-header-buttons";
@import "chat-thread-header";
@import "chat-thread-unread-indicator";

6
plugins/chat/spec/system/page_objects/chat/chat_channel.rb
View File

@ -227,15 +227,15 @@ module PageObjects
end
def has_unread_thread_indicator?(count:)
has_css?("#{thread_list_button_selector}.-has-unreads") &&
has_css?("#{thread_list_button_selector}.has-unreads") &&
has_css?(
".chat-thread-header-unread-indicator .chat-thread-header-unread-indicator__number-wrap",
".chat-thread-header-unread-indicator .chat-thread-header-unread-indicator__number",
text: count.to_s,
)
end
def has_no_unread_thread_indicator?
has_no_css?("#{thread_list_button_selector}.-has-unreads")
has_no_css?("#{thread_list_button_selector}.has-unreads")
end
def thread_list_button_selector

2
plugins/chat/spec/system/page_objects/chat/chat_thread.rb
View File

@ -34,7 +34,7 @@ module PageObjects
def has_unread_list_indicator?(count:)
has_css?(
".chat-thread__back-to-list .chat-thread-header-unread-indicator .chat-thread-header-unread-indicator__number-wrap",
".chat-thread__back-to-list .chat-thread-header-unread-indicator .chat-thread-header-unread-indicator__number",
text: count.to_s,
)
end

6
plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb
View File

@ -56,15 +56,15 @@ module PageObjects
end
def has_unread_thread_indicator?(count:)
has_css?("#{thread_list_button_selector}.-has-unreads") &&
has_css?("#{thread_list_button_selector}.has-unreads") &&
has_css?(
".chat-thread-header-unread-indicator .chat-thread-header-unread-indicator__number-wrap",
".chat-thread-header-unread-indicator .chat-thread-header-unread-indicator__number",
text: count.to_s,
)
end
def has_no_unread_thread_indicator?
has_no_css?("#{thread_list_button_selector}.-has-unreads")
has_no_css?("#{thread_list_button_selector}.has-unreads")
end
end
end