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

removing chat cruft, adding header + libs

Browse Source
This commit is contained in:
Matilde Park 2019-11-22 23:08:41 -05:00 committed by Logan Allen
parent 1299e26940
commit 8de846c60d
10 changed files with 175 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@ -32308,6 +32308,7 @@
global$2[key$1] = "esm";
}
}
//# sourceMappingURL=react-router.js.map
/**
* The public API for a <Router> that uses HTML5 history.
@ -32607,6 +32608,7 @@
style: propTypes.object
});
}
//# sourceMappingURL=react-router-dom.js.map
var classnames = createCommonjsModule(function (module) {
/*!
@ -58757,19 +58759,69 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
let subscription = new Subscription();
const _jsxFileName = "/Users/matilde/git/urbit/pkg/interface/contacts/src/js/components/skeleton.js";
const _jsxFileName = "/Users/matilde/git/urbit/pkg/interface/contacts/src/js/components/lib/icons/icon-home.js";
class IconHome extends react_1 {
render() {
return (
react.createElement('img', { src: "/~launch/img/Home.png", width: 32, height: 32, __self: this, __source: {fileName: _jsxFileName, lineNumber: 6}} )
);
}
}
const _jsxFileName$1 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/js/components/lib/icons/icon-spinner.js";
class IconSpinner extends react_1 {
render() {
return (
react.createElement('div', { className: "spinner-pending", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 6}})
);
}
}
const _jsxFileName$2 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/js/components/lib/header-bar.js";
class HeaderBar extends react_1 {
render() {
let spin = (this.props.spinner)
? react.createElement('div', { className: "absolute",
style: {width: 16, height: 16, top: 16, left: 55}, __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 9}}
, react.createElement(IconSpinner, {__self: this, __source: {fileName: _jsxFileName$2, lineNumber: 11}})
)
: null;
return (
react.createElement('div', { className: "bg-black w-100 justify-between" ,
style: { height: 48, padding: 8}, __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 16}}
, react.createElement('a', { className: "db",
style: { background: '#1A1A1A',
borderRadius: 16,
width: 32,
height: 32,
top: 8 },
href: "/", __self: this, __source: {fileName: _jsxFileName$2, lineNumber: 18}}
, react.createElement(IconHome, {__self: this, __source: {fileName: _jsxFileName$2, lineNumber: 25}} )
)
, spin
)
);
}
}
const _jsxFileName$3 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/js/components/skeleton.js";
class Skeleton extends react_1 {
render() {
return (
react.createElement('div', { className: "h-100 w-100 absolute" , __self: this, __source: {fileName: _jsxFileName, lineNumber: 8}}
, react.createElement('div', { className: "cf w-100 absolute flex" ,
react.createElement('div', { className: "h-100 w-100" , __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 10}}
, react.createElement(HeaderBar, { spinner: this.props.spinner, __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 11}} )
, react.createElement('div', {
className: "cf w-100 flex" ,
style: {
height: 'calc(100% - 48px)'
}, __self: this, __source: {fileName: _jsxFileName, lineNumber: 9}}
, react.createElement('div', { className: "h-100 w-100" , style: {
flexGrow: 1,
}, __self: this, __source: {fileName: _jsxFileName, lineNumber: 13}}
height: "calc(100% - 48px)"
}, __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 12}}
, react.createElement('div', {
className: "h-100 w-100" ,
style: {
flexGrow: 1
}, __self: this, __source: {fileName: _jsxFileName$3, lineNumber: 17}}
, this.props.children
)
)
@ -58778,7 +58830,7 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
}
}
const _jsxFileName$1 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/js/components/root.js";
const _jsxFileName$4 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/js/components/root.js";
class Root extends react_1 {
constructor(props) {
@ -58798,27 +58850,24 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
render() {
return (
react.createElement(BrowserRouter, {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 31}}
, react.createElement('div', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 32}}
react.createElement(BrowserRouter, {__self: this, __source: {fileName: _jsxFileName$4, lineNumber: 31}}
, react.createElement('div', {__self: this, __source: {fileName: _jsxFileName$4, lineNumber: 32}}
, react.createElement(Route, { exact: true, path: "/~contacts",
render: (props) => {
return (
react.createElement(Skeleton, {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 36}}
, react.createElement('div', { className: "h-100 w-100 overflow-x-hidden flex flex-column" , __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 37}}
, react.createElement('div', { className: "pl3 pr3 pt2 pb3" , __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 38}}
, react.createElement('h2', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 39}}, "Home")
)
react.createElement(Skeleton, { display: "groups", __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 36}}
, react.createElement('div', { className: "h-100 w-100 overflow-x-hidden flex flex-column" , __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 37}}
)
)
);
}, __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 33}} )
}, __self: this, __source: {fileName: _jsxFileName$4, lineNumber: 33}} )
)
)
)
}
}
const _jsxFileName$2 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/index.js";
const _jsxFileName$5 = "/Users/matilde/git/urbit/pkg/interface/contacts/src/index.js";
api.setAuthTokens({
ship: window.ship
});
@ -58826,7 +58875,7 @@ lyrtesmudnytbyrsenwegfyrmurtelreptegpecnelnevfes\
subscription.start();
reactDom.render((
react.createElement(Root, {__self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 15}} )
react.createElement(Root, {__self: undefined, __source: {fileName: _jsxFileName$5, lineNumber: 15}} )
), document.querySelectorAll("#root")[0]);
}));

102
pkg/interface/contacts/src/css/custom.css
View File

@ -15,101 +15,7 @@ textarea, input, button {
}
a {
color: #000 !important;
font-weight: 400 !important;
}
h2 {
font-size: 32px;
line-height: 48px;
font-weight: bold;
}
.body-regular {
font-size: 16px;
line-height: 24px;
font-weight: 600;
}
.body-large {
font-size: 20px;
line-height: 24px;
}
.body-medium {
font-size: 16px;
line-height: 19px;
}
.body-small {
font-size: 12px;
line-height: 16px;
color: #7f7f7f;
}
.label-regular {
font-size: 14px;
line-height: 24px;
}
.label-small {
font-size: 14px;
line-height: 24px;
}
.label-small-mono {
font-size: 12px;
line-height: 24px;
font-family: "Source Code Pro", monospace;
}
.body-regular-400 {
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
.plus-font {
font-size: 32px;
line-height: 24px;
}
.btn-font {
font-size: 14px;
line-height: 16px;
font-weight: 600 !important;
}
.fw-normal {
font-weight: 400;
}
.fw-bold {
font-weight: bold;
}
.fs-italic {
font-style: italic;
}
.td-underline {
text-decoration: underline;
}
.bg-v-light-gray {
background-color: #f9f9f9;
}
.nice-green {
color: #2AA779 !important;
}
.bg-nice-green {
background: #2ED196;
}
.nice-red {
color: #EE5432 !important;
color: #000;
}
.inter {
@ -140,8 +46,4 @@ h2 {
.mono {
font-family: "Source Code Pro", monospace;
}
.label-small-mono.list-ship {
line-height: 29px;
}
}

32
pkg/interface/contacts/src/js/components/lib/header-bar.js Normal file
View File

@ -0,0 +1,32 @@
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';
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;
return (
<div className="bg-black w-100 justify-between"
style={{ height: 48, padding: 8}}>
<a className="db"
style={{ background: '#1A1A1A',
borderRadius: 16,
width: 32,
height: 32,
top: 8 }}
href='/'>
<IconHome />
</a>
{spin}
</div>
);
}
}

9
pkg/interface/contacts/src/js/components/lib/icons/icon-home.js Normal file
View File

@ -0,0 +1,9 @@
import React, { Component } from 'react';
export class IconHome extends Component {
render() {
return (
<img src="/~launch/img/Home.png" width={32} height={32} />
);
}
}

9
pkg/interface/contacts/src/js/components/lib/icons/icon-send.js Normal file
View File

@ -0,0 +1,9 @@
import React, { Component } from 'react';
export class IconSend extends Component {
render() {
return (
<img src="/~chat/img/Send.png" width={40} height={40} />
);
}
}

9
pkg/interface/contacts/src/js/components/lib/icons/icon-spinner.js Normal file
View File

@ -0,0 +1,9 @@
import React, { Component } from 'react';
export class IconSpinner extends Component {
render() {
return (
<div className="spinner-pending"></div>
);
}
}

32
pkg/interface/contacts/src/js/components/lib/icons/sigil.js Normal file
View File

@ -0,0 +1,32 @@
import React, { Component } from 'react';
import { sigil, reactRenderer } from 'urbit-sigil-js';
export class Sigil extends Component {
render() {
const { props } = this;
if (props.ship.length > 14) {
return (
<div className="bg-black" style={{width: props.size, height: props.size}}>
</div>
);
} else {
return (
<div
className="bg-black"
style={{ flexBasis: 32 }}>
{
sigil({
patp: props.ship,
renderer: reactRenderer,
size: props.size,
colors: ['black', 'white'],
})
}
</div>
);
}
}
}

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

@ -33,11 +33,8 @@ export class Root extends Component {
<Route exact path="/~contacts"
render={ (props) => {
return (
<Skeleton>
<Skeleton display="groups">
<div className="h-100 w-100 overflow-x-hidden flex flex-column">
<div className="pl3 pr3 pt2 pb3">
<h2>Home</h2>
</div>
</div>
</Skeleton>
);

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

@ -1,18 +1,24 @@
import React, { Component } from 'react';
import classnames from 'classnames';
import { HeaderBar } from './lib/header-bar';
export class Skeleton extends Component {
render() {
return (
<div className="h-100 w-100 absolute">
<div className="cf w-100 absolute flex"
<div className="h-100 w-100">
<HeaderBar spinner={this.props.spinner} />
<div
className="cf w-100 flex"
style={{
height: 'calc(100% - 48px)'
}}>
<div className="h-100 w-100" style={{
flexGrow: 1,
height: "calc(100% - 48px)"
}}>
<div
className="h-100 w-100"
style={{
flexGrow: 1
}}>
{this.props.children}
</div>
</div>