ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-11 08:55:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

chat: display avatars if set

Browse Source
This commit is contained in:
Matilde Park 2020-04-23 22:32:16 -04:00
parent 15404e0989
commit 7ebc09a41a
4 changed files with 65 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,6 @@ const MARKDOWN_CONFIG = {
} }
}; };
export class ChatInput extends Component { export class ChatInput extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -117,7 +116,6 @@ export class ChatInput extends Component {
return; return;
} }
this.setState({ patpSearch: match[1].toLowerCase() }); this.setState({ patpSearch: match[1].toLowerCase() });
} }
clearSearch() { clearSearch() {
@ -276,6 +274,15 @@ export class ChatInput extends Component {
const sigilClass = props.ownerContact const sigilClass = props.ownerContact
? '' : 'mix-blend-diff'; ? '' : 'mix-blend-diff';
const img = (props.ownerContact && (props.ownerContact.avatar !== null))
? <img src={props.ownerContact.avatar} height={24} width={24} className="dib" />
: <Sigil
ship={window.ship}
size={24}
color={`#${color}`}
classes={sigilClass}
/>;
const candidates = _.chain(this.props.envelopes) const candidates = _.chain(this.props.envelopes)
.defaultTo([]) .defaultTo([])
.map('author') .map('author')
@ -324,12 +331,7 @@ export class ChatInput extends Component {
height: 24 height: 24
}} }}
> >
<Sigil {img}
ship={window.ship}
size={24}
color={`#${color}`}
classes={sigilClass}
/>
</div> </div>
<div <div
className="fr h-100 flex bg-gray0-d lh-copy pl2 w-100 items-center" className="fr h-100 flex bg-gray0-d lh-copy pl2 w-100 items-center"

22
pkg/interface/chat/src/js/components/lib/member-element.js
View File

@ -1,11 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import classnames from 'classnames';
import { Sigil } from '/components/lib/icons/sigil'; import { Sigil } from '/components/lib/icons/sigil';
import { uxToHex, cite } from '/lib/util'; import { uxToHex, cite } from '/lib/util';
export class MemberElement extends Component { export class MemberElement extends Component {
onRemove() { onRemove() {
const { props } = this; const { props } = this;
props.api.groups.remove([`~${props.ship}`], props.path); props.api.groups.remove([`~${props.ship}`], props.path);
@ -24,7 +21,8 @@ export class MemberElement extends Component {
} else if (window.ship !== props.ship && window.ship === props.owner) { } else if (window.ship !== props.ship && window.ship === props.owner) {
actionElem = ( actionElem = (
<a onClick={this.onRemove.bind(this)} <a onClick={this.onRemove.bind(this)}
className="w-20 dib list-ship black white-d f8 pointer"> className="w-20 dib list-ship black white-d f8 pointer"
>
Ban Ban
</a> </a>
); );
@ -34,20 +32,24 @@ export class MemberElement extends Component {
); );
} }
let name = !!props.contact const name = props.contact
? `${props.contact.nickname} (${cite(props.ship)})` : `${cite(props.ship)}`; ? `${props.contact.nickname} (${cite(props.ship)})` : `${cite(props.ship)}`;
let color = !!props.contact ? uxToHex(props.contact.color) : '000000'; const color = props.contact ? uxToHex(props.contact.color) : '000000';
const img = (props.contact && (props.contact.avatar !== null))
? <img src={props.contact.avatar} height={32} width={32} className="dib" />
: <Sigil ship={props.ship} size={32} color={`#${color}`} />;
return ( return (
<div className="flex mb2"> <div className="flex mb2">
<Sigil ship={props.ship} size={32} color={`#${color}`} /> {img}
<p className={ <p className={
"w-70 mono list-ship dib v-mid black white-d ml2 nowrap f8" 'w-70 mono list-ship dib v-mid black white-d ml2 nowrap f8'
}>{name}</p> }
>{name}</p>
{actionElem} {actionElem}
</div> </div>
); );
} }
} }

29
pkg/interface/chat/src/js/components/lib/overlay-sigil.js
View File

@ -1,9 +1,9 @@
import React, { Component } from "react"; import React, { Component } from 'react';
import { Sigil } from "/components/lib/icons/sigil"; import { Sigil } from '/components/lib/icons/sigil';
import { import {
ProfileOverlay, ProfileOverlay,
OVERLAY_HEIGHT OVERLAY_HEIGHT
} from "/components/lib/profile-overlay"; } from '/components/lib/profile-overlay';
export class OverlaySigil extends Component { export class OverlaySigil extends Component {
constructor() { constructor() {
@ -49,7 +49,6 @@ export class OverlaySigil extends Component {
const parent = this.containerRef.current.offsetParent; const parent = this.containerRef.current.offsetParent;
const { offsetTop } = this.containerRef.current; const { offsetTop } = this.containerRef.current;
let bottomSpace, topSpace; let bottomSpace, topSpace;
if(navigator.userAgent.includes('Firefox')) { if(navigator.userAgent.includes('Firefox')) {
@ -58,7 +57,6 @@ export class OverlaySigil extends Component {
} else { } else {
topSpace = offsetTop + parent.scrollHeight - parent.clientHeight - parent.scrollTop; topSpace = offsetTop + parent.scrollHeight - parent.clientHeight - parent.scrollTop;
bottomSpace = parent.clientHeight - topSpace - OVERLAY_HEIGHT; bottomSpace = parent.clientHeight - topSpace - OVERLAY_HEIGHT;
} }
this.setState({ this.setState({
topSpace, topSpace,
@ -69,12 +67,22 @@ export class OverlaySigil extends Component {
render() { render() {
const { props, state } = this; const { props, state } = this;
const img = (props.contact && (props.contact.avatar !== null))
? <img src={props.contact.avatar} height={24} width={24} className="dib" />
: <Sigil
ship={props.ship}
size={24}
color={props.color}
classes={props.sigilClass}
/>;
return ( return (
<div <div
onClick={this.profileShow} onClick={this.profileShow}
className={props.className + " pointer relative"} className={props.className + ' pointer relative'}
ref={this.containerRef} ref={this.containerRef}
style={{ height: "24px" }} style={{ height: '24px' }}
> >
{state.profileClicked && ( {state.profileClicked && (
<ProfileOverlay <ProfileOverlay
@ -87,12 +95,7 @@ export class OverlaySigil extends Component {
onDismiss={this.profileHide} onDismiss={this.profileHide}
/> />
)} )}
<Sigil {img}
ship={props.ship}
size={24}
color={props.color}
classes={props.sigilClass}
/>
</div> </div>
); );
} }

48
pkg/interface/chat/src/js/components/lib/profile-overlay.js
View File

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from 'react';
import { Link } from "react-router-dom"; import { Link } from 'react-router-dom';
import { cite } from "/lib/util"; import { cite } from '/lib/util';
import { Sigil } from "/components/lib/icons/sigil"; import { Sigil } from '/components/lib/icons/sigil';
export const OVERLAY_HEIGHT = 250; export const OVERLAY_HEIGHT = 250;
@ -14,13 +14,13 @@ export class ProfileOverlay extends Component {
} }
componentDidMount() { componentDidMount() {
document.addEventListener("mousedown", this.onDocumentClick); document.addEventListener('mousedown', this.onDocumentClick);
document.addEventListener("touchstart", this.onDocumentClick); document.addEventListener('touchstart', this.onDocumentClick);
} }
componentWillUnmount() { componentWillUnmount() {
document.removeEventListener("mousedown", this.onDocumentClick); document.removeEventListener('mousedown', this.onDocumentClick);
document.removeEventListener("touchstart", this.onDocumentClick); document.removeEventListener('touchstart', this.onDocumentClick);
} }
onDocumentClick(event) { onDocumentClick(event) {
@ -38,21 +38,31 @@ export class ProfileOverlay extends Component {
let top, bottom; let top, bottom;
if (topSpace < OVERLAY_HEIGHT / 2) { if (topSpace < OVERLAY_HEIGHT / 2) {
top = `0px`; top = '0px';
} }
if (bottomSpace < OVERLAY_HEIGHT / 2) { if (bottomSpace < OVERLAY_HEIGHT / 2) {
bottom = `0px`; bottom = '0px';
} }
if (!(top || bottom)) { if (!(top || bottom)) {
bottom = `-${Math.round(OVERLAY_HEIGHT / 2)}px`; bottom = `-${Math.round(OVERLAY_HEIGHT / 2)}px`;
} }
const containerStyle = { top, bottom, left: "100%" }; const containerStyle = { top, bottom, left: '100%' };
const isOwn = window.ship === ship; const isOwn = window.ship === ship;
const identityHref = group["group-path"].startsWith("/~/") const identityHref = group['group-path'].startsWith('/~/')
? "/~groups/me" ? '/~groups/me'
: `/~groups/view${group["group-path"]}/${window.ship}`; : `/~groups/view${group['group-path']}/${window.ship}`;
const img = (contact && (contact.avatar !== null))
? <img src={contact.avatar} height={160} width={160} className="brt2 dib" />
: <Sigil
ship={ship}
size={160}
color={color}
classes="brt2"
svgClass="brt2"
/>;
return ( return (
<div <div
@ -60,14 +70,8 @@ export class ProfileOverlay extends Component {
style={containerStyle} style={containerStyle}
className="flex-col shadow-6 br2 bg-white bg-gray0-d inter absolute z-1 f9 lh-solid" className="flex-col shadow-6 br2 bg-white bg-gray0-d inter absolute z-1 f9 lh-solid"
> >
<div style={{ height: "160px" }}> <div style={{ height: '160px', width: '160px' }}>
<Sigil {img}
ship={ship}
size={160}
color={color}
classes="brt2"
svgClass="brt2"
/>
</div> </div>
<div className="pv3 pl3 pr2"> <div className="pv3 pl3 pr2">
{contact && contact.nickname && ( {contact && contact.nickname && (