interface: remove all popout logic

This commit is contained in:
Matilde Park 2020-10-02 18:06:53 -04:00
parent 6b98997ab2
commit 3bf3ce1d71
20 changed files with 50 additions and 148 deletions

View File

@ -81,10 +81,10 @@ export function uxToHex(ux) {
}
export function hexToUx(hex) {
const ux = _.chain(hex.split(""))
const ux = _.chain(hex.split(''))
.chunk(4)
.map((x) => _.dropWhile(x, (y) => y === 0).join(""))
.join(".");
.map(x => _.dropWhile(x, y => y === 0).join(''))
.join('.');
return `0x${ux}`;
}
@ -236,28 +236,28 @@ export function stringToTa(string) {
export function makeRoutePath(
resource,
popout = false,
page = 0,
url = null,
index = 0,
compage = 0
) {
let route = "/~link" + (popout ? "/popout" : "") + resource;
let route = '/~link' + resource;
if (!url) {
if (page !== 0) {
route = route + "/" + page;
route = route + '/' + page;
}
} else {
route = `${route}/${page}/${index}/${base64urlEncode(url)}`;
if (compage !== 0) {
route = route + "/" + compage;
route = route + '/' + compage;
}
}
return route;
}
export function amOwnerOfGroup(groupPath) {
if (!groupPath) return false;
if (!groupPath)
return false;
const groupOwner = /(\/~)?\/~([a-z-]{3,})\/.*/.exec(groupPath)[2];
return window.ship === groupOwner;
}
@ -265,20 +265,20 @@ export function amOwnerOfGroup(groupPath) {
export function getContactDetails(contact) {
const member = !contact;
contact = contact || {
nickname: "",
nickname: '',
avatar: null,
color: "0x0",
color: '0x0'
};
const nickname = contact.nickname || "";
const color = uxToHex(contact.color || "0x0");
const nickname = contact.nickname || '';
const color = uxToHex(contact.color || '0x0');
const avatar = contact.avatar || null;
return { nickname, color, member, avatar };
}
export function stringToSymbol(str) {
let result = '';
for (var i = 0; i < str.length; i++) {
var n = str.charCodeAt(i);
for (let i = 0; i < str.length; i++) {
const n = str.charCodeAt(i);
if (((n >= 97) && (n <= 122)) ||
((n >= 48) && (n <= 57))) {
result += str[i];
@ -298,12 +298,12 @@ export function stringToSymbol(str) {
export function scrollIsAtTop(container) {
if (
(navigator.userAgent.includes("Safari") &&
navigator.userAgent.includes("Chrome")) ||
navigator.userAgent.includes("Firefox")
(navigator.userAgent.includes('Safari') &&
navigator.userAgent.includes('Chrome')) ||
navigator.userAgent.includes('Firefox')
) {
return container.scrollTop === 0;
} else if (navigator.userAgent.includes("Safari")) {
} else if (navigator.userAgent.includes('Safari')) {
return (
container.scrollHeight + Math.round(container.scrollTop) <=
container.clientHeight + 10
@ -315,15 +315,15 @@ export function scrollIsAtTop(container) {
export function scrollIsAtBottom(container) {
if (
(navigator.userAgent.includes("Safari") &&
navigator.userAgent.includes("Chrome")) ||
navigator.userAgent.includes("Firefox")
(navigator.userAgent.includes('Safari') &&
navigator.userAgent.includes('Chrome')) ||
navigator.userAgent.includes('Firefox')
) {
return (
container.scrollHeight - Math.round(container.scrollTop) <=
container.clientHeight + 10
);
} else if (navigator.userAgent.includes("Safari")) {
} else if (navigator.userAgent.includes('Safari')) {
return container.scrollTop === 0;
} else {
return false;

View File

@ -220,9 +220,9 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
/>
<Route
exact
path="/~chat/(popout)?/room/(~)?/:ship/:station+"
path="/~chat/room/(~)?/:ship/:station+"
render={(props) => {
let station = `/${props.match.params.ship}/${props.match.params.station}`;
const station = `/${props.match.params.ship}/${props.match.params.station}`;
const mailbox = inbox[station] || {
config: {
read: 0,
@ -247,14 +247,11 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
const group = groups[association['group-path']] || groupBunts.group();
const popout = props.match.url.includes('/popout/');
return (
<Skeleton
associations={associations}
invites={invites}
sidebarHideOnMobile={true}
popout={popout}
sidebarShown={sidebarShown}
sidebar={renderChannelSidebar(props, station)}
>
@ -271,7 +268,6 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
group={group}
pendingMessages={pendingMessages}
s3={s3}
popout={popout}
sidebarShown={sidebarShown}
chatInitialized={chatInitialized}
hideAvatars={hideAvatars}
@ -285,10 +281,9 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
/>
<Route
exact
path="/~chat/(popout)?/settings/(~)?/:ship/:station+"
path="/~chat/settings/(~)?/:ship/:station+"
render={(props) => {
let station = `/${props.match.params.ship}/${props.match.params.station}`;
const popout = props.match.url.includes('/popout/');
const association =
station in associations['chat'] ? associations.chat[station] : {};
@ -299,7 +294,6 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
associations={associations}
invites={invites}
sidebarHideOnMobile={true}
popout={popout}
sidebarShown={sidebarShown}
sidebar={renderChannelSidebar(props, station)}
>
@ -313,7 +307,6 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
associations={associations.contacts}
api={api}
inbox={inbox}
popout={popout}
sidebarShown={sidebarShown}
/>
</Skeleton>

View File

@ -33,7 +33,6 @@ type ChatScreenProps = RouteComponentProps<{
group: Group;
pendingMessages: Map<Path, Envelope[]>;
s3: any;
popout: boolean;
sidebarShown: boolean;
chatInitialized: boolean;
envelopes: Envelope[];
@ -131,7 +130,7 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
const unreadCount = props.mailboxSize - props.read;
const unreadMsg = unreadCount > 0 && props.envelopes[unreadCount - 1];
return (
<div
key={props.station}

View File

@ -6,7 +6,6 @@ import { SidebarSwitcher } from '~/views/components/SidebarSwitch';
import { deSig } from '~/logic/lib/util';
const ChatHeader = (props) => {
const isInPopout = props.popout ? 'popout/' : '';
const group = Array.from(props.group.members);
let title = props.station.substr(1);
if (props.association &&
@ -32,11 +31,10 @@ const ChatHeader = (props) => {
>
<SidebarSwitcher
sidebarShown={props.sidebarShown}
popout={props.popout}
api={props.api}
/>
<Link
to={'/~chat/' + isInPopout + 'room' + props.station}
to={'/~chat/' + 'room' + props.station}
className="pt2 white-d"
>
<h2
@ -51,9 +49,7 @@ const ChatHeader = (props) => {
</Link>
<TabBar
location={props.location}
popoutHref={`/~chat/popout/room${props.station}`}
settings={`/~chat/${isInPopout}settings${props.station}`}
popout={props.popout}
settings={`/~chat/settings${props.station}`}
/>
</div>
</Fragment>

View File

@ -117,7 +117,6 @@ export class SettingsScreen extends Component {
group,
association,
station,
popout,
sidebarShown,
match,
location
@ -133,7 +132,7 @@ export class SettingsScreen extends Component {
association={association}
station={station}
sidebarShown={sidebarShown}
popout={popout} />
/>
<Box width='100%' pl='3' mt='3'>
{(state.isLoading) ? this.renderLoading() : this.renderNormal() }
</Box>

View File

@ -6,7 +6,7 @@ import ErrorBoundary from '~/views/components/ErrorBoundary';
export class Skeleton extends Component {
render() {
// sidebar and chat panel conditional classes
const sidebarHide = (!this.props.sidebarShown || this.props.popout)
const sidebarHide = (!this.props.sidebarShown)
? 'dn' : '';
const sidebarHideOnMobile = this.props.sidebarHideOnMobile
@ -22,18 +22,11 @@ export class Skeleton extends Component {
'w-100 inter pt4 f8': !this.props.chatHideOnMobile
});
// popout switches out window chrome and borders
const popoutWindow = this.props.popout
? '' : 'ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl';
const popoutBorder = this.props.popout
? '' : 'ba-m ba-l ba-xl b--gray4 b--gray1-d br1 ';
return (
// app outer skeleton
<div className={'h-100 w-100 ' + popoutWindow}>
<div className='h-100 w-100 ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl'>
{/* app window borders */}
<div className={ 'bg-white bg-gray0-d cf w-100 flex h-100 ' + popoutBorder }>
<div className='bg-white bg-gray0-d cf w-100 flex h-100 ba-m ba-l ba-xl b--gray4 b--gray1-d br1'>
{/* sidebar skeleton, hidden on mobile when in chat panel */}
<div
className={

View File

@ -1,9 +1,7 @@
import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import classnames from 'classnames';
import { Route } from 'react-router-dom';
import Helmet from 'react-helmet';
import { Popout } from './components/lib/icons/popout';
import { History } from './components/history';
import { Input } from './components/input';
@ -54,16 +52,8 @@ export default class DojoApp extends Component {
>
<Route
exact
path="/~dojo/:popout?"
path="/~dojo/"
render={(props) => {
const popout = Boolean(props.match.params.popout);
const popoutClasses = classnames({
'mh4-m mh4-l mh4-xl': !popout,
'mb4-m mb4-l mb4-xl': !popout,
'ba-m ba-l ba-xl': !popout
});
return (
<div className="w-100 h-100 flex-m flex-l flex-xl">
<div
@ -75,14 +65,13 @@ export default class DojoApp extends Component {
className={
'pa3 bg-white bg-gray0-d black white-d mono w-100 f8 relative' +
' h-100-m40-s b--gray2 br1 flex-auto flex flex-column ' +
popoutClasses
'mh4-m mh4-l mh4-xl mb4-m mb4-l mb4-xl ba-m ba-l ba-xl'
}
style={{
lineHeight: '1.4',
cursor: 'text'
}}
>
<Popout popout={popout} />
<History commandLog={this.state.txt} />
<Input
ship={this.props.ship}

View File

@ -1,29 +0,0 @@
import React, { Component } from 'react';
export class Popout extends Component {
render() {
const hidePopoutIcon = this.props.popout
? 'dn-m dn-l dn-xl'
: 'dib-m dib-l dib-xl';
return (
<div
className="db tr z-2"
style={{
right: 16,
top: 16
}}
>
<a href="/~dojo/popout" target="_blank">
<img
className={'flex-shrink-0 dn ' + hidePopoutIcon}
src="/~dojo/img/popout.png"
height="16"
width="16"
/>
</a>
</div>
);
}
}
export default Popout;

View File

@ -49,7 +49,6 @@ export function LinkResource(props: LinkResourceProps) {
? associations.graph[appPath]
: { metadata: {} };
const contactDetails = contacts[resource["group-path"]] || {};
const popout = props.match.url.includes("/popout/");
const graph = graphs[resourcePath] || null;
useEffect(() => {
@ -131,7 +130,6 @@ export function LinkResource(props: LinkResourceProps) {
comments={node.children}
resourcePath={resourcePath}
contacts={contactDetails}
popout={false}
api={api}
hideAvatars={hideAvatars}
hideNicknames={hideNicknames}

View File

@ -91,11 +91,10 @@ export default class LinksApp extends Component {
</Skeleton>
)}
/>
<Route exact path="/~link/(popout)?/:ship/:name/settings"
<Route exact path="/~link/:ship/:name/settings"
render={ (props) => {
const resourcePath =
const resourcePath =
`${props.match.params.ship}/${props.match.params.name}`;
const popout = props.match.url.includes('/popout/');
const metPath = `/ship/~${resourcePath}`;
const resource =
associations.graph[metPath] ?
@ -113,7 +112,6 @@ export default class LinksApp extends Component {
groups={groups}
selected={resourcePath}
sidebarShown={sidebarShown}
popout={popout}
graphKeys={graphKeys}
api={api}>
<SettingsScreen
@ -126,16 +124,15 @@ export default class LinksApp extends Component {
group={group}
amOwner={amOwner}
resourcePath={resourcePath}
popout={popout}
api={api}
{...props} />
</Skeleton>
);
}}
/>
<Route exact path="/~link/(popout)?/:ship/:name"
<Route exact path="/~link/:ship/:name"
render={ (props) => {
const resourcePath =
const resourcePath =
`${props.match.params.ship}/${props.match.params.name}`;
const metPath = `/ship/~${resourcePath}`;
const resource =
@ -143,7 +140,6 @@ export default class LinksApp extends Component {
associations.graph[metPath] : { metadata: {} };
const contactDetails = contacts[resource['group-path']] || {};
const popout = props.match.url.includes('/popout/');
const graph = graphs[resourcePath] || null;
return (
@ -154,7 +150,6 @@ export default class LinksApp extends Component {
selected={resourcePath}
sidebarShown={sidebarShown}
sidebarHideMobile={true}
popout={popout}
api={api}
graphKeys={graphKeys}>
<LinkList
@ -164,7 +159,6 @@ export default class LinksApp extends Component {
graph={graph}
graphResource={graphKeys.has(resourcePath)}
resourcePath={resourcePath}
popout={popout}
metadata={resource.metadata}
contacts={contactDetails}
hideAvatars={hideAvatars}
@ -177,15 +171,14 @@ export default class LinksApp extends Component {
);
}}
/>
<Route exact path="/~link/(popout)?/:ship/:name/:index"
<Route exact path="/~link/:ship/:name/:index"
render={ (props) => {
const resourcePath =
const resourcePath =
`${props.match.params.ship}/${props.match.params.name}`;
const metPath = `/ship/~${resourcePath}`;
const resource =
associations.graph[metPath] ?
associations.graph[metPath] : { metadata: {} };
const popout = props.match.url.includes('/popout/');
const contactDetails = contacts[resource['group-path']] || {};
@ -197,7 +190,7 @@ export default class LinksApp extends Component {
}
const index = parseInt(indexArr[1], 10);
const node = !!graph ? graph.get(index) : null;
const node = Boolean(graph) ? graph.get(index) : null;
return (
<Skeleton
@ -207,7 +200,6 @@ export default class LinksApp extends Component {
selected={resourcePath}
sidebarShown={sidebarShown}
sidebarHideMobile={true}
popout={popout}
graphKeys={graphKeys}
api={api}>
<LinkDetail
@ -218,7 +210,6 @@ export default class LinksApp extends Component {
name={props.match.params.name}
resource={resource}
contacts={contactDetails}
popout={popout}
sidebarShown={sidebarShown}
api={api}
hideAvatars={hideAvatars}

View File

@ -83,14 +83,13 @@ export const ChannelSidebar = (props) => {
}
const activeClasses = (props.active === 'collections') ? ' ' : 'dn-s ';
const hiddenClasses = !!props.popout ? false : props.sidebarShown;
return (
<div className={
`bn br-m br-l br-xl b--gray4 b--gray1-d lh-copy h-100` +
`flex-shrink-0 mw5-m mw5-l mw5-xl pt3 pt0-m pt0-l pt0-xl relative ` +
activeClasses +
((hiddenClasses) ? 'flex-basis-100-s flex-basis-30-ns' : 'dn')
((props.sidebarShown) ? 'flex-basis-100-s flex-basis-30-ns' : 'dn')
}>
<div className="overflow-y-scroll h-100">
<div className="w-100 bg-transparent">

View File

@ -20,12 +20,12 @@ export class Pagination extends Component {
return (
<div className="w-100 inter relative pv6">
<div className={prevDisplay + ' inter f8'}>
<Link to={makeRoutePath(props.resourcePath, props.popout, prevPage)}>
<Link to={makeRoutePath(props.resourcePath, prevPage)}>
&#60;- Previous Page
</Link>
</div>
<div className={nextDisplay + ' inter f8'}>
<Link to={makeRoutePath(props.resourcePath, props.popout, nextPage)}>
<Link to={makeRoutePath(props.resourcePath, nextPage)}>
Next Page -&gt;
</Link>
</div>

View File

@ -45,7 +45,6 @@ export const LinkDetail = (props) => {
style={{ height: 48 }}>
<SidebarSwitcher
sidebarShown={props.sidebarShown}
popout={props.popout}
api={props.api}
/>
<Link className="dib f9 fw4 pt2 gray2 lh-solid"
@ -58,8 +57,6 @@ export const LinkDetail = (props) => {
</Link>
<TabBar
location={props.location}
popout={props.popout}
popoutHref={`/~link/popout/${resourcePath}/${props.match.params.index}`}
settings={`/~link/${resourcePath}/settings`}
/>
</div>
@ -84,7 +81,6 @@ export const LinkDetail = (props) => {
comments={props.node.children}
resourcePath={resourcePath}
contacts={props.contacts}
popout={props.popout}
api={props.api}
hideAvatars={props.hideAvatars}
hideNicknames={props.hideNicknames}

View File

@ -1,4 +1,4 @@
import React, { Component, useEffect } from "react";
import React, { useEffect } from "react";
import { TabBar } from '~/views/components/chat-link-tabbar';
import { SidebarSwitcher } from '~/views/components/SidebarSwitch';
@ -44,7 +44,6 @@ export const LinkList = (props) => {
>
<SidebarSwitcher
sidebarShown={props.sidebarShown}
popout={props.popout}
api={props.api} />
<h2
className="dib f9 fw4 pt2 lh-solid v-top black white-d"
@ -53,8 +52,6 @@ export const LinkList = (props) => {
</h2>
<TabBar
location={props.location}
popout={props.popout}
popoutHref={`/~link/popout/${resource}`}
settings={`/~link/${resource}/settings`}
/>
</div>

View File

@ -142,7 +142,6 @@ export class SettingsScreen extends Component {
>
<SidebarSwitcher
sidebarShown={this.props.sidebarShown}
popout={this.props.popout}
api={this.props.api}
/>
<Link className="dib f9 fw4 pt2 gray2 lh-solid"
@ -157,8 +156,6 @@ export class SettingsScreen extends Component {
</Link>
<TabBar
location={props.location}
popout={props.popout}
popoutHref={`/~link/popout/${props.resourcePath}/settings`}
settings={`/~link/${props.resourcePath}/settings`}
/>
</Row>

View File

@ -6,24 +6,16 @@ export class Skeleton extends Component {
render() {
const { props } = this;
const rightPanelHide = props.rightPanelHide ? 'dn-s' : '';
const popout = props.popout ? props.popout : false;
const popoutWindow = (popout)
? '' : 'ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl';
const popoutBorder = (popout)
? '' : 'ba-m ba-l ba-xl b--gray4 b--gray1-d br1';
const linkInvites = ('/link' in props.invites)
? props.invites['/link'] : {};
return (
<div className={'absolute w-100 ' + popoutWindow}
<div className='absolute w-100 ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl'
style={{ height: 'calc(100% - 45px)' }}>
<div className={'bg-white bg-gray0-d cf w-100 h-100 flex ' + popoutBorder}>
<div className='bg-white bg-gray0-d cf w-100 h-100 flex ba-m ba-l ba-xl b--gray4 b--gray1-d br1'>
<ChannelSidebar
active={props.active}
popout={popout}
associations={props.associations}
invites={linkInvites}
groups={props.groups}

View File

@ -84,7 +84,6 @@ export default function PublishApp(props: PublishAppProps) {
]}
>
<RouterSkeleton
popout={location.pathname.includes("popout/")}
active={active}
sidebarShown={sidebarShown}
invites={invites}

View File

@ -37,7 +37,6 @@ export function NotePreview(props: NotePreviewProps) {
comment = `${note["num-comments"]} Comments`;
}
const date = moment(note["date-created"]).fromNow();
//const popout = props.popout ? "popout/" : "";
const url = `${props.book}/note/${note["note-id"]}`;
return (

View File

@ -2,9 +2,6 @@ import React, { Component } from 'react';
export class SidebarSwitcher extends Component {
render() {
const popoutSwitcher = this.props.popout
? ' dn-m dn-l dn-xl'
: ' dib-m dib-l dib-xl';
const classes = this.props.classes ? this.props.classes : '';
@ -21,7 +18,7 @@ export class SidebarSwitcher extends Component {
}}
>
<img
className={'pr3 dn ' + popoutSwitcher}
className='pr3 dn dib-m dib-l dib-xl'
src={
this.props.sidebarShown
? '/~landscape/img/ChatSwitcherLink.png'

View File

@ -12,9 +12,6 @@ const StatusBar = (props) => {
const location = useLocation();
const atHome = Boolean(location.pathname === '/');
const display = (!window.location.href.includes('popout/'))
? 'grid' : 'none';
const invites = (props.invites && props.invites['/contacts'])
? props.invites['/contacts']
: {};
@ -24,7 +21,7 @@ const StatusBar = (props) => {
return (
<Box
display={display}
display='grid'
width="100%"
gridTemplateRows="30px"
gridTemplateColumns="3fr 1fr"