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

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

* 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 19 additions and 36 deletions
Show Stats 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 {
border: 1px solid transparent;
padding: 0;
box-sizing: border-box;
.is-online & {
border: 1px solid var(--secondary);
box-shadow: 0px 0px 0px 1px var(--success);
padding: 2px;
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;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(var(--primary-rgb), 0.1);
box-sizing: border-box;
@ -19,13 +19,11 @@
}
}
&.--avatar {
.chat-user-avatar {
.avatar {
.chat-channel-row & {
width: var(--channel-list-avatar-size);
height: var(--channel-list-avatar-size);
}
.chat-user-avatar {
.avatar {
.chat-channel-row & {
width: 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;
}
.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 {
background-color: var(--secondary);
position: absolute;

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

@ -3,26 +3,15 @@
display: flex;
align-items: center;
.chat-message-container:not(.has-reply) & {
width: var(--message-left-width);
flex-shrink: 0;
}
&.is-online {
.chat-user-avatar__container .avatar {
box-shadow: 0px 0px 0px 1px var(--success);
border: 1px solid var(--secondary);
padding: 0;
.avatar {
padding: 2px;
box-shadow: inset 0px 0px 0px 1px var(--success),
inset 0px 0px 0px 2px var(--secondary);
}
}
&__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 {
box-sizing: border-box;
position: absolute;
@ -46,6 +35,11 @@
}
}
.chat-message-container:not(.has-reply) & {
width: var(--message-left-width);
flex-shrink: 0;
}
.chat-channel-title & {
width: auto;
}