github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 13:09:18 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: user threads styling tweaks

Browse Source
This commit is contained in:
chapoi 2023-12-13 15:10:52 +02:00 committed by GitHub
parent 5e4a730366
commit 7da33ad6ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 113 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
plugins/chat/assets/javascripts/discourse/components/channels-list.gjs
View File

@ -166,23 +166,18 @@ export default class ChannelsList extends Component {
{{didInsert this.computeHasScrollbar}}
{{onResize this.computeResizedEntries}}
>
<div class="channels-list-container user-threads-section">
<LinkTo @route="chat.threads" class="chat__user-threads-row-container">
<div class="chat__user-threads-row">
<span class="chat__user-threads-row__title">
{{dIcon "discourse-threads" class="chat__user-threads-row__icon"}}
{{i18n "chat.my_threads.title"}}
</span>
{{#if this.hasUnreadThreads}}
<div class="chat__unread-indicator">
<div class="chat__unread-indicator__number">&nbsp;</div>
</div>
{{/if}}
<LinkTo @route="chat.threads" class="chat-channel-row --threads">
<span class="chat-channel-title">
{{dIcon "discourse-threads" class="chat-user-threads__icon"}}
{{i18n "chat.my_threads.title"}}
</span>
{{#if this.hasUnreadThreads}}
<div class="c-unread-indicator">
<div class="c-unread-indicator__number">&nbsp;</div>
</div>
</LinkTo>
</div>
{{/if}}
</LinkTo>
{{#if this.displayPublicChannels}}
<div class="chat-channel-divider public-channels-section">

48
plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs
View File

@ -71,39 +71,29 @@ export default class UserThreads extends Component {
}
<template>
<div class="chat__user-threads-container">
<div class="chat__user-threads" {{this.fill}}>
{{#each this.threadsCollection.items as |thread|}}
<div
class="chat__user-threads__thread-container"
data-id={{thread.id}}
>
<div class="chat__user-threads__thread">
<div class="chat__user-threads__title">
<ThreadTitle @thread={{thread}} />
<ChannelTitle @channel={{thread.channel}} />
</div>
<div class="c-user-threads" {{this.fill}}>
{{#each this.threadsCollection.items as |thread|}}
<div class="c-user-thread" data-id={{thread.id}}>
<ThreadTitle @thread={{thread}} />
<ChannelTitle @channel={{thread.channel}} />
<div class="chat__user-threads__thread-indicator">
<ThreadIndicator
@message={{thread.originalMessage}}
@interactiveUser={{false}}
@interactiveThread={{false}}
tabindex="-1"
/>
</div>
</div>
</div>
{{/each}}
<div {{this.loadMore}}>
<br />
<ThreadIndicator
@message={{thread.originalMessage}}
@interactiveUser={{false}}
@interactiveThread={{false}}
tabindex="-1"
/>
</div>
{{/each}}
<ConditionalLoadingSpinner
@condition={{this.threadsCollection.loading}}
/>
<div {{this.loadMore}}>
<br />
</div>
<ConditionalLoadingSpinner
@condition={{this.threadsCollection.loading}}
/>
</div>
</template>
}

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

@ -22,6 +22,6 @@
}
}
.chat__unread-indicator {
.c-unread-indicator {
@include chat-unread-indicator;
}

32
plugins/chat/assets/stylesheets/common/chat-user-threads-row.scss
View File

@ -1,32 +0,0 @@
.chat__user-threads-row {
display: flex;
align-items: center;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.chat__unread-indicator {
width: 8px;
height: 8px;
}
&-container {
height: 3.6em;
padding: 0 0.5rem;
margin: 0.5rem 0rem 0 0.5rem;
box-sizing: border-box;
display: flex;
&:hover {
background: var(--primary-low);
}
.chat__user-threads-row__icon {
color: var(--primary);
}
.chat__user-threads-row__title {
color: var(--primary);
}
}
}

60
plugins/chat/assets/stylesheets/common/chat-user-threads.scss
View File

@ -1,23 +1,45 @@
.chat__user-threads__thread-indicator {
padding-top: 1rem;
.chat-message-thread-indicator {
margin: 0;
}
}
.chat__user-threads__title {
.chat-channel-title__name {
font-size: var(--font-down-1);
color: var(--primary-medium);
}
}
.chat__user-threads__thread {
padding-bottom: 1rem;
.c-user-thread {
padding-block: 1.25rem;
margin-inline: 1rem;
border-bottom: 1px solid var(--primary-low);
&-container {
padding: 1rem 1rem 0 1rem;
.c-unread-indicator {
width: 8px;
height: 8px;
align-self: flex-start;
}
.chat-message-thread-indicator {
margin-left: 0;
margin-top: 1rem;
&:hover {
box-shadow: none;
}
}
.chat__thread-title__name {
font-size: var(--font-up-1-rem);
&:hover {
color: var(--primary-very-high);
}
}
.chat-channel-title__name {
color: var(--primary-high);
font-size: var(--font-down-1);
}
}
//sidebar
#sidebar-section-content-user-threads {
padding-bottom: 0.5rem;
.sidebar-section-link-wrapper:hover {
.sidebar-section-link-prefix {
color: var(--primary-very-high);
}
}
.sidebar-section-link-content-text {
color: var(--d-sidebar-header-color);
}
}

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

@ -67,5 +67,4 @@
@import "chat-channel-settings";
@import "chat-user-threads";
@import "chat-navbar";
@import "chat-user-threads-row";
@import "chat-thread-title";

12
plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss
View File

@ -24,6 +24,18 @@
margin-top: 0.25rem;
}
}
&.--threads {
margin-top: 0.25rem;
.c-unread-indicator {
width: 8px;
height: 8px;
}
.chat-channel-title {
gap: 0.5rem;
color: var(--primary);
}
}
}
.toggle-channel-membership-button.-leave {

18
plugins/chat/assets/stylesheets/mobile/chat-index.scss
View File

@ -24,6 +24,24 @@
}
}
.chat-channel-row {
&.--threads {
color: var(--primary);
padding-inline: 1.5rem;
font-size: var(--font-up-1-rem);
border: 0;
.chat-channel-title {
gap: 0.5rem;
}
.c-unread-indicator {
width: 8px;
height: 8px;
}
}
}
.chat-user-avatar {
+ .chat-channel-title__usernames {
margin-left: 1rem;

5
plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss Normal file
View File

@ -0,0 +1,5 @@
.chat-user-threads {
.chat__thread-title {
justify-content: space-between;
}
}

1
plugins/chat/assets/stylesheets/mobile/index.scss
View File

@ -18,3 +18,4 @@
@import "chat-form";
@import "chat-modal-new-message";
@import "chat-thread-list-header";
@import "chat-user-threads";

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

@ -5,13 +5,11 @@ module PageObjects
class UserThreads < PageObjects::Pages::Base
def has_threads?(count: nil)
has_no_css?(".spinner")
has_css?(".chat__user-threads__thread-container", count: count)
has_css?(".c-user-thread", count: count)
end
def open_thread(thread)
find(
".chat__user-threads__thread-container[data-id='#{thread.id}'] .chat__thread-title__name",
).click
find(".c-user-thread[data-id='#{thread.id}'] .chat__thread-title__name").click
end
end
end

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

@ -38,19 +38,19 @@ module PageObjects
end
def has_user_threads_section?
has_css?(".chat__user-threads-row-container[href='/chat/threads']")
has_css?(".chat-channel-row.--threads[href='/chat/threads']")
end
def has_unread_user_threads?
has_css?(".chat__user-threads-row .chat__unread-indicator")
has_css?(".chat-channel-row.--threads .c-unread-indicator")
end
def has_no_unread_user_threads?
has_no_css?(".chat__user-threads-row .chat__unread-indicator")
has_no_css?(".chat-channel-row.--threads .c-unread-indicator")
end
def click_user_threads
find(".chat__user-threads-row").click
find(".chat-channel-row.--threads").click
end
def maximize