Mobile 3205

src/addon/mod/assign/submission/file/component/addon-mod-assign-submission-file.html

@@ -2,13 +2,7 @@
 <ion-item text-wrap *ngIf="files && files.length && !edit">
     <h2>{{plugin.name}}</h2>
     <div no-lines>
-        <ng-container *ngFor="let file of files">
-            <!-- Files already attached to the submission. -->
-            <core-file *ngIf="!file.name" [file]="file" [component]="component" [componentId]="assign.cmid" [alwaysDownload]="true"></core-file>
-
-            <!-- Files stored in offline to be sent later. -->
-            <core-local-file *ngIf="file.name" [file]="file"></core-local-file>
-        </ng-container>
+        <core-files [files]="files" [component]="component" [componentId]="assign.cmid" [alwaysDownload]="true"></core-files>
     </div>
 </ion-item>
 

src/addon/mod/data/fields/file/component/addon-mod-data-field-file.html

@@ -10,12 +10,6 @@
 
 <ng-container *ngIf="isShowOrListMode()">
     <div no-lines>
-        <ng-container *ngFor="let file of files">
-            <!-- Files already attached to the submission. -->
-            <core-file *ngIf="!file.name" [file]="file" [component]="component" [componentId]="componentId" [alwaysDownload]="true"></core-file>
-
-            <!-- Files stored in offline to be sent later. -->
-            <core-local-file *ngIf="file.name" [file]="file"></core-local-file>
-        </ng-container>
+        <core-files [files]="files" [component]="component" [componentId]="componentId" [alwaysDownload]="true"></core-files>
     </div>
 </ng-container>

src/addon/mod/forum/components/components.module.ts

@@ -24,11 +24,13 @@ import { CoreRatingComponentsModule } from '@core/rating/components/components.m
 import { CoreTagComponentsModule } from '@core/tag/components/components.module';
 import { AddonModForumIndexComponent } from './index/index';
 import { AddonModForumPostComponent } from './post/post';
+import { AddonForumDiscussionOptionsMenuComponent } from './discussion-options-menu/discussion-options-menu';
 
 @NgModule({
     declarations: [
         AddonModForumIndexComponent,
-        AddonModForumPostComponent
+        AddonModForumPostComponent,
+        AddonForumDiscussionOptionsMenuComponent
     ],
     imports: [
         CommonModule,
@@ -45,10 +47,12 @@ import { AddonModForumPostComponent } from './post/post';
     ],
     exports: [
         AddonModForumIndexComponent,
-        AddonModForumPostComponent
+        AddonModForumPostComponent,
+        AddonForumDiscussionOptionsMenuComponent
     ],
     entryComponents: [
-        AddonModForumIndexComponent
+        AddonModForumIndexComponent,
+        AddonForumDiscussionOptionsMenuComponent
     ]
 })
 export class AddonModForumComponentsModule {}

src/addon/mod/forum/components/discussion-options-menu/addon-forum-discussion-options-menu.html

@@ -0,0 +1,24 @@
+<ion-item text-wrap (click)="setLockState(true)" *ngIf="discussion.canlock && !discussion.locked">
+    <core-icon name="fa-lock" item-start></core-icon>
+    <h2>{{ 'addon.mod_forum.lockdiscussion' | translate }}</h2>
+</ion-item>
+<ion-item text-wrap (click)="setLockState(false)" *ngIf="discussion.canlock && discussion.locked">
+    <core-icon name="fa-unlock" item-start></core-icon>
+    <h2>{{ 'addon.mod_forum.unlockdiscussion' | translate }}</h2>
+</ion-item>
+<ion-item text-wrap (click)="setPinState(true)" *ngIf="canPin && !discussion.pinned">
+    <core-icon name="fa-map-pin" item-start></core-icon>
+    <h2>{{ 'addon.mod_forum.pindiscussion' | translate }}</h2>
+</ion-item>
+<ion-item text-wrap (click)="setPinState(false)" *ngIf="canPin && discussion.pinned">
+    <core-icon name="fa-map-pin" item-start [slash]="true"></core-icon>
+    <h2>{{ 'addon.mod_forum.unpindiscussion' | translate }}</h2>
+</ion-item>
+<ion-item text-wrap (click)="toggleFavouriteState(true)" *ngIf="discussion.canfavourite && !discussion.starred">
+    <core-icon name="fa-star" item-start></core-icon>
+    <h2>{{ 'addon.mod_forum.addtofavourites' | translate }}</h2>
+</ion-item>
+<ion-item text-wrap (click)="toggleFavouriteState(false)" *ngIf="discussion.canfavourite && discussion.starred">
+    <core-icon name="fa-star" item-start [slash]="true"></core-icon>
+    <h2>{{ 'addon.mod_forum.removefromfavourites' | translate }}</h2>
+</ion-item>

src/addon/mod/forum/components/discussion-options-menu/discussion-options-menu.ts

@@ -0,0 +1,145 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, OnInit } from '@angular/core';
+import { NavParams, ViewController } from 'ionic-angular';
+import { CoreDomUtilsProvider } from '@providers/utils/dom';
+import { CoreEventsProvider } from '@providers/events';
+import { CoreSitesProvider } from '@providers/sites';
+import { AddonModForumProvider } from '../../providers/forum';
+
+/**
+ * This component is meant to display a popover with the discussion options.
+ */
+@Component({
+    selector: 'addon-forum-discussion-options-menu',
+    templateUrl: 'addon-forum-discussion-options-menu.html'
+})
+export class AddonForumDiscussionOptionsMenuComponent implements OnInit {
+    discussion: any; // The discussion.
+    forumId: number; // The forum Id.
+    cmId: number; // The component module Id.
+    canPin = false;
+
+    constructor(navParams: NavParams,
+            protected viewCtrl: ViewController,
+            protected forumProvider: AddonModForumProvider,
+            protected domUtils: CoreDomUtilsProvider,
+            protected eventsProvider: CoreEventsProvider,
+            protected sitesProvider: CoreSitesProvider) {
+        this.discussion = navParams.get('discussion');
+        this.forumId = navParams.get('forumId');
+        this.cmId = navParams.get('cmId');
+    }
+
+    /**
+     * Component being initialized.
+     */
+    ngOnInit(): void {
+        if (this.forumProvider.isSetPinStateAvailableForSite()) {
+            // Use the canAddDiscussion WS to check if the user can pin discussions.
+            this.forumProvider.canAddDiscussionToAll(this.forumId).then((response) => {
+                this.canPin = !!response.canpindiscussions;
+            }).catch(() => {
+                this.canPin = false;
+            });
+        } else {
+            this.canPin = false;
+        }
+    }
+
+    /**
+     * Lock or unlock the discussion.
+     *
+     * @param locked True to lock the discussion, false to unlock.
+     */
+    setLockState(locked: boolean): void {
+        const modal = this.domUtils.showModalLoading('core.sending', true);
+
+        this.forumProvider.setLockState(this.forumId, this.discussion.discussion, locked).then((response) => {
+            this.viewCtrl.dismiss({action: 'lock', value: locked});
+
+            const data = {
+                forumId: this.forumId,
+                discussionId: this.discussion.discussion,
+                cmId: this.cmId,
+                locked: response.locked
+            };
+            this.eventsProvider.trigger(AddonModForumProvider.CHANGE_DISCUSSION_EVENT, data, this.sitesProvider.getCurrentSiteId());
+
+            this.domUtils.showToast('addon.mod_forum.lockupdated', true);
+        }).catch((error) => {
+            this.domUtils.showErrorModal(error);
+            this.viewCtrl.dismiss();
+        }).finally(() => {
+            modal.dismiss();
+        });
+    }
+
+    /**
+     * Pin or unpin the discussion.
+     *
+     * @param pinned True to pin the discussion, false to unpin it.
+     */
+    setPinState(pinned: boolean): void {
+        const modal = this.domUtils.showModalLoading('core.sending', true);
+
+        this.forumProvider.setPinState(this.discussion.discussion, pinned).then(() => {
+            this.viewCtrl.dismiss({action: 'pin', value: pinned});
+
+            const data = {
+                forumId: this.forumId,
+                discussionId: this.discussion.discussion,
+                cmId: this.cmId,
+                pinned: pinned
+            };
+            this.eventsProvider.trigger(AddonModForumProvider.CHANGE_DISCUSSION_EVENT, data, this.sitesProvider.getCurrentSiteId());
+
+            this.domUtils.showToast('addon.mod_forum.pinupdated', true);
+        }).catch((error) => {
+            this.domUtils.showErrorModal(error);
+            this.viewCtrl.dismiss();
+        }).finally(() => {
+            modal.dismiss();
+        });
+    }
+
+    /**
+     * Star or unstar the discussion.
+     *
+     * @param starred True to star the discussion, false to unstar it.
+     */
+    toggleFavouriteState(starred: boolean): void {
+        const modal = this.domUtils.showModalLoading('core.sending', true);
+
+        this.forumProvider.toggleFavouriteState(this.discussion.discussion, starred).then(() => {
+            this.viewCtrl.dismiss({action: 'star', value: starred});
+
+            const data = {
+                forumId: this.forumId,
+                discussionId: this.discussion.discussion,
+                cmId: this.cmId,
+                starred: starred
+            };
+            this.eventsProvider.trigger(AddonModForumProvider.CHANGE_DISCUSSION_EVENT, data, this.sitesProvider.getCurrentSiteId());
+
+            this.domUtils.showToast('addon.mod_forum.favouriteupdated', true);
+        }).catch((error) => {
+            this.domUtils.showErrorModal(error);
+            this.viewCtrl.dismiss();
+        }).finally(() => {
+            modal.dismiss();
+        });
+    }
+}

src/addon/mod/forum/components/index/addon-mod-forum-index.html

@@ -43,51 +43,52 @@
                 </div>
 
                 <ng-container *ngFor="let discussion of offlineDiscussions">
-                    <ion-item text-wrap (click)="openNewDiscussion(discussion.timecreated)" [attr.no-lines]="discussion.groupname" [class.core-split-item-selected]="discussion.timecreated == -selectedDiscussion">
-                        <ion-avatar core-user-avatar [user]="discussion" item-start [courseId]="courseId"></ion-avatar>
-                        <h2><core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text></h2>
-                        <h3 *ngIf="discussion.userfullname">
-                            <ion-note float-end padding-left><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
-                            {{discussion.userfullname}}
-                        </h3>
-                    </ion-item>
-                    <ion-item *ngIf="discussion.groupname" (click)="openNewDiscussion(discussion.timecreated)" [class.core-split-item-selected]="discussion.timecreated == -selectedDiscussion">
-                        <ion-note text-end>
-                            <ion-icon name="people"></ion-icon> {{ discussion.groupname }}
-                        </ion-note>
+                    <ion-item text-wrap (click)="openNewDiscussion(discussion.timecreated)" [attr.no-lines]="discussion.groupname" [class.core-split-item-selected]="discussion.timecreated == -selectedDiscussion" class="addon-mod-forum-discussion">
+                        <div class="addon-mod-forum-discussion-title">
+                            <h2>
+                                <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text>
+                            </h2>
+                        </div>
+                        <div class="addon-mod-forum-discussion-info">
+                            <ion-avatar core-user-avatar [user]="discussion" item-start [courseId]="courseId" *ngIf="discussion.userfullname"></ion-avatar>
+                            <h3 *ngIf="discussion.userfullname">{{discussion.userfullname}}</h3>
+                            <p *ngIf="discussion.groupname"><ion-icon name="people"></ion-icon> {{ discussion.groupname }}</p>
+                            <p><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</p>
+                        </div>
                     </ion-item>
                 </ng-container>
                 <ng-container *ngFor="let discussion of discussions">
-                    <ion-item text-wrap (click)="openDiscussion(discussion)" no-lines [class.core-split-item-selected]="discussion.discussion == selectedDiscussion">
-                        <ion-avatar core-user-avatar [user]="discussion" item-start [courseId]="courseId"></ion-avatar>
-                        <h2>
-                            <core-icon name="fa-map-pin" *ngIf="discussion.pinned"></core-icon>
-                            <core-icon name="fa-star" class="addon-forum-star" *ngIf="!discussion.pinned && discussion.starred"></core-icon>
-                            <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text>
-                        </h2>
-                        <h3>
-                            <ion-note float-end padding-left text-end>
-                                <div *ngIf="discussion.numunread"><core-icon name="fa-circle" color="primary"></core-icon> {{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}</div>
-                            </ion-note>
-                            {{discussion.userfullname}}
-                        </h3>
-                        <p>{{discussion.created | coreDateDayOrTime}}</p>
-                    </ion-item>
-                    <ion-item (click)="openDiscussion(discussion)" [class.core-split-item-selected]="discussion.discussion == selectedDiscussion">
-                        <ion-row text-center>
-                            <ion-col *ngIf="discussion.groupname">
+                    <ion-item (click)="openDiscussion(discussion)" [class.core-split-item-selected]="discussion.discussion == selectedDiscussion" class="addon-mod-forum-discussion">
+                        <div class="addon-mod-forum-discussion-title">
+                            <h2 text-wrap>
+                                <core-icon name="fa-map-pin" *ngIf="discussion.pinned"></core-icon>
+                                <core-icon name="fa-star" class="addon-forum-star" *ngIf="!discussion.pinned && discussion.starred"></core-icon>
+                                <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text>
+                            </h2>
+                            <button ion-button icon-only clear color="dark" (click)="showOptionsMenu($event, discussion)" *ngIf="canPin || discussion.canlock || discussion.canfavourite">
+                                <core-icon name="more"></core-icon>
+                            </button>
+                        </div>
+                        <div class="addon-mod-forum-discussion-info">
+                            <ion-avatar *ngIf="discussion.userfullname" core-user-avatar [user]="discussion" item-start [courseId]="courseId"></ion-avatar>
+                            <div class="addon-mod-forum-discussion-author">
+                                <h3 *ngIf="discussion.userfullname">{{discussion.userfullname}}</h3>
+                                <p *ngIf="discussion.groupname"><ion-icon name="people"></ion-icon> {{ discussion.groupname }}</p>
+                                <p>{{discussion.created * 1000 | coreFormatDate: "strftimerecentfull"}}</p>
+                            </div>
+                        </div>
+                        <ion-row text-center class="addon-mod-forum-discussion-more-info">
+                            <ion-col text-start>
                                 <ion-note>
-                                    <ion-icon name="people"></ion-icon> {{ discussion.groupname }}
+                                    <ion-icon name="time"></ion-icon> {{ 'addon.mod_forum.lastpost' | translate }}
+                                    <ng-container *ngIf="discussion.timemodified > discussion.created">{{discussion.timemodified | coreTimeAgo}}</ng-container>
+                                    <ng-container *ngIf="discussion.timemodified <= discussion.created">{{discussion.created | coreTimeAgo}}</ng-container>
                                 </ion-note>
                             </ion-col>
-                            <ion-col>
+                            <ion-col text-end>
                                 <ion-note>
                                     <ion-icon name="chatboxes"></ion-icon> {{ 'addon.mod_forum.numreplies' | translate:{numreplies: discussion.numreplies} }}
-                                </ion-note>
-                            </ion-col>
-                            <ion-col *ngIf="discussion.timemodified > discussion.created">
-                                <ion-note>
-                                    <ion-icon name="time"></ion-icon> {{ 'addon.mod_forum.lastpost' | translate }} {{discussion.timemodified | coreTimeAgo}}
+                                    <ion-badge text-center *ngIf="discussion.numunread" [attr.aria-label]="'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread}">{{ discussion.numunread }}</ion-badge>
                                 </ion-note>
                             </ion-col>
                         </ion-row>

src/addon/mod/forum/components/index/index.scss

@@ -1,5 +1,54 @@
+$addon-forum-avatar-size: 28px;
+
 ion-app.app-root addon-mod-forum-index {
     .addon-forum-star {
         color: $core-star-color;
     }
+
+    .addon-mod-forum-discussion.item {
+        .label {
+            margin-top: 4px;
+
+            h2 {
+                margin-top: 8px;
+                margin-bottom: 8px;
+                font-weight: bold;
+                ion-icon {
+                    @include margin(0, 6px, 0, 0);
+                }
+            }
+            h3 {
+                font-size: 1.6rem;
+            }
+        }
+
+        ion-avatar {
+            width: $addon-forum-avatar-size;
+            height: $addon-forum-avatar-size;
+            min-width: $addon-forum-avatar-size;
+            min-height: $addon-forum-avatar-size;
+            &[item-start] {
+                @include margin(0, 8px, 0, 0);
+            }
+            img {
+                width: $addon-forum-avatar-size;
+                height: $addon-forum-avatar-size;
+            }
+        }
+
+        .addon-mod-forum-discussion-title,
+        .addon-mod-forum-discussion-info {
+            display: flex;
+            align-items: center;
+        }
+        .addon-mod-forum-discussion-title h2,
+        .addon-mod-forum-discussion-info .addon-mod-forum-discussion-author {
+            flex-grow: 1;
+        }
+
+        .addon-mod-forum-discussion-more-info {
+            font-size: 1.4rem;
+            clear: both;
+        }
+    }
 }