MOBILE-3814 messages: Fix on some styles

src/addons/messages/pages/discussion/discussion.html

@@ -69,8 +69,7 @@
 
         <h2 class="sr-only">{{ title }}</h2>
 
-        <ion-list class="addon-messages-discussion-container list-item-limited-width" [class.addon-messages-discussion-group]="isGroup"
+        <ion-list class="addon-messages-discussion-container" [class.addon-messages-discussion-group]="isGroup" [attr.aria-live]="'polite'">
-            [attr.aria-live]="'polite'">
             <ng-container *ngFor="let message of messages; index as index; last as last">
                 <h3 class="ion-text-center addon-messages-date" *ngIf="message.showDate">
                     {{ message.timecreated | coreFormatDate: "strftimedayshort" }}
@@ -100,10 +99,10 @@
                         </div>
 
                         <!-- Some messages have <p> and some others don't. Add a <p> so they all have same styles. -->
-                        <p class="addon-message-text">
+                        <div class="addon-message-text">
                             <core-format-text (afterRender)="last && scrollToBottom()" [text]="message.text" contextLevel="system"
                                 [contextInstanceId]="0"></core-format-text>
-                        </p>
+                        </div>
                     </ion-label>
                     <ion-note *ngIf="!message.pending" slot="end">{{ message.timecreated | coreFormatDate: "strftimetime" }}</ion-note>
                     <ion-note *ngIf="message.pending" slot="end">

src/addons/mod/chat/pages/chat/chat.html

@@ -93,13 +93,13 @@
                             <div>{{ message.userfullname }}</div>
                         </h2>
 
-                        <p class="addon-message-text">
+                        <div class="addon-message-text">
                             <core-format-text [text]="message.message" contextLevel="module" [contextInstanceId]="cmId"
                                 [courseId]="courseId" (afterRender)="last && scrollToBottom()">
                             </core-format-text>
-                        </p>
+                        </div>
                     </ion-label>
-                    <ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
+                    <ion-note slot="end">{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
                     <div class="tail" *ngIf="message.showTail"></div>
                 </ion-item>
             </ng-container>

src/addons/mod/chat/pages/session-messages/session-messages.html

@@ -86,13 +86,13 @@
                             <div *ngIf="message.showUserData">{{ message.userfullname }}</div>
                         </h2>
 
-                        <p class="addon-message-text">
+                        <div class="addon-message-text">
                             <core-format-text [text]="message.message" contextLevel="module" [contextInstanceId]="cmId"
                                 [courseId]="courseId">
                             </core-format-text>
-                        </p>
+                        </div>
-                        <ion-note>{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
                     </ion-label>
+                    <ion-note slot="end">{{ message.timestamp * 1000 | coreFormatDate: "strftimetime" }}</ion-note>
                     <div class="tail" *ngIf="message.showTail"></div>
                 </ion-item>
             </ng-container>

src/core/features/comments/pages/viewer/viewer.html

@@ -38,7 +38,7 @@
         <core-infinite-loading [enabled]="canLoadMore" position="top" (action)="loadPrevious($event)" [error]="loadMoreError">
         </core-infinite-loading>
 
-        <ion-list class="addon-messages-discussion-container  list-item-limited-width">
+        <ion-list class="addon-messages-discussion-container">
             <ng-container *ngFor="let comment of comments; index as index; last as last">
 
                 <p class="ion-text-center addon-messages-date" *ngIf="comment.showDate">
@@ -56,13 +56,13 @@
                             <div>{{ comment.fullname }}</div>
                         </h2>
 
-                        <p class="addon-message-text">
+                        <div class="addon-message-text">
                             <core-format-text [text]="comment.content" [contextLevel]="contextLevel" [contextInstanceId]="instanceId"
                                 [courseId]="courseId">
                             </core-format-text>
-                        </p>
+                        </div>
                     </ion-label>
-                    <ion-note>
+                    <ion-note slot="end">
                         <ng-container *ngIf="!comment.deleted">
                             {{ comment.timecreated * 1000 | coreFormatDate: 'strftimetime' }}
                         </ng-container>
@@ -94,11 +94,11 @@
                         {{ 'core.thereisdatatosync' | translate:{$a: 'core.comments.comments' | translate | lowercase } }}
                     </p>
 
-                    <p class="addon-message-text">
+                    <div class="addon-message-text">
                         <core-format-text [text]="offlineComment.content" [contextLevel]="contextLevel" [contextInstanceId]="instanceId"
                             [courseId]="courseId">
                         </core-format-text>
-                    </p>
+                    </div>
                 </ion-label>
                 <ion-note>
                     <ion-icon name="fas-clock" aria-hidden="true"></ion-icon> {{ 'core.notsent' | translate }}

src/core/features/mainmenu/components/user-menu/user-menu.ts

@@ -207,7 +207,7 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
 
         const closeAll = await CoreDomUtils.openSideModal<boolean>({
             component: CoreLoginSitesComponent,
-            cssClass: 'core-modal-lateral-sm',
+            cssClass: 'core-modal-lateral core-modal-lateral-sm',
         });
 
         if (closeAll) {

src/theme/components/discussion.scss

@@ -1,185 +1,173 @@
 @import "~theme/globals.scss";
 
-:host {
-    ion-content {
-        --background: var(--background-alternative);
-
-        &::part(scroll) {
-            padding-bottom: 0 !important;
-        }
-    }
-
-    .addon-messages-discussion-container {
-        display: flex;
-        flex-direction: column;
-        padding-bottom: 15px;
-        background: var(--background-alternative);
-    }
-
-    .addon-messages-date {
-        font-weight: normal;
-        font-size: 0.9rem;
-    }
-
-    // Message item.
-    ion-item.addon-message {
-        border: 0;
-        border-radius: var(--small-radius);
-        padding: 0 8px 0 8px;
-        margin: 10px 8px 0 8px;
-        --background: var(--addon-messages-message-bg);
-        background: var(--background);
-        align-self: flex-start;
-        width: 90%;
-        max-width: 90%;
-        --min-height: var(--a11y-min-target-size);
-        position: relative;
-        @include core-transition(width);
-        // This is needed to display bubble tails.
-        overflow: visible;
-
-        &::part(native) {
-            --inner-border-width: 0px;
-            --inner-padding-end: 0px;
-            padding: 0;
-            margin: 0;
-        }
-
-        core-format-text > p:only-child {
-            display: inline;
-        }
-
-        .addon-message-user {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: .5rem;
-            margin-top: 0;
-            color: var(--ion-text-color);
-
-            core-user-avatar {
-                display: block;
-                --core-avatar-size: var(--addon-messages-avatar-size);
-                margin: 0;
-            }
-
-            div {
-                font-weight: 500;
-                flex-grow: 1;
-                @include padding-horizontal(.5rem);
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        ion-note {
-            color: var(--addon-messages-message-note-text);
-            font-size: var(--addon-messages-message-note-font-size);
-            margin: 0;
-            padding: 0 0 8px 0;
-            align-self: flex-end;
-        }
-
-        &[tappable]:active {
-            --background: var(--addon-messages-message-activated-bg);
-        }
-
-        ion-label {
-            margin: 0;
-            padding: 8px 0;
-        }
-
-        .addon-message-text {
-            display: inline-flex;
-            * {
-                color: var(--ion-text-color);
-            }
-        }
-
-        .tail {
-            content: '';
-            width: 0;
-            height: 0;
-            border: 0.5rem solid transparent;
-            position: absolute;
-            touch-action: none;
-            bottom: 0;
-        }
-
-        // Defines when an item-message is the user's.
-        &.addon-message-mine {
-            --background: var(--addon-messages-message-mine-bg);
-            align-self: flex-end;
-
-            &[tappable]:active {
-                --background: var(--addon-messages-message-mine-activated-bg);
-            }
-
-            .spinner {
-                @include float(end);
-                @include margin(2px, -3px, -2px, 5px);
-
-                svg {
-                    width: 16px;
-                    height: 16px;
-                }
-            }
-
-            .tail {
-                @include position(null, -8px, null, null);
-                @include margin-horizontal(null, -0.5rem);
-                border-bottom-color: var(--addon-messages-message-mine-bg);
-            }
-
-            &[tappable]:active .tail {
-                border-bottom-color: var(--addon-messages-message-mine-activated-bg);
-            }
-        }
-
-        &.addon-message-not-mine .tail {
-            border-bottom-color: var(--addon-messages-message-bg);
-            @include position(null, null, null, -8px);
-            @include margin-horizontal(-0.5rem, null);
-        }
-
-        &[tappable].addon-message-not-mine.activated .tail {
-            border-bottom-color: var(--addon-messages-message-activated-bg);
-        }
-
-        .addon-messages-delete-button {
-            min-height: initial;
-            line-height: initial;
-            @include margin(0, null, 0, null);
-            height: var(--a11y-min-target-size) !important;
-            align-self: flex-end;
-
-            ion-icon {
-                font-size: 1.4em;
-                line-height: initial;
-                color: var(--danger);
-            }
-        }
-
-        &.addon-message-no-user {
-            margin-top: 8px;
-        }
-    }
-
-    ion-item.addon-message.addon-message-mine + ion-item.addon-message.addon-message-no-user.addon-message-mine,
-    ion-item.addon-message.addon-message-not-mine + ion-item.addon-message.addon-message-no-user.addon-message-not-mine {
-        .item-heading {
-            margin-bottom: 0;
-        }
-        padding-top: 0;
-    }
-
-}
-
 :host-context(.ios) {
     ion-footer .toolbar:last-child {
         padding-bottom: 4px;
         min-height: 0;
     }
 }
+
+ion-content {
+    --content-background: var(--background-alternative);
+    --background: var(--content-background);
+
+    &::part(scroll) {
+        padding-bottom: 0 !important;
+    }
+}
+
+.addon-messages-discussion-container {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 16px !important;
+    background: var(--content-background);
+}
+
+.addon-messages-date {
+    font-weight: normal;
+    font-size: 0.9rem;
+}
+
+// Message item.
+ion-item.addon-message {
+    --message-background: var(--addon-messages-message-bg);
+    --message-activated-background: var(--addon-messages-message-activated-bg);
+    --message-alignment: flex-start;
+
+    border: 0;
+    border-radius: var(--medium-radius);
+    padding: 0 8px 0 8px;
+    margin: 8px;
+    --background: var(--message-background);
+    background: var(--message-background);
+    align-self: var(--message-alignment);
+    width: 90%;
+    max-width: var(--list-item-max-width);
+    --min-height: var(--a11y-min-target-size);
+    position: relative;
+    @include core-transition(width);
+    // This is needed to display bubble tails.
+    overflow: visible;
+
+    &::part(native) {
+        --inner-border-width: 0px;
+        --inner-padding-end: 0px;
+        padding: 0;
+        margin: 0;
+    }
+
+    &:hover {
+        filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
+    }
+
+    core-format-text > p:only-child {
+        display: inline;
+    }
+
+    .addon-message-user {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: .5rem;
+        margin-top: 0;
+        color: var(--ion-text-color);
+
+        core-user-avatar {
+            display: block;
+            --core-avatar-size: var(--addon-messages-avatar-size);
+            margin: 0;
+        }
+
+        div {
+            font-weight: 500;
+            flex-grow: 1;
+            padding-left: .5rem;
+            padding-right: .5rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    ion-note {
+        color: var(--addon-messages-message-note-text);
+        font-size: var(--addon-messages-message-note-font-size);
+        margin: 0;
+        padding: 8px 0;
+        align-self: flex-start;
+    }
+
+    &[tappable]:active {
+        --message-background: var(--message-activated-background);
+    }
+
+    ion-label {
+        margin: 0;
+        padding: 8px 0;
+    }
+
+    .addon-message-text {
+        display: inline-flex;
+        * {
+            color: var(--ion-text-color);
+        }
+    }
+
+    .tail {
+        content: '';
+        width: 0;
+        height: 0;
+        border: 0.5rem solid transparent;
+        position: absolute;
+        touch-action: none;
+        bottom: 0;
+        border-bottom-color: var(--message-background);
+    }
+
+    // Defines when an item-message is the user's.
+    &.addon-message-mine {
+        --message-background: var(--addon-messages-message-mine-bg);
+        --message-activated-background: var(--addon-messages-message-mine-activated-bg);
+        --message-alignment: flex-end;
+
+        .spinner {
+            @include float(end);
+            @include margin(2px, -3px, -2px, 5px);
+
+            svg {
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        .tail {
+            @include position(null, -8px, null, null);
+            @include margin-horizontal(null, -0.5rem);
+        }
+    }
+
+    &.addon-message-not-mine .tail {
+        @include position(null, null, null, -8px);
+        @include margin-horizontal(-0.5rem, null);
+    }
+
+    .addon-messages-delete-button {
+        min-height: initial;
+        line-height: initial;
+        margin-top: 0px;
+        margin-bottom: 0px;
+        height: var(--a11y-min-target-size) !important;
+        align-self: flex-end;
+
+        ion-icon {
+            font-size: 1.4em;
+            line-height: initial;
+            color: var(--danger);
+        }
+    }
+
+    &.addon-message-no-user {
+        margin-top: 0px;
+    }
+}

src/theme/theme.light.scss

@@ -104,7 +104,7 @@
 
     ion-content {
         --background: var(--ion-background-color);
-        --background-alternative: var(--light);
+        --background-alternative: var(--gray-200);
     }
 
     --core-bottom-tabs-background: var(--white);
@@ -324,8 +324,8 @@
     --addon-messages-message-activated-bg: var(--gray-200);
     --addon-messages-message-note-text: var(--gray-500);
     --addon-messages-message-note-font-size: 75%;
-    --addon-messages-message-mine-bg: var(--gray-200);
+    --addon-messages-message-mine-bg: var(--gray-300);
-    --addon-messages-message-mine-activated-bg: var(--gray-300);
+    --addon-messages-message-mine-activated-bg: var(--gray-400);
     --addon-messages-avatar-size: 30px;
     --addon-messages-discussion-badge: var(--primary);
     --addon-messages-discussion-badge-text: var(--white);