EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3814 notifications: Fix dark mode issues on notifications page

main
Pau Ferrer Ocaña 2022-03-16 13:33:06 +01:00
parent 2c6f2bb6e6
commit 4c06b78e8e
4 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/addons/notifications/notifications.scss
View File

@ -1,29 +1,39 @@
@import "~theme/globals"; @import "~theme/globals";
:host { :host {
::ng-deep { --extra-icon-size: 16px;
core-user-avatar .core-avatar-extra {
::ng-deep core-user-avatar {
.core-avatar-extra-img,
core-mod-icon {
margin: 0 !important; margin: 0 !important;
position: absolute; position: absolute;
right: -4px; right: -4px;
bottom: -4px; bottom: -4px;
}
core-user-avatar img.core-avatar-extra {
background: none;
width: 24px;
height: 24px;
border-radius: 0 !important;
}
core-user-avatar core-mod-icon.core-avatar-extra {
--size: 16px;
padding: 0.2rem; padding: 0.2rem;
} }
.core-avatar-extra-img {
background: var(--background-color);
border-radius: var(--medium-radius);
img {
max-width: var(--extra-icon-size);
max-height: var(--extra-icon-size);
display: block;
}
}
core-mod-icon {
--size: var(--extra-icon-size);
}
} }
.core-notification-icon { .core-notification-icon {
width: 34px; width: var(--core-avatar-size);
height: 34px; height: var(--core-avatar-size);
margin: 10px !important; @include margin(6px, 8px, 6px, 0px);
background: var(--background-color);
border-radius: var(--small-radius);
} }
.item core-format-text ::ng-deep { .item core-format-text ::ng-deep {

7
src/addons/notifications/pages/list/list.html
View File

@ -36,10 +36,11 @@
<core-user-avatar *ngIf="notification.useridfrom > 0" [user]="notification" slot="start" <core-user-avatar *ngIf="notification.useridfrom > 0" [user]="notification" slot="start"
[profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname" [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname"
[userId]="notification.useridfrom"> [userId]="notification.useridfrom">
<img *ngIf="notification.iconurl && !notification.modname" [src]="notification.iconurl" alt="" role="presentation" <div class="core-avatar-extra-img" *ngIf="notification.iconurl && !notification.modname">
class="core-avatar-extra"> <img [src]="notification.iconurl" alt="" role="presentation">
</div>
<core-mod-icon *ngIf="notification.modname" [modicon]="notification.iconurl" [modname]="notification.modname" <core-mod-icon *ngIf="notification.modname" [modicon]="notification.iconurl" [modname]="notification.modname"
[showAlt]="false" class="core-avatar-extra"> [showAlt]="false">
</core-mod-icon> </core-mod-icon>
</core-user-avatar> </core-user-avatar>

6
src/addons/notifications/pages/notification/notification.html
View File

@ -13,8 +13,10 @@
<ion-item class="ion-text-wrap" [attr.aria-label]="subject"> <ion-item class="ion-text-wrap" [attr.aria-label]="subject">
<core-user-avatar *ngIf="userIdFrom > 0" slot="start" [userId]="userIdFrom" [profileUrl]="profileImageUrlFrom" <core-user-avatar *ngIf="userIdFrom > 0" slot="start" [userId]="userIdFrom" [profileUrl]="profileImageUrlFrom"
[fullname]="userFromFullName"> [fullname]="userFromFullName">
<img *ngIf="iconUrl && !modname" [src]="iconUrl" alt="" role="presentation" class="core-avatar-extra"> <div class="core-avatar-extra-img" *ngIf="iconUrl && !modname">
<core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false" class="core-avatar-extra"> <img [src]="iconUrl" alt="" role="presentation">
</div>
<core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false">
</core-mod-icon> </core-mod-icon>
</core-user-avatar> </core-user-avatar>

2
src/core/components/user-avatar/user-avatar.scss
View File

@ -78,8 +78,6 @@
} }
:host-context(ion-item) { :host-context(ion-item) {
margin-top: 6px;
margin-bottom: 6px;
@include margin(6px, 8px, 6px, 0px); @include margin(6px, 8px, 6px, 0px);
img { img {
min-width: var(--core-avatar-size); min-width: var(--core-avatar-size);