github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-22 07:53:49 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Chat avatar is-online styling (#26012)

Browse Source 
* UX: change is-online from border to box-shadow

* Correct sizing of user-count channel-icon

* Delete obsolete css
This commit is contained in:
chapoi
2024-03-08 22:11:47 +02:00
committed by GitHub
parent 5f8cbb9d83
commit 1fcd6fee29
4 changed files with 19 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -162,13 +162,12 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
} }
.avatar { .avatar {
border: 1px solid transparent;
padding: 0;
box-sizing: border-box; box-sizing: border-box;
.is-online & { .is-online & {
border: 1px solid var(--secondary); padding: 2px;
box-shadow: 0px 0px 0px 1px var(--success); box-shadow: inset 0px 0px 0px 1px var(--success),
inset 0px 0px 0px 2px var(--secondary);
} }
} }

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

@ -4,8 +4,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 22px; width: 24px;
height: 22px; height: 24px;
border-radius: 50%; border-radius: 50%;
background: rgba(var(--primary-rgb), 0.1); background: rgba(var(--primary-rgb), 0.1);
box-sizing: border-box; box-sizing: border-box;
@ -19,13 +19,11 @@
} }
} }
&.--avatar { .chat-user-avatar {
.chat-user-avatar { .avatar {
.avatar { .chat-channel-row & {
.chat-channel-row & { width: var(--channel-list-avatar-size);
width: var(--channel-list-avatar-size); height: var(--channel-list-avatar-size);
height: var(--channel-list-avatar-size);
}
} }
} }
} }

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

@ -68,14 +68,6 @@
position: relative; position: relative;
} }
.chat-channel-title .chat-user-avatar {
font-size: var(--font-up-1);
+ .chat-channel-title__usernames {
margin-left: 0.5rem;
}
}
.chat-channel-title__restricted-category-icon { .chat-channel-title__restricted-category-icon {
background-color: var(--secondary); background-color: var(--secondary);
position: absolute; position: absolute;

24
plugins/chat/assets/stylesheets/common/chat-user-avatar.scss
View File

@ -3,26 +3,15 @@
display: flex; display: flex;
align-items: center; align-items: center;
.chat-message-container:not(.has-reply) & {
width: var(--message-left-width);
flex-shrink: 0;
}
&.is-online { &.is-online {
.chat-user-avatar__container .avatar { .avatar {
box-shadow: 0px 0px 0px 1px var(--success); padding: 2px;
border: 1px solid var(--secondary); box-shadow: inset 0px 0px 0px 1px var(--success),
padding: 0; inset 0px 0px 0px 2px var(--secondary);
} }
} }
&__container { &__container {
padding: 1px; // for is-online box-shadow effect, preventing cutoff
.avatar {
padding: 1px; // for is-online box-shadow effect, preventing shift
}
.chat-user-presence-flair { .chat-user-presence-flair {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
@ -46,6 +35,11 @@
} }
} }
.chat-message-container:not(.has-reply) & {
width: var(--message-left-width);
flex-shrink: 0;
}
.chat-channel-title & { .chat-channel-title & {
width: auto; width: auto;
} }