Merge branch 'master' into 8008-myhealth-navbar-buttons-on-wrong-side

src/app/chat/chat-sidebar/chat-sidebar.component.html

@@ -13,8 +13,8 @@
       <button mat-icon-button color="primary" (click)="resetFilter()" [disabled]="!titleSearch && !searchType" matTooltip="Clear search" i18n-matTooltip [matTooltipDisabled]="!titleSearch && !searchType">
         <mat-icon>delete</mat-icon>
       </button><br>
-      <span style="font-size: small; font-style: italic;" i18n>Full Conversation Search </span>
       <mat-checkbox [checked]="fullTextSearch" (change)="toggleSearchType()"></mat-checkbox>
+      <span style="font-size: small; font-style: italic;" i18n>Full Conversation Search </span>
       <button style="text-align: end;" mat-icon-button (mouseenter)="toggleOverlay()" (mouseleave)="toggleOverlay()" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
         <mat-icon>help_outline</mat-icon>
       </button>

src/app/chat/chat-sidebar/chat-sidebar.scss

@@ -81,6 +81,10 @@ li:hover {
   margin-left: 4px;
 }
 
+.mat-checkbox {
+  margin-right: 4px;
+}
+
 @media only screen and (max-width: $screen-md) {
   .expand-button {
     top: 10px;

src/app/dashboard/dashboard-tile.scss

@@ -25,7 +25,7 @@
         flex-wrap: wrap;
         font-size: 1.25rem;
       }
-
+      color: #fff;
     }
 
     .right-tile {

src/app/meetups/meetups.service.ts

@@ -96,9 +96,16 @@ export class MeetupService {
   openDeleteDialog(meetups: any[] | any, callback) {
     const isMany = meetups.length > 1;
     const displayName = isMany ? '' : (meetups[0] || meetups).title;
-    const recurringInfo = (meetups[0] || meetups).recurring && (meetups[0] || meetups).recurring !== 'none' && (meetups[0] || meetups).recurringNumber
-      ? `(Recurs ${ (meetups[0] || meetups).recurring} for ${ (meetups[0] || meetups).recurringNumber } ${ (meetups[0] || meetups).recurring === 'daily' ? 'days' : 'weeks' })`
-      : '';
+    const recurringInfo =
+      (meetups[0] || meetups).recurring &&
+      (meetups[0] || meetups).recurring !== 'none' &&
+      (meetups[0] || meetups).recurringNumber
+        ? `(Recurs ${(meetups[0] || meetups).recurring} for ${
+            (meetups[0] || meetups).recurringNumber
+          } ${
+            (meetups[0] || meetups).recurring === 'daily' ? 'days' : 'weeks'
+          })`
+        : '';
     this.deleteDialog = this.dialog.open(DialogsPromptComponent, {
       data: {
         okClick: this.deleteMeetups([ meetups ].flat(), displayName, callback),

src/app/resources/resources-add.component.html

@@ -86,7 +86,7 @@
           </mat-autocomplete>
           <mat-error><planet-form-error-messages [control]="resourceForm.controls.openWhichFile"></planet-form-error-messages></mat-error>
         </mat-form-field>
-        <div class="inner-gaps by-column full-width">
+        <div class="file-upload inner-gaps by-column full-width">
           <label i18n>File Upload:</label>
           <planet-file-input (fileChange)="bindFile($event)"></planet-file-input>
           <label i18n class="warn-text-color" *ngIf="resourceForm?.errors?.fileTooBig">File size cannot exceed more than 512 MB</label>

src/app/resources/resources-add.scss

@@ -22,5 +22,11 @@
     .form-container {
       width: auto;
     }
+
+    .file-upload {
+      display: flex;
+      flex-direction: column;
+    }
+
   }
 }

src/app/shared/forms/planet-tag-input-dialog.component.ts

@@ -21,7 +21,7 @@ import { DialogsPromptComponent } from '../../shared/dialogs/dialogs-prompt.comp
     }
     :host mat-dialog-content {
       overflow-y: auto;
-      max-height: calc(100vh - 100px); 
+      max-height: calc(100vh - 100px);
     }
     :host .mat-list-option span {
       font-weight: inherit;

src/app/tasks/tasks.component.html

@@ -15,7 +15,8 @@
   <button mat-list-item *ngFor="let task of filteredTasks; trackBy: trackById" (click)="openTaskDetail(task)" [disabled]="!editable">
     <mat-checkbox [checked]="task.completed" [disabled]="!editable" (change)="toggleTaskComplete(task)" (click)="$event.stopPropagation()"></mat-checkbox>
     <p matLine>{{task.title}}</p>
-    <p matLine><ng-container i18n>Deadline:</ng-container> {{task.deadline | date}} {{task.deadline | date: 'shortTime'}}</p>
+    <p matLine [ngClass]="{'deadline-soon': isTaskDueSoon(task),
+    'deadline-passed': isTaskOverdue(task)}"><ng-container i18n>Deadline:</ng-container> {{task.deadline | date}} {{task.deadline | date: 'shortTime'}}</p>
     <p matLine *ngIf="task.completed"><ng-container i18n>Completed:</ng-container> {{task.completedTime | date}} {{task.completedTime | date: 'shortTime'}}</p>
     <img (click)="openMemberDialog(task.assignee); $event.stopPropagation()" matTooltip="{{task.assignee | assigneeName}}" *ngIf="task.assignee" matListAvatar [src]="
       task.assignee.attachmentDoc ?

src/app/tasks/tasks.component.ts

@@ -72,6 +72,26 @@ export class TasksComponent implements OnInit {
     });
   }
 
+  isTaskDueSoon(task): boolean {
+    if (!task || task.completed || !task.deadline) { return false; }
+
+    const now = new Date();
+    const deadline = new Date(task.deadline);
+    const twentyFourHoursFromNow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
+
+    const isWithinNextDay = deadline <= twentyFourHoursFromNow && deadline > now;
+
+    return isWithinNextDay;
+  }
+
+  isTaskOverdue(task): boolean {
+    if (task.completed || !task.deadline) { return false; }
+
+    const now = new Date();
+    const deadline = new Date(task.deadline);
+    return deadline < now;
+  }
+
   openAddDialog(additionalFields, task: any = {}, onSuccess = (res) => {}) {
     const { fields, formGroup } = this.tasksService.addDialogForm(task);
     this.dialogsFormService.openDialogsForm(task.title ? $localize`Edit Task` : $localize`Add Task`, fields, formGroup, {

src/app/tasks/tasks.scss

@@ -19,6 +19,14 @@ planet-tasks {
     }
   }
 
+  .deadline-soon{
+    color: #F6BE00
+  }
+
+  .deadline-passed{
+    color: red
+  }
+
   mat-button-toggle-group {
     font-size: 14px;
 

src/app/users/users-achievements/users-achievements.component.html

@@ -47,7 +47,7 @@ <h3 i18n>My Goals</h3>
           <h3 i18n>My Certifications</h3>
           <mat-list class="certs-list">
             <mat-list-item *ngFor="let certification of certifications">
-              {{certification.name}}
+              <span class="cert-item">{{certification.name}}</span>
             </mat-list-item>
           </mat-list>
         </div>
@@ -57,7 +57,7 @@ <h3 i18n>My Certifications</h3>
         <h3 i18n>My Links</h3>
         <mat-list>
           <mat-list-item class="mat-list-item-word-wrap" *ngFor="let link of achievements.links">
-            <h4 mat-line>{{link.title}}:</h4>
+            <h4 class="link-title" mat-line>{{link.title}}:</h4>
             <a href="{{link.url}}" target="_blank" class="styled-link"> {{link.url}} </a>
           </mat-list-item>
         </mat-list>

src/app/users/users-achievements/users-achievements.scss

@@ -10,10 +10,12 @@
     text-align: center;
   }
 
-  .certs-list .mat-list-item{
-    display: flex;
-    justify-content: center;
-    text-align: center;
+  .certs-list {
+    .cert-item {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 
   & mat-list, & ul, & ol {
@@ -76,6 +78,7 @@
         grid-area: txt;
         display: flex;
         align-items: center;
+        max-width: 75%;
       }
 
       .achievement-date {
@@ -92,6 +95,10 @@
     }
   }
 
+  .link-title {
+    max-width: 75%;
+  }
+
   .styled-link {
     color: #007bff;
     text-decoration: none;