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

Merge pull request #2205 from urbit/mp/os1/chat-chrome

Browse Source 
chat: os1 chrome and styling updates
This commit is contained in:
Logan 2020-01-29 16:46:11 -08:00 committed by GitHub
commit 8055ff5472
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 176 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

BIN
pkg/arvo/app/chat/img/ChatSwitcherClosed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 866 B

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
pkg/arvo/app/chat/img/ChatSwitcherLink.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 861 B

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
pkg/arvo/app/chat/img/Home.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 255 B

After

Width:  |  Height:  |  Size: 679 B

BIN
pkg/arvo/app/chat/img/popout.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 854 B

After

Width:  |  Height:  |  Size: 1.5 KiB

2
pkg/arvo/app/chat/index.html
View File

@ -22,7 +22,7 @@
</head> </head>
<body> <body>
<div id="root" /> <div id="root"/>
<script src="/~/channel/channel.js"></script> <script src="/~/channel/channel.js"></script>
<script src="/~modulo/session.js"></script> <script src="/~modulo/session.js"></script>
<script src="/~chat/js/index.js"></script> <script src="/~chat/js/index.js"></script>

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

File diff suppressed because one or more lines are too long

2
pkg/arvo/app/chat/js/tile.js
View File

File diff suppressed because one or more lines are too long

37
pkg/interface/chat/src/css/custom.css
View File

@ -3,6 +3,11 @@
-webkit-touch-callout: none; -webkit-touch-callout: none;
} }
html, body {
height: 100%;
width: 100%;
}
p, h1, h2, h3, h4, h5, h6, a, input, textarea, button { p, h1, h2, h3, h4, h5, h6, a, input, textarea, button {
margin-block-end: unset; margin-block-end: unset;
margin-block-start: unset; margin-block-start: unset;
@ -123,8 +128,8 @@ h2 {
.flex-basis-full-s { .flex-basis-full-s {
flex-basis: 100%; flex-basis: 100%;
} }
.h-100-minus-48-s { .h-100-minus-40-s {
height: calc(100% - 48px); height: calc(100% - 40px);
} }
.h-100-minus-96-s { .h-100-minus-96-s {
height: calc(100% - 96px); height: calc(100% - 96px);
@ -138,8 +143,8 @@ h2 {
.flex-basis-300-m { .flex-basis-300-m {
flex-basis: 300px; flex-basis: 300px;
} }
.h-100-minus-48-m { .h-100-minus-40-m {
height: calc(100% - 48px); height: calc(100% - 40px);
} }
.embed-container { .embed-container {
padding-bottom: 56.25%; padding-bottom: 56.25%;
@ -150,8 +155,8 @@ h2 {
.flex-basis-300-l { .flex-basis-300-l {
flex-basis: 300px; flex-basis: 300px;
} }
.h-100-minus-48-l { .h-100-minus-40-l {
height: calc(100% - 48px); height: calc(100% - 40px);
} }
.embed-container { .embed-container {
padding-bottom: 37.5%; padding-bottom: 37.5%;
@ -162,8 +167,8 @@ h2 {
.flex-basis-300-xl { .flex-basis-300-xl {
flex-basis: 300px; flex-basis: 300px;
} }
.h-100-minus-48-xl { .h-100-minus-40-xl {
height: calc(100% - 48px); height: calc(100% - 40px);
} }
.embed-container { .embed-container {
padding-bottom: 28.125%; padding-bottom: 28.125%;
@ -173,6 +178,9 @@ h2 {
/* dark */ /* dark */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body {
background-color: #333;
}
.bg-black-d { .bg-black-d {
background-color: black; background-color: black;
} }
@ -194,12 +202,21 @@ h2 {
.bg-gray0-d { .bg-gray0-d {
background-color: #333; background-color: #333;
} }
.bg-gray1-d {
background-color: #4d4d4d;
}
.b--gray0-d { .b--gray0-d {
border-color: #333; border-color: #333;
} }
.b--gray1-d {
border-color: #4d4d4d;
}
.b--gray2-d { .b--gray2-d {
border-color: #7f7f7f; border-color: #7f7f7f;
} }
.b--white-d {
border-color: #fff;
}
.bb-d { .bb-d {
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-style: solid; border-bottom-style: solid;
@ -207,8 +224,8 @@ h2 {
.invert-d { .invert-d {
filter: invert(1); filter: invert(1);
} }
.o-60-d { .o-80-d {
opacity: .6; opacity: .8;
} }
a { a {
color: #fff; color: #fff;

4
pkg/interface/chat/src/js/components/chat.js
View File

@ -230,7 +230,7 @@ export class ChatScreen extends Component {
<Link to="/~chat/">{"⟵ All Chats"}</Link> <Link to="/~chat/">{"⟵ All Chats"}</Link>
</div> </div>
<div <div
className={`pl3 pt2 bb b--gray4 b--gray2-d bg-black-d flex relative overflow-x-scroll className={`pl3 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative overflow-x-scroll
overflow-x-auto-l overflow-x-auto-xl flex-shrink-0`} overflow-x-auto-l overflow-x-auto-xl flex-shrink-0`}
style={{ height: 48 }}> style={{ height: 48 }}>
<SidebarSwitcher <SidebarSwitcher
@ -254,7 +254,7 @@ export class ChatScreen extends Component {
/> />
</div> </div>
<div <div
className="overflow-y-scroll bg-black-d pt3 pb2 flex flex-column-reverse" className="overflow-y-scroll bg-gray0-d pt3 pb2 flex flex-column-reverse"
style={{ height: "100%", resize: "vertical" }} style={{ height: "100%", resize: "vertical" }}
onScroll={this.onScroll}> onScroll={this.onScroll}>
<div <div

4
pkg/interface/chat/src/js/components/join.js
View File

@ -96,7 +96,7 @@ export class JoinScreen extends Component {
return ( return (
<div className={`h-100 w-100 pa3 pt2 overflow-x-hidden flex flex-column <div className={`h-100 w-100 pa3 pt2 overflow-x-hidden flex flex-column
bg-black-d white-d`}> bg-gray0-d white-d`}>
<div <div
className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8"> className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8">
<Link to="/~chat/">{"⟵ All Chats"}</Link> <Link to="/~chat/">{"⟵ All Chats"}</Link>
@ -107,7 +107,7 @@ export class JoinScreen extends Component {
<p className="f9 gray2 mb4">Chat names use lowercase, hyphens, and slashes.</p> <p className="f9 gray2 mb4">Chat names use lowercase, hyphens, and slashes.</p>
<textarea <textarea
ref={ e => { this.textarea = e; } } ref={ e => { this.textarea = e; } }
className="f7 mono ba b--gray3 b--gray2-d bg-black-d white-d pa3 mb2 db" className="f7 mono ba b--gray3 b--gray2-d bg-gray0-d white-d pa3 mb2 db"
placeholder="~zod/chatroom" placeholder="~zod/chatroom"
spellCheck="false" spellCheck="false"
rows={1} rows={1}

6
pkg/interface/chat/src/js/components/lib/chat-input.js
View File

@ -175,7 +175,7 @@ export class ChatInput extends Component {
this.bindShortcuts(); this.bindShortcuts();
return ( return (
<div className="pa3 cf flex black white-d bt b--gray4 b--gray2-d bg-black-d" style={{ flexGrow: 1 }}> <div className="pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-gray0-d" style={{ flexGrow: 1 }}>
<div <div
className="fl" className="fl"
style={{ style={{
@ -185,9 +185,9 @@ export class ChatInput extends Component {
}}> }}>
<Sigil ship={window.ship} size={24} color="#4330FC" /> <Sigil ship={window.ship} size={24} color="#4330FC" />
</div> </div>
<div className="fr h-100 flex bg-black-d" style={{ flexGrow: 1 }}> <div className="fr h-100 flex bg-gray0-d" style={{ flexGrow: 1 }}>
<textarea <textarea
className={"pl3 bn bg-black-d white-d"} className={"pl3 bn bg-gray0-d white-d"}
style={{ flexGrow: 1, height: 28, paddingTop: 6, resize: "none" }} style={{ flexGrow: 1, height: 28, paddingTop: 6, resize: "none" }}
autoCapitalize="none" autoCapitalize="none"
autoFocus={( autoFocus={(

11
pkg/interface/chat/src/js/components/lib/chat-tabbar.js
View File

@ -23,14 +23,11 @@ export class ChatTabBar extends Component {
setColor = 'gray3'; setColor = 'gray3';
} }
(props.location.pathname.includes('/popout')) popout = props.location.pathname.includes("/popout")
? popout = "popout/" ? "popout/" : "";
: popout = "";
let hidePopoutIcon = (this.props.popout) let hidePopoutIcon = (this.props.popout)
? "dn-m dn-l dn-xl" ? "dn-m dn-l dn-xl" : "dib-m dib-l dib-xl";
: "dib-m dib-l dib-xl";
return ( return (
<div className="dib pt2 flex-shrink-0 flex-grow-1"> <div className="dib pt2 flex-shrink-0 flex-grow-1">
@ -55,7 +52,7 @@ export class ChatTabBar extends Component {
<a href={`/~chat/popout/room` + props.station} target="_blank" <a href={`/~chat/popout/room` + props.station} target="_blank"
className="dib fr"> className="dib fr">
<img <img
className={`flex-shrink-0 pr2 dn invert-d ` + hidePopoutIcon} className={`flex-shrink-0 pr3 dn ` + hidePopoutIcon}
src="/~chat/img/popout.png" src="/~chat/img/popout.png"
height="16" height="16"
width="16"/> width="16"/>

66
pkg/interface/chat/src/js/components/lib/header-bar.js
View File

@ -1,36 +1,54 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import classnames from 'classnames'; import classnames from "classnames";
import { IconHome } from '/components/lib/icons/icon-home'; import { IconHome } from "/components/lib/icons/icon-home";
import { IconSpinner } from '/components/lib/icons/icon-spinner'; import { IconSpinner } from "/components/lib/icons/icon-spinner";
import { Sigil } from "/components/lib/icons/sigil";
export class HeaderBar extends Component { export class HeaderBar extends Component {
render() { render() {
let spin = (this.props.spinner) // let spin = (this.props.spinner)
? <div className="absolute" // ? <div className="absolute"
style={{width: 16, height: 16, top: 16, left: 55}}> // style={{width: 16, height: 16, top: 16, left: 55}}>
<IconSpinner/> // <IconSpinner/>
</div> // </div>
: null; // : null;
let popoutHide = (this.props.popout) let popout = window.location.href.includes("popout/")
? "dn dn-m dn-l dn-xl" ? "dn" : "dn db-m db-l db-xl";
: "dn db-m db-l db-xl";
let title = document.title === "Home" ? "" : document.title;
return ( return (
<div className={`bg-black bb-d b--gray2-d w-100 justify-between ` + popoutHide} <div
style={{ height: 48, padding: 8}}> className={
<a className="db" "bg-white bg-gray0-d w-100 justify-between relative tc pt3 " + popout
style={{ background: '#1A1A1A', }
borderRadius: 16, style={{ height: 40 }}>
width: 32, <a
height: 32, className="dib gray2 f9 inter absolute left-0"
top: 8 }} href="/"
href='/'> style={{ top: 14 }}>
<IconHome /> <IconHome />
<span
className="ml2 white-d v-top lh-title"
style={{ paddingTop: 3 }}>
Home
</span>
</a> </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> </div>
); );
} }
} }

10
pkg/interface/chat/src/js/components/lib/icons/icon-home.js
View File

@ -1,9 +1,15 @@
import React, { Component } from 'react'; import React, { Component } from "react";
export class IconHome extends Component { export class IconHome extends Component {
render() { render() {
return ( return (
<img src="/~launch/img/Home.png" width={32} height={32} /> //TODO relocate to ~launch when OS1 is ported
<img
className="invert-d"
src="/~chat/img/Home.png"
width={16}
height={16}
/>
); );
} }
} }

5
pkg/interface/chat/src/js/components/lib/icons/icon-sidebar-switch.js
View File

@ -16,7 +16,7 @@ export class SidebarSwitcher extends Component {
api.sidebarToggle(); api.sidebarToggle();
}}> }}>
<img <img
className={`pr3 dn invert-d ` + popoutSwitcher} className={`pr3 dn ` + popoutSwitcher}
src={ src={
this.props.sidebarShown this.props.sidebarShown
? "/~chat/img/ChatSwitcherLink.png" ? "/~chat/img/ChatSwitcherLink.png"
@ -24,6 +24,9 @@ export class SidebarSwitcher extends Component {
} }
height="16" height="16"
width="16" width="16"
style={{
maxWidth: 16
}}
/> />
</a> </a>
</div> </div>

4
pkg/interface/chat/src/js/components/lib/icons/sigil.js
View File

@ -8,12 +8,12 @@ export class Sigil extends Component {
if (props.ship.length > 14) { if (props.ship.length > 14) {
return ( return (
<div className="bg-black" style={{width: props.size, height: props.size}}> <div className="bg-black dib" style={{width: props.size, height: props.size}}>
</div> </div>
); );
} else { } else {
return ( return (
<div style={{ flexBasis: 32, backgroundColor: props.color }}> <div className="dib" style={{ flexBasis: 32, backgroundColor: props.color }}>
{sigil({ {sigil({
patp: props.ship, patp: props.ship,
renderer: reactRenderer, renderer: reactRenderer,

2
pkg/interface/chat/src/js/components/lib/invite-element.js
View File

@ -96,7 +96,7 @@ export class InviteElement extends Component {
<div> <div>
<textarea <textarea
ref={ e => { this.textarea = e; } } ref={ e => { this.textarea = e; } }
className="f7 mono ba b--gray3 bg-black-d white-d pa3 mb4 db w-100" className="f7 mono ba b--gray3 bg-gray0-d white-d pa3 mb4 db w-100"
style={{ style={{
resize: 'none', resize: 'none',
height: 50 height: 50

12
pkg/interface/chat/src/js/components/lib/message.js
View File

@ -62,7 +62,7 @@ export class Message extends Component {
if (imgMatch) { if (imgMatch) {
contents = ( contents = (
<img <img
className="o-60-d" className="o-80-d"
src={letter.url} src={letter.url}
style={{ style={{
width: "50%", width: "50%",
@ -82,8 +82,7 @@ export class Message extends Component {
contents = ( contents = (
<div className={'embed-container mb2 w-100 w-75-l w-50-xl ' + <div className={'embed-container mb2 w-100 w-75-l w-50-xl ' +
((this.state.unfold === true) ((this.state.unfold === true)
? "db" ? "db" : "dn")}>
: "dn")}>
<iframe <iframe
ref="iframe" ref="iframe"
width="560" width="560"
@ -96,7 +95,7 @@ export class Message extends Component {
return ( return (
<div> <div>
<a href={letter.url} <a href={letter.url}
className="f7 lh-copy v-top bb word-break-all" className="f7 lh-copy v-top bb b--white-d word-break-all"
href={letter.url} href={letter.url}
target="_blank" target="_blank"
rel="noopener noreferrer"> rel="noopener noreferrer">
@ -111,7 +110,7 @@ export class Message extends Component {
) )
} else { } else {
return ( return (
<a className="f7 lh-copy v-top bb b--black word-break-all" <a className="f7 lh-copy v-top bb b--white-d b--black word-break-all"
href={letter.url} href={letter.url}
target="_blank" target="_blank"
rel="noopener noreferrer"> rel="noopener noreferrer">
@ -175,8 +174,7 @@ export class Message extends Component {
size={24} size={24}
color={((props.msg.author === window.ship) color={((props.msg.author === window.ship)
|| (props.msg.author.substr(1) === window.ship)) || (props.msg.author.substr(1) === window.ship))
? "#4330FC" ? "#4330FC" : "#000000"}
: "#000000"}
/> />
</div> </div>
<div <div

4
pkg/interface/chat/src/js/components/lib/sidebar-item.js
View File

@ -58,11 +58,11 @@ export class SidebarItem extends Component {
let description = this.getLetter(props.description); let description = this.getLetter(props.description);
let selectedCss = !!props.selected ? 'bg-gray5 bg-gray0-d gray3-d' : 'bg-white bg-black-d gray3-d pointer'; let selectedCss = !!props.selected ? 'bg-gray5 bg-gray1-d gray3-d' : 'bg-white bg-gray0-d gray3-d pointer';
return ( return (
<div <div
className={"z1 pa3 pt4 pb4 bb b--gray4 b--gray2-d " + selectedCss} className={"z1 pa3 pt4 pb4 bb b--gray4 b--gray1-d " + selectedCss}
onClick={this.onClick.bind(this)}> onClick={this.onClick.bind(this)}>
<div className="w-100 v-mid"> <div className="w-100 v-mid">
<p className={"dib mono f8 " + unreadElem }> <p className={"dib mono f8 " + unreadElem }>

3
pkg/interface/chat/src/js/components/member.js
View File

@ -83,7 +83,8 @@ export class MemberScreen extends Component {
<Link to="/~chat/">{"⟵ All Chats"}</Link> <Link to="/~chat/">{"⟵ All Chats"}</Link>
</div> </div>
<div <div
className="pl3 pt2 bb b--gray4 b--gray2-d bg-black-d flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0" className={`pl3 pt2 bb b--gray4 b--gray2-d bg-gray0-d flex relative
overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0`}
style={{ height: 48 }}> style={{ height: 48 }}>
<SidebarSwitcher <SidebarSwitcher
sidebarShown={this.props.sidebarShown} sidebarShown={this.props.sidebarShown}

8
pkg/interface/chat/src/js/components/new.js
View File

@ -193,7 +193,7 @@ export class NewScreen extends Component {
return ( return (
<div className={`h-100 w-100 w-50-l w-50-xl pa3 pt2 overflow-x-hidden <div className={`h-100 w-100 w-50-l w-50-xl pa3 pt2 overflow-x-hidden
bg-black-d white-d flex flex-column`}> bg-gray0-d white-d flex flex-column`}>
<div className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8"> <div className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8">
<Link to="/~chat/">{"⟵ All Chats"}</Link> <Link to="/~chat/">{"⟵ All Chats"}</Link>
</div> </div>
@ -204,7 +204,7 @@ export class NewScreen extends Component {
Lowercase alphanumeric characters, dashes, and slashes only Lowercase alphanumeric characters, dashes, and slashes only
</p> </p>
<textarea <textarea
className="f7 ba b--gray3 b--gray2-d bg-black-d white-d pa3 db w-100" className="f7 ba b--gray3 b--gray2-d bg-gray0-d white-d pa3 db w-100"
placeholder="secret-chat" placeholder="secret-chat"
rows={1} rows={1}
style={{ style={{
@ -217,7 +217,7 @@ export class NewScreen extends Component {
<div className="dropdown relative"> <div className="dropdown relative">
<select <select
style={{WebkitAppearance: "none"}} style={{WebkitAppearance: "none"}}
className="pa3 f8 bg-white bg-black-d white-d br0 w-100 inter" className="pa3 f8 bg-white bg-gray0-d white-d br0 w-100 inter"
value={this.state.securityValue} value={this.state.securityValue}
onChange={this.securityChange}> onChange={this.securityChange}>
<option value="village">Village</option> <option value="village">Village</option>
@ -233,7 +233,7 @@ export class NewScreen extends Component {
</p> </p>
<textarea <textarea
ref={e => { this.textarea = e; }} ref={e => { this.textarea = e; }}
className="f7 mono ba b--gray3 b--gray2-d bg-black-d white-d pa3 mb4 db w-100" className="f7 mono ba b--gray3 b--gray2-d bg-gray0-d white-d pa3 mb4 db w-100"
placeholder="~zod, ~bus" placeholder="~zod, ~bus"
spellCheck="false" spellCheck="false"
style={{ style={{

2
pkg/interface/chat/src/js/components/root.js
View File

@ -75,7 +75,7 @@ export class Root extends Component {
sidebarShown={state.sidebarShown} sidebarShown={state.sidebarShown}
sidebar={renderChannelSidebar(props)} sidebar={renderChannelSidebar(props)}
> >
<div className="h-100 w-100 overflow-x-hidden flex flex-column bg-gray0"> <div className="h-100 w-100 overflow-x-hidden flex flex-column bg-white bg-gray0-d">
<div className="pl3 pr3 pt2 dt pb3 w-100 h-100"> <div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
<p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc"> <p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc">
Select, create, or join a chat to begin. Select, create, or join a chat to begin.

2
pkg/interface/chat/src/js/components/settings.js
View File

@ -90,7 +90,7 @@ export class SettingsScreen extends Component {
<Link to="/~chat/">{"⟵ All Chats"}</Link> <Link to="/~chat/">{"⟵ All Chats"}</Link>
</div> </div>
<div <div
className="pl3 pt2 bb b--gray4 b--gray2-d bg-black-d flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0" className="pl3 pt2 bb b--gray4 b--gray2-d bg-gray0-d flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
style={{ height: 48 }}> style={{ height: 48 }}>
<SidebarSwitcher <SidebarSwitcher
sidebarShown={this.props.sidebarShown} sidebarShown={this.props.sidebarShown}

29
pkg/interface/chat/src/js/components/sidebar.js
View File

@ -71,23 +71,26 @@ export class Sidebar extends Component {
}); });
return ( return (
<div className={`h-100-minus-96-s h-100 w-100 overflow-x-hidden flex <div
bg-black-d flex-column relative z1`}> className={`h-100-minus-96-s h-100 w-100 overflow-x-hidden flex
bg-gray0-d flex-column relative z1`}>
<div className="w-100 bg-transparent pa4 bb b--gray4 b--gray1-d"
style={{paddingBottom: 13}}>
<a
className="dib f9 pointer green2 gray4-d mr4"
onClick={this.onClickNew.bind(this)}>
New Chat
</a>
<a
className="dib f9 pointer gray4-d"
onClick={this.onClickJoin.bind(this)}>
Join Chat
</a>
</div>
<div className="overflow-y-auto h-100"> <div className="overflow-y-auto h-100">
{sidebarInvites} {sidebarInvites}
{sidebarItems} {sidebarItems}
</div> </div>
<div className="absolute z2 tc w-100 bg-transparent"
style={{ bottom: 10 }}>
<a className="dib f9 pa3 bt bb bl br tc pointer bg-white bg-gray0-d gray4-d b--gray2-d"
onClick={this.onClickNew.bind(this)}>
Create New Chat
</a>
<a className="dib f9 pa3 bt bb br tl pointer bg-white bg-gray0-d gray4-d b--gray2-d"
onClick={this.onClickJoin.bind(this)}>
Join Existing Chat
</a>
</div>
</div> </div>
); );
} }

73
pkg/interface/chat/src/js/components/skeleton.js
View File

@ -1,53 +1,72 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import { HeaderBar } from './lib/header-bar';
import { HeaderBar } from '/components/lib/header-bar.js';
export class Skeleton extends Component { export class Skeleton extends Component {
render() { render() {
// sidebar and chat panel conditional classes
let sidebarHide = (!this.props.sidebarShown || this.props.popout) let sidebarHide = (!this.props.sidebarShown || this.props.popout)
? "dn" ? "dn" : "";
: "";
let sidebarHideOnMobile = this.props.sidebarHideOnMobile let sidebarHideOnMobile = this.props.sidebarHideOnMobile
? "dn-s" ? "dn-s" : "";
: "";
let chatHideOnMobile = this.props.chatHideonMobile let chatHideOnMobile = this.props.chatHideonMobile
? "dn-s" ? "dn-s" : "";
: "";
// mobile-specific navigation classes
let mobileNavClasses = classnames({
"dn": this.props.chatHideOnMobile,
"db dn-m dn-l dn-xl": !this.props.chatHideOnMobile,
"w-100 inter pt4 f8": !this.props.chatHideOnMobile
})
// popout switches out window chrome and borders
let popoutWindow = this.props.popout
? "" : "ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl";
let popoutBorder = this.props.popout
? "" : "ba-m ba-l ba-xl b--gray2 br1 ";
return ( return (
<div className="h-100 w-100 absolute bg-black-d"> // app outer skeleton
<HeaderBar spinner={this.props.spinner} popout={this.props.popout} /> <div className={"absolute h-100 w-100 bg-gray0-d " + popoutWindow}>
<div className={`cf w-100 absolute flex ` + <HeaderBar spinner={this.props.spinner} />
((this.props.chatHideonMobile) {/* app window borders */}
? "h-100 " <div className={
: "h-100-minus-48-s ") + `cf w-100 flex ` +
((this.props.popout) popoutBorder +
? "h-100" (this.props.chatHideonMobile ? "h-100 " : "h-100-minus-40-s ") +
: "h-100-minus-48-m h-100-minus-48-l h-100-minus-48-xl")}> (this.props.popout
<div className={ ? "h-100"
`fl h-100 br b--gray4 b--gray2-d overflow-x-hidden : "h-100-minus-40-m h-100-minus-40-l h-100-minus-40-xl")
}>
{/* sidebar skeleton, hidden on mobile when in chat panel */}
<div
className={
`fl h-100 br b--gray4 b--gray1-d overflow-x-hidden
flex-basis-full-s flex-basis-300-m flex-basis-300-l flex-basis-full-s flex-basis-300-m flex-basis-300-l
flex-basis-300-xl ` + flex-basis-300-xl ` +
sidebarHide + " " + sidebarHide +
" " +
sidebarHideOnMobile sidebarHideOnMobile
}> }>
<div className={ {/* mobile-specific navigation */}
chatHideOnMobile === "" <div className={mobileNavClasses}>
? "dn"
: "db dn-m dn-l dn-xl w-100 inter pt4 f8"
}>
<a className="pl3 pb6" href="/"> <a className="pl3 pb6" href="/">
{"⟵ Landscape"} {"⟵ Landscape"}
</a> </a>
<div className="bb b--gray4 white-d inter f8 pl3 pt6 pb3">All Chats</div> <div className="bb b--gray4 white-d inter f8 pl3 pt6 pb3">
All Chats
</div>
</div> </div>
{/* sidebar component inside the sidebar skeleton */}
{this.props.sidebar} {this.props.sidebar}
</div> </div>
<div className={"h-100 fr " + chatHideOnMobile} {/* right-hand panel for chat, members, settings */}
<div
className={"h-100 fr " + chatHideOnMobile}
style={{ style={{
flexGrow: 1, flexGrow: 1,
width: "calc(100% - 300px)" width: "calc(100% - 300px)"