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

Merge pull request #2292 from urbit/mp/os1/contacts/notes-design-updates

Browse Source 
contacts: resizable "notes" field, sidebar scroll tweak, os1 nav buttons
This commit is contained in:
Logan 2020-02-14 10:58:38 -08:00 committed by GitHub
commit 9410b3ad1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

9
pkg/interface/contacts/src/js/components/lib/contact-card.js
View File

@ -344,7 +344,7 @@ export class ContactCard extends Component {
{avatar}
{sigilColor}
{removeImage}
<div className="w-100 pt8 lh-copy tl">
<div className="w-100 pt8 pb8 lh-copy tl">
<p className="f9 gray2">Ship Name</p>
<p className="f8 mono">~{props.ship}</p>
<p className="f9 gray2 mt3">Ship Type</p>
@ -384,6 +384,7 @@ export class ContactCard extends Component {
onChange={this.notesToSet}
onDeleteClick={() => this.setField("removeNotes")}
onSaveClick={() => this.setField("notes")}
resizable={true}
showButtons={!props.share} />
</div>
</div>
@ -503,15 +504,15 @@ export class ContactCard extends Component {
this.editToggle();
}
}}
className={`ml3 mt2 mb2 f9 pa1 ba br2 pointer b--black ` + ourOpt}>
className={`pl4 mt4 mb4 f9 pointer b--black ` + ourOpt}>
{editInfoText}
</button>
<button className={`ml3 mt2 mb2 f9 pa1 ba br2 b--black ` + localOpt}>
<button className={`pl4 mt4 mb4 f9 b--black ` + localOpt}>
Share Contact Info
</button>
<button
className={
`ml3 mt2 mb2 f9 pa1 ba red2 br2 b--red2 pointer ` + adminOpt
`pl4 mt4 mb4 f9 red2 b--red2 pointer ` + adminOpt
}
onClick={this.removeFromGroup}>
{(

19
pkg/interface/contacts/src/js/components/lib/contact-sidebar.js
View File

@ -66,23 +66,20 @@ export class ContactSidebar extends Component {
<div className="pt3 pb6 pl3 f8 db dn-m dn-l dn-xl">
<Link to="/~contacts/">{"⟵ All Groups"}</Link>
</div>
<div className="overflow-y-scroll h-100">
<div className="overflow-auto h-100">
<Link
to={"/~contacts/add" + props.path}
className={((this.props.path.includes(window.ship))
? "dib"
: "dn")}>
<p className="f9 pl4 pt4 gray2 bn">Invite</p>
</Link>
{shareSheet}
<h2 className="f9 pt4 pr4 pb2 pl4 gray2 c-default">Members</h2>
{contactItems}
{groupItems}
</div>
<div
className={"bg-white z2 bt b--gray4 absolute w-100 " +
((this.props.path.includes(window.ship))
? "dt"
: "dn")}
style={{ bottom: 0, height: 48 }}>
<Link to={"/~contacts/add" + props.path} className="dtc v-mid">
<p className="f9 pl4 black bn">Add New Member to Group</p>
</Link>
</div>
</div>
);
}
}

10
pkg/interface/contacts/src/js/components/lib/edit-element.js
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react'
import { Route, Link } from 'react-router-dom';
import { Route, Link } from 'react-router-dom';
export class EditElement extends Component {
@ -19,14 +19,18 @@ export class EditElement extends Component {
state.currentValue !== ""
);
let inputStyles = (props.resizable)
? { resize: "vertical", height: 40, paddingTop: 10 }
: { resize: "none", height: 40, paddingTop: 10 }
return (
<div>
<div className="pb4">
<p className="f9 gray2">{props.title}</p>
<div className="w-100 flex">
<textarea
ref={props.title}
className="w-100 ba pl3 b--gray4"
style={{ resize: "none", height: 40, paddingTop: 10 }}
style={ inputStyles }
onChange={(e) => {
let val = (' ' + e.target.value).slice(1);
this.setState({

16
pkg/interface/contacts/src/js/components/lib/group-sidebar.js
View File

@ -89,20 +89,16 @@ export class GroupSidebar extends Component {
relative overflow-hidden ` + activeClasses}>
{/*TODO Add invite items */}
<a className="db dn-m dn-l dn-xl f8 pb6 pl3" href="/">⟵ Landscape</a>
<div className="overflow-y-scroll h-100">
<h2 className="f9 pt4 pr4 pb2 pl4 gray2 c-default">Your Root Identity</h2>
<div className="overflow-auto pb8 h-100">
<Link to="/~contacts/new" className="dib">
<p className="f9 pt4 pl4 green2 bn">Create Group</p>
</Link>
<h2 className="f9 pt6 pr4 pb2 pl4 gray2 c-default">Root Identity</h2>
{rootIdentity}
{inviteItems}
<h2 className="f9 pt3 pr4 pb2 pl4 gray2 c-default">Your Groups</h2>
<h2 className="f9 pt3 pr4 pb2 pl4 gray2 c-default">Groups</h2>
{groupItems}
</div>
<div
className="bg-white z2 dt bt b--gray4 absolute w-100"
style={{ bottom: 0, height: 48 }}>
<Link to="/~contacts/new" className="dtc v-mid">
<p className="f9 pl4 black bn">Create New Group</p>
</Link>
</div>
</div>
);
}

6
pkg/interface/contacts/src/js/components/lib/share-sheet.js
View File

@ -13,7 +13,7 @@ export class ShareSheet extends Component {
return (
<div>
<p className="pt4 pb2 pl3 pr3 f8 gray2 f9">Share Your Profile</p>
<p className="pt4 pb2 pl4 pr4 f8 gray2 f9">Share Your Profile</p>
<ContactItem
key={props.ship}
ship={props.ship}
@ -22,11 +22,11 @@ export class ShareSheet extends Component {
path={props.path}
selected={props.selected}
share={true} />
<p className="pt2 pb3 pl3 pr3 f9">
<p className="pt2 pb3 pl4 pr4 f9">
Your personal information is hidden to others in this group
by default.
</p>
<p className="pl3 pr3 f9">
<p className="pl4 pr4 f9">
Share whenever you are ready, or edit its contents for this group.
</p>
</div>

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

@ -52,7 +52,13 @@ export class Root extends Component {
contacts={contacts}
groups={groups}
invites={invites}>
<div className="h-100 w-100 overflow-x-hidden bg-white dn db-ns"></div>
<div className="h-100 w-100 overflow-x-hidden bg-white dn db-ns">
<div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
<p className="f9 pt3 gray2 w-100 h-100 dtc v-mid tc">
Select a group to begin.
</p>
</div>
</div>
</Skeleton>
);
}} />