EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3142 chat: Adapt return types on chat

main
Pau Ferrer Ocaña 2019-09-26 09:22:05 +02:00
parent 273d88262c
commit 81b03dedc9
11 changed files with 118 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/addon/messages/pages/discussion/discussion.scss
View File

@ -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%);
}
}

2
src/addon/mod/chat/pages/chat/chat.html
View File

@ -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">

2
src/addon/mod/chat/pages/chat/chat.scss
View File

@ -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 {

13
src/addon/mod/chat/pages/chat/chat.ts
View File

@ -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(<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;
});
}
}

2
src/addon/mod/chat/pages/session-messages/session-messages.html
View File

@ -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">

2
src/addon/mod/chat/pages/session-messages/session-messages.scss
View File

@ -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 {

24
src/addon/mod/chat/pages/session-messages/session-messages.ts
View File

@ -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 = <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);

9
src/addon/mod/chat/providers/chat.ts
View File

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

42
src/addon/mod/chat/providers/helper.ts
View File

@ -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 = (<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;

4
src/components/send-message-form/send-message-form.ts
View File

@ -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();

2
src/theme/dark.scss
View File

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