github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-28 22:14:36 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Improve layout of avatar+icon notifications (#24851)

Browse Source
This commit is contained in:
Mark VanLandingham 2023-12-12 14:28:29 -06:00 committed by GitHub
parent de936f07e5
commit 097cef7d21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/components/user-menu/icon-avatar.gjs
View File

@ -6,7 +6,9 @@ export default class IconAvatar extends Component {
<template> <template>
<div class="icon-avatar"> <div class="icon-avatar">
{{avatar @data.avatarTemplate "small"}} {{avatar @data.avatarTemplate "small"}}
{{dIcon @data.icon}} <div class="icon-avatar__icon-wrapper">
{{dIcon @data.icon}}
</div>
</div> </div>
</template> </template>
} }

40
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -558,11 +558,20 @@
// Styles to have user avatar positioned and sized correctly // Styles to have user avatar positioned and sized correctly
.user-menu.show-avatars, .user-menu.show-avatars,
.user-notifications-list.show-avatars { .user-notifications-list.show-avatars {
li { li.notification,
li.bookmark,
li.message {
a { a {
align-items: center; align-items: center;
padding: 0.15em 0; padding: 0.15em 0;
.item-label {
font-weight: bold;
}
.item-description {
color: var(--primary);
}
.icon-avatar { .icon-avatar {
display: flex; display: flex;
position: relative; position: relative;
@ -577,24 +586,37 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.d-icon { &__icon-wrapper {
display: block;
position: absolute; position: absolute;
right: -1.25em; right: -0.65em;
top: -0.5em; top: -0.65em;
padding: 0.2em; display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
border-radius: 100%; border-radius: 100%;
background: var(--secondary); background: var(--secondary);
color: var(--tertiary);
.d-icon {
display: block;
margin: 0;
padding: 0;
font-size: var(--font-down-1);
color: var(--primary);
}
} }
} }
& + div { & + div {
padding: 0.25em 0; padding: 0.25em 0;
} }
} }
&.unread a .d-icon { &.unread .icon-avatar__icon-wrapper {
background: var(--tertiary); background: var(--tertiary);
color: var(--secondary);
.d-icon {
color: var(--secondary);
}
} }
} }
} }