MOBILE-2567 forum: Fix some forum styles

main
Pau Ferrer Ocaña 2018-09-04 12:14:23 +02:00
parent 7ab32c7afb
commit 05b2616667
5 changed files with 41 additions and 24 deletions

View File

@ -32,12 +32,12 @@
</ion-avatar> </ion-avatar>
<h2><core-format-text [text]="discussion.subject"></core-format-text></h2> <h2><core-format-text [text]="discussion.subject"></core-format-text></h2>
<p *ngIf="discussion.userfullname"> <p *ngIf="discussion.userfullname">
<ion-note float-end padding-start><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note> <ion-note float-end padding-left><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
{{discussion.userfullname}} {{discussion.userfullname}}
</p> </p>
</ion-item> </ion-item>
<ion-card-content> <ion-card-content>
<ion-note text-right *ngIf="discussion.groupname"> <ion-note text-end *ngIf="discussion.groupname">
<ion-icon name="people"></ion-icon> {{ discussion.groupname }} <ion-icon name="people"></ion-icon> {{ discussion.groupname }}
</ion-note> </ion-note>
<p><core-format-text [maxHeight]="60" [component]="component" [componentId]="componentId" [text]="discussion.message"></core-format-text></p> <p><core-format-text [maxHeight]="60" [component]="component" [componentId]="componentId" [text]="discussion.message"></core-format-text></p>
@ -50,9 +50,9 @@
</ion-avatar> </ion-avatar>
<h2><ion-icon name="pin" *ngIf="discussion.pinned"></ion-icon> <core-format-text [text]="discussion.subject"></core-format-text></h2> <h2><ion-icon name="pin" *ngIf="discussion.pinned"></ion-icon> <core-format-text [text]="discussion.subject"></core-format-text></h2>
<p> <p>
<ion-note float-end padding-start> <ion-note float-end padding-left text-end>
{{discussion.created | coreDateDayOrTime}} {{discussion.created | coreDateDayOrTime}}
<div *ngIf="discussion.numunread"><ion-icon name="record"></ion-icon> {{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}</div> <div *ngIf="discussion.numunread"><core-icon name="fa-circle" color="primary"></core-icon> {{ 'addon.mod_forum.unreadpostsnumber' | translate:{ '$a' : discussion.numunread} }}</div>
</ion-note> </ion-note>
{{discussion.userfullname}} {{discussion.userfullname}}
</p> </p>
@ -93,7 +93,7 @@
</ion-infinite-scroll> </ion-infinite-scroll>
</core-loading> </core-loading>
<ion-fab bottom right *ngIf="forum && forum.cancreatediscussions"> <ion-fab bottom end *ngIf="forum && forum.cancreatediscussions">
<button ion-fab (click)="openNewDiscussion()" [attr.aria-label]="addDiscussionText"> <button ion-fab (click)="openNewDiscussion()" [attr.aria-label]="addDiscussionText">
<ion-icon name="add"></ion-icon> <ion-icon name="add"></ion-icon>
</button> </button>

View File

@ -88,6 +88,12 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
this.viewDiscObserver = this.eventsProvider.on(AddonModForumProvider.VIEW_DISCUSSION_EVENT, (data) => { this.viewDiscObserver = this.eventsProvider.on(AddonModForumProvider.VIEW_DISCUSSION_EVENT, (data) => {
if (this.forum && this.forum.id == data.forumId) { if (this.forum && this.forum.id == data.forumId) {
this.selectedDiscussion = this.splitviewCtrl.isOn() ? data.discussion : 0; this.selectedDiscussion = this.splitviewCtrl.isOn() ? data.discussion : 0;
// Invalidate discussion list if it was not read.
const discussion = this.discussions.find((disc) => disc.discussion == data.discussion);
if (discussion && discussion.numunread > 0) {
this.forumProvider.invalidateDiscussionsList(this.forum.id);
}
} }
}, this.sitesProvider.getCurrentSiteId()); }, this.sitesProvider.getCurrentSiteId());

View File

@ -1,18 +1,20 @@
<ion-item text-wrap> <ion-card-header text-wrap no-padding >
<ion-avatar item-start (click)="openUserProfile(post.userid)"> <ion-item text-wrap>
<img [src]="post.userpictureurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: post.userfullname}" role="presentation"> <ion-avatar item-start (click)="openUserProfile(post.userid)">
</ion-avatar> <img [src]="post.userpictureurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: post.userfullname}" role="presentation">
<h2><span [class.core-bold]="post.parent == 0"><core-format-text [text]="post.subject"></core-format-text></span></h2> </ion-avatar>
<p> <h2><span [class.core-bold]="post.parent == 0"><core-format-text [text]="post.subject"></core-format-text></span></h2>
<ion-note float-end padding-start *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note> <p>
<ion-note float-end padding-start *ngIf="post.modified"> <ion-note float-end padding-left *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
{{post.modified | coreDateDayOrTime}} <ion-note float-end padding-left text-end *ngIf="post.modified">
<div *ngIf="unread"><ion-icon name="record"></ion-icon> {{ 'addon.mod_forum.unread' | translate }}</div> {{post.modified | coreDateDayOrTime}}
</ion-note> <div *ngIf="unread"><core-icon name="fa-circle" color="primary"></core-icon> {{ 'addon.mod_forum.unread' | translate }}</div>
{{post.userfullname}} </ion-note>
</p> {{post.userfullname}}
</ion-item> </p>
<ion-card-content> </ion-item>
</ion-card-header>
<ion-card-content padding-top>
<core-format-text [component]="component" [componentId]="componentId" [text]="post.message"></core-format-text> <core-format-text [component]="component" [componentId]="componentId" [text]="post.message"></core-format-text>
<div *ngFor="let attachment of post.attachments"> <div *ngFor="let attachment of post.attachments">
<!-- Files already attached to the submission. --> <!-- Files already attached to the submission. -->
@ -21,12 +23,12 @@
<core-local-file *ngIf="attachment.name" [file]="attachment"></core-local-file> <core-local-file *ngIf="attachment.name" [file]="attachment"></core-local-file>
</div> </div>
</ion-card-content> </ion-card-content>
<ion-item text-right *ngIf="post.id && post.canreply"> <ion-item no-padding text-end *ngIf="post.id && post.canreply" 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"> <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-icon name="undo"></ion-icon> {{ 'addon.mod_forum.reply' | translate }}
</button> </button>
</ion-item> </ion-item>
<ion-item text-right *ngIf="!post.id && (!replyData.isEditing || replyData.replyingTo != post.parent)"> <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"> <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 }} <ion-icon name="create"></ion-icon> {{ 'addon.mod_forum.edit' | translate }}
</button> </button>

View File

@ -30,7 +30,7 @@
<ion-icon name="warning"></ion-icon> {{ 'addon.mod_forum.discussionlocked' | translate }} <ion-icon name="warning"></ion-icon> {{ 'addon.mod_forum.discussionlocked' | translate }}
</ion-card> </ion-card>
<ion-card *ngIf="discussion" margin-bottom> <ion-card *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" [trackPosts]="trackPosts" (onPostChange)="postListChanged()"></addon-mod-forum-post> <addon-mod-forum-post [post]="discussion" [courseId]="courseId" [discussionId]="discussionId" [component]="component" [componentId]="cmId" [replyData]="replyData" [originalData]="originalData" [defaultSubject]="defaultSubject" [forum]="forum" [trackPosts]="trackPosts" (onPostChange)="postListChanged()"></addon-mod-forum-post>
</ion-card> </ion-card>
@ -51,7 +51,7 @@
<ion-card> <ion-card>
<addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component" [componentId]="cmId" [replyData]="replyData" [originalData]="originalData" [defaultSubject]="defaultSubject" [forum]="forum" [trackPosts]="trackPosts" (onPostChange)="postListChanged()"></addon-mod-forum-post> <addon-mod-forum-post [post]="post" [courseId]="courseId" [discussionId]="discussionId" [component]="component" [componentId]="cmId" [replyData]="replyData" [originalData]="originalData" [defaultSubject]="defaultSubject" [forum]="forum" [trackPosts]="trackPosts" (onPostChange)="postListChanged()"></addon-mod-forum-post>
</ion-card> </ion-card>
<div padding-start *ngIf="post.children.length && post.children[0].subject"> <div padding-left *ngIf="post.children.length && post.children[0].subject">
<ng-container *ngFor="let child of post.children"> <ng-container *ngFor="let child of post.children">
<ng-container *ngTemplateOutlet="nestedPosts; context: {post: child}"></ng-container> <ng-container *ngTemplateOutlet="nestedPosts; context: {post: child}"></ng-container>
</ng-container> </ng-container>

View File

@ -0,0 +1,9 @@
ion-app.app-root page-addon-mod-forum-discussion {
.card.highlight .card-header .item {
background-color: $gray-lighter;
}
.addon-forum-reply-button .label {
margin: 0;
}
}