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

MOBILE-3631 messages: Add splitview to messages pages

main
Pau Ferrer Ocaña 2021-01-26 12:39:48 +01:00
parent 001048fc9a
commit e3b28d87e5
24 changed files with 285 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/badges/pages/user-badges/user-badges.html
View File

@ -17,7 +17,7 @@
<ion-list *ngIf="badges && badges.length" class="ion-no-margin">
<ion-item class="ion-text-wrap" *ngFor="let badge of badges" [title]="badge.name"
(click)="loadIssuedBadge(badge.uniquehash)" [class.core-split-item-selected]="badge.uniquehash == badgeHash">
(click)="loadIssuedBadge(badge.uniquehash)" [class.core-selected-item]="badge.uniquehash == badgeHash">
<ion-avatar slot="start">
<img [src]="badge.badgeurl" [alt]="badge.name" core-external-content>
</ion-avatar>

2
src/addons/calendar/pages/list/list.html
View File

@ -43,7 +43,7 @@
<ion-label>{{ event.timestart * 1000 | coreFormatDate: "strftimedayshort" }}</ion-label>
</ion-item-divider>
<ion-item class="ion-text-wrap" [title]="event.name" (click)="gotoEvent(event.id)"
[class.core-split-item-selected]="event.id == eventId" class="addon-calendar-event"
[class.core-selected-item]="event.id == eventId" class="addon-calendar-event"
[ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
<img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" slot="start" class="core-module-icon">
<ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start">

14
src/addons/messages/messages-lazy.module.ts
View File

@ -13,13 +13,19 @@
// limitations under the License.
import { Injector, NgModule } from '@angular/core';
import { RouterModule, ROUTES, Routes } from '@angular/router';
import { Route, RouterModule, ROUTES, Routes } from '@angular/router';
import { buildTabMainRoutes } from '@features/mainmenu/mainmenu-tab-routing.module';
import { AddonMessagesContactsRoutingModule } from './pages/contacts/messages-contacts-routing.module';
import { AddonMessagesIndexRoutingModule } from './pages/index-35/messages-index-routing.module';
import { AddonMessagesSettingsHandlerService } from './services/handlers/settings';
export const discussionRoute: Route = {
path: 'discussion',
loadChildren: () => import('./pages/discussion/discussion.module')
.then(m => m.AddonMessagesDiscussionPageModule),
};
function buildRoutes(injector: Injector): Routes {
return [
{
@ -31,11 +37,7 @@ function buildRoutes(injector: Injector): Routes {
loadChildren: () => import('./pages/group-conversations/group-conversations.module')
.then(m => m.AddonMessagesGroupConversationsPageModule),
},
{
path: 'discussion',
loadChildren: () => import('./pages/discussion/discussion.module')
.then(m => m.AddonMessagesDiscussionPageModule),
},
discussionRoute,
{
path: 'search',
loadChildren: () => import('./pages/search/search.module')

6
src/addons/messages/pages/contacts-35/contacts.html
View File

@ -22,9 +22,9 @@
</ion-item-divider>
<ng-container *ngFor="let contact of contacts[contactType]">
<!-- Don't show deleted users -->
<ion-item class="ion-text-wrap" *ngIf="contact.profileimageurl || contact.profileimageurlsmall"
[title]="contact.fullname" (click)="gotoDiscussion(contact.id)"
[class.core-split-item-selected]="contact.id == discussionUserId" class="addon-messages-conversation-item">
<ion-item class="ion-text-wrap addon-messages-conversation-item" *ngIf="contact.profileimageurl || contact.profileimageurlsmall"
[title]="contact.fullname" (click)="gotoDiscussion(contact.id)" detail
[class.core-selected-item]="contact.id == discussionUserId">
<core-user-avatar [user]="contact" slot="start" [checkOnline]="contact.showonlinestatus"></core-user-avatar>
<ion-label><h2>{{ contact.fullname }}</h2></ion-label>
</ion-item>

8
src/addons/messages/pages/contacts-confirmed/contacts-confirmed.html
View File

@ -4,14 +4,14 @@
</ion-refresher>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<ion-list class="ion-no-margin">
<ion-item class="ion-text-wrap" *ngFor="let contact of contacts" [title]="contact.fullname"
(click)="selectUser(contact.id)"
[class.core-split-item-selected]="contact.id == selectedUserId" class="addon-messages-conversation-item">
<ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let contact of contacts"
[title]="contact.fullname" (click)="selectUser(contact.id)" detail
[class.core-selected-item]="contact.id == selectedUserId">
<core-user-avatar slot="start" core-user-avatar [user]="contact" [checkOnline]="contact.showonlinestatus"
[linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>
{{ contact.fullname }}
<core-format-text [text]="contact.fullname" contextLevel="system" [contextInstanceId]="0"></core-format-text>
<ion-icon *ngIf="contact.isblocked" name="fas-user-slash" slot="end">
</ion-icon>
</h2>

23
src/addons/messages/pages/contacts-confirmed/contacts-confirmed.page.ts
View File

@ -24,7 +24,7 @@ import {
} from '../../services/messages';
import { CoreDomUtils } from '@services/utils/dom';
import { IonRefresher } from '@ionic/angular';
import { CoreNavigator } from '@services/navigator';
import { CoreScreen } from '@services/screen';
/**
* Component that displays the list of confirmed contacts.
@ -32,6 +32,7 @@ import { CoreNavigator } from '@services/navigator';
@Component({
selector: 'addon-messages-confirmed-contacts',
templateUrl: 'contacts-confirmed.html',
styleUrls: ['../../messages-common.scss'],
})
export class AddonMessagesContactsConfirmedPage implements OnInit, OnDestroy {
@ -44,8 +45,6 @@ export class AddonMessagesContactsConfirmedPage implements OnInit, OnDestroy {
protected memberInfoObserver: CoreEventObserver;
constructor() {
// this.onUserSelected = new EventEmitter();
// Update block status of a user.
this.memberInfoObserver = CoreEvents.on<AddonMessagesMemberInfoChangedEventData>(
AddonMessagesProvider.MEMBER_INFO_CHANGED_EVENT,
@ -74,7 +73,7 @@ export class AddonMessagesContactsConfirmedPage implements OnInit, OnDestroy {
async ngOnInit(): Promise<void> {
try {
await this.fetchData();
if (this.contacts.length) {
if (this.contacts.length && CoreScreen.instance.isTablet) {
this.selectUser(this.contacts[0].id, true);
}
} finally {
@ -144,15 +143,13 @@ export class AddonMessagesContactsConfirmedPage implements OnInit, OnDestroy {
selectUser(userId: number, onInit: boolean = false): void {
this.selectedUserId = userId;
const data: AddonMessagesSplitViewLoadContactsEventData = {
userId,
onInit,
};
CoreEvents.trigger(AddonMessagesProvider.SPLIT_VIEW_LOAD_CONTACTS_EVENT, data);
// @todo: Check if split view is visible before
CoreNavigator.instance.navigateToSitePath('discussion', { params : { userId } });
CoreEvents.trigger<AddonMessagesSplitViewLoadContactsEventData>(
AddonMessagesProvider.SPLIT_VIEW_LOAD_CONTACTS_EVENT,
{
userId,
onInit,
},
);
}
/**

8
src/addons/messages/pages/contacts-requests/contacts-requests.html
View File

@ -4,12 +4,12 @@
</ion-refresher>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<ion-list class="ion-no-margin">
<ion-item class="ion-text-wrap" *ngFor="let request of requests" [title]="request.fullname"
(click)="selectUser(request.id)" [class.core-split-item-selected]="request.id == selectedUserId"
class="addon-messages-conversation-item">
<ion-item class="ion-text-wrap addon-messages-conversation-item" *ngFor="let request of requests"
[title]="request.fullname" (click)="selectUser(request.id)"
[class.core-selected-item]="request.id == selectedUserId" detail>
<core-user-avatar slot="start" [user]="request" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ request.fullname }}</h2>
<core-format-text [text]="request.fullname" contextLevel="system" [contextInstanceId]="0"></core-format-text>
<p *ngIf="!request.iscontact">
{{ 'addon.messages.wouldliketocontactyou' | translate }}
</p>

7
src/addons/messages/pages/contacts-requests/contacts-requests.page.ts
View File

@ -25,6 +25,7 @@ import {
import { CoreDomUtils } from '@services/utils/dom';
import { CoreNavigator } from '@services/navigator';
import { IonRefresher } from '@ionic/angular';
import { CoreScreen } from '@services/screen';
/**
* Component that displays the list of contact requests.
@ -32,6 +33,7 @@ import { IonRefresher } from '@ionic/angular';
@Component({
selector: 'addon-messages-contact-requests',
templateUrl: 'contacts-requests.html',
styleUrls: ['../../messages-common.scss'],
})
export class AddonMessagesContactsRequestsPage implements OnInit, OnDestroy {
@ -67,7 +69,7 @@ export class AddonMessagesContactsRequestsPage implements OnInit, OnDestroy {
async ngOnInit(): Promise<void> {
try {
await this.fetchData();
if (this.requests.length) {
if (this.requests.length && CoreScreen.instance.isTablet) {
this.selectUser(this.requests[0].id, true);
}
} finally {
@ -146,9 +148,6 @@ export class AddonMessagesContactsRequestsPage implements OnInit, OnDestroy {
};
CoreEvents.trigger(AddonMessagesProvider.SPLIT_VIEW_LOAD_CONTACTS_EVENT, data);
// @todo: Check if split view is visible before
CoreNavigator.instance.navigateToSitePath('discussion', { params : { userId } });
}
/**

5
src/addons/messages/pages/contacts/contacts.html
View File

@ -13,7 +13,8 @@
</ion-buttons>
</ion-toolbar>
</ion-header>
<!-- @todo <core-split-view>-->
<ion-content>
<core-tabs [tabs]="tabs" hideUntil="true"></core-tabs>
<core-split-view>
<core-tabs [tabs]="tabs" hideUntil="true"></core-tabs>
</core-split-view>
</ion-content>

19
src/addons/messages/pages/contacts/contacts.module.ts
View File

@ -17,19 +17,34 @@ import { IonicModule } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';
import { RouterModule, ROUTES, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { conditionalRoutes, resolveModuleRoutes } from '@/app/app-routing.module';
import { discussionRoute } from '@addons/messages/messages-lazy.module';
import { CoreScreen } from '@services/screen';
import { CoreSharedModule } from '@/core/shared.module';
import { ADDON_MESSAGES_CONTACTS_ROUTES } from './messages-contacts-routing.module';
import { AddonMessagesContactsPage } from './contacts.page';
import { buildTabMainRoutes } from '@features/mainmenu/mainmenu-tab-routing.module';
import { resolveModuleRoutes } from '@/app/app-routing.module';
// @todo mix both routes to get messages/contacts/requests/discussion and messages/contacts/confirmed/discussion working
const routes: Routes = [
{
path: '',
matcher: segments => {
const matches = CoreScreen.instance.isMobile ? segments.length === 0 : true;
return matches ? { consumed: [] } : null;
},
component: AddonMessagesContactsPage,
children: conditionalRoutes([
{
path: '',
pathMatch: 'full',
},
discussionRoute,
], () => CoreScreen.instance.isTablet),
},
...conditionalRoutes([discussionRoute], () => CoreScreen.instance.isMobile),
];
function buildRoutes(injector: Injector): Routes {

29
src/addons/messages/pages/contacts/contacts.page.ts
View File

@ -23,7 +23,7 @@ import {
} from '../../services/messages';
import { CoreTab } from '@components/tabs/tabs';
import { CoreNavigator } from '@services/navigator';
// @todo import { CoreSplitViewComponent } from '@components/split-view/split-view';
import { CoreScreen } from '@services/screen';
/**
* Page that displays contacts and contact requests.
@ -34,15 +34,13 @@ import { CoreNavigator } from '@services/navigator';
})
export class AddonMessagesContactsPage implements OnInit, OnDestroy {
// @todo @ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
protected contactsTab: CoreTab = {
id: 'contacts-confirmed',
class: '',
title: 'addon.messages.contacts',
icon: 'fas-address-book',
enabled: true,
page: 'main/messages/contacts/confirmed',
page: '/main/messages/contacts/confirmed',
};
protected requestsTab: CoreTab = {
@ -51,7 +49,7 @@ export class AddonMessagesContactsPage implements OnInit, OnDestroy {
title: 'addon.messages.requests',
icon: 'fas-user-plus',
enabled: true,
page: 'main/messages/contacts/requests',
page: '/main/messages/contacts/requests',
badge: '',
};
@ -83,8 +81,8 @@ export class AddonMessagesContactsPage implements OnInit, OnDestroy {
(data) => {
this.selectUser(data.userId, data.onInit);
},
this.siteId,
);
}
/**
@ -108,19 +106,28 @@ export class AddonMessagesContactsPage implements OnInit, OnDestroy {
* @param onInit Whether the contact was selected on initial load.
*/
selectUser(userId: number, onInit = false): void {
/* @todo if (userId == this.selectedUserId && this.splitviewCtrl.isOn()) {
if (userId == this.selectedUserId && CoreScreen.instance.isTablet) {
// No user conversation to open or it is already opened.
return;
}
if (onInit && !this.splitviewCtrl.isOn()) {
if (onInit && CoreScreen.instance.isMobile) {
// Do not open a conversation by default when split view is not visible.
return;
}*/
}
this.selectedUserId = userId;
// @todo this.splitviewCtrl.push('AddonMessagesDiscussionPage', { userId });
CoreNavigator.instance.navigateToSitePath('discussion', { params : { userId } });
// @todo it does not seem to work load anything.
let path = 'discussion';
if (CoreScreen.instance.isMobile) {
path = '../../' + path;
} else {
const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/contacts/**/discussion');
path = (splitViewLoaded ? '../' : '') + path;
}
CoreNavigator.instance.navigate(path, { params : { userId } });
}
/**

37
src/addons/messages/pages/discussion/discussion.page.ts
View File

@ -30,6 +30,7 @@ import {
AddonMessagesNewMessagedEventData,
AddonMessagesUpdateConversationListEventData,
AddonMessagesConversationMessageFormatted,
AddonMessagesOpenConversationEventData,
} from '../../services/messages';
import { AddonMessagesOffline } from '../../services/messages-offline';
import { AddonMessagesSync, AddonMessagesSyncEvents, AddonMessagesSyncProvider } from '../../services/messages-sync';
@ -51,7 +52,6 @@ import { ActivatedRoute } from '@angular/router';
import {
AddonMessagesOfflineMessagesDBRecordFormatted,
} from '@addons/messages/services/database/messages';
// @todo import { CoreSplitViewComponent } from '@components/split-view/split-view';
/**
* Page that displays a message discussion page.
@ -119,9 +119,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
constructor(
protected route: ActivatedRoute,
// @todo @Optional() private svComponent: CoreSplitViewComponent,
) {
this.siteId = CoreSites.instance.getCurrentSiteId();
this.currentUserId = CoreSites.instance.getCurrentSiteUserId();
this.groupMessagingEnabled = AddonMessages.instance.isGroupMessagingEnabled();
@ -167,16 +165,19 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
*/
async ngOnInit(): Promise<void> {
this.route.queryParams.subscribe(params => {
this.route.queryParams.subscribe(async params => {
// Disable the profile button if we're already coming from a profile.
const backViewPage = CoreNavigator.instance.getPreviousPath();
this.showInfo = !backViewPage || !CoreTextUtils.instance.matchesGlob(backViewPage, '**/user/profile');
this.conversationId = params['conversationId'] || undefined;
this.userId = params['userId'] || undefined;
this.loaded = false;
this.conversationId = parseInt(params['conversationId'], 10) || undefined;
this.userId = parseInt(params['userId'], 10) || undefined;
this.showKeyboard = !!params['showKeyboard'];
this.fetchData();
await this.fetchData();
this.scrollToBottom();
});
}
@ -1293,24 +1294,26 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
await modal.present();
const userId = await modal.onDidDismiss();
const result = await modal.onDidDismiss();
if (typeof result.data.userId != 'undefined') {
const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/**/discussion');
if (typeof userId != 'undefined') {
// Open user conversation.
/* @todo if (this.svComponent) {
if (splitViewLoaded) {
// Notify the left pane to load it, this way the right conversation will be highlighted.
CoreEvents.trigger<AddonMessagesOpenConversationEventData>(
AddonMessagesProvider.OPEN_CONVERSATION_EVENT,
{ userId: userId },
this.siteId);
} else {*/
// Open the discussion in a new view.
CoreNavigator.instance.navigateToSitePath('/messages/discussion', { params: { userId } });
// }
{ userId: result.data.userId },
this.siteId,
);
} else {
// Open the discussion in a new view.
CoreNavigator.instance.navigateToSitePath('/messages/discussion', { params: { userId: result.data.userId } });
}
}
} else {
// Open the user profile.
// @todo const navCtrl = this.svComponent ? this.svComponent.getMasterNav() : this.navCtrl;
CoreNavigator.instance.navigateToSitePath('/user/profile', { params: { userId: this.userId } });
}
}

4
src/addons/messages/pages/discussions-35/discussions.html
View File

@ -18,7 +18,7 @@
</ion-item-divider>
<ion-item class="ion-text-wrap" *ngFor="let result of search.results" [title]="result.fullname"
(click)="gotoDiscussion(result.userid, result.messageid)"
[class.core-split-item-selected]="result.userid == discussionUserId" class="addon-message-discussion">
[class.core-selected-item]="result.userid == discussionUserId" class="addon-message-discussion">
<core-user-avatar [user]="result" slot="start" [checkOnline]="result.showonlinestatus"></core-user-avatar>
<ion-label>
<h2>{{ result.fullname }}</h2>
@ -31,7 +31,7 @@
<ion-list *ngIf="!search.showResults" class="ion-no-margin">
<ion-item class="ion-text-wrap" *ngFor="let discussion of discussions" [title]="discussion.fullname"
(click)="gotoDiscussion(discussion.message!.user)"
[class.core-split-item-selected]="discussion.message!.user == discussionUserId" class="addon-message-discussion">
[class.core-selected-item]="discussion.message!.user == discussionUserId" class="addon-message-discussion">
<core-user-avatar [user]="discussion" slot="start" checkOnline="false"></core-user-avatar>
<ion-label>
<h2>{{ discussion.fullname }}</h2>

135
src/addons/messages/pages/group-conversations/group-conversations.html
View File

@ -17,84 +17,85 @@
</ion-buttons>
</ion-toolbar>
</ion-header>
<!-- @todo <core-split-view> -->
<ion-content class="core-expand-max">
<ion-refresher slot="fixed" [disabled]="!loaded || !currentListEl" (ionRefresh)="refreshData($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-split-view>
<ion-refresher slot="fixed" [disabled]="!loaded || !currentListEl" (ionRefresh)="refreshData($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="loaded" [message]="loadingMessage">
<ion-list>
<ion-item class="ion-text-wrap" (click)="gotoContacts($event)" [attr.aria-label]="'addon.messages.contacts' | translate"
class="addon-message-discussion">
<ion-icon name="fas-address-book" slot="start"></ion-icon>
<ion-label><h2>{{ 'addon.messages.contacts' | translate }}</h2></ion-label>
<ion-badge *ngIf="contactRequestsCount > 0" slot="end">{{contactRequestsCount}}</ion-badge>
</ion-item>
<!-- Favourite conversations. -->
<ion-item-divider class="ion-text-wrap" (click)="toggle(favourites)" class="core-expandable" sticky="true">
<ion-icon *ngIf="!favourites.expanded" name="fas-caret-right" slot="start"></ion-icon>
<ion-icon *ngIf="favourites.expanded" name="fas-caret-down" slot="start"></ion-icon>
<ion-label>{{ 'core.favourites' | translate }} ({{ favourites.count }})</ion-label>
<ion-badge slot="end" *ngIf="favourites.unread">{{ favourites.unread }}</ion-badge>
</ion-item-divider>
<div [hidden]="!favourites.conversations || !favourites.expanded || favourites.loading" #favlist>
<ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: favourites.conversations}">
</ng-container>
<!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
<core-infinite-loading [enabled]="favourites.canLoadMore" (action)="loadMoreConversations(favourites, $event)" [error]="favourites.loadMoreError"></core-infinite-loading>
<ion-item class="ion-text-wrap" *ngIf="favourites.conversations && favourites.conversations.length == 0">
<ion-label><p>{{ 'addon.messages.nofavourites' | translate }}</p></ion-label>
<core-loading [hideUntil]="loaded" [message]="loadingMessage">
<ion-list>
<ion-item class="ion-text-wrap" (click)="gotoContacts($event)" [attr.aria-label]="'addon.messages.contacts' | translate"
class="addon-message-discussion">
<ion-icon name="fas-address-book" slot="start"></ion-icon>
<ion-label><h2>{{ 'addon.messages.contacts' | translate }}</h2></ion-label>
<ion-badge *ngIf="contactRequestsCount > 0" slot="end">{{contactRequestsCount}}</ion-badge>
</ion-item>
</div>
<ion-item class="ion-text-center" *ngIf="favourites.loading">
<ion-label><ion-spinner></ion-spinner></ion-label>
</ion-item>
<!-- Group conversations. -->
<ion-item-divider class="ion-text-wrap" (click)="toggle(group)" class="core-expandable" sticky="true">
<ion-icon *ngIf="!group.expanded" name="fas-caret-right" slot="start"></ion-icon>
<ion-icon *ngIf="group.expanded" name="fas-caret-down" slot="start"></ion-icon>
<ion-label>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</ion-label>
<ion-badge slot="end" *ngIf="group.unread">{{ group.unread }}</ion-badge>
</ion-item-divider>
<div [hidden]="!group.conversations || !group.expanded || group.loading" #grouplist>
<ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: group.conversations}"></ng-container>
<!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
<core-infinite-loading [enabled]="group.canLoadMore" (action)="loadMoreConversations(group, $event)" [error]="group.loadMoreError"></core-infinite-loading>
<ion-item class="ion-text-wrap" *ngIf="group.conversations && group.conversations.length == 0">
<ion-label><p>{{ 'addon.messages.nogroupconversations' | translate }}</p></ion-label>
<!-- Favourite conversations. -->
<ion-item-divider class="ion-text-wrap" (click)="toggle(favourites)" class="core-expandable" sticky="true">
<ion-icon *ngIf="!favourites.expanded" name="fas-caret-right" slot="start"></ion-icon>
<ion-icon *ngIf="favourites.expanded" name="fas-caret-down" slot="start"></ion-icon>
<ion-label>{{ 'core.favourites' | translate }} ({{ favourites.count }})</ion-label>
<ion-badge slot="end" *ngIf="favourites.unread">{{ favourites.unread }}</ion-badge>
</ion-item-divider>
<div [hidden]="!favourites.conversations || !favourites.expanded || favourites.loading" #favlist>
<ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: favourites.conversations}">
</ng-container>
<!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
<core-infinite-loading [enabled]="favourites.canLoadMore" (action)="loadMoreConversations(favourites, $event)" [error]="favourites.loadMoreError"></core-infinite-loading>
<ion-item class="ion-text-wrap" *ngIf="favourites.conversations && favourites.conversations.length == 0">
<ion-label><p>{{ 'addon.messages.nofavourites' | translate }}</p></ion-label>
</ion-item>
</div>
<ion-item class="ion-text-center" *ngIf="favourites.loading">
<ion-label><ion-spinner></ion-spinner></ion-label>
</ion-item>
</div>
<ion-item class="ion-text-center" *ngIf="group.loading">
<ion-label><ion-spinner></ion-spinner></ion-label>
</ion-item>
<ion-item-divider class="ion-text-wrap" (click)="toggle(individual)" class="core-expandable" sticky="true">
<ion-icon *ngIf="!individual.expanded" name="fas-caret-right" slot="start"></ion-icon>
<ion-icon *ngIf="individual.expanded" name="fas-caret-down" slot="start"></ion-icon>
<ion-label>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</ion-label>
<ion-badge slot="end" *ngIf="individual.unread">{{ individual.unread }}</ion-badge>
</ion-item-divider>
<div [hidden]="!individual.conversations || !individual.expanded || individual.loading" #indlist>
<ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: individual.conversations}"></ng-container>
<!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
<core-infinite-loading [enabled]="individual.canLoadMore" (action)="loadMoreConversations(individual, $event)" [error]="individual.loadMoreError"></core-infinite-loading>
<ion-item class="ion-text-wrap" *ngIf="individual.conversations && individual.conversations.length == 0">
<ion-label><p>{{ 'addon.messages.noindividualconversations' | translate }}</p></ion-label>
<!-- Group conversations. -->
<ion-item-divider class="ion-text-wrap" (click)="toggle(group)" class="core-expandable" sticky="true">
<ion-icon *ngIf="!group.expanded" name="fas-caret-right" slot="start"></ion-icon>
<ion-icon *ngIf="group.expanded" name="fas-caret-down" slot="start"></ion-icon>
<ion-label>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</ion-label>
<ion-badge slot="end" *ngIf="group.unread">{{ group.unread }}</ion-badge>
</ion-item-divider>
<div [hidden]="!group.conversations || !group.expanded || group.loading" #grouplist>
<ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: group.conversations}"></ng-container>
<!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
<core-infinite-loading [enabled]="group.canLoadMore" (action)="loadMoreConversations(group, $event)" [error]="group.loadMoreError"></core-infinite-loading>
<ion-item class="ion-text-wrap" *ngIf="group.conversations && group.conversations.length == 0">
<ion-label><p>{{ 'addon.messages.nogroupconversations' | translate }}</p></ion-label>
</ion-item>
</div>
<ion-item class="ion-text-center" *ngIf="group.loading">
<ion-label><ion-spinner></ion-spinner></ion-label>
</ion-item>
</div>
<ion-item class="ion-text-center" *ngIf="individual.loading">
<ion-label><ion-spinner></ion-spinner></ion-label>
</ion-item>
</ion-list>
</core-loading>
<ion-item-divider class="ion-text-wrap" (click)="toggle(individual)" class="core-expandable" sticky="true">
<ion-icon *ngIf="!individual.expanded" name="fas-caret-right" slot="start"></ion-icon>
<ion-icon *ngIf="individual.expanded" name="fas-caret-down" slot="start"></ion-icon>
<ion-label>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</ion-label>
<ion-badge slot="end" *ngIf="individual.unread">{{ individual.unread }}</ion-badge>
</ion-item-divider>
<div [hidden]="!individual.conversations || !individual.expanded || individual.loading" #indlist>
<ng-container *ngTemplateOutlet="conversationsTemplate; context: {conversations: individual.conversations}"></ng-container>
<!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
<core-infinite-loading [enabled]="individual.canLoadMore" (action)="loadMoreConversations(individual, $event)" [error]="individual.loadMoreError"></core-infinite-loading>
<ion-item class="ion-text-wrap" *ngIf="individual.conversations && individual.conversations.length == 0">
<ion-label><p>{{ 'addon.messages.noindividualconversations' | translate }}</p></ion-label>
</ion-item>
</div>
<ion-item class="ion-text-center" *ngIf="individual.loading">
<ion-label><ion-spinner></ion-spinner></ion-label>
</ion-item>
</ion-list>
</core-loading>
</core-split-view>
</ion-content>
<!-- Template to render a list of conversations. -->
<ng-template #conversationsTemplate let-conversations="conversations">
<ion-item class="ion-text-wrap" *ngFor="let conversation of conversations" [title]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)" [class.core-split-item-selected]="(conversation.id && conversation.id == selectedConversationId) || (conversation.userid && conversation.userid == selectedUserId)" class="addon-message-discussion" id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}">
<ion-item class="ion-text-wrap" *ngFor="let conversation of conversations" [title]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)" [class.core-selected-item]="(conversation.id && conversation.id == selectedConversationId) || (conversation.userid && conversation.userid == selectedUserId)" class="addon-message-discussion" id="addon-message-conversation-{{ conversation.id ? conversation.id : 'user-' + conversation.userid }}">
<!-- Group conversation image. -->
<ion-avatar slot="start" *ngIf="conversation.type == typeGroup">
<img [src]="conversation.imageurl" [alt]="conversation.name" core-external-content onError="this.src='assets/img/group-avatar.png'">

18
src/addons/messages/pages/group-conversations/group-conversations.module.ts
View File

@ -17,16 +17,32 @@ import { IonicModule } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { conditionalRoutes } from '@/app/app-routing.module';
import { discussionRoute } from '@addons/messages/messages-lazy.module';
import { CoreScreen } from '@services/screen';
import { CoreSharedModule } from '@/core/shared.module';
import { AddonMessagesGroupConversationsPage } from './group-conversations.page';
const routes: Routes = [
{
path: '',
matcher: segments => {
const matches = CoreScreen.instance.isMobile ? segments.length === 0 : true;
return matches ? { consumed: [] } : null;
},
component: AddonMessagesGroupConversationsPage,
children: conditionalRoutes([
{
path: '',
pathMatch: 'full',
},
discussionRoute,
], () => CoreScreen.instance.isTablet),
},
...conditionalRoutes([discussionRoute], () => CoreScreen.instance.isMobile),
];
@NgModule({

42
src/addons/messages/pages/group-conversations/group-conversations.page.ts
View File

@ -43,7 +43,7 @@ import {
AddonMessagesOfflineMessagesDBRecordFormatted,
} from '@addons/messages/services/database/messages';
import { AddonMessagesSettingsHandlerService } from '@addons/messages/services/handlers/settings';
// import { CoreSplitViewComponent } from '@components/split-view/split-view';
import { CoreScreen } from '@services/screen';
/**
* Page that displays the list of conversations, including group conversations.
@ -55,7 +55,6 @@ import { AddonMessagesSettingsHandlerService } from '@addons/messages/services/h
})
export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
// @ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
@ViewChild(IonContent) content?: IonContent;
@ViewChild('favlist') favListEl?: ElementRef;
@ViewChild('grouplist') groupListEl?: ElementRef;
@ -110,7 +109,6 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
constructor(
protected route: ActivatedRoute,
) {
this.loadingMessage = Translate.instance.instant('core.loading');
this.siteId = CoreSites.instance.getCurrentSiteId();
this.currentUserId = CoreSites.instance.getCurrentSiteUserId();
@ -284,8 +282,10 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
ngOnInit(): void {
this.route.queryParams.subscribe(async params => {
// Conversation to load.
this.conversationId = params['conversationId'] || undefined;
this.discussionUserId = !this.conversationId && (params['discussionUserId'] || undefined);
this.conversationId = params['conversationId'] ? parseInt(params['conversationId'], 10) : undefined;
if (!this.conversationId) {
this.discussionUserId = params['discussionUserId'] ? parseInt(params['discussionUserId'], 10) : undefined;
}
if (this.conversationId || this.discussionUserId) {
// There is a discussion to load, open the discussion in a new state.
@ -293,7 +293,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
}
await this.fetchData();
/* @todo if (!this.conversationId && !this.discussionUserId && this.splitviewCtrl.isOn()) {
if (!this.conversationId && !this.discussionUserId && CoreScreen.instance.isTablet) {
// Load the first conversation.
let conversation: AddonMessagesConversationForList;
const expandedOption = this.getExpandedOption();
@ -305,7 +305,7 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
this.gotoConversation(conversation.id);
}
}
}*/
}
});
}
@ -368,10 +368,12 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
* @return Promise resolved when done.
*/
protected async fetchDataForExpandedOption(): Promise<void> {
// Calculate which option should be expanded initially.
this.favourites.expanded = this.favourites.count != 0 && !this.group.unread && !this.individual.unread;
this.group.expanded = !this.favourites.expanded && this.group.count != 0 && !this.individual.unread;
this.individual.expanded = !this.favourites.expanded && !this.group.expanded;
if (typeof this.favourites.expanded == 'undefined') {
// Calculate which option should be expanded initially.
this.favourites.expanded = this.favourites.count != 0 && !this.group.unread && !this.individual.unread;
this.group.expanded = !this.favourites.expanded && this.group.count != 0 && !this.individual.unread;
this.individual.expanded = !this.favourites.expanded && !this.group.expanded;
}
this.loadCurrentListElement();
@ -508,7 +510,6 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
* Navigate to contacts view.
*/
gotoContacts(): void {
// @todo this.splitviewCtrl.getMasterNav().push('AddonMessagesContactsPage');
CoreNavigator.instance.navigateToSitePath('contacts');
}
@ -524,23 +525,26 @@ export class AddonMessagesGroupConversationsPage implements OnInit, OnDestroy {
this.selectedConversationId = conversationId;
this.selectedUserId = userId;
const params: Params = {
conversationId: conversationId,
userId: userId,
};
const params: Params = {};
if (conversationId) {
params.conversationId = conversationId;
}
if (userId) {
params.userId = userId;
}
if (messageId) {
params.message = messageId;
}
// @todo this.splitviewCtrl.push
CoreNavigator.instance.navigateToSitePath('discussion', { params });
const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/group-conversations/discussion');
const path = (splitViewLoaded ? '../' : '') + 'discussion';
CoreNavigator.instance.navigate(path, { params });
}
/**
* Navigate to message settings.
*/
gotoSettings(): void {
// @todo this.splitviewCtrl.push
CoreNavigator.instance.navigateToSitePath(AddonMessagesSettingsHandlerService.PAGE_NAME);
}

8
src/addons/messages/pages/index-35/index.html
View File

@ -10,8 +10,8 @@
</ion-buttons>
</ion-toolbar>
</ion-header>
<core-split-view>
<ion-content>
<ion-content>
<core-split-view>
<core-tabs [tabs]="tabs" hideUntil="true"></core-tabs>
</ion-content>
</core-split-view>
</core-split-view>
</ion-content>

19
src/addons/messages/pages/index-35/index.module.ts
View File

@ -17,19 +17,34 @@ import { IonicModule } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';
import { RouterModule, ROUTES, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { conditionalRoutes, resolveModuleRoutes } from '@/app/app-routing.module';
import { discussionRoute } from '@addons/messages/messages-lazy.module';
import { CoreScreen } from '@services/screen';
import { CoreSharedModule } from '@/core/shared.module';
import { AddonMessagesIndex35Page } from './index.page';
import { ADDON_MESSAGES_INDEX_ROUTES } from './messages-index-routing.module';
import { buildTabMainRoutes } from '@features/mainmenu/mainmenu-tab-routing.module';
import { resolveModuleRoutes } from '@/app/app-routing.module';
// @todo mix both routes to get messages/index/discussions/discussion and messages/index/contacts/discussion working
const routes: Routes = [
{
path: '',
matcher: segments => {
const matches = CoreScreen.instance.isMobile ? segments.length === 0 : true;
return matches ? { consumed: [] } : null;
},
component: AddonMessagesIndex35Page,
children: conditionalRoutes([
{
path: '',
pathMatch: 'full',
},
discussionRoute,
], () => CoreScreen.instance.isTablet),
},
...conditionalRoutes([discussionRoute], () => CoreScreen.instance.isMobile),
];
function buildRoutes(injector: Injector): Routes {

22
src/addons/messages/pages/index-35/index.page.ts
View File

@ -19,7 +19,7 @@ import { CoreTab } from '@components/tabs/tabs';
import { Params } from '@angular/router';
import { AddonMessagesProvider, AddonMessagesSplitViewLoadIndexEventData } from '../../services/messages';
import { CoreNavigator } from '@services/navigator';
// import { CoreSplitViewComponent } from '@components/split-view/split-view';
import { CoreScreen } from '@services/screen';
/**
* Page that displays the messages index page.
@ -30,8 +30,6 @@ import { CoreNavigator } from '@services/navigator';
})
export class AddonMessagesIndex35Page implements OnDestroy {
// @ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
tabs: CoreTab[] = [
{
id: 'discussions-35',
@ -55,19 +53,16 @@ export class AddonMessagesIndex35Page implements OnDestroy {
protected siteId: string;
constructor() {
this.siteId = CoreSites.instance.getCurrentSiteId();
// Update split view or navigate.
this.loadSplitViewObserver = CoreEvents.on<AddonMessagesSplitViewLoadIndexEventData>(
AddonMessagesProvider.SPLIT_VIEW_LOAD_INDEX_EVENT,
(data) => {
if (data.discussion /* @todo && (this.splitviewCtrl.isOn() || !data.onlyWithSplitView)*/) {
if (data.discussion && (CoreScreen.instance.isTablet || !data.onlyWithSplitView)) {
this.gotoDiscussion(data.discussion, data.message);
}
},
this.siteId,
);
}
@ -86,9 +81,16 @@ export class AddonMessagesIndex35Page implements OnDestroy {
params.message = messageId;
}
// @todo
// this.splitviewCtrl.push('discussion', { params });
CoreNavigator.instance.navigateToSitePath('discussion', { params });
let path = 'discussion';
if (CoreScreen.instance.isMobile) {
path = '../../' + path;
} else {
const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/index/**/discussion');
path = (splitViewLoaded ? '../' : '') + path;
}
CoreNavigator.instance.navigate(path, { params });
}

39
src/addons/messages/pages/search/search.html
View File

@ -10,26 +10,27 @@
</ion-buttons>
</ion-toolbar>
</ion-header>
<!-- @todo <core-split-view>-->
<ion-content>
<core-search-box (onSubmit)="search($event)" (onClear)="clearSearch($event)" [disabled]="disableSearch" autocorrect="off"
[spellcheck]="false" [autoFocus]="true" [lengthCheck]="1" searchArea="AddonMessagesSearch"></core-search-box>
<core-split-view>
<core-search-box (onSubmit)="search($event)" (onClear)="clearSearch($event)" [disabled]="disableSearch" autocorrect="off"
[spellcheck]="false" [autoFocus]="true" [lengthCheck]="1" searchArea="AddonMessagesSearch"></core-search-box>
<core-loading [hideUntil]="!displaySearching" [message]="'core.searching' | translate">
<ion-list *ngIf="displayResults">
<ng-container *ngTemplateOutlet="resultsTemplate; context: {item: contacts}"></ng-container>
<ng-container *ngTemplateOutlet="resultsTemplate; context: {item: nonContacts}"></ng-container>
<ng-container *ngTemplateOutlet="resultsTemplate; context: {item: messages}"></ng-container>
<!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
<core-infinite-loading [enabled]="messages.canLoadMore" (action)="search(query, 'messages', $event)"
[error]="messages.loadMoreError"></core-infinite-loading>
</ion-list>
<core-loading [hideUntil]="!displaySearching" [message]="'core.searching' | translate">
<ion-list *ngIf="displayResults">
<ng-container *ngTemplateOutlet="resultsTemplate; context: {item: contacts}"></ng-container>
<ng-container *ngTemplateOutlet="resultsTemplate; context: {item: nonContacts}"></ng-container>
<ng-container *ngTemplateOutlet="resultsTemplate; context: {item: messages}"></ng-container>
<!-- The infinite loading cannot be inside the ng-template, it fails because it doesn't find ion-content. -->
<core-infinite-loading [enabled]="messages.canLoadMore" (action)="search(query, 'messages', $event)"
[error]="messages.loadMoreError"></core-infinite-loading>
</ion-list>
<core-empty-box
*ngIf="displayResults && !contacts.results.length && !nonContacts.results.length && !messages.results.length"
icon="fas-search" [message]="'core.noresults' | translate">
</core-empty-box>
</core-loading>
<core-empty-box
*ngIf="displayResults && !contacts.results.length && !nonContacts.results.length && !messages.results.length"
icon="fas-search" [message]="'core.noresults' | translate">
</core-empty-box>
</core-loading>
</core-split-view>
</ion-content>
<!-- Template to render a list of results -->
@ -41,8 +42,8 @@
<!-- List of results -->
<ion-item class="ion-text-wrap" *ngFor="let result of item.results" [title]="result.fullname"
(click)="openConversation(result)" [class.core-split-item-selected]="result == selectedResult"
class="addon-message-discussion">
(click)="openConversation(result)" [class.core-selected-item]="result == selectedResult"
class="addon-message-discussion" detail>
<core-user-avatar slot="start" [user]="result" [checkOnline]="true" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>

17
src/addons/messages/pages/search/search.module.ts
View File

@ -17,6 +17,9 @@ import { IonicModule } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CoreScreen } from '@services/screen';
import { conditionalRoutes } from '@/app/app-routing.module';
import { discussionRoute } from '@addons/messages/messages-lazy.module';
import { CoreSharedModule } from '@/core/shared.module';
import { CoreSearchComponentsModule } from '@features/search/components/components.module';
@ -25,9 +28,21 @@ import { AddonMessagesSearchPage } from './search.page';
const routes: Routes = [
{
path: '',
matcher: segments => {
const matches = CoreScreen.instance.isMobile ? segments.length === 0 : true;
return matches ? { consumed: [] } : null;
},
component: AddonMessagesSearchPage,
children: conditionalRoutes([
{
path: '',
pathMatch: 'full',
},
discussionRoute,
], () => CoreScreen.instance.isTablet),
},
...conditionalRoutes([discussionRoute], () => CoreScreen.instance.isMobile),
];
@NgModule({

18
src/addons/messages/pages/search/search.page.ts
View File

@ -26,7 +26,7 @@ import { CoreDomUtils } from '@services/utils/dom';
import { CoreApp } from '@services/app';
import { CoreNavigator } from '@services/navigator';
import { Params } from '@angular/router';
// @todo import { CoreSplitViewComponent } from '@components/split-view/split-view';
import { CoreScreen } from '@services/screen';
/**
* Page for searching users.
@ -70,8 +70,6 @@ export class AddonMessagesSearchPage implements OnDestroy {
protected memberInfoObserver: CoreEventObserver;
// @todo @ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
constructor() {
// Update block status of a user.
this.memberInfoObserver = CoreEvents.on<AddonMessagesMemberInfoChangedEventData>(
@ -108,7 +106,12 @@ export class AddonMessagesSearchPage implements OnDestroy {
clearSearch(): void {
this.query = '';
this.displayResults = false;
// @todo this.splitviewCtrl.emptyDetails();
// Empty details.
const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/search/discussion');
if (splitViewLoaded) {
CoreNavigator.instance.navigate('../');
}
}
/**
@ -245,7 +248,7 @@ export class AddonMessagesSearchPage implements OnDestroy {
* @param onInit Whether the tser was selected on initial load.
*/
openConversation(result: AddonMessagesConversationMember | AddonMessagesMessageAreaContact, onInit: boolean = false): void {
if (!onInit /* @todo || this.splitviewCtrl.isOn()*/) {
if (!onInit || CoreScreen.instance.isTablet) {
this.selectedResult = result;
const params: Params = {};
@ -255,8 +258,9 @@ export class AddonMessagesSearchPage implements OnDestroy {
params.userId = result.id;
}
// @todo this.splitviewCtrl.push('AddonMessagesDiscussionPage', params);
CoreNavigator.instance.navigateToSitePath('discussion', { params });
const splitViewLoaded = CoreNavigator.instance.isSplitViewOutletLoaded('**/messages/search/discussion');
const path = (splitViewLoaded ? '../' : '') + 'discussion';
CoreNavigator.instance.navigate(path, { params });
}
}

4
src/core/features/settings/pages/site/site.html
View File

@ -28,7 +28,7 @@
<ion-item *ngIf="isIOS"
(click)="openHandler('CoreSharedFilesListPage', {manage: true, siteId: siteId, hideSitePicker: true})"
[title]="'core.sharedfiles.sharedfiles' | translate"
[class.core-split-item-selected]="'CoreSharedFilesListPage' == selectedPage" detail>
[class.core-selected-item]="'CoreSharedFilesListPage' == selectedPage" detail>
<ion-icon name="fas-folder" slot="start"></ion-icon>
<ion-label>
<h2>{{ 'core.sharedfiles.sharedfiles' | translate }}</h2>
@ -38,7 +38,7 @@
<ion-item *ngFor="let handler of handlers" [ngClass]="['core-settings-handler', handler.class]"
(click)="openHandler(handler.page, handler.params)" [title]="handler.title | translate" detail
[class.core-split-item-selected]="handler.page == selectedPage">
[class.core-selected-item]="handler.page == selectedPage">
<ion-icon [name]="handler.icon" slot="start" *ngIf="handler.icon">
</ion-icon>
<ion-label>

2
src/core/features/tag/pages/index/index.html
View File

@ -18,7 +18,7 @@
<ion-label class="ion-text-wrap">{{ 'core.tag.warningareasnotsupported' | translate }}</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" *ngFor="let area of areas" [title]="area.nameKey | translate"
(click)="openArea(area)" [class.core-split-item-selected]="area!.id == selectedAreaId">
(click)="openArea(area)" [class.core-selected-item]="area!.id == selectedAreaId">
<ion-label>
<h2>{{ area!.nameKey | translate }}</h2>
</ion-label>