mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-12-15 01:52:42 +03:00
Merge pull request #2292 from urbit/mp/os1/contacts/notes-design-updates
contacts: resizable "notes" field, sidebar scroll tweak, os1 nav buttons
This commit is contained in:
commit
9410b3ad1e
File diff suppressed because one or more lines are too long
@ -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}>
|
||||
{(
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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({
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
}} />
|
||||
|
Loading…
Reference in New Issue
Block a user