MOBILE-3142 chat: Adapt return types on chat

src/addon/messages/pages/discussion/discussion.scss

@@ -34,7 +34,7 @@ $item-message-mine-bg: $gray-light !default;
     }
 
     // Message item.
-    .addon-message {
+    .item.item-block.addon-message {
         border: 0;
         border-radius: 4px;
         padding: 8px;
@@ -59,7 +59,7 @@ $item-message-mine-bg: $gray-light !default;
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: .5rem!important;
+            margin-bottom: .5rem;
             margin-top: 0;
             color: $text-color;
 
@@ -98,7 +98,7 @@ $item-message-mine-bg: $gray-light !default;
             background-color: darken($item-message-bg, 10%);
         }
 
-        &.item-block .item-inner {
+        .item-inner {
             border-bottom: 0;
             padding: 0;
             margin: 0;
@@ -130,6 +130,7 @@ $item-message-mine-bg: $gray-light !default;
             .icon {
                 font-size: 1.4em;
                 line-height: initial;
+                color: $danger;
             }
         }
 
@@ -141,10 +142,50 @@ $item-message-mine-bg: $gray-light !default;
             position: absolute;
             touch-action: none;
         }
+
+        // Defines when an item-message is the user's.
+        &.addon-message-mine {
+            background-color: $item-message-mine-bg;
+            align-self: flex-end;
+
+            &.activated {
+                background-color: darken($item-message-mine-bg, 10%);
+            }
+
+            .spinner {
+                @include float(end);
+                @include margin(2px, -3px, -2px, 5px);
+
+                svg {
+                  width: 16px;
+                  height: 16px;
+                }
+            }
+
+            .tail {
+                @include position(null, 0, 0, null);
+                @include margin-horizontal(null, -0.5rem);
+                border-bottom-color: $item-message-mine-bg;
+            }
+
+            &.activated .tail {
+                border-bottom-color: darken($item-message-mine-bg, 10%);
+            }
+        }
+
+        &.addon-message-not-mine .tail {
+            @include position(null, null, 0, 0);
+            @include margin-horizontal(-0.5rem, null);
+            border-bottom-color: $item-message-bg;
+        }
+
+        &.addon-message-not-mine.activated .tail {
+            border-bottom-color: darken($item-message-bg, 10%);
+        }
     }
 
-    .addon-message.addon-message-mine + .addon-message-no-user.addon-message-mine,
+    .item.addon-message.addon-message-mine + .item.addon-message.addon-message-no-user.addon-message-mine,
-    .addon-message.addon-message-not-mine + .addon-message-no-user.addon-message-not-mine {
+    .item.addon-message.addon-message-not-mine + .item.addon-message.addon-message-no-user.addon-message-not-mine {
         h2 {
             margin-bottom: 0;
         }
@@ -153,46 +194,6 @@ $item-message-mine-bg: $gray-light !default;
         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;
-
-        &.activated {
-            background-color: darken($item-message-mine-bg, 10%);
-        }
-
-        .spinner {
-            @include float(end);
-            @include margin(2px, -3px, -2px, 5px);
-
-            svg {
-              width: 16px;
-              height: 16px;
-            }
-        }
-
-        .tail {
-            @include position(null, 0, 0, null);
-            @include margin-horizontal(null, -0.5rem);
-            border-bottom-color: $item-message-mine-bg;
-        }
-
-        &.activated .tail {
-            border-bottom-color: darken($item-message-mine-bg, 10%);
-        }
-    }
-
-    .addon-message-not-mine .tail {
-        @include position(null, null, 0, 0);
-        @include margin-horizontal(-0.5rem, null);
-        border-bottom-color: $item-message-bg;
-    }
-
-    .addon-message-not-mine.activated .tail {
-        border-bottom-color: darken($item-message-bg, 10%);
-    }
 }
 
 

src/addon/mod/chat/pages/chat/chat.html

@@ -38,7 +38,7 @@
 
                     <ion-badge text-wrap color="light" *ngIf="message.userid == currentUserId && message.beep && message.beep != 'all'">
                         <span><ion-icon name="notifications"></ion-icon> {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
-                        {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepwho} }} </span>
+                        {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepWho} }} </span>
                     </ion-badge>
 
                     <ion-badge text-wrap color="info" *ngIf="!message.system && !message.beep">

src/addon/mod/chat/pages/chat/chat.scss

@@ -1,4 +1,4 @@
-ion-app.app-root page-addon-mod-chat-chat {
+ion-app.app-root page-addon-mod-chat-chat.ion-page {
     @include message-page();
 
     .addon-mod-chat-notice {

src/addon/mod/chat/pages/chat/chat.ts

@@ -19,9 +19,8 @@ import { CoreEventsProvider } from '@providers/events';
 import { CoreLoggerProvider } from '@providers/logger';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
-import { CoreTextUtilsProvider } from '@providers/utils/text';
+import { AddonModChatProvider } from '../../providers/chat';
-import { AddonModChatProvider, AddonModChatMessageWithUserData } from '../../providers/chat';
+import { AddonModChatHelperProvider, AddonModChatMessageForView } from '../../providers/helper';
-import { AddonModChatHelperProvider } from '../../providers/helper';
 import { Network } from '@ionic-native/network';
 import { coreSlideInOut } from '@classes/animations';
 import { CoreSendMessageFormComponent } from '@components/send-message-form/send-message-form';
@@ -41,7 +40,7 @@ export class AddonModChatChatPage {
 
     loaded = false;
     title: string;
-    messages: AddonModChatMessageWithUserData[] = [];
+    messages: AddonModChatMessageForView[] = [];
     newMessage: string;
     polling: any;
     isOnline: boolean;
@@ -203,7 +202,7 @@ export class AddonModChatChatPage {
             return this.chatProvider.getMessagesUserData(messagesInfo.messages, this.courseId).then((messages) => {
                 if (messages.length) {
                     const previousLength = this.messages.length;
-                    this.messages = this.messages.concat(<AddonModChatMessageWithUserData[]> messages);
+                    this.messages = this.messages.concat(<AddonModChatMessageForView[]> messages);
 
                     // Calculate which messages need to display the date or user data.
                     for (let index = previousLength ; index < this.messages.length; index++) {
@@ -212,9 +211,9 @@ export class AddonModChatChatPage {
 
                         this.chatHelper.formatMessage(this.currentUserId, message, prevMessage);
 
-                        if (message.beep && message.beep != this.currentUserId) {
+                        if (message.beep && message.beep != this.currentUserId + '') {
                             this.getUserFullname(message.beep).then((fullname) => {
-                                message.beepwho = fullname;
+                                message.beepWho = fullname;
                             });
                         }
                     }

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

@@ -35,7 +35,7 @@
 
                     <ion-badge text-wrap color="light" *ngIf="message.userid == currentUserId && message.beep && message.beep != 'all'">
                         <span><ion-icon name="notifications"></ion-icon> {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }}
-                        {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepwho} }} </span>
+                        {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepWho} }} </span>
                     </ion-badge>
 
                     <ion-badge text-wrap color="info" *ngIf="!message.issystem && !message.beep">

src/addon/mod/chat/pages/session-messages/session-messages.scss

@@ -1,4 +1,4 @@
-ion-app.app-root page-addon-mod-chat-session-messages {
+ion-app.app-root page-addon-mod-chat-session-messages.ion-page {
     @include message-page();
 
     .addon-mod-chat-notice {

src/addon/mod/chat/pages/session-messages/session-messages.ts

@@ -17,8 +17,8 @@ import { IonicPage, NavParams } from 'ionic-angular';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreUserProvider } from '@core/user/providers/user';
-import { AddonModChatProvider, AddonModChatSessionMessageWithUserData } from '../../providers/chat';
+import { AddonModChatProvider } from '../../providers/chat';
-import { AddonModChatHelperProvider } from '../../providers/helper';
+import { AddonModChatHelperProvider, AddonModChatSessionMessageForView } from '../../providers/helper';
 
 /**
  * Page that displays list of chat session messages.
@@ -38,7 +38,7 @@ export class AddonModChatSessionMessagesPage {
     protected sessionEnd: number;
     protected groupId: number;
     protected loaded = false;
-    protected messages: AddonModChatSessionMessageWithUserData[] = [];
+    protected messages: AddonModChatSessionMessageForView[] = [];
 
     constructor(navParams: NavParams, private domUtils: CoreDomUtilsProvider, private chatProvider: AddonModChatProvider,
         sitesProvider: CoreSitesProvider, private chatHelper: AddonModChatHelperProvider, private userProvider: CoreUserProvider) {
@@ -61,7 +61,25 @@ export class AddonModChatSessionMessagesPage {
         return this.chatProvider.getSessionMessages(this.chatId, this.sessionStart, this.sessionEnd, this.groupId)
                 .then((messages) => {
             return this.chatProvider.getMessagesUserData(messages, this.courseId).then((messages) => {
+                this.messages = <AddonModChatSessionMessageForView[]> messages;
 
+                if (messages.length) {
+                    // Calculate which messages need to display the date or user data.
+                    for (let index = 0 ; index < this.messages.length; index++) {
+                        const message = this.messages[index];
+                        const prevMessage = index > 0 ? this.messages[index - 1] : null;
+
+                        this.chatHelper.formatMessage(this.currentUserId, message, prevMessage);
+
+                        if (message.beep && message.beep != this.currentUserId + '') {
+                            this.getUserFullname(message.beep).then((fullname) => {
+                                message.beepWho = fullname;
+                            });
+                        }
+                    }
+
+                    this.messages[this.messages.length - 1].showTail = true;
+                }
             });
         }).catch((error) => {
             this.domUtils.showErrorModalDefault(error, 'core.errorloadingcontent', true);

src/addon/mod/chat/providers/chat.ts

@@ -20,6 +20,7 @@ import { CoreCourseLogHelperProvider } from '@core/course/providers/log-helper';
 import { CoreUtilsProvider } from '@providers/utils/utils';
 import { CoreSite, CoreSiteWSPreSets } from '@classes/site';
 import { CoreWSExternalWarning, CoreWSExternalFile } from '@providers/ws';
+import { AddonModChatMessageForView, AddonModChatSessionMessageForView } from './helper';
 
 /**
  * Service that provides some features for chats.
@@ -157,9 +158,9 @@ export class AddonModChatProvider {
      * @return Promise always resolved with the formatted messages.
      */
     getMessagesUserData(messages: (AddonModChatMessage | AddonModChatSessionMessage)[], courseId: number)
-            : Promise<(AddonModChatMessageWithUserData | AddonModChatSessionMessageWithUserData)[]> {
+            : Promise<(AddonModChatMessageForView | AddonModChatSessionMessageForView)[]> {
 
-        const promises = messages.map((message: AddonModChatMessageWithUserData | AddonModChatSessionMessageWithUserData) => {
+        const promises = messages.map((message: AddonModChatMessageForView | AddonModChatSessionMessageForView) => {
             return this.userProvider.getProfile(message.userid, courseId, true).then((user) => {
                 message.userfullname = user.fullname;
                 message.userprofileimageurl = user.profileimageurl;
@@ -448,7 +449,7 @@ export type AddonModChatMessage = {
 };
 
 /**
- * Message with user data
+ * Message with user data.
  */
 export type AddonModChatMessageWithUserData = AddonModChatMessage & AddonModChatMessageUserData;
 
@@ -484,7 +485,7 @@ export type AddonModChatSessionMessage = {
 };
 
 /**
- * Message with user data
+ * Session message with user data.
  */
 export type AddonModChatSessionMessageWithUserData = AddonModChatSessionMessage & AddonModChatMessageUserData;
 

src/addon/mod/chat/providers/helper.ts

@@ -16,10 +16,10 @@ import { Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreTextUtilsProvider } from '@providers/utils/text';
 import * as moment from 'moment';
-import AddonModChatMessageWithUserData from './chat';
+import { AddonModChatMessageWithUserData, AddonModChatSessionMessageWithUserData } from './chat';
 
 /**
- * Helper service that provides some features for quiz.
+ * Helper service that provides some features for chat.
  */
 @Injectable()
 export class AddonModChatHelperProvider {
@@ -39,14 +39,15 @@ export class AddonModChatHelperProvider {
      * @param  prevMessage Previous Message in a discussion (if any).
      * @return Message with additional info.
      */
-    formatMessage(currentUserId: number, message: AddonModChatMessageWithUserData,
+    formatMessage(currentUserId: number, message: AddonModChatMessageForView | AddonModChatSessionMessageForView,
-            prevMessage?: AddonModChatMessageWithUserData): any {
+            prevMessage?: AddonModChatMessageForView | AddonModChatSessionMessageForView): any {
         message.message = message.message.trim();
 
         message.showDate = this.showDate(message, prevMessage);
         message.beep = message.message.substr(0, 5) == 'beep ' && message.message.substr(5).trim();
 
-        message.special = message.issystem || message.system || !!message.beep;
+        message.special = (<AddonModChatSessionMessageForView> message).issystem || (<AddonModChatMessageForView> message).system ||
+            !!message.beep;
 
         if (message.message.substr(0, 4) == '/me ') {
             message.special = true;
@@ -72,7 +73,8 @@ export class AddonModChatHelperProvider {
      * @param prevMessage Previous message.
      * @return Whether user data should be shown.
      */
-    protected showUserData(currentUserId: number, message: any, prevMessage?: any): boolean {
+    protected showUserData(currentUserId: number, message: AddonModChatMessageForView | AddonModChatSessionMessageForView,
+            prevMessage?: AddonModChatMessageForView | AddonModChatSessionMessageForView): boolean {
         return message.userid != currentUserId &&
             (!prevMessage || prevMessage.userid != message.userid || message.showDate || prevMessage.special);
     }
@@ -84,7 +86,8 @@ export class AddonModChatHelperProvider {
      * @param nextMessage Next message.
      * @return Whether user data should be shown.
      */
-    protected showTail(message: AddonModChatMessageWithUserData, nextMessage?: AddonModChatMessageWithUserData): boolean {
+    protected showTail(message: AddonModChatMessageForView | AddonModChatSessionMessageForView,
+            nextMessage?: AddonModChatMessageForView | AddonModChatSessionMessageForView): boolean {
         return !nextMessage || nextMessage.userid != message.userid || nextMessage.showDate || nextMessage.special;
     }
 
@@ -95,7 +98,8 @@ export class AddonModChatHelperProvider {
      * @param  prevMessage Previous message object.
      * @return True if messages are from diferent days, false othetwise.
      */
-    protected showDate(message: AddonModChatMessageWithUserData, prevMessage: AddonModChatMessageWithUserData): boolean {
+    protected showDate(message: AddonModChatMessageForView | AddonModChatSessionMessageForView,
+            prevMessage: AddonModChatMessageForView | AddonModChatSessionMessageForView): boolean {
         if (!prevMessage) {
             return true;
         }
@@ -104,3 +108,25 @@ export class AddonModChatHelperProvider {
         return !moment(message.timestamp * 1000).isSame(prevMessage.timestamp * 1000, 'day');
     }
 }
+
+/**
+ * Special info for view usage.
+ */
+type AddonModChatInfoForView = {
+    showDate?: boolean; // If date should be displayed before the message.
+    beep?: string; // User id of the beeped user or 'all'.
+    special?: boolean; // True if is an special message (system, beep or command).
+    showUserData?: boolean; // If user data should be displayed.
+    showTail?: boolean; // If tail should be displayed (decoration).
+    beepWho?: string; // Fullname of the beeped user.
+};
+
+/**
+ * Message with data for view usage.
+ */
+export type AddonModChatMessageForView = AddonModChatMessageWithUserData & AddonModChatInfoForView;
+
+/**
+ * Session message with data for view usage.
+ */
+export type AddonModChatSessionMessageForView = AddonModChatSessionMessageWithUserData & AddonModChatInfoForView;

src/components/send-message-form/send-message-form.ts

@@ -19,7 +19,6 @@ import { CoreEventsProvider } from '@providers/events';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreUtilsProvider } from '@providers/utils/utils';
 import { CoreTextUtilsProvider } from '@providers/utils/text';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreConstants } from '@core/constants';
 
 /**
@@ -47,8 +46,7 @@ export class CoreSendMessageFormComponent implements OnInit {
     protected sendOnEnter: boolean;
 
     constructor(private utils: CoreUtilsProvider, private textUtils: CoreTextUtilsProvider, configProvider: CoreConfigProvider,
-            eventsProvider: CoreEventsProvider, sitesProvider: CoreSitesProvider, private appProvider: CoreAppProvider,
+            eventsProvider: CoreEventsProvider, sitesProvider: CoreSitesProvider, private appProvider: CoreAppProvider) {
-            private domUtils: CoreDomUtilsProvider) {
 
         this.onSubmit = new EventEmitter();
         this.onResize = new EventEmitter();

src/theme/dark.scss

@@ -21,7 +21,7 @@ ion-app.app-root .ion-page {
     color: $core-dark-text-color;
     background-color: $core-dark-item-bg-color;
 
-    a {
+    a:not(.button) {
       color: $core-dark-link-color;
     }