urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-30 22:15:47 +03:00
Code Issues Packages Projects Releases Wiki Activity

/me, /group views, render sigil, render root ident

Browse Source
This commit is contained in:
Matilde Park 2019-12-05 02:49:21 -05:00 committed by Logan Allen
parent c17bec49af
commit 92e1970651
9 changed files with 4093 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4064
pkg/arvo/app/contacts/js/index.js
View File

File diff suppressed because it is too large Load Diff

2
pkg/interface/contacts/src/js/components/contacts.js
View File

@ -3,7 +3,7 @@ import React, { Component } from 'react'
export class Contacts extends Component {
render() {
return (
<div>
<div class="br b--gray4 h-100 flex-shrink-0 flex-basis-100-s flex-basis-300-ns relative">
<p>Hey.</p>
</div>
)

33
pkg/interface/contacts/src/js/components/groups.js
View File

@ -2,6 +2,8 @@ import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import { GroupsItem } from './lib/groups-item';
import { Sigil } from './lib/icons/sigil';
import { uxToHex } from '../lib/util';
export class Groups extends Component {
// drawer to the left
@ -10,12 +12,32 @@ export class Groups extends Component {
const { props, state } = this;
console.log(props.contacts);
let rootIdentity = Object.keys(props.contacts)
.filter((path) => {
return (path === "/~/default")
}).map((path) => {
let ourCard = props.contacts[path][window.ship];
let color = uxToHex(ourCard.color);
return (
<Link to={"/~contacts/me"}>
<div class="w-100 pl4 f9">
<Sigil ship={window.ship} color={color} size={32}/>
<p className="w-70 dib v-mid ml2 nowrap pb6">~{window.ship}</p>
</div>
</Link>
)
});
let groupItems = Object.keys(props.contacts)
.filter((path) => {
return (!path.startsWith("/~/") || path === "/~/default")
})
.map((path) => {
let name = path.substr(1);
(name[1] === '/')
? name = '~' + window.ship + name.substr(1)
: null;
let nameSeparator = name.indexOf("/");
(name.indexOf("/" === 1))
? name = name.substr(2)
: name = name.substr(nameSeparator);
return (
<GroupsItem
key={path}
@ -26,9 +48,10 @@ export class Groups extends Component {
});
return (
<div className="br b--gray4 h-100 flex-basis-100-s flex-basis-300-ns relative">
<div className="br b--gray4 h-100 flex-basis-100-s flex-basis-300-ns flex-shrink-0 relative">
<h2 className="f9 pa4 gray2 c-default">Your Root Identity</h2>
<h2 className="f9 pa4 gray2 c-default">Your Groups</h2>
{rootIdentity}
<h2 className="f9 pt3 pr4 pb4 pl4 gray2 c-default">Your Groups</h2>
{groupItems}
<div
className="dt bt b--gray4 absolute w-100"

13
pkg/interface/contacts/src/js/components/lib/card.js Normal file
View File

@ -0,0 +1,13 @@
import React, { Component } from 'react'
export class ContactCard extends Component {
render() {
return (
<div>
</div>
)
}
}
export default ContactCard

5
pkg/interface/contacts/src/js/components/lib/groups-item.js
View File

@ -5,13 +5,12 @@ import { Route, Link } from 'react-router-dom';
export class GroupsItem extends Component {
render() {
const { props } = this;
console.log(props.group)
return (
<Link
to={"~contacts/group" + props.link}>
to={"/~contacts" + props.link}>
<div className="w-100 v-mid f9 pl4">
<p class="mono">{props.name}</p>
<p>{props.name}</p>
</div>
</Link>
)

13
pkg/interface/contacts/src/js/components/lib/icons/sigil.js
View File

@ -13,20 +13,15 @@ export class Sigil extends Component {
);
} else {
return (
<div
className="bg-black"
style={{ flexBasis: 32 }}>
{
sigil({
<div className="dib" style={{ flexBasis: 32, backgroundColor: props.color }}>
{sigil({
patp: props.ship,
renderer: reactRenderer,
size: props.size,
colors: ['black', 'white'],
})
}
colors: [props.color, "white"]
})}
</div>
);
}
}
}

32
pkg/interface/contacts/src/js/components/root.js
View File

@ -8,7 +8,8 @@ import { subscription } from '/subscription';
import { store } from '/store';
import { Skeleton } from '/components/skeleton';
import { NewScreen } from '/components/lib/new';
import { Contacts } from '/components/contacts.js';
import { Contacts } from '/components/contacts';
import { ContactCard } from '/components/lib/card'
export class Root extends Component {
@ -51,7 +52,7 @@ export class Root extends Component {
</Skeleton>
);
}} />
<Route exact path="/~contacts/group/:group"
<Route exact path="/~contacts/:ship/:group"
render={ (props) => {
return(
<Skeleton
@ -60,6 +61,33 @@ export class Root extends Component {
activeDrawer="contacts">
<Contacts
contacts={state.contacts} />
<div className="h-100 w-100 overflow-x-hidden bg-gray0 dn db-ns"></div>
</Skeleton>
)
}}
/>
<Route exact path="/~contacts/:ship/:group/:contact"
render={ (props) => {
return(
<Skeleton
spinner={state.spinner}
contacts={state.contacts}
activeDrawer="rightPanel">
<Contacts
contacts={state.contacts} />
<ContactCard/>
</Skeleton>
)
}}
/>
<Route exact path="/~contacts/me"
render={ (props) => {
return(
<Skeleton
spinner={state.spinner}
contacts={state.contacts}
activeDrawer="rightPanel">
<ContactCard/>
</Skeleton>
)
}}

4
pkg/interface/contacts/src/js/components/skeleton.js
View File

@ -7,7 +7,7 @@ import { Groups } from './groups';
export class Skeleton extends Component {
render() {
let rightPanelClasses =
this.props.activeDrawer === "rightPanel" ? "db" : "dn db-ns";
this.props.activeDrawer === "groups" ? "dn db-ns" : "db";
return (
<div className="h-100 w-100">
@ -19,7 +19,7 @@ export class Skeleton extends Component {
}}>
<Groups contacts={this.props.contacts}/>
<div
className={"h-100 w-100 " + rightPanelClasses}
className={"h-100 w-100 flex " + rightPanelClasses}
style={{
flexGrow: 1
}}>

5
pkg/interface/contacts/src/js/lib/util.js
View File

@ -61,3 +61,8 @@ export function dateToDa(d, mil) {
export function deSig(ship) {
return ship.replace('~', '');
}
export function uxToHex(ux) {
let value = ux.substr(2).replace('.', '').padStart(6, '0');
return value;
}