added long post trucation

src/app/components/stream/status/databinded-text/databinded-text.component.html

@@ -1 +1,6 @@
-<div #content class="content" [class.selectable]="textIsSelectable" innerHTML="{{processedText}}" (click)="selectText($event)"></div>
+<div class="content-wrapper">
+    <div #content class="content" [class.selectable]="textIsSelectable" [class.collapsed]="isCollapsed" innerHTML="{{processedText}}" (click)="selectText($event)"></div>
+    <div class="content-wrapper__expand" [class.content-wrapper__expand--selected]="selected" *ngIf="isCollapsed" (click)="selectText($event)">
+        <a href (click)="expand()" class="content-wrapper__expand--link" title="expand status">read more <fa-icon class="content-wrapper__expand--link--icon" [icon]="faAngleDown"></fa-icon></a>
+    </div>
+</div>

src/app/components/stream/status/databinded-text/databinded-text.component.scss

@@ -1,9 +1,52 @@
 @import "variables";
 
+$expand-color: $column-color;
+
 .selectable {
     cursor: pointer;
 }
 
+.collapsed {
+    max-height: 290px;
+    overflow: hidden;
+}
+
+.content-wrapper {
+    position: relative;
+    cursor: pointer;
+
+    &__expand {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding-top: 60px;
+        padding-left: 15px;
+        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba($expand-color ,0.25), rgba($expand-color,0.5), $expand-color, $expand-color);
+        
+        &--link{
+            transition: all .2s;
+            color: #a9b5d8;
+            color: #c0c8e0;
+            // text-decoration: underline;
+
+            &:hover {
+                color: white;
+            }
+
+            &--icon {
+                position: relative;
+                top: 1px;
+            }
+        }
+
+        &--selected {
+            background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba($selected-status ,0.25), rgba($selected-status,0.5), $selected-status, $selected-status); 
+        }
+    }    
+}
+
+
 //Mastodon styling
 :host ::ng-deep .content {
     // font-size: 14px;

src/app/components/stream/status/databinded-text/databinded-text.component.ts

@@ -1,16 +1,21 @@
 import { Component, OnInit, Input, EventEmitter, Output, Renderer2, ViewChild, ElementRef } from '@angular/core';
 
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
+
 @Component({
     selector: 'app-databinded-text',
     templateUrl: './databinded-text.component.html',
     styleUrls: ['./databinded-text.component.scss']
 })
 export class DatabindedTextComponent implements OnInit {
+    faAngleDown = faAngleDown;
+
     private accounts: string[] = [];
     private hashtags: string[] = [];
     private links: string[] = [];
 
     processedText: string;
+    isCollapsed: boolean = false;
 
     @ViewChild('content') contentElement: ElementRef;
 
@@ -19,11 +24,15 @@ export class DatabindedTextComponent implements OnInit {
     @Output() textSelected = new EventEmitter();
 
     @Input() textIsSelectable: boolean = true;
+    @Input() selected: boolean;
 
     @Input('text')
     set text(value: string) {
-        // console.warn('text');
-        // console.warn(value);
+
+        let parser = new DOMParser();
+        var dom = parser.parseFromString(value, 'text/html')
+        this.isCollapsed = [...dom.body.textContent].length > 500;
+        //console.warn(this.isCollapsed);
 
         this.processedText = '';
 
@@ -73,6 +82,11 @@ export class DatabindedTextComponent implements OnInit {
         }
     }
 
+    expand(): boolean {
+        this.isCollapsed = false;
+        return false;
+    }
+
     private processHashtag(section: string) {
         let extractedLinkAndNext = section.split('</a>');
         let extractedHashtag = extractedLinkAndNext[0].split('#')[1].replace('<span>', '').replace('</span>', '');

src/app/components/stream/status/status.component.html

@@ -97,7 +97,7 @@
                 <span class="status__content-warning--title">sensitive content</span>
                 <span innerHTML="{{ contentWarningText }}"></span>
             </a>
-            <app-databinded-text class="status__content" *ngIf="!isContentWarned" [text]="statusContent"
+            <app-databinded-text class="status__content" *ngIf="!isContentWarned" [text]="statusContent" [selected]="isSelected"
                 (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
                 (textSelected)="textSelected()"></app-databinded-text>
 

src/app/components/stream/status/status.component.scss

@@ -38,6 +38,7 @@
     background-color: desaturate(lighten(#0f111a, 5%), 4%);
     background-color: #0a0a10;
     background-color: #1e2734;
+    background-color: $selected-status;
 }
 
 .status {

src/sass/_variables.scss

@@ -68,6 +68,7 @@ $status-editor-color: #14151a;
 $status-editor-footer-background: #535c7e;
 $status-editor-footer-background: #3e455f;
 $status-editor-footer-link-color: #e2e2e2;
+$selected-status: #1e2734;
 
 $autosuggest-background: #ffffff;
 $autosuggest-entry-background: #3e455f;