From 9f3178d79f7a866b8b3a1a9068db1e9ced1bd12d Mon Sep 17 00:00:00 2001
From: Philip Massouh <massouh.3@osu.edu>
Date: Sun, 7 Nov 2021 19:38:52 -0700
Subject: [PATCH] placeholder in chat text box

---
 client/webapp/styles/channel-feed.scss | 9 ++++++++-
 client/webapp/styles/general.scss      | 5 +++++
 client/webapp/ui.ts                    | 2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/client/webapp/styles/channel-feed.scss b/client/webapp/styles/channel-feed.scss
index 9a48bc0..3829760 100644
--- a/client/webapp/styles/channel-feed.scss
+++ b/client/webapp/styles/channel-feed.scss
@@ -1,5 +1,8 @@
 @import "theme.scss";
 
+$scrollbarBottom: 4px;
+$borderRadius: 8px;
+
 #channel-content {
     flex: 1;
     display: flex;
@@ -19,7 +22,7 @@
     display: flex;
     flex-direction: column-reverse;
     padding-bottom: calc(16px + 8px);
-    margin-bottom: calc(65px - 4px - 8px); /* 4px for the bottom of the scrollbar, 8px for the border radius */
+    margin-bottom: calc(65px - $scrollbarBottom - $borderRadius);
     height: calc(100vh - 71px - 65px + 4px + 8px); /* TODO: Going to have to find a way to do this without a fixed height since the message box needs to be scalable */
     overflow-y: scroll;
     overflow-x: hidden;
@@ -128,4 +131,8 @@
     &.sending {
         color: $text-sending;
     }
+
+    &::before {
+        color: $text-muted;
+    }
 }
diff --git a/client/webapp/styles/general.scss b/client/webapp/styles/general.scss
index be3a433..23083e3 100644
--- a/client/webapp/styles/general.scss
+++ b/client/webapp/styles/general.scss
@@ -27,3 +27,8 @@ body {
 :root {
     background-color: $background-tertiary;
 }
+
+// https://stackoverflow.com/questions/16941360/how-to-create-a-placeholder-for-div-that-act-like-textfield
+[contenteditable=true]:empty:before{
+    content:attr(data-placeholder)
+}
diff --git a/client/webapp/ui.ts b/client/webapp/ui.ts
index 96bf063..f8de9be 100644
--- a/client/webapp/ui.ts
+++ b/client/webapp/ui.ts
@@ -129,7 +129,7 @@ export default class UI {
 			this.q.$('#channel-name').innerText = channel.name;
 			this.q.$('#channel-flavor-text').innerText = channel.flavorText || '';
 			this.q.$('#channel-flavor-divider').style.visibility = channel.flavorText ? 'visible' : 'hidden';
-			this.q.$('#text-input').setAttribute('placeholder', 'Message #' + channel.name);
+			this.q.$('#text-input').setAttribute('data-placeholder', 'Message #' + channel.name);
 
 			this.activeChannel = channel;
 		});