mirror of
https://github.com/urbit/shrub.git
synced 2025-01-02 01:25:55 +03:00
interface: remove all popout logic
This commit is contained in:
parent
6b98997ab2
commit
3bf3ce1d71
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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={
|
||||
|
@ -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}
|
||||
|
@ -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;
|
@ -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}
|
||||
|
@ -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}
|
||||
|
@ -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">
|
||||
|
@ -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)}>
|
||||
<- 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 ->
|
||||
</Link>
|
||||
</div>
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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}
|
||||
|
@ -84,7 +84,6 @@ export default function PublishApp(props: PublishAppProps) {
|
||||
]}
|
||||
>
|
||||
<RouterSkeleton
|
||||
popout={location.pathname.includes("popout/")}
|
||||
active={active}
|
||||
sidebarShown={sidebarShown}
|
||||
invites={invites}
|
||||
|
@ -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 (
|
||||
|
@ -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'
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user