community: improve news (fixes #7295)

src/app/community/community.component.html

@@ -1,13 +1,9 @@
 <div class="space-container">
   <div class="view-container view-full-height community-view">
-    <mat-toolbar class="action-buttons">
-      <span>{{configuration?.name}}</span>
-    </mat-toolbar>
     <div class="community-news">
       <mat-tab-group class="tabs-padding" (selectedTabChange)="tabChanged($event)">
-        <mat-tab i18n-label label="News">
-          <h3>
-            <span i18n>Your Voices</span>
+        <mat-tab i18n-label label="Voices">
+          <h3 style="text-align: right; margin-right: 0.5rem;">
             <ng-container *planetAuthorizedRoles="'learner'">
               <button mat-stroked-button (click)="openAddMessageDialog()" *ngIf="showNewsButton" i18n>New Voice</button>
             </ng-container>
@@ -58,11 +54,11 @@ <h3>
         <mat-tab i18n-label label="Reports">
           <planet-teams-reports [reports]="reports" [editable]="isCommunityLeader && !planetCode" [team]="team" (reportsChanged)="dataChanged()"></planet-teams-reports>
         </mat-tab>
-        <mat-tab i18n-label label="Calendar" *ngIf="deviceType === deviceTypes.MOBILE">
+        <mat-tab i18n-label label="Calendar" *ngIf="deviceType !== deviceTypes.DESKTOP">
           <planet-calendar [resizeCalendar]="resizeCalendar" [link]="{ teams: teamId }" [sync]="{ type: 'sync', planetCode: planetCode || configuration.code }"></planet-calendar>
         </mat-tab>
       </mat-tab-group>
     </div>
-    <planet-calendar *ngIf="deviceType != deviceTypes.MOBILE" [link]="{ teams: teamId }" [sync]="{ type: 'sync', planetCode: planetCode || configuration.code }"></planet-calendar>
+    <planet-calendar *ngIf="deviceType === deviceTypes.DESKTOP" [link]="{ teams: teamId }" [sync]="{ type: 'sync', planetCode: planetCode || configuration.code }"></planet-calendar>
   </div>
 </div>

src/app/community/community.scss

@@ -8,17 +8,12 @@
 
   display: grid;
   grid-template-columns: 2fr 1fr;
-  grid-template-rows: 64px calc(100% - 64px - 0.5rem);
-  grid-template-areas:
-    "links calendar"
-    "news calendar";
+  grid-template-areas: "news calendar";
   gap: 0.5rem;
 
-  @media only screen and (max-width: #{$screen-sm}) {
+  @media only screen and (max-width: #{$screen-md}) {
     grid-template-columns: 1fr;
-    grid-template-areas:
-      "links"
-      "news";
+    grid-template-areas: "news";
   }
 }
 
@@ -28,26 +23,17 @@
   align-items: center;
 }
 
-.view-container mat-toolbar {
-  grid-area: links;
-  overflow: hidden;
-}
-
 .community-news {
-
   grid-area: news;
   overflow-y: auto;
 
   h3 {
-
     margin: 0;
 
     *:not(:last-child) {
       margin-right: 0.25rem;
     }
-
   }
-
 }
 
 planet-calendar {

src/app/news/news-list-item.component.html

@@ -1,6 +1,9 @@
 <mat-card>
   <mat-card-header>
     <img mat-card-avatar [src]="item.avatar" class="cursor-pointer" (click)="openMemberDialog(item.doc.user)">
+    <button mat-icon-button *ngIf="item.sharedDate || item.doc.updatedDate !== item.doc.time && item.doc.updatedDate" (click)="toggleDatesInfo()" class="info-button">
+      <mat-icon>info</mat-icon>
+    </button>
     <mat-card-title>
       <a mat-card-title class="cursor-pointer" (click)="openMemberDialog(item.doc.user)">
         {{item.doc.user.firstName ?
@@ -10,9 +13,11 @@
     </mat-card-title>
     <mat-card-subtitle>
       <p class="primary-text-color" *ngIf="item.doc.createdOn !== planetCode"><ng-container i18n>Member of Planet</ng-container> {{item.doc.createdOn}}</p>
-      <ng-container i18n>wrote on</ng-container> {{item.doc.time | date: 'medium' }}
-      <ng-container *ngIf="item.doc.updatedDate !== item.doc.time && item.doc.updatedDate"> | <ng-container i18n>edited on</ng-container> {{item.doc.updatedDate | date: 'medium'}}</ng-container>
-      <ng-container *ngIf="item.sharedDate"> | <ng-container i18n>shared on</ng-container> {{item.sharedDate | date: 'medium'}}</ng-container>
+      <ng-container i18n>posted on</ng-container> {{item.doc.time | date: 'medium' }}
+      <ng-container *ngIf="showDatesInfo">
+        <ng-container *ngIf="item.doc.updatedDate !== item.doc.time && item.doc.updatedDate"> | <ng-container i18n>edited on</ng-container> {{item.doc.updatedDate | date: 'medium'}}</ng-container>
+        <ng-container *ngIf="item.sharedDate"> | <ng-container i18n>shared on</ng-container> {{item.sharedDate | date: 'medium'}}</ng-container>
+      </ng-container>
       <mat-chip-list>
         <mat-chip color="primary" selected class="planet-chip-label chip-no-style" *ngFor="let label of item.doc.labels">
           <planet-label i18n-label [label]="label"></planet-label>
@@ -25,13 +30,14 @@
     <div [ngClass]="{'show-less': showLess}" #content>
       <planet-markdown class="img-wrap" [content]="item.doc.message"></planet-markdown>
     </div>
-    <span class="primary-text-color cursor-pointer" *ngIf="showExpand || !showLess" (click)="showLess = !showLess" i18n>{{ showLess ? 'Show More' : 'Show Less' }}</span>
+    <span class="primary-text-color cursor-pointer" *ngIf="(showExpand || !showLess) && !item.latestMessage" (click)="showLess = !showLess" i18n>{{ showLess ? 'Show More' : 'Show Less' }}</span>
   </mat-card-content>
   <mat-card-actions class="display-flex">
     <button mat-button *ngIf="editable || item.public === true" type="button" (click)="addReply(item.doc)" i18n>Reply</button>
     <button mat-button type="button" *ngIf="replyObject[item.doc._id]?.length > 0 && showRepliesButton" (click)="showReplies(item)">
       <ng-container i18n>Show Replies</ng-container> ({{replyObject[item.doc._id]?.length}})
     </button>
+    <span class="toolbar-fill"></span>
     <ng-container *ngIf="item.doc.user.name === currentUser.name">
       <button mat-icon-button type="button" (click)="editNews(item.doc)"><mat-icon>edit</mat-icon></button>
       <button mat-icon-button type="button" (click)="openDeleteDialog(item.doc)"><mat-icon>delete</mat-icon></button>

src/app/news/news-list-item.component.ts

@@ -4,7 +4,6 @@ import { UserService } from '../shared/user.service';
 import { CouchService } from '../shared/couchdb.service';
 import { NotificationsService } from '../notifications/notifications.service';
 import { StateService } from '../shared/state.service';
-import { planetAndParentId } from '../manager-dashboard/reports/reports.utils';
 import { NewsService } from './news.service';
 import { MatDialog } from '@angular/material/dialog';
 import { UserProfileDialogComponent } from '../users/users-profile/users-profile-dialog.component';
@@ -14,7 +13,7 @@ import { UserProfileDialogComponent } from '../users/users-profile/users-profile
   templateUrl: 'news-list-item.component.html',
   styleUrls: [ './news-list-item.scss' ]
 })
-export class NewsListItemComponent implements OnChanges, AfterViewChecked {
+export class NewsListItemComponent implements OnInit, OnChanges, AfterViewChecked {
 
   @Input() item;
   @Input() replyObject;
@@ -32,6 +31,7 @@ export class NewsListItemComponent implements OnChanges, AfterViewChecked {
   showExpand = false;
   showLess = true;
   showShare = false;
+  showDatesInfo = false;
   planetCode = this.stateService.configuration.code;
   targetLocalPlanet = true;
   labels = { listed: [], all: [ 'help', 'offer', 'advice' ] };
@@ -47,6 +47,13 @@ export class NewsListItemComponent implements OnChanges, AfterViewChecked {
     private dialog: MatDialog
   ) {}
 
+  ngOnInit() {
+    if (this.item.latestMessage) {
+      this.showExpand = true;
+      this.showLess = false;
+    }
+  }
+
   ngOnChanges() {
     this.targetLocalPlanet = this.shareTarget === this.stateService.configuration.planetType;
     this.showShare = this.shouldShowShare();
@@ -144,4 +151,8 @@ export class NewsListItemComponent implements OnChanges, AfterViewChecked {
       maxHeight: '90vh'
     });
   }
+
+  toggleDatesInfo() {
+    this.showDatesInfo = !this.showDatesInfo;
+  }
 }

src/app/news/news-list-item.scss

@@ -11,10 +11,17 @@ mat-card {
 }
 
 .show-less {
-  max-height: 6rem;
+  max-height: 8rem;
   overflow-y: hidden;
 }
 
 mat-card-content {
   margin-bottom: 0;
 }
+
+.info-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 8px;
+}

src/app/news/news-list.component.ts

@@ -17,6 +17,9 @@ import { dedupeShelfReduce } from '../shared/utils';
     mat-divider {
       margin: 1rem 0;
     }
+    planet-news-list-item {
+      margin: 0.1rem;
+    }
   ` ]
 })
 export class NewsListComponent implements OnChanges {
@@ -45,9 +48,15 @@ export class NewsListComponent implements OnChanges {
   ) {}
 
   ngOnChanges() {
+    let isNotReply = true;
     this.replyObject = {};
     this.items.forEach(item => {
       this.replyObject[item.doc.replyTo || 'root'] = [ ...(this.replyObject[item.doc.replyTo || 'root'] || []), item ];
+
+      if (!item.doc.replyTo && isNotReply) {
+        item.latestMessage = true;
+        isNotReply = false;
+      }
     });
     this.displayedItems = this.replyObject[this.replyViewing._id];
     if (this.replyViewing._id !== 'root') {