From 81b03dedc9be64ef83c8d16a99b968455f736a95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 26 Sep 2019 09:22:05 +0200 Subject: [PATCH] MOBILE-3142 chat: Adapt return types on chat --- .../messages/pages/discussion/discussion.scss | 91 ++++++++++--------- src/addon/mod/chat/pages/chat/chat.html | 2 +- src/addon/mod/chat/pages/chat/chat.scss | 2 +- src/addon/mod/chat/pages/chat/chat.ts | 13 ++- .../session-messages/session-messages.html | 2 +- .../session-messages/session-messages.scss | 2 +- .../session-messages/session-messages.ts | 24 ++++- src/addon/mod/chat/providers/chat.ts | 9 +- src/addon/mod/chat/providers/helper.ts | 42 +++++++-- .../send-message-form/send-message-form.ts | 4 +- src/theme/dark.scss | 2 +- 11 files changed, 118 insertions(+), 75 deletions(-) diff --git a/src/addon/messages/pages/discussion/discussion.scss b/src/addon/messages/pages/discussion/discussion.scss index 4591793e5..0c2237fc2 100644 --- a/src/addon/messages/pages/discussion/discussion.scss +++ b/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, - .addon-message.addon-message-not-mine + .addon-message-no-user.addon-message-not-mine { + .item.addon-message.addon-message-mine + .item.addon-message.addon-message-no-user.addon-message-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%); - } } diff --git a/src/addon/mod/chat/pages/chat/chat.html b/src/addon/mod/chat/pages/chat/chat.html index 7e3de79b3..220b2bab0 100644 --- a/src/addon/mod/chat/pages/chat/chat.html +++ b/src/addon/mod/chat/pages/chat/chat.html @@ -38,7 +38,7 @@ {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }} - {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepwho} }} + {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepWho} }} diff --git a/src/addon/mod/chat/pages/chat/chat.scss b/src/addon/mod/chat/pages/chat/chat.scss index 3e34e5324..e9eb2ef73 100644 --- a/src/addon/mod/chat/pages/chat/chat.scss +++ b/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 { diff --git a/src/addon/mod/chat/pages/chat/chat.ts b/src/addon/mod/chat/pages/chat/chat.ts index de3640946..18f5ce956 100644 --- a/src/addon/mod/chat/pages/chat/chat.ts +++ b/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, AddonModChatMessageWithUserData } from '../../providers/chat'; -import { AddonModChatHelperProvider } from '../../providers/helper'; +import { AddonModChatProvider } from '../../providers/chat'; +import { AddonModChatHelperProvider, AddonModChatMessageForView } 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( messages); + this.messages = this.messages.concat( 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; }); } } diff --git a/src/addon/mod/chat/pages/session-messages/session-messages.html b/src/addon/mod/chat/pages/session-messages/session-messages.html index 1383e37e0..1f2a2ce14 100644 --- a/src/addon/mod/chat/pages/session-messages/session-messages.html +++ b/src/addon/mod/chat/pages/session-messages/session-messages.html @@ -35,7 +35,7 @@ {{ message.timestamp * 1000 | coreFormatDate:"strftimetime" }} - {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepwho} }} + {{ 'addon.mod_chat.messageyoubeep' | translate:{$a: message.beepWho} }} diff --git a/src/addon/mod/chat/pages/session-messages/session-messages.scss b/src/addon/mod/chat/pages/session-messages/session-messages.scss index ec4792983..ef01df6e2 100644 --- a/src/addon/mod/chat/pages/session-messages/session-messages.scss +++ b/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 { diff --git a/src/addon/mod/chat/pages/session-messages/session-messages.ts b/src/addon/mod/chat/pages/session-messages/session-messages.ts index 3696a65c9..a70eda770 100644 --- a/src/addon/mod/chat/pages/session-messages/session-messages.ts +++ b/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 { AddonModChatHelperProvider } from '../../providers/helper'; +import { AddonModChatProvider } from '../../providers/chat'; +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 = 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); diff --git a/src/addon/mod/chat/providers/chat.ts b/src/addon/mod/chat/providers/chat.ts index f656375a7..45a102a06 100644 --- a/src/addon/mod/chat/providers/chat.ts +++ b/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; diff --git a/src/addon/mod/chat/providers/helper.ts b/src/addon/mod/chat/providers/helper.ts index 9c88bed68..c575b64a7 100644 --- a/src/addon/mod/chat/providers/helper.ts +++ b/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, - prevMessage?: AddonModChatMessageWithUserData): any { + formatMessage(currentUserId: number, message: AddonModChatMessageForView | AddonModChatSessionMessageForView, + 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 = ( message).issystem || ( 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; diff --git a/src/components/send-message-form/send-message-form.ts b/src/components/send-message-form/send-message-form.ts index ac7f82578..7076f0d4f 100644 --- a/src/components/send-message-form/send-message-form.ts +++ b/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, - private domUtils: CoreDomUtilsProvider) { + eventsProvider: CoreEventsProvider, sitesProvider: CoreSitesProvider, private appProvider: CoreAppProvider) { this.onSubmit = new EventEmitter(); this.onResize = new EventEmitter(); diff --git a/src/theme/dark.scss b/src/theme/dark.scss index 27800e723..fe18c049a 100644 --- a/src/theme/dark.scss +++ b/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; }