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;
}