chat: blend uncustomised sigils

This commit is contained in:
Matilde Park 2020-02-20 01:37:16 -05:00
parent 00a9eb9eab
commit 09d2057284
3 changed files with 30 additions and 8 deletions

View File

@ -237,8 +237,8 @@ export class ChatScreen extends Component {
<Link to="/~chat/">{"⟵ All Chats"}</Link>
</div>
<div
className={`pl3 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative overflow-x-scroll
overflow-x-auto-l overflow-x-auto-xl flex-shrink-0`}
className={"pl3 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative " +
"overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"}
style={{ height: 48 }}>
<SidebarSwitcher
sidebarShown={this.props.sidebarShown}
@ -261,7 +261,7 @@ export class ChatScreen extends Component {
/>
</div>
<div
className="overflow-y-scroll bg-gray0-d pt3 pb2 flex flex-column-reverse"
className="overflow-y-scroll bg-white bg-gray0-d pt3 pb2 flex flex-column-reverse"
style={{ height: "100%", resize: "vertical" }}
onScroll={this.onScroll}>
<div

View File

@ -172,6 +172,9 @@ export class ChatInput extends Component {
let color = !!props.ownerContact
? uxToHex(props.ownerContact.color) : '#000000';
let sigilClass = !!props.ownerContact
? "" : "mix-blend-diff";
return (
<div className="pa3 cf flex black bt b--gray4 o-50">
<div className="fl" style={{
@ -179,7 +182,12 @@ export class ChatInput extends Component {
flexBasis: 24,
height: 24
}}>
<Sigil ship={window.ship} size={24} color={`#${color}`} />
<Sigil
ship={window.ship}
size={24}
color={`#${color}`}
classes={sigilClass}
/>
</div>
<div className="fr h-100 flex" style={{ flexGrow: 1, height: 28, paddingTop: 6, resize: "none" }}>
<p className="pl3">This chat is read only and you cannot post.</p>
@ -193,10 +201,15 @@ export class ChatInput extends Component {
let color = !!props.ownerContact
? uxToHex(props.ownerContact.color) : '#000000';
let sigilClass = !!props.ownerContact
? "" : "mix-blend-diff";
this.bindShortcuts();
return (
<div className="pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-gray0-d" style={{ flexGrow: 1 }}>
<div className="pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-white bg-gray0-d"
style={{ flexGrow: 1 }}>
<div
className="fl"
style={{
@ -204,7 +217,12 @@ export class ChatInput extends Component {
flexBasis: 24,
height: 24
}}>
<Sigil ship={window.ship} size={24} color={`#${color}`} />
<Sigil
ship={window.ship}
size={24}
color={`#${color}`}
classes={sigilClass}
/>
</div>
<div className="fr h-100 flex bg-gray0-d" style={{ flexGrow: 1 }}>
<textarea

View File

@ -162,12 +162,14 @@ export class Message extends Component {
let contact = !!(props.msg.author in props.contacts)
? props.contacts[props.msg.author] : false;
let name = props.msg.author;
let name = `~${props.msg.author}`;
let color = "#000000";
let sigilClass = "mix-blend-diff"
if (contact) {
name = (contact.nickname.length > 0)
? contact.nickname : `~${props.msg.author}`;
color = `#${uxToHex(contact.color)}`;
sigilClass = "";
}
return (
<div
@ -181,7 +183,9 @@ export class Message extends Component {
<Sigil
ship={props.msg.author}
size={24}
color={color} />
color={color}
classes={sigilClass}
/>
</div>
<div
className="fr clamp-message white-d"