src/app/common/components/dropdown/dropdown.component.scss

@@ -168,7 +168,7 @@
 
       &.m-dropdownList__item--destructive {
         @include m-theme() {
-          color: $m-alert;
+          color: themed($m-alert);
         }
       }
     }

src/app/common/read-more/button.component.scss

@@ -22,3 +22,18 @@
     font-family: 'Roboto', Helvetica, sans-serif;
   }
 }
+
+.m-readMoreButton--v2 {
+  text-align: center;
+  box-sizing: border-box;
+
+  > span {
+    color: #1b85d6 !important;
+    font-weight: 400;
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    font-family: 'Roboto', Helvetica, sans-serif;
+  }
+}

src/app/common/read-more/button.component.ts

@@ -2,24 +2,38 @@ import {
   Component,
   ChangeDetectorRef,
   ChangeDetectionStrategy,
+  Input,
 } from '@angular/core';
 import { ReadMoreDirective } from './read-more.directive';
 
 @Component({
   selector: 'm-read-more--button',
   template: `
-    <div class="m-read-more--button" *ngIf="content && content.expandable">
-      <span
-        class="mdl-color-text--blue-grey-500"
-        (click)="content.expand()"
-        i18n="@@COMMON__READ_MORE__ACTION"
-        >Read more</span
+    <ng-container *ngIf="v2; else v1El">
+      <div
+        class="m-read-more--button m-readMoreButton--v2"
+        *ngIf="content && content.expandable"
       >
-    </div>
+        <span (click)="content.expand()" i18n="@@COMMON__SEE_MORE__ACTION"
+          >See More</span
+        >
+      </div>
+    </ng-container>
+    <ng-template #v1El>
+      <div class="m-read-more--button" *ngIf="content && content.expandable">
+        <span
+          class="mdl-color-text--blue-grey-500"
+          (click)="content.expand()"
+          i18n="@@COMMON__READ_MORE__ACTION"
+          >Read more</span
+        >
+      </div>
+    </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ReadMoreButtonComponent {
+  @Input() v2 = false;
   content: ReadMoreDirective;
 
   constructor(private cd: ChangeDetectorRef) {}

src/app/common/read-more/read-more.directive.ts

@@ -35,6 +35,7 @@ export class ReadMoreDirective {
       if (this.realHeight > this.maxHeightAllowed) {
         this._element.style.maxHeight = this.maxHeightAllowed + 'px';
         this._element.style.position = 'relative';
+        this._element.style.overflow = 'hidden';
         setTimeout(() => {
           this.expandable = true;
           this.detectChanges();
@@ -45,6 +46,7 @@ export class ReadMoreDirective {
 
   expand() {
     this._element.style.maxHeight = 'none';
+    this._element.style.overflow = 'visible';
     this.expandable = false;
     this.detectChanges();
   }

src/app/modules/newsfeed/activity/activity.module.ts

@@ -21,6 +21,7 @@ import { ActivityMenuComponent } from './menu/menu.component';
 import { PostMenuModule } from '../../../common/components/post-menu/post-menu.module';
 import { ActivityNsfwConsentComponent } from './nsfw-consent/nsfw-consent.component';
 import { ActivityMetricsComponent } from './metrics/metrics.component';
+import { ActivityRemindComponent } from './remind/remind.component';
 
 @NgModule({
   imports: [
@@ -45,6 +46,7 @@ import { ActivityMetricsComponent } from './metrics/metrics.component';
     ActivityMenuComponent,
     ActivityNsfwConsentComponent,
     ActivityMetricsComponent,
+    ActivityRemindComponent,
   ],
   providers: [],
   exports: [ActivityComponent],

src/app/modules/newsfeed/activity/content/content.component.html

@@ -6,7 +6,7 @@
   *ngIf="message"
 >
   <span [innerHtml]="message | tags"></span>
-  <m-read-more--button></m-read-more--button>
+  <m-read-more--button [v2]="true"></m-read-more--button>
 
   <m-translate
     *mIfBrowser
@@ -29,6 +29,10 @@
     [maxheight]="480"
   >
   </minds-rich-embed>
+  <div
+    class="m-activityContent__fixedHeightSpacer"
+    *ngIf="!mediaDescription"
+  ></div>
 </div>
 
 <div class="m-activityContent__media--video" #mediaEl *ngIf="isVideo">
@@ -59,11 +63,12 @@
 <div
   #mediaDescriptionEl
   class="m-activityContent__mediaDescription"
+  m-read-more
+  maxHeightAllowed="80"
   *ngIf="mediaDescription"
-  [innerHtml]="mediaDescription | tags"
 >
-  <p [innerHtml]="message | tags"></p>
-  <m-read-more--button></m-read-more--button>
+  <p [innerHtml]="mediaDescription | tags"></p>
+  <m-read-more--button [v2]="true"></m-read-more--button>
 </div>
 
 <!-- Translation -->
@@ -82,7 +87,16 @@
 </div> -->
 <!-- End translation -->
 
-<!-- 
-<ng-container *ngIf="service.isRemind$ | async">
-  <m-activity__remind></m-activity__remind>
-</ng-container> -->
+<div
+  class="m-activityContent__remind"
+  #remindContainerEl
+  *ngIf="service.isRemind$ | async"
+>
+  <m-activity__remind
+    [entity]="service.entity$ | async"
+    [style.width]="remindWidth"
+    [style.height]="remindHeight"
+    [style.max-height]="remindHeight"
+  >
+  </m-activity__remind>
+</div>

src/app/modules/newsfeed/activity/content/content.component.scss

@@ -12,11 +12,9 @@ m-activity__content {
 
   .m-activityContent__media--video,
   .m-activityContent__media--image,
-  .m-activityContent__media--richEmbed {
+  .m-activityContent__media--richEmbed,
+  .m-activityContent__remind {
     flex: 1;
-    @include m-theme() {
-      background: themed($m-bgColor--secondary);
-    }
     display: flex;
     flex-direction: column;
   }
@@ -29,6 +27,18 @@ m-activity__content {
   }
 }
 
+.m-activityContent__remind {
+  overflow: hidden;
+}
+
+.m-activityContent__media--video,
+.m-activityContent__media--image,
+.m-activityContent__media--richEmbed {
+  @include m-theme() {
+    background: themed($m-bgColor--secondary);
+  }
+}
+
 .m-activityContent__message {
   font-size: 15px;
   padding: 0px $activity-padding-lr 16px;
@@ -57,6 +67,8 @@ m-activity__content {
   p {
     margin: 0;
     padding: 0;
+    font-size: inherit;
+    color: inherit;
   }
 }
 
@@ -109,3 +121,7 @@ m-activity__content {
     }
   }
 }
+
+.m-activityContent__remind {
+  padding: 0px $activity-padding-lr 16px;
+}

src/app/modules/newsfeed/activity/content/content.component.ts

-import {
-  Component,
-  HostListener,
-  ViewChild,
-  Input,
-  ElementRef,
-} from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Component, HostListener, ViewChild, ElementRef } from '@angular/core';
+import { Subscription, timer } from 'rxjs';
 
 import { ActivatedRoute, Router } from '@angular/router';
 import { ActivityService, ActivityEntity } from '../activity.service';
@@ -14,6 +8,8 @@ import { Session } from '../../../../services/session';
 import { MindsUser, MindsGroup } from '../../../../interfaces/entities';
 import { OverlayModalService } from '../../../../services/ux/overlay-modal';
 import { MediaModalComponent } from '../../../media/modal/modal.component';
+import { ActivityRemindComponent } from '../remind/remind.component';
+import { delay } from 'q';
 
 @Component({
   selector: 'm-activity__content',
@@ -29,6 +25,11 @@ export class ActivityContentComponent {
   @ViewChild('mediaDesciptionEl', { static: false, read: ElementRef })
   mediaDescriptionEl: ElementRef;
 
+  maxFixedHeightContent: number = 540;
+  fixedHeightRatio: number = 500 / 750;
+  remindWidth: number;
+  remindHeight: number;
+
   private entitySubscription: Subscription;
 
   entity: ActivityEntity;
@@ -36,7 +37,8 @@ export class ActivityContentComponent {
   constructor(
     public service: ActivityService,
     private overlayModal: OverlayModalService,
-    private router: Router
+    private router: Router,
+    private el: ElementRef
   ) {}
 
   ngOnInit() {
@@ -47,6 +49,13 @@ export class ActivityContentComponent {
     );
   }
 
+  ngAfterViewInit() {
+    // Run after view initialized
+    timer(0)
+      .toPromise()
+      .then(() => this.calculateRemindHeight());
+  }
+
   ngOnDestroy() {
     this.entitySubscription.unsubscribe();
   }
@@ -96,6 +105,16 @@ export class ActivityContentComponent {
     return this.entity.entity_guid;
   }
 
+  @HostListener('window:resize')
+  calculateRemindHeight(): void {
+    if (!this.service.displayOptions.fixedHeight) return;
+    const messageHeight = this.messageEl
+      ? this.messageEl.nativeElement.clientHeight
+      : 0;
+    this.remindHeight = this.maxFixedHeightContent - messageHeight;
+    this.remindWidth = this.remindHeight * this.fixedHeightRatio;
+  }
+
   onModalRequested(event: MouseEvent) {
     if (event) {
       event.preventDefault();
@@ -114,4 +133,6 @@ export class ActivityContentComponent {
       )
       .present();
   }
+
+  onImageError(e: Event): void {}
 }

src/app/modules/newsfeed/activity/owner-block/owner-block.component.html

-<i class="material-icons selected" *ngIf="service.isRemind$ | async">repeat</i>
-
 <div class="m-activityOwnerBlock__avatar" [hovercard]="owner">
   <a [routerLink]="['/', username]">
     <img [src]="avatarUrl" class="m-border" />
@@ -8,6 +6,11 @@
 
 <div class="m-activityOwnerBlock__body">
   <a class="m-activityOwnerBlock__displayName" [routerLink]="['/', username]">
+    <i
+      class="material-icons m-activityOwnerBlock__remindIcon"
+      *ngIf="service.isRemind$ | async"
+      >repeat</i
+    >
     <strong [title]="displayName">{{ displayName }}</strong>
     <m-channel--badges
       class="m-channel--badges-activity"
@@ -21,7 +24,7 @@
       <strong>({{ group.name }})</strong>
     </a>
   </ng-container>
-  <ng-container *ngIf="!(service.isRemind$ | async)">
+  <ng-container>
     <!-- Perma link to post -->
     <a
       [routerLink]="service.canonicalUrl$ | async"

src/app/modules/newsfeed/activity/owner-block/owner-block.component.scss

@@ -52,6 +52,15 @@ m-activity__ownerBlock {
   }
 }
 
+.m-activityOwnerBlock__remindIcon {
+  font-size: 18px;
+  margin-right: $minds-margin / 2;
+  vertical-align: middle;
+  @include m-theme() {
+    color: themed($m-link);
+  }
+}
+
 .m-activityOwnerBlock__permalink {
   font-size: 14px;
   line-height: 17px;

src/app/modules/newsfeed/activity/remind/remind.component.html

+<ng-container *ngIf="service.entity$ | async">
+  <m-activity__ownerBlock> </m-activity__ownerBlock>
+
+  <m-activity__content
+    *ngIf="service.shouldShowContent$ | async"
+  ></m-activity__content>
+</ng-container>

src/app/modules/newsfeed/activity/remind/remind.component.scss

+m-activity__remind {
+  display: block;
+  margin: auto;
+  border-radius: $m-borderRadius;
+  box-shadow: 0 $m-boxShadowOffset $m-boxShadowBlur rgba(0, 0, 0, 0.05);
+
+  @include m-theme() {
+    background: themed($m-bgColor--primary);
+    border: 1px solid themed($m-borderColor--primary);
+  }
+}
+
+.m-activity--fixedHeight {
+  m-activity__remind {
+    display: flex;
+    flex-direction: column;
+  }
+}

src/app/modules/newsfeed/activity/remind/remind.component.ts

+import {
+  Component,
+  HostListener,
+  ViewChild,
+  Input,
+  ElementRef,
+} from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { ActivatedRoute, Router } from '@angular/router';
+import { ActivityService, ActivityEntity } from '../activity.service';
+import { ConfigsService } from '../../../../common/services/configs.service';
+import { Session } from '../../../../services/session';
+import { MindsUser, MindsGroup } from '../../../../interfaces/entities';
+import { OverlayModalService } from '../../../../services/ux/overlay-modal';
+import { MediaModalComponent } from '../../../media/modal/modal.component';
+import { first } from 'rxjs/operators';
+
+@Component({
+  selector: 'm-activity__remind',
+  templateUrl: 'remind.component.html',
+  providers: [ActivityService],
+})
+export class ActivityRemindComponent {
+  @Input('entity') set entity(entity: ActivityEntity) {
+    this.service.setEntity(entity.remind_object);
+  }
+  constructor(public service: ActivityService) {}
+}

src/app/modules/newsfeed/single/single.component.ts

@@ -193,6 +193,8 @@ export class NewsfeedSingleComponent {
   }
 
   get showLegacyActivity(): boolean {
-    return this.editing;
+    return (
+      this.editing || !this.featuresService.has('activity-v2--single-page')
+    );
   }
 }

src/stylesheets/themes.scss

@@ -98,6 +98,9 @@ $themes: (
     m-borderColor--primary: #dce2e4,
     m-borderColor--secondary: #979797,
     m-borderColor--tertiary: #ececec,
+    m-alert: #e03c20,
+    m-link: #1b85d6,
+    m-btn--primary: #1b85d6,
     // legacy colors
       m-grey-950: $grey-950,
     m-grey-900: $grey-900,
@@ -163,6 +166,9 @@ $themes: (
     m-borderColor--primary: #404a4e,
     m-borderColor--secondary: #979797,
     m-borderColor--tertiary: #202527,
+    m-alert: #e03c20,
+    m-link: #1b85d6,
+    m-btn--primary: #1b85d6,
     // legacy colors
       m-grey-950: lighten($grey-50, $percent),
     m-grey-900: lighten($grey-100, $percent),
@@ -290,9 +296,9 @@ $m-bgColor--tertiary: 'm-bgColor--tertiary';
 $m-borderColor--primary: 'm-borderColor--primary';
 $m-borderColor--secondary: 'm-borderColor--secondary';
 $m-borderColor--tertiary: 'm-borderColor--tertiary';
-$m-alert: #e03c20;
-$m-link: #1b85d6;
-$m-btn--primary: #1b85d6;
+$m-alert: 'm-alert';
+$m-link: 'm-link';
+$m-btn--primary: 'm-btn--primary';
 
 $m-borderRadius: 2px;
 $m-boxShadowBlur: 10px;