mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-12-14 17:41:33 +03:00
Merge pull request #2216 from urbit/mp/os1/contacts-chrome
contacts: add os1 chrome
This commit is contained in:
Logan
GitHub
commit
b9ebb97ad1
File diff suppressed because one or more lines are too long
BIN
pkg/arvo/app/contacts/img/Home.png
Normal file
BIN
pkg/arvo/app/contacts/img/Home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 679 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
41
pkg/interface/contacts/package-lock.json
generated
41
pkg/interface/contacts/package-lock.json
generated
@ -2148,8 +2148,7 @@
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
|
||||
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@ -2173,15 +2172,13 @@
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -2198,22 +2195,19 @@
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
|
||||
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
|
||||
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -2344,8 +2338,7 @@
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
|
||||
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -2359,7 +2352,6 @@
|
||||
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
|
||||
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -2376,7 +2368,6 @@
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
|
||||
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -2385,15 +2376,13 @@
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
|
||||
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
|
||||
"integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@ -2414,7 +2403,6 @@
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
|
||||
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@ -2503,8 +2491,7 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
|
||||
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -2518,7 +2505,6 @@
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -2614,8 +2600,7 @@
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@ -2657,7 +2642,6 @@
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
|
||||
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@ -2679,7 +2663,6 @@
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
|
||||
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@ -2728,15 +2711,13 @@
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
|
||||
"integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -84,7 +84,14 @@ a {
|
||||
.flex-basis-30-ns {
|
||||
flex-basis: 30vw;
|
||||
}
|
||||
.h-100-m-48-ns {
|
||||
height: calc(100% - 48px);
|
||||
.h-100-m-40-ns {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
/* dark */
|
||||
@media all and (prefers-color-scheme: dark) {
|
||||
.invert-d {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
@ -100,8 +100,8 @@ export class ContactCard extends Component {
|
||||
setField(field) {
|
||||
const { props, state } = this;
|
||||
let ship = "~" + props.ship;
|
||||
let emailTest = new RegExp(''
|
||||
+ /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*/.source
|
||||
let emailTest = new RegExp(''
|
||||
+ /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*/.source
|
||||
+ /@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.source
|
||||
);
|
||||
|
||||
@ -297,10 +297,10 @@ export class ContactCard extends Component {
|
||||
currentColor = uxToHex(currentColor);
|
||||
|
||||
let sigilColor = "";
|
||||
let hasAvatar =
|
||||
let hasAvatar =
|
||||
'avatar' in props.contact && props.contact.avatar !== "TODO";
|
||||
|
||||
if (!hasAvatar) {
|
||||
if (!hasAvatar) {
|
||||
sigilColor = (
|
||||
<div className="tl mt4 mb4 w-auto ml-auto mr-auto"
|
||||
style={{ width: "fit-content" }}>
|
||||
@ -330,8 +330,8 @@ export class ContactCard extends Component {
|
||||
</div>
|
||||
) : "";
|
||||
|
||||
let avatar = (hasAvatar)
|
||||
? <img className="dib h-auto" width={128} src={props.contact.avatar} />
|
||||
let avatar = (hasAvatar)
|
||||
? <img className="dib h-auto" width={128} src={props.contact.avatar} />
|
||||
: <Sigil
|
||||
ship={props.ship}
|
||||
size={128}
|
||||
@ -339,7 +339,7 @@ export class ContactCard extends Component {
|
||||
key={"avatar" + currentColor} />;
|
||||
|
||||
return (
|
||||
<div className="w-100 mt8 flex justify-center pa4 pt8 pt0-l pa0-xl pt4-xl">
|
||||
<div className="w-100 mt8 flex justify-center pa4 pt8 pt0-l pa0-xl pt4-xl pb8">
|
||||
<div className="w-100 mw6 tc">
|
||||
{avatar}
|
||||
{sigilColor}
|
||||
@ -398,7 +398,7 @@ export class ContactCard extends Component {
|
||||
let currentColor = props.contact.color ? props.contact.color : "0x0";
|
||||
let hexColor = uxToHex(currentColor);
|
||||
|
||||
let avatar =
|
||||
let avatar =
|
||||
('avatar' in props.contact && props.contact.avatar !== "TODO") ?
|
||||
<img className="dib h-auto" width={128} src={props.contact.avatar} /> :
|
||||
<Sigil
|
||||
@ -447,7 +447,7 @@ export class ContactCard extends Component {
|
||||
<div>
|
||||
<p className="f9 mt6 gray2">website</p>
|
||||
<a target="_blank"
|
||||
className="bb b--black f8"
|
||||
className="bb b--black f8"
|
||||
href={websiteHref}>
|
||||
{props.contact.website}
|
||||
</a>
|
||||
@ -489,12 +489,12 @@ export class ContactCard extends Component {
|
||||
|
||||
//TODO "Share card" if it's /me -> sends to /~/default of recipient
|
||||
return (
|
||||
<div className="h-100 w-100 overflow-x-hidden">
|
||||
<div className="w-100 bg-white fixed bb b--gray4">
|
||||
<div className="w-100 h-100 overflow-hidden">
|
||||
<div className="w-100 bg-white bb b--gray4">
|
||||
<div className="w-100 h2 dn-m dn-l dn-xl inter pb6 pl3 pt3 f8">
|
||||
<Link to="/~contacts/">{"⟵"}</Link>
|
||||
</div>
|
||||
<button
|
||||
<button
|
||||
onClick={() => {
|
||||
if (props.share) {
|
||||
this.shareWithGroup();
|
||||
@ -505,17 +505,18 @@ export class ContactCard extends Component {
|
||||
className={`ml3 mt2 mb2 f9 pa1 ba br2 pointer b--black ` + ourOpt}>
|
||||
{editInfoText}
|
||||
</button>
|
||||
<button
|
||||
className={`ml3 mt2 mb2 f9 pa1 ba br2 b--black ` + localOpt}>
|
||||
<button className={`ml3 mt2 mb2 f9 pa1 ba br2 b--black ` + localOpt}>
|
||||
Share Contact Info
|
||||
</button>
|
||||
<button
|
||||
className={`ml3 mt2 mb2 f9 pa1 ba red2 br2 b--red2 pointer ` + adminOpt}
|
||||
className={
|
||||
`ml3 mt2 mb2 f9 pa1 ba red2 br2 b--red2 pointer ` + adminOpt
|
||||
}
|
||||
onClick={this.removeFromGroup}>
|
||||
Remove from Group
|
||||
</button>
|
||||
</div>
|
||||
{card}
|
||||
<div className="h-100 w-100 overflow-x-hidden pb8">{card}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -14,8 +14,8 @@ export class ContactSidebar extends Component {
|
||||
|
||||
let me = (window.ship in props.defaultContacts) ?
|
||||
props.defaultContacts[window.ship] : { color: '0x0', nickname: null};
|
||||
|
||||
let shareSheet =
|
||||
|
||||
let shareSheet =
|
||||
!(window.ship in props.contacts) ?
|
||||
( <ShareSheet
|
||||
ship={window.ship}
|
||||
@ -27,7 +27,7 @@ export class ContactSidebar extends Component {
|
||||
) : (<div></div>);
|
||||
group.delete(window.ship);
|
||||
|
||||
let contactItems =
|
||||
let contactItems =
|
||||
Object.keys(props.contacts)
|
||||
.map((contact) => {
|
||||
group.delete(contact);
|
||||
@ -60,8 +60,8 @@ export class ContactSidebar extends Component {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={`bn br-m br-l br-xl b--black lh-copy h-100 flex-shrink-0
|
||||
flex-basis-100-s flex-basis-30-ns mw5-m mw5-l mw5-xl relative
|
||||
<div className={`bn br-m br-l br-xl b--gray3 lh-copy h-100 flex-shrink-0
|
||||
flex-basis-100-s flex-basis-30-ns mw5-m mw5-l mw5-xl relative
|
||||
overflow-hidden ` + responsiveClasses}>
|
||||
<div className="pt3 pb6 pl3 f8 db dn-m dn-l dn-xl">
|
||||
<Link to="/~contacts/">{"⟵ All Groups"}</Link>
|
||||
|
||||
@ -22,7 +22,7 @@ export class GroupSidebar extends Component {
|
||||
let color = uxToHex(ourCard.color);
|
||||
let selectedClass = (this.props.selected === "me") ? "bg-gray4" : "";
|
||||
return (
|
||||
<Link
|
||||
<Link
|
||||
key={1}
|
||||
to={"/~contacts/me"}>
|
||||
<div
|
||||
@ -58,7 +58,7 @@ export class GroupSidebar extends Component {
|
||||
Object.keys(props.contacts)
|
||||
.filter((path) => {
|
||||
return (
|
||||
(!path.startsWith("/~/") || path === "/~/default") &&
|
||||
(!path.startsWith("/~/") || path === "/~/default") &&
|
||||
(path in props.groups)
|
||||
);
|
||||
})
|
||||
@ -84,9 +84,9 @@ export class GroupSidebar extends Component {
|
||||
let activeClasses = (this.props.activeDrawer === "groups") ? "" : "dn-s";
|
||||
|
||||
return (
|
||||
<div className={`bn br-m br-l br-xl b--black lh-copy h-100 flex-basis-100-s
|
||||
<div className={`bn br-m br-l br-xl b--gray3 lh-copy h-100 flex-basis-100-s
|
||||
flex-basis-30-ns flex-shrink-0 mw5-m mw5-l mw5-xl pt3 pt0-m pt0-l pt0-xl
|
||||
relative ` + activeClasses}>
|
||||
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">
|
||||
|
||||
@ -1,32 +1,55 @@
|
||||
import React, { Component } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { IconHome } from '/components/lib/icons/icon-home';
|
||||
import { IconSpinner } from '/components/lib/icons/icon-spinner';
|
||||
import React, { Component } from "react";
|
||||
import classnames from "classnames";
|
||||
import { IconHome } from "/components/lib/icons/icon-home";
|
||||
import { IconSpinner } from "/components/lib/icons/icon-spinner";
|
||||
import { Sigil } from "/components/lib/icons/sigil";
|
||||
|
||||
export class HeaderBar extends Component {
|
||||
render() {
|
||||
let spin = (this.props.spinner)
|
||||
? <div className="absolute"
|
||||
style={{width: 16, height: 16, top: 16, left: 55}}>
|
||||
<IconSpinner/>
|
||||
</div>
|
||||
: null;
|
||||
// let spin = (this.props.spinner)
|
||||
// ? <div className="absolute"
|
||||
// style={{width: 16, height: 16, top: 16, left: 55}}>
|
||||
// <IconSpinner/>
|
||||
// </div>
|
||||
// : null;
|
||||
|
||||
let popout = window.location.href.includes("popout/")
|
||||
? "dn"
|
||||
: "dn db-m db-l db-xl";
|
||||
|
||||
let title = document.title === "Home" ? "" : document.title;
|
||||
|
||||
return (
|
||||
<div className="bg-black w-100 dn db-m db-l db-xl justify-between"
|
||||
style={{ height: 48, padding: 8}}>
|
||||
<a className="db"
|
||||
style={{ background: '#1A1A1A',
|
||||
borderRadius: 16,
|
||||
width: 32,
|
||||
height: 32,
|
||||
top: 8 }}
|
||||
href='/'>
|
||||
<div
|
||||
className={
|
||||
"bg-white bg-gray0-d w-100 justify-between relative tc pt3 " + popout
|
||||
}
|
||||
style={{ height: 40 }}>
|
||||
<a
|
||||
className="dib gray2 f9 inter absolute left-0"
|
||||
href="/"
|
||||
style={{ top: 14 }}>
|
||||
<IconHome />
|
||||
<span
|
||||
className="ml2 white-d v-top lh-title"
|
||||
style={{ paddingTop: 3 }}>
|
||||
Home
|
||||
</span>
|
||||
</a>
|
||||
{spin}
|
||||
<span
|
||||
className="f9 white-d inter dib"
|
||||
style={{
|
||||
verticalAlign: "text-top",
|
||||
paddingTop: 3
|
||||
}}>
|
||||
{title}
|
||||
</span>
|
||||
{/* {spin} */}
|
||||
<div className="absolute right-0 lh-copy" style={{ top: 12 }}>
|
||||
<Sigil ship={"~" + window.ship} size={16} color={"#000000"} />
|
||||
<span className="mono white-d f9 ml2 v-top">{"~" + window.ship}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component } from "react";
|
||||
|
||||
export class IconHome extends Component {
|
||||
render() {
|
||||
return (
|
||||
<img src="/~launch/img/Home.png" width={32} height={32} />
|
||||
<img
|
||||
className="invert-d"
|
||||
src="/~contacts/img/Home.png"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -52,11 +52,11 @@ export class Root extends Component {
|
||||
contacts={contacts}
|
||||
groups={groups}
|
||||
invites={invites}>
|
||||
<div className="h-100 w-100 overflow-x-hidden bg-gray0 dn db-ns"></div>
|
||||
<div className="h-100 w-100 overflow-x-hidden bg-white dn db-ns"></div>
|
||||
</Skeleton>
|
||||
);
|
||||
}} />
|
||||
<Route exact path="/~contacts/new"
|
||||
<Route exact path="/~contacts/new"
|
||||
render={ (props) => {
|
||||
return (
|
||||
<Skeleton
|
||||
@ -100,7 +100,7 @@ export class Root extends Component {
|
||||
group={group}
|
||||
activeDrawer="contacts"
|
||||
path={groupPath} />
|
||||
<div className="h-100 w-100 overflow-x-hidden bg-gray0 dn db-ns"></div>
|
||||
<div className="h-100 w-100 overflow-x-hidden bg-white dn db-ns"></div>
|
||||
</Skeleton>
|
||||
);
|
||||
}}
|
||||
@ -128,7 +128,7 @@ export class Root extends Component {
|
||||
group={group}
|
||||
activeDrawer="rightPanel"
|
||||
path={groupPath} />
|
||||
<AddScreen
|
||||
<AddScreen
|
||||
api={api}
|
||||
path={groupPath}
|
||||
setSpinner={this.setSpinner}
|
||||
@ -184,7 +184,7 @@ export class Root extends Component {
|
||||
render={ (props) => {
|
||||
let groupPath =
|
||||
`/${props.match.params.ship}/${props.match.params.group}`;
|
||||
let shipPath =
|
||||
let shipPath =
|
||||
`${groupPath}/${props.match.params.contact}`;
|
||||
|
||||
let groupContacts = contacts[groupPath] || {};
|
||||
@ -193,7 +193,7 @@ export class Root extends Component {
|
||||
groupContacts[props.match.params.contact] : {};
|
||||
let group = groups[groupPath] || new Set([]);
|
||||
|
||||
let rootIdentity =
|
||||
let rootIdentity =
|
||||
props.match.params.contact === window.ship ?
|
||||
defaultContacts[window.ship] : null;
|
||||
|
||||
|
||||
@ -11,11 +11,11 @@ export class Skeleton extends Component {
|
||||
props.activeDrawer === "groups" ? "dn flex-m flex-l flex-xl" : "flex";
|
||||
|
||||
return (
|
||||
<div className="h-100 w-100">
|
||||
<div className="h-100 w-100 ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl">
|
||||
<HeaderBar spinner={props.spinner} />
|
||||
<div className="cf w-100 h-100 h-100-m-48-ns flex">
|
||||
<div className="cf w-100 h-100 h-100-m-40-ns flex ba-m ba-l ba-xl b--gray2 br1">
|
||||
<GroupSidebar
|
||||
contacts={props.contacts}
|
||||
contacts={props.contacts}
|
||||
groups={props.groups}
|
||||
invites={props.invites}
|
||||
activeDrawer={props.activeDrawer}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user