GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

MOBILE-3814 messages: Fix fab button styles with badge

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-03-09 14:05:44 +01:00
parent c4bf0438f9
commit 494382921f
3 changed files with 11 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/messages/pages/discussion/discussion.html
View File

@ -129,8 +129,8 @@
[attr.aria-label]="'addon.messages.newmessages' | translate">
<ion-icon name="fas-arrow-down" aria-hidden="true"></ion-icon>
<span class="sr-only">{{ 'addon.messages.newmessages' | translate }}</span>
<ion-badge class="core-discussion-messages-badge">{{ newMessages }}</ion-badge>
</ion-fab-button>
<ion-badge class="core-discussion-messages-badge">{{ newMessages }}</ion-badge>
</ion-fab>
</ion-content>
<ion-footer class="footer-adjustable" *ngIf="loaded && (!conversationId || conversation)">

8
src/addons/messages/pages/discussion/discussion.page.ts
View File

@ -1092,8 +1092,8 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
// Leave time for the view to be rendered.
await CoreUtils.nextTicks(5);
if (!this.viewDestroyed) {
this.content!.scrollToBottom(0);
if (!this.viewDestroyed && this.content) {
this.content.scrollToBottom(0);
}
if (force) {
@ -1106,10 +1106,10 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
* Scroll to the first new unread message.
*/
scrollToFirstUnreadMessage(): void {
if (this.newMessages > 0) {
if (this.newMessages > 0 && this.content) {
const messages = Array.from(this.hostElement.querySelectorAll('.addon-message-not-mine'));
CoreDomUtils.scrollToElement(this.content!, <HTMLElement> messages[messages.length - this.newMessages]);
CoreDomUtils.scrollToElement(this.content, <HTMLElement> messages[messages.length - this.newMessages]);
}
}

19
src/addons/messages/pages/discussion/discussion.scss
View File

@ -19,19 +19,12 @@
padding-bottom: 0;
}
ion-fab ion-fab-button {
&::part(native) {
contain: unset;
overflow: visible;
}
.core-discussion-messages-badge {
position: absolute;
color: var(--addon-messages-discussion-badge-text);
background-color: var(--addon-messages-discussion-badge);
display: block;
@include position(-6px, -6px, null, null);
}
ion-fab .core-discussion-messages-badge {
position: absolute;
color: var(--addon-messages-discussion-badge-text);
background-color: var(--addon-messages-discussion-badge);
display: block;
@include position(0, 0, null, null);
}
ion-header ion-toolbar h1 {