mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-12-15 10:02:47 +03:00
Merge pull request #2205 from urbit/mp/os1/chat-chrome
chat: os1 chrome and styling updates
This commit is contained in:
Logan
GitHub
commit
8055ff5472
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 866 B After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 861 B After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 255 B After Width: | Height: | Size: 679 B |
Binary file not shown.
|
Before Width: | Height: | Size: 854 B After Width: | Height: | Size: 1.5 KiB |
@ -22,7 +22,7 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" />
|
||||
<div id="root"/>
|
||||
<script src="/~/channel/channel.js"></script>
|
||||
<script src="/~modulo/session.js"></script>
|
||||
<script src="/~chat/js/index.js"></script>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -3,6 +3,11 @@
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6, a, input, textarea, button {
|
||||
margin-block-end: unset;
|
||||
margin-block-start: unset;
|
||||
@ -123,8 +128,8 @@ h2 {
|
||||
.flex-basis-full-s {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.h-100-minus-48-s {
|
||||
height: calc(100% - 48px);
|
||||
.h-100-minus-40-s {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.h-100-minus-96-s {
|
||||
height: calc(100% - 96px);
|
||||
@ -138,8 +143,8 @@ h2 {
|
||||
.flex-basis-300-m {
|
||||
flex-basis: 300px;
|
||||
}
|
||||
.h-100-minus-48-m {
|
||||
height: calc(100% - 48px);
|
||||
.h-100-minus-40-m {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.embed-container {
|
||||
padding-bottom: 56.25%;
|
||||
@ -150,8 +155,8 @@ h2 {
|
||||
.flex-basis-300-l {
|
||||
flex-basis: 300px;
|
||||
}
|
||||
.h-100-minus-48-l {
|
||||
height: calc(100% - 48px);
|
||||
.h-100-minus-40-l {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.embed-container {
|
||||
padding-bottom: 37.5%;
|
||||
@ -162,8 +167,8 @@ h2 {
|
||||
.flex-basis-300-xl {
|
||||
flex-basis: 300px;
|
||||
}
|
||||
.h-100-minus-48-xl {
|
||||
height: calc(100% - 48px);
|
||||
.h-100-minus-40-xl {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.embed-container {
|
||||
padding-bottom: 28.125%;
|
||||
@ -173,6 +178,9 @@ h2 {
|
||||
/* dark */
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #333;
|
||||
}
|
||||
.bg-black-d {
|
||||
background-color: black;
|
||||
}
|
||||
@ -194,12 +202,21 @@ h2 {
|
||||
.bg-gray0-d {
|
||||
background-color: #333;
|
||||
}
|
||||
.bg-gray1-d {
|
||||
background-color: #4d4d4d;
|
||||
}
|
||||
.b--gray0-d {
|
||||
border-color: #333;
|
||||
}
|
||||
.b--gray1-d {
|
||||
border-color: #4d4d4d;
|
||||
}
|
||||
.b--gray2-d {
|
||||
border-color: #7f7f7f;
|
||||
}
|
||||
.b--white-d {
|
||||
border-color: #fff;
|
||||
}
|
||||
.bb-d {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
@ -207,8 +224,8 @@ h2 {
|
||||
.invert-d {
|
||||
filter: invert(1);
|
||||
}
|
||||
.o-60-d {
|
||||
opacity: .6;
|
||||
.o-80-d {
|
||||
opacity: .8;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
|
||||
@ -230,7 +230,7 @@ export class ChatScreen extends Component {
|
||||
<Link to="/~chat/">{"⟵ All Chats"}</Link>
|
||||
</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`}
|
||||
style={{ height: 48 }}>
|
||||
<SidebarSwitcher
|
||||
@ -254,7 +254,7 @@ export class ChatScreen extends Component {
|
||||
/>
|
||||
</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" }}
|
||||
onScroll={this.onScroll}>
|
||||
<div
|
||||
|
||||
@ -96,7 +96,7 @@ export class JoinScreen extends Component {
|
||||
|
||||
return (
|
||||
<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
|
||||
className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8">
|
||||
<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>
|
||||
<textarea
|
||||
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"
|
||||
spellCheck="false"
|
||||
rows={1}
|
||||
|
||||
@ -175,7 +175,7 @@ export class ChatInput extends Component {
|
||||
this.bindShortcuts();
|
||||
|
||||
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
|
||||
className="fl"
|
||||
style={{
|
||||
@ -185,9 +185,9 @@ export class ChatInput extends Component {
|
||||
}}>
|
||||
<Sigil ship={window.ship} size={24} color="#4330FC" />
|
||||
</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
|
||||
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" }}
|
||||
autoCapitalize="none"
|
||||
autoFocus={(
|
||||
|
||||
@ -23,14 +23,11 @@ export class ChatTabBar extends Component {
|
||||
setColor = 'gray3';
|
||||
}
|
||||
|
||||
(props.location.pathname.includes('/popout'))
|
||||
? popout = "popout/"
|
||||
: popout = "";
|
||||
popout = props.location.pathname.includes("/popout")
|
||||
? "popout/" : "";
|
||||
|
||||
let hidePopoutIcon = (this.props.popout)
|
||||
? "dn-m dn-l dn-xl"
|
||||
: "dib-m dib-l dib-xl";
|
||||
|
||||
? "dn-m dn-l dn-xl" : "dib-m dib-l dib-xl";
|
||||
|
||||
return (
|
||||
<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"
|
||||
className="dib fr">
|
||||
<img
|
||||
className={`flex-shrink-0 pr2 dn invert-d ` + hidePopoutIcon}
|
||||
className={`flex-shrink-0 pr3 dn ` + hidePopoutIcon}
|
||||
src="/~chat/img/popout.png"
|
||||
height="16"
|
||||
width="16"/>
|
||||
|
||||
@ -1,36 +1,54 @@
|
||||
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 popoutHide = (this.props.popout)
|
||||
? "dn dn-m dn-l dn-xl"
|
||||
: "dn db-m db-l db-xl";
|
||||
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 bb-d b--gray2-d w-100 justify-between ` + popoutHide}
|
||||
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,15 @@
|
||||
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} />
|
||||
//TODO relocate to ~launch when OS1 is ported
|
||||
<img
|
||||
className="invert-d"
|
||||
src="/~chat/img/Home.png"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ export class SidebarSwitcher extends Component {
|
||||
api.sidebarToggle();
|
||||
}}>
|
||||
<img
|
||||
className={`pr3 dn invert-d ` + popoutSwitcher}
|
||||
className={`pr3 dn ` + popoutSwitcher}
|
||||
src={
|
||||
this.props.sidebarShown
|
||||
? "/~chat/img/ChatSwitcherLink.png"
|
||||
@ -24,6 +24,9 @@ export class SidebarSwitcher extends Component {
|
||||
}
|
||||
height="16"
|
||||
width="16"
|
||||
style={{
|
||||
maxWidth: 16
|
||||
}}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -8,12 +8,12 @@ export class Sigil extends Component {
|
||||
|
||||
if (props.ship.length > 14) {
|
||||
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>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div style={{ flexBasis: 32, backgroundColor: props.color }}>
|
||||
<div className="dib" style={{ flexBasis: 32, backgroundColor: props.color }}>
|
||||
{sigil({
|
||||
patp: props.ship,
|
||||
renderer: reactRenderer,
|
||||
|
||||
@ -96,7 +96,7 @@ export class InviteElement extends Component {
|
||||
<div>
|
||||
<textarea
|
||||
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={{
|
||||
resize: 'none',
|
||||
height: 50
|
||||
|
||||
@ -62,7 +62,7 @@ export class Message extends Component {
|
||||
if (imgMatch) {
|
||||
contents = (
|
||||
<img
|
||||
className="o-60-d"
|
||||
className="o-80-d"
|
||||
src={letter.url}
|
||||
style={{
|
||||
width: "50%",
|
||||
@ -82,8 +82,7 @@ export class Message extends Component {
|
||||
contents = (
|
||||
<div className={'embed-container mb2 w-100 w-75-l w-50-xl ' +
|
||||
((this.state.unfold === true)
|
||||
? "db"
|
||||
: "dn")}>
|
||||
? "db" : "dn")}>
|
||||
<iframe
|
||||
ref="iframe"
|
||||
width="560"
|
||||
@ -96,7 +95,7 @@ export class Message extends Component {
|
||||
return (
|
||||
<div>
|
||||
<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}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
@ -111,7 +110,7 @@ export class Message extends Component {
|
||||
)
|
||||
} else {
|
||||
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}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
@ -175,8 +174,7 @@ export class Message extends Component {
|
||||
size={24}
|
||||
color={((props.msg.author === window.ship)
|
||||
|| (props.msg.author.substr(1) === window.ship))
|
||||
? "#4330FC"
|
||||
: "#000000"}
|
||||
? "#4330FC" : "#000000"}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -58,11 +58,11 @@ export class SidebarItem extends Component {
|
||||
|
||||
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 (
|
||||
<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)}>
|
||||
<div className="w-100 v-mid">
|
||||
<p className={"dib mono f8 " + unreadElem }>
|
||||
|
||||
@ -83,7 +83,8 @@ export class MemberScreen extends Component {
|
||||
<Link to="/~chat/">{"⟵ All Chats"}</Link>
|
||||
</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 }}>
|
||||
<SidebarSwitcher
|
||||
sidebarShown={this.props.sidebarShown}
|
||||
|
||||
@ -193,7 +193,7 @@ export class NewScreen extends Component {
|
||||
|
||||
return (
|
||||
<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">
|
||||
<Link to="/~chat/">{"⟵ All Chats"}</Link>
|
||||
</div>
|
||||
@ -204,7 +204,7 @@ export class NewScreen extends Component {
|
||||
Lowercase alphanumeric characters, dashes, and slashes only
|
||||
</p>
|
||||
<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"
|
||||
rows={1}
|
||||
style={{
|
||||
@ -217,7 +217,7 @@ export class NewScreen extends Component {
|
||||
<div className="dropdown relative">
|
||||
<select
|
||||
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}
|
||||
onChange={this.securityChange}>
|
||||
<option value="village">Village</option>
|
||||
@ -233,7 +233,7 @@ export class NewScreen extends Component {
|
||||
</p>
|
||||
<textarea
|
||||
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"
|
||||
spellCheck="false"
|
||||
style={{
|
||||
|
||||
@ -75,7 +75,7 @@ export class Root extends Component {
|
||||
sidebarShown={state.sidebarShown}
|
||||
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">
|
||||
<p className="f8 pt3 gray2 w-100 h-100 dtc v-mid tc">
|
||||
Select, create, or join a chat to begin.
|
||||
|
||||
@ -90,7 +90,7 @@ export class SettingsScreen extends Component {
|
||||
<Link to="/~chat/">{"⟵ All Chats"}</Link>
|
||||
</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 }}>
|
||||
<SidebarSwitcher
|
||||
sidebarShown={this.props.sidebarShown}
|
||||
|
||||
@ -71,23 +71,26 @@ export class Sidebar extends Component {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={`h-100-minus-96-s h-100 w-100 overflow-x-hidden flex
|
||||
bg-black-d flex-column relative z1`}>
|
||||
<div
|
||||
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">
|
||||
{sidebarInvites}
|
||||
{sidebarItems}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,53 +1,72 @@
|
||||
import React, { Component } from 'react';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { HeaderBar } from '/components/lib/header-bar.js';
|
||||
import { HeaderBar } from './lib/header-bar';
|
||||
|
||||
export class Skeleton extends Component {
|
||||
render() {
|
||||
|
||||
// sidebar and chat panel conditional classes
|
||||
let sidebarHide = (!this.props.sidebarShown || this.props.popout)
|
||||
? "dn"
|
||||
: "";
|
||||
? "dn" : "";
|
||||
|
||||
let sidebarHideOnMobile = this.props.sidebarHideOnMobile
|
||||
? "dn-s"
|
||||
: "";
|
||||
? "dn-s" : "";
|
||||
|
||||
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 (
|
||||
<div className="h-100 w-100 absolute bg-black-d">
|
||||
<HeaderBar spinner={this.props.spinner} popout={this.props.popout} />
|
||||
<div className={`cf w-100 absolute flex ` +
|
||||
((this.props.chatHideonMobile)
|
||||
? "h-100 "
|
||||
: "h-100-minus-48-s ") +
|
||||
((this.props.popout)
|
||||
? "h-100"
|
||||
: "h-100-minus-48-m h-100-minus-48-l h-100-minus-48-xl")}>
|
||||
// app outer skeleton
|
||||
<div className={"absolute h-100 w-100 bg-gray0-d " + popoutWindow}>
|
||||
<HeaderBar spinner={this.props.spinner} />
|
||||
{/* app window borders */}
|
||||
<div className={
|
||||
`fl h-100 br b--gray4 b--gray2-d overflow-x-hidden
|
||||
`cf w-100 flex ` +
|
||||
popoutBorder +
|
||||
(this.props.chatHideonMobile ? "h-100 " : "h-100-minus-40-s ") +
|
||||
(this.props.popout
|
||||
? "h-100"
|
||||
: "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-300-xl ` +
|
||||
sidebarHide + " " +
|
||||
sidebarHide +
|
||||
" " +
|
||||
sidebarHideOnMobile
|
||||
}>
|
||||
<div className={
|
||||
chatHideOnMobile === ""
|
||||
? "dn"
|
||||
: "db dn-m dn-l dn-xl w-100 inter pt4 f8"
|
||||
}>
|
||||
{/* mobile-specific navigation */}
|
||||
<div className={mobileNavClasses}>
|
||||
<a className="pl3 pb6" href="/">
|
||||
{"⟵ Landscape"}
|
||||
</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>
|
||||
{/* sidebar component inside the sidebar skeleton */}
|
||||
{this.props.sidebar}
|
||||
</div>
|
||||
<div className={"h-100 fr " + chatHideOnMobile}
|
||||
{/* right-hand panel for chat, members, settings */}
|
||||
<div
|
||||
className={"h-100 fr " + chatHideOnMobile}
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
width: "calc(100% - 300px)"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user