diff --git a/src/app/components/stream/status/databinded-text/databinded-text.component.html b/src/app/components/stream/status/databinded-text/databinded-text.component.html
index fb00b4c1..0706a4b1 100644
--- a/src/app/components/stream/status/databinded-text/databinded-text.component.html
+++ b/src/app/components/stream/status/databinded-text/databinded-text.component.html
@@ -1 +1,6 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/app/components/stream/status/databinded-text/databinded-text.component.scss b/src/app/components/stream/status/databinded-text/databinded-text.component.scss
index f3220d19..3f725dac 100644
--- a/src/app/components/stream/status/databinded-text/databinded-text.component.scss
+++ b/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;
diff --git a/src/app/components/stream/status/databinded-text/databinded-text.component.ts b/src/app/components/stream/status/databinded-text/databinded-text.component.ts
index d84e94b6..69014a97 100644
--- a/src/app/components/stream/status/databinded-text/databinded-text.component.ts
+++ b/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('');
let extractedHashtag = extractedLinkAndNext[0].split('#')[1].replace('', '').replace('', '');
diff --git a/src/app/components/stream/status/status.component.html b/src/app/components/stream/status/status.component.html
index c282ef80..1517a333 100644
--- a/src/app/components/stream/status/status.component.html
+++ b/src/app/components/stream/status/status.component.html
@@ -97,7 +97,7 @@
sensitive content
-
diff --git a/src/app/components/stream/status/status.component.scss b/src/app/components/stream/status/status.component.scss
index bea3152a..0d61305c 100644
--- a/src/app/components/stream/status/status.component.scss
+++ b/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 {
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 7b0d3918..1e80c59d 100644
--- a/src/sass/_variables.scss
+++ b/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;