urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-22 18:31:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2319 from urbit/mp/os1/chat/blended-sigil

Browse Source 
chat: blend uncustomised sigils
This commit is contained in:
Logan 2020-02-20 13:38:47 -08:00 committed by GitHub
commit d203c684e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pkg/interface/chat/src/js/components/chat.js
View File

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

24
pkg/interface/chat/src/js/components/lib/chat-input.js
View File

@ -172,6 +172,9 @@ export class ChatInput extends Component {
let color = !!props.ownerContact let color = !!props.ownerContact
? uxToHex(props.ownerContact.color) : '#000000'; ? uxToHex(props.ownerContact.color) : '#000000';
let sigilClass = !!props.ownerContact
? "" : "mix-blend-diff";
return ( return (
<div className="pa3 cf flex black bt b--gray4 o-50"> <div className="pa3 cf flex black bt b--gray4 o-50">
<div className="fl" style={{ <div className="fl" style={{
@ -179,7 +182,12 @@ export class ChatInput extends Component {
flexBasis: 24, flexBasis: 24,
height: 24 height: 24
}}> }}>
<Sigil ship={window.ship} size={24} color={`#${color}`} /> <Sigil
ship={window.ship}
size={24}
color={`#${color}`}
classes={sigilClass}
/>
</div> </div>
<div className="fr h-100 flex" style={{ flexGrow: 1, height: 28, paddingTop: 6, resize: "none" }}> <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> <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 let color = !!props.ownerContact
? uxToHex(props.ownerContact.color) : '#000000'; ? uxToHex(props.ownerContact.color) : '#000000';
let sigilClass = !!props.ownerContact
? "" : "mix-blend-diff";
this.bindShortcuts(); this.bindShortcuts();
return ( 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 <div
className="fl" className="fl"
style={{ style={{
@ -204,7 +217,12 @@ export class ChatInput extends Component {
flexBasis: 24, flexBasis: 24,
height: 24 height: 24
}}> }}>
<Sigil ship={window.ship} size={24} color={`#${color}`} /> <Sigil
ship={window.ship}
size={24}
color={`#${color}`}
classes={sigilClass}
/>
</div> </div>
<div className="fr h-100 flex bg-gray0-d" style={{ flexGrow: 1 }}> <div className="fr h-100 flex bg-gray0-d" style={{ flexGrow: 1 }}>
<textarea <textarea

8
pkg/interface/chat/src/js/components/lib/message.js
View File

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