From 4bc90e892ad3d19739d97e8cf4bb62fca0cbbe36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Oct 2019 13:10:29 +0200
Subject: [PATCH] MOBILE-3205 forum: Adapt forum discussion view

---
 .../components/post/addon-mod-forum-post.html | 168 +++++++++---------
 src/addon/mod/forum/components/post/post.scss |   9 +-
 .../forum/pages/discussion/discussion.html    |   4 +-
 .../forum/pages/discussion/discussion.scss    |   2 +-
 4 files changed, 96 insertions(+), 87 deletions(-)

diff --git a/src/addon/mod/forum/components/post/addon-mod-forum-post.html b/src/addon/mod/forum/components/post/addon-mod-forum-post.html
index 0b91ce3d3..600f96f30 100644
--- a/src/addon/mod/forum/components/post/addon-mod-forum-post.html
+++ b/src/addon/mod/forum/components/post/addon-mod-forum-post.html
@@ -1,89 +1,91 @@
-<ion-card-header text-wrap no-padding id="addon-mod_forum-post-{{post.id}}">
-    <ion-item text-wrap>
-        <div class="addon-mod-forum-post-title">
-            <h2 text-wrap>
-                <core-icon name="fa-map-pin" *ngIf="post.parent == 0 && post.pinned"></core-icon>
-                <core-icon name="fa-star" class="addon-forum-star" *ngIf="post.parent == 0 && !post.pinned && post.starred"></core-icon>
-                <core-format-text [text]="post.subject" contextLevel="module" [contextInstanceId]="forum && forum.cmid" [courseId]="courseId"></core-format-text>
-            </h2>
-            <ion-note float-end padding-left text-end *ngIf="trackPosts && !post.postread" [attr.aria-label]="'addon.mod_forum.unread' | translate">
-                <core-icon name="fa-circle" color="primary"></core-icon>
-            </ion-note>
-        </div>
-        <div class="addon-mod-forum-post-info">
-            <ion-avatar core-user-avatar [user]="post" item-start [courseId]="courseId"></ion-avatar>
-            <div class="addon-mod-forum-post-author">
-                <h3>{{post.userfullname}}</h3>
-                <p *ngIf="post.groupname"><ion-icon name="people"></ion-icon> {{ post.groupname }}</p>
-                <p *ngIf="post.modified">{{post.modified * 1000 | coreFormatDate: "strftimerecentfull"}}</p>
-                <p *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</p>
+<div class="addon-mod_forum-post">
+    <ion-card-header text-wrap no-padding id="addon-mod_forum-post-{{post.id}}">
+        <ion-item text-wrap>
+            <div class="addon-mod-forum-post-title">
+                <h2 text-wrap>
+                    <core-icon name="fa-map-pin" *ngIf="post.parent == 0 && post.pinned"></core-icon>
+                    <core-icon name="fa-star" class="addon-forum-star" *ngIf="post.parent == 0 && !post.pinned && post.starred"></core-icon>
+                    <core-format-text [text]="post.subject" contextLevel="module" [contextInstanceId]="forum && forum.cmid" [courseId]="courseId"></core-format-text>
+                </h2>
+                <ion-note float-end padding-left text-end *ngIf="trackPosts && !post.postread" [attr.aria-label]="'addon.mod_forum.unread' | translate">
+                    <core-icon name="fa-circle" color="primary"></core-icon>
+                </ion-note>
             </div>
+            <div class="addon-mod-forum-post-info">
+                <ion-avatar core-user-avatar [user]="post" item-start [courseId]="courseId"></ion-avatar>
+                <div class="addon-mod-forum-post-author">
+                    <h3>{{post.userfullname}}</h3>
+                    <p *ngIf="post.groupname"><ion-icon name="people"></ion-icon> {{ post.groupname }}</p>
+                    <p *ngIf="post.modified">{{post.modified * 1000 | coreFormatDate: "strftimerecentfull"}}</p>
+                    <p *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</p>
+                </div>
+            </div>
+        </ion-item>
+    </ion-card-header>
+    <ion-card-content [attr.padding-top]="post.parent == 0 || null">
+        <div padding-bottom *ngIf="post.isprivatereply">
+            <ion-note>{{ 'addon.mod_forum.postisprivatereply' | translate }}</ion-note>
         </div>
-    </ion-item>
-</ion-card-header>
-<ion-card-content [attr.padding-top]="post.parent == 0 || null">
-    <div padding-bottom *ngIf="post.isprivatereply">
-        <ion-note>{{ 'addon.mod_forum.postisprivatereply' | translate }}</ion-note>
-    </div>
-    <core-format-text [component]="component" [componentId]="componentId" [text]="post.message" contextLevel="module" [contextInstanceId]="forum && forum.cmid" [courseId]="courseId"></core-format-text>
-    <div no-lines>
-        <core-files *ngIf="post.attachments && post.attachments.length > 0" [files]="post.attachments" [component]="component" [componentId]="componentId" showInline="true"></core-files>
-    </div>
-</ion-card-content>
-<div class="addon-mod-forum-post-more-info">
-    <ion-item text-wrap *ngIf="tagsEnabled && post.tags && post.tags.length > 0">
-        <div item-start>{{ 'core.tag.tags' | translate }}:</div>
-        <core-tag-list [tags]="post.tags"></core-tag-list>
-    </ion-item>
-    <core-rating-rate *ngIf="forum && ratingInfo" [ratingInfo]="ratingInfo" contextLevel="module" [instanceId]="componentId" [itemId]="post.id" [itemSetId]="discussionId" [courseId]="courseId" [aggregateMethod]="forum.assessed" [scaleId]="forum.scale" [userId]="post.userid" (onUpdate)="ratingUpdated()"></core-rating-rate>
-    <core-rating-aggregate *ngIf="forum && ratingInfo" [ratingInfo]="ratingInfo" contextLevel="module" [instanceId]="componentId" [itemId]="post.id" [courseId]="courseId" [aggregateMethod]="forum.assessed" [scaleId]="forum.scale"></core-rating-aggregate>
+        <core-format-text [component]="component" [componentId]="componentId" [text]="post.message" contextLevel="module" [contextInstanceId]="forum && forum.cmid" [courseId]="courseId"></core-format-text>
+        <div no-lines *ngIf="post.attachments && post.attachments.length > 0">
+            <core-files [files]="post.attachments" [component]="component" [componentId]="componentId" showInline="true"></core-files>
+        </div>
+    </ion-card-content>
+    <div class="addon-mod-forum-post-more-info">
+        <ion-item text-wrap *ngIf="tagsEnabled && post.tags && post.tags.length > 0">
+            <div item-start>{{ 'core.tag.tags' | translate }}:</div>
+            <core-tag-list [tags]="post.tags"></core-tag-list>
+        </ion-item>
+        <core-rating-rate *ngIf="forum && ratingInfo" [ratingInfo]="ratingInfo" contextLevel="module" [instanceId]="componentId" [itemId]="post.id" [itemSetId]="discussionId" [courseId]="courseId" [aggregateMethod]="forum.assessed" [scaleId]="forum.scale" [userId]="post.userid" (onUpdate)="ratingUpdated()"></core-rating-rate>
+        <core-rating-aggregate *ngIf="forum && ratingInfo" [ratingInfo]="ratingInfo" contextLevel="module" [instanceId]="componentId" [itemId]="post.id" [courseId]="courseId" [aggregateMethod]="forum.assessed" [scaleId]="forum.scale"></core-rating-aggregate>
 
-    <ion-item no-padding text-end *ngIf="post.id && post.canreply && !post.isprivatereply" class="addon-forum-reply-button">
-        <button ion-button icon-left clear small (click)="showReply()" [attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId" [attr.aria-expanded]="replyData.replyingTo === post.id">
-            <ion-icon name="undo"></ion-icon> {{ 'addon.mod_forum.reply' | translate }}
+        <ion-item no-padding text-end *ngIf="post.id && post.canreply && !post.isprivatereply" class="addon-forum-reply-button">
+            <button ion-button icon-left clear small (click)="showReply()" [attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId" [attr.aria-expanded]="replyData.replyingTo === post.id">
+                <ion-icon name="undo"></ion-icon> {{ 'addon.mod_forum.reply' | translate }}
+            </button>
+        </ion-item>
+    </div>
+    <ion-item text-end *ngIf="!post.id && (!replyData.isEditing || replyData.replyingTo != post.parent)">
+        <button ion-button icon-left clear small (click)="editReply()" [attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId" [attr.aria-expanded]="replyData.replyingTo === post.parent">
+            <ion-icon name="create"></ion-icon> {{ 'addon.mod_forum.edit' | translate }}
         </button>
     </ion-item>
-</div>
-<ion-item text-end *ngIf="!post.id && (!replyData.isEditing || replyData.replyingTo != post.parent)">
-    <button ion-button icon-left clear small (click)="editReply()" [attr.aria-controls]="'addon-forum-reply-edit-form-' + uniqueId" [attr.aria-expanded]="replyData.replyingTo === post.parent">
-        <ion-icon name="create"></ion-icon> {{ 'addon.mod_forum.edit' | translate }}
-    </button>
-</ion-item>
 
-<ion-list [id]="'addon-forum-reply-edit-form-' + uniqueId" *ngIf="(post.id && !replyData.isEditing && replyData.replyingTo == post.id) || (!post.id && replyData.isEditing && replyData.replyingTo == post.parent)">
-    <ion-item>
-        <ion-label stacked>{{ 'addon.mod_forum.subject' | translate }}</ion-label>
-        <ion-input type="text" [placeholder]="'addon.mod_forum.subject' | translate" [(ngModel)]="replyData.subject"></ion-input>
-    </ion-item>
-    <ion-item>
-        <ion-label stacked>{{ 'addon.mod_forum.message' | translate }}</ion-label>
-        <core-rich-text-editor item-content [control]="messageControl" (contentChanged)="onMessageChange($event)" [placeholder]="'addon.mod_forum.replyplaceholder' | translate" [name]="'mod_forum_reply_' + post.id" [component]="component" [componentId]="componentId"></core-rich-text-editor>
-    </ion-item>
-    <ion-item text-wrap *ngIf="accessInfo.canpostprivatereply">
-        <ion-label>{{ 'addon.mod_forum.privatereply' | translate }}</ion-label>
-        <ion-checkbox item-end [(ngModel)]="replyData.isprivatereply"></ion-checkbox>
-    </ion-item>
-    <ion-item-divider text-wrap (click)="toggleAdvanced()" class="core-expandable">
-        <core-icon *ngIf="!advanced" name="fa-caret-right" item-start></core-icon>
-        <core-icon *ngIf="advanced" name="fa-caret-down" item-start></core-icon>
-        {{ 'addon.mod_forum.advanced' | translate }}
-    </ion-item-divider>
-    <ng-container *ngIf="advanced">
-        <core-attachments *ngIf="forum.id && forum.maxattachments > 0" [files]="replyData.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component" [componentId]="forum.cmid" [allowOffline]="true"></core-attachments>
-    </ng-container>
-    <ion-grid>
-        <ion-row>
-            <ion-col>
-                <button ion-button block (click)="reply()" [disabled]="replyData.subject == '' || replyData.message == null">{{ 'addon.mod_forum.posttoforum' | translate }}</button>
-            </ion-col>
-            <ion-col>
-                <button ion-button block color="light" (click)="cancel()">{{ 'core.cancel' | translate }}</button>
-            </ion-col>
-        </ion-row>
-        <ion-row *ngIf="replyData.isEditing">
-            <ion-col>
-                <button ion-button block color="light" (click)="discard()">{{ 'core.discard' | translate }}</button>
-            </ion-col>
-        </ion-row>
-    </ion-grid>
-</ion-list>
+    <ion-list [id]="'addon-forum-reply-edit-form-' + uniqueId" *ngIf="(post.id && !replyData.isEditing && replyData.replyingTo == post.id) || (!post.id && replyData.isEditing && replyData.replyingTo == post.parent)">
+        <ion-item>
+            <ion-label stacked>{{ 'addon.mod_forum.subject' | translate }}</ion-label>
+            <ion-input type="text" [placeholder]="'addon.mod_forum.subject' | translate" [(ngModel)]="replyData.subject"></ion-input>
+        </ion-item>
+        <ion-item>
+            <ion-label stacked>{{ 'addon.mod_forum.message' | translate }}</ion-label>
+            <core-rich-text-editor item-content [control]="messageControl" (contentChanged)="onMessageChange($event)" [placeholder]="'addon.mod_forum.replyplaceholder' | translate" [name]="'mod_forum_reply_' + post.id" [component]="component" [componentId]="componentId"></core-rich-text-editor>
+        </ion-item>
+        <ion-item text-wrap *ngIf="accessInfo.canpostprivatereply">
+            <ion-label>{{ 'addon.mod_forum.privatereply' | translate }}</ion-label>
+            <ion-checkbox item-end [(ngModel)]="replyData.isprivatereply"></ion-checkbox>
+        </ion-item>
+        <ion-item-divider text-wrap (click)="toggleAdvanced()" class="core-expandable">
+            <core-icon *ngIf="!advanced" name="fa-caret-right" item-start></core-icon>
+            <core-icon *ngIf="advanced" name="fa-caret-down" item-start></core-icon>
+            {{ 'addon.mod_forum.advanced' | translate }}
+        </ion-item-divider>
+        <ng-container *ngIf="advanced">
+            <core-attachments *ngIf="forum.id && forum.maxattachments > 0" [files]="replyData.files" [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component" [componentId]="forum.cmid" [allowOffline]="true"></core-attachments>
+        </ng-container>
+        <ion-grid>
+            <ion-row>
+                <ion-col>
+                    <button ion-button block (click)="reply()" [disabled]="replyData.subject == '' || replyData.message == null">{{ 'addon.mod_forum.posttoforum' | translate }}</button>
+                </ion-col>
+                <ion-col>
+                    <button ion-button block color="light" (click)="cancel()">{{ 'core.cancel' | translate }}</button>
+                </ion-col>
+            </ion-row>
+            <ion-row *ngIf="replyData.isEditing">
+                <ion-col>
+                    <button ion-button block color="light" (click)="discard()">{{ 'core.discard' | translate }}</button>
+                </ion-col>
+            </ion-row>
+        </ion-grid>
+    </ion-list>
+</div>
diff --git a/src/addon/mod/forum/components/post/post.scss b/src/addon/mod/forum/components/post/post.scss
index 429be2b80..487ec8477 100644
--- a/src/addon/mod/forum/components/post/post.scss
+++ b/src/addon/mod/forum/components/post/post.scss
@@ -1,4 +1,7 @@
-ion-app.app-root addon-mod-forum-post {
+ion-app.app-root addon-mod-forum-post .addon-mod_forum-post {
+    background-color: $white;
+    border-bottom: 1px solid $list-md-border-color;
+
     .addon-forum-star {
         color: $core-star-color;
     }
@@ -45,6 +48,10 @@ ion-app.app-root addon-mod-forum-post {
         }
     }
 
+    .item .item-inner {
+        border-bottom: 0;
+    }
+
     .addon-mod-forum-post-more-info div {
         font-size: 1.4rem;
     }
diff --git a/src/addon/mod/forum/pages/discussion/discussion.html b/src/addon/mod/forum/pages/discussion/discussion.html
index 57cbce7c5..9615fd88a 100644
--- a/src/addon/mod/forum/pages/discussion/discussion.html
+++ b/src/addon/mod/forum/pages/discussion/discussion.html
@@ -41,9 +41,9 @@
             <core-icon name="fa-lock"></core-icon> {{ 'addon.mod_forum.discussionlocked' | translate }}
         </ion-card>
 
-        <ion-card *ngIf="discussion" margin-bottom class="highlight">
+        <div *ngIf="discussion" margin-bottom class="highlight">
             <addon-mod-forum-post [post]="discussion" [courseId]="courseId" [discussionId]="discussionId" [component]="component" [componentId]="cmId" [replyData]="replyData" [originalData]="originalData" [defaultSubject]="defaultSubject" [forum]="forum" [accessInfo]="accessInfo" [trackPosts]="trackPosts" [ratingInfo]="ratingInfo" (onPostChange)="postListChanged()"></addon-mod-forum-post>
-        </ion-card>
+        </div>
 
         <ion-card *ngIf="sort != 'nested'">
             <ng-container *ngFor="let post of posts; first as first">
diff --git a/src/addon/mod/forum/pages/discussion/discussion.scss b/src/addon/mod/forum/pages/discussion/discussion.scss
index f9013b8f7..54d9b1f0c 100644
--- a/src/addon/mod/forum/pages/discussion/discussion.scss
+++ b/src/addon/mod/forum/pages/discussion/discussion.scss
@@ -1,5 +1,5 @@
 ion-app.app-root page-addon-mod-forum-discussion {
-    .card.highlight .card-header .item {
+    .highlight .card-header .item {
         background-color: $gray-lighter;
         @include darkmode() {
             background-color: $black;