michael/cordis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

placeholder in chat text box

Browse Source
This commit is contained in:
Philip Massouh 2021-11-07 19:38:52 -07:00
parent b235e58ae2
commit 9f3178d79f
3 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/webapp/styles/channel-feed.scss
View File

@ -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;
}
}

5
client/webapp/styles/general.scss
View File

@ -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)
}

2
client/webapp/ui.ts
View File

@ -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;
});