From 371c66407a9937eb991f708019947560e0d42a15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 11 Dec 2018 15:40:45 +0100
Subject: [PATCH] MOBILE-2774 messages: Style conversation page

---
 .../messages/pages/discussion/discussion.html |  26 ++---
 .../messages/pages/discussion/discussion.scss | 101 +++++++++++++-----
 src/theme/format-text.scss                    |   5 -
 3 files changed, 90 insertions(+), 42 deletions(-)

diff --git a/src/addon/messages/pages/discussion/discussion.html b/src/addon/messages/pages/discussion/discussion.html
index ac8de345d..d307ec3c5 100644
--- a/src/addon/messages/pages/discussion/discussion.html
+++ b/src/addon/messages/pages/discussion/discussion.html
@@ -25,32 +25,32 @@
     <core-loading [hideUntil]="loaded">
         <!-- Load previous messages. -->
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError"></core-infinite-loading>
-        <ion-list class="addon-messages-discussion-container safe-area-page" [attr.aria-live]="'polite'">
+        <ion-list class="addon-messages-discussion-container safe-area-page" [class.addon-messages-discussion-group]="isGroup" [attr.aria-live]="'polite'">
             <ng-container *ngFor="let message of messages; index as index; last as last">
-                <ion-chip *ngIf="message.showDate" class="addon-messages-date" color="light">
-                    <ion-label>{{ message.timecreated | coreFormatDate: "LL" }}</ion-label>
-                </ion-chip>
+                <h6 text-center *ngIf="message.showDate" class="addon-messages-date">
+                    {{ message.timecreated | coreFormatDate: "LL" }}
+                </h6>
 
                 <ion-chip class="addon-messages-unreadfrom" *ngIf="unreadMessageFrom && message.id == unreadMessageFrom" color="light">
                     <ion-label>{{ 'addon.messages.newmessages' | translate:{$a: title} }}</ion-label>
                     <ion-icon name="arrow-round-down"></ion-icon>
                 </ion-chip>
 
-                <ion-item text-wrap (longPress)="copyMessage(message)" class="addon-message" [class.addon-message-mine]="message.useridfrom == currentUserId" [@coreSlideInOut]="message.useridfrom == currentUserId ? '' : 'fromLeft'">
+                <ion-item text-wrap (longPress)="copyMessage(message)" class="addon-message" [class.addon-message-mine]="message.useridfrom == currentUserId" [class.addon-message-not-mine]="message.useridfrom != currentUserId" [class.addon-message-no-user]="!message.showUserData" [@coreSlideInOut]="message.useridfrom == currentUserId ? '' : 'fromLeft'">
                     <!-- User data. -->
-                    <ion-avatar item-start *ngIf="message.showUserData">
-                        <img [src]="members[message.useridfrom].profileimageurl" [alt]="'core.pictureof' | translate:{$a: members[message.useridfrom].fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
-                    </ion-avatar>
-                    <h2 *ngIf="message.showUserData">{{ members[message.useridfrom].fullname }}</h2>
+                    <h2 class="addon-message-user" >
+                        <ion-avatar item-start core-user-avatar [user]="members[message.useridfrom]" [linkProfile]="false" *ngIf="message.showUserData"></ion-avatar>
+
+                        <div *ngIf="message.showUserData">{{ members[message.useridfrom].fullname }}</div>
+
+                        <ion-note *ngIf="!message.pending">{{ message.timecreated | coreFormatDate: "dftimedate" }}</ion-note>
+                        <ion-note *ngIf="message.pending"><ion-icon name="time"></ion-icon></ion-note>
+                    </h2>
 
                     <!-- Some messages have <p> and some others don't. Add a <p> so they all have same styles. -->
                     <p class="addon-message-text">
                         <core-format-text (afterRender)="last && scrollToBottom()" [text]="message.text"></core-format-text>
                     </p>
-                    <ion-note *ngIf="!message.pending">
-                        {{ message.timecreated | coreFormatDate: "dftimedate" }}
-                    </ion-note>
-                    <ion-note *ngIf="message.pending"><ion-icon name="time"></ion-icon></ion-note>
 
                     <button ion-button icon-only clear="true" *ngIf="!message.sending && showDelete" (click)="deleteMessage(message, index)" class="addon-messages-delete-button" [@coreSlideInOut]="'fromRight'" [attr.aria-label]=" 'addon.messages.deletemessage' | translate">
                         <ion-icon name="trash" color="danger"></ion-icon>
diff --git a/src/addon/messages/pages/discussion/discussion.scss b/src/addon/messages/pages/discussion/discussion.scss
index d8783090f..521b07bca 100644
--- a/src/addon/messages/pages/discussion/discussion.scss
+++ b/src/addon/messages/pages/discussion/discussion.scss
@@ -1,39 +1,93 @@
 // Messages.
-$item-message-bg: $gray-lighter !default;
+$item-message-bg: $white !default;
 $item-message-note-text: $gray-dark !default;
 $item-message-note-font-size: 75% !default;
-$item-message-mine-bg: $blue-light !default;
+$item-message-mine-bg: $gray-light !default;
 
 ion-app.app-root page-addon-messages-discussion {
+    ion-content {
+        background-color: $gray-lighter !important;
+    }
+
     .addon-messages-discussion-container {
         display: flex;
         flex-direction: column;
         padding-bottom: 15px;
     }
 
-    .addon-messages-date,
-    .addon-messages-unreadfrom {
-        margin-top: 10px;
+    .addon-messages-date {
+        font-weight: normal;
+        font-size: 1.4rem;
     }
 
     .addon-messages-unreadfrom {
-        color: $blue;
+        color: $core-color;
+        background-color: transparent;
+        margin-top: 10px;
+        ion-icon {
+            color: $core-color;
+            background-color: transparent;
+        }
     }
 
     // Message item.
     .addon-message {
-        max-width: 80%;
         border: 0;
-        border-radius: 16px;
-        padding: 10px;
-        margin: 4px;
+        border-radius: 4px;
+        padding: 8px;
+        @include margin(8px, 8px, 0, 8px);
         background-color: $item-message-bg;
         align-self: flex-start;
-        width: auto;
+        width: 90%;
+        max-width: 90%;
         min-height: 0;
         position: relative;
         @include core-transition(width);
 
+        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!important;
+            margin-top: 0;
+
+            ion-avatar {
+                display: block;
+                min-width: 30px;
+                min-height: 30px;
+                margin: 0;
+                img {
+                    width: 30px;
+                    height: 30px;
+                }
+            }
+
+            div {
+                font-weight: 500;
+                flex-grow: 1;
+                @include padding-horizontal(.5rem);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .note {
+                @include text-align('end');
+                color: $item-message-note-text;
+                font-size: $item-message-note-font-size;
+            }
+        }
+
+        &.addon-message-no-user .addon-message-user .note {
+            width: 100%;
+        }
+
         &.activated {
             background-color: darken($item-message-bg, 10%);
         }
@@ -53,12 +107,6 @@ ion-app.app-root page-addon-messages-discussion {
             display: inline-flex;
         }
 
-        .note {
-            align-self: flex-end;
-            color: $item-message-note-text;
-            font-size: $item-message-note-font-size;
-            @include margin(null, null, null, 10px);
-        }
         .addon-messages-delete-button {
             min-height: initial;
             line-height: initial;
@@ -76,11 +124,22 @@ ion-app.app-root page-addon-messages-discussion {
         }
     }
 
+    .addon-messages-discussion-group .addon-message + .addon-message-no-user,
+    .addon-message.addon-message-mine + .addon-message-no-user.addon-message-mine,
+    .addon-message.addon-message-not-mine + .addon-message-no-user.addon-message-not-mine {
+        h2 {
+            margin-bottom: 0;
+        }
+        margin-top: -4px;
+        padding-top: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+    }
+
     // Defines when an item-message is the user's.
     .addon-message-mine {
         background-color: $item-message-mine-bg;
         align-self: flex-end;
-        max-width: 80%;
 
         &.activated {
             background-color: darken($item-message-mine-bg, 10%);
@@ -97,12 +156,6 @@ ion-app.app-root page-addon-messages-discussion {
         }
     }
 
-    .addon-message .item-content,
-    .addon-message-mine .item-content {
-        background-color: transparent;
-        padding: 0;
-    }
-
     .toolbar-title {
         img {
             @include margin-horizontal(null, 6px);
diff --git a/src/theme/format-text.scss b/src/theme/format-text.scss
index 629e9f953..1e04a9d79 100644
--- a/src/theme/format-text.scss
+++ b/src/theme/format-text.scss
@@ -184,9 +184,4 @@ ion-app.app-root {
     width: min-content;
     display: inline;
   }
-
-  // Message item.
-  .item-message core-format-text > p:only-child {
-    display: inline;
-  }
 }
\ No newline at end of file