mobile: sidebar components are now mobile friendly, scenes setup for mobile refactor, updates across other components for consistency

common/constants.js

@@ -4,6 +4,7 @@ export const values = {
 };
 
 export const sizes = {
+  mobile: 768,
   navigation: 288,
   sidebar: 416,
   header: 72,

components/core/ApplicationHeader.js

@@ -1,14 +1,10 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
-import * as System from "~/components/system";
 import * as SVG from "~/common/svg";
-import * as OldSVG from "~/components/system/svg";
 
 import { css } from "@emotion/react";
 import { Tooltip } from "react-tippy";
 
-import ApplicationControlMenu from "~/components/core/ApplicationControlMenu";
-
 const STYLES_ICON_ELEMENT = css`
   height: 40px;
   width: 40px;
@@ -35,14 +31,14 @@ const STYLES_APPLICATION_HEADER = css`
   align-items: flex-start;
   justify-content: space-between;
   width: 100%;
-  height: 88px;
+  height: 112px;
   padding: 12px 48px 0 36px;
   pointer-events: none;
-  background: linear-gradient(
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
-    to bottom,
+
-    rgba(255, 255, 255, 1) 50%,
+  @media (max-width: ${Constants.sizes.mobile}px) {
-    rgba(255, 255, 255, 0) 100%
+    padding: 12px 24px 0 12px;
-  );
+  }
 `;
 
 const STYLES_LEFT = css`
@@ -69,41 +65,26 @@ const STYLES_RIGHT = css`
 
 export default class ApplicationHeader extends React.Component {
   render() {
-    const isBackDisabled =
+    const isBackDisabled = this.props.currentIndex === 0 || this.props.history.length < 2;
-      this.props.currentIndex === 0 || this.props.history.length < 2;
 
     const isForwardDisabled =
-      this.props.currentIndex === this.props.history.length - 1 ||
+      this.props.currentIndex === this.props.history.length - 1 || this.props.history.length < 2;
-      this.props.history.length < 2;
 
     return (
       <header css={STYLES_APPLICATION_HEADER}>
         <div css={STYLES_LEFT}>
           <span
             css={STYLES_ICON_ELEMENT}
-            style={
+            style={isBackDisabled ? { cursor: "not-allowed", color: Constants.system.border } : null}
-              isBackDisabled
+            onClick={isBackDisabled ? () => {} : this.props.onBack}>
-                ? { cursor: "not-allowed", color: Constants.system.border }
-                : null
-            }
-            onClick={isBackDisabled ? () => {} : this.props.onBack}
-          >
             <Tooltip animation="fade" animateFill={false} title="Go back">
-              <SVG.NavigationArrow
+              <SVG.NavigationArrow height="16px" style={{ transform: `rotate(180deg)` }} />
-                height="16px"
-                style={{ transform: `rotate(180deg)` }}
-              />
             </Tooltip>
           </span>
           <span
             css={STYLES_ICON_ELEMENT}
-            style={
+            style={isForwardDisabled ? { cursor: "not-allowed", color: Constants.system.border } : null}
-              isForwardDisabled
+            onClick={isForwardDisabled ? () => {} : this.props.onForward}>
-                ? { cursor: "not-allowed", color: Constants.system.border }
-                : null
-            }
-            onClick={isForwardDisabled ? () => {} : this.props.onForward}
-          >
             <Tooltip animation="fade" animateFill={false} title="Go forward">
               <SVG.NavigationArrow height="16px" />
             </Tooltip>

components/core/ApplicationLayout.js

@@ -1,12 +1,27 @@
 import * as React from "react";
-import * as Strings from "~/common/strings";
 import * as Constants from "~/common/constants";
 import * as SVG from "~/components/system/svg";
 
 import { css } from "@emotion/react";
 
-const NAVIGATION_WIDTH = 288;
+const STYLES_SCROLL = css`
-const HEADER_HEIGHT = 72;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: ${Constants.system.foreground};
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: ${Constants.system.darkGray};
+  }
+`;
 
 const STYLES_LAYOUT = css`
   display: flex;
@@ -33,26 +48,30 @@ const STYLES_CONTENT = css`
   position: relative;
 `;
 
-const STYLES_BODY = css`
+const STYLES_BODY_WEB = css`
-  -webkit-overflow-scrolling: touch;
+  display: block;
   height: 100%;
   min-height: 10%;
   width: 100%;
 
-  overflow-y: scroll;
+  ${STYLES_SCROLL}
-  scrollbar-width: none;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
 
-  ::-webkit-scrollbar {
+  @media (max-width: ${Constants.sizes.mobile}px) {
-    width: 6px;
+    display: none;
   }
+`;
 
-  ::-webkit-scrollbar-track {
+const STYLES_BODY_MOBILE = css`
-    background: ${Constants.system.foreground};
+  display: none;
-  }
+  height: 100%;
+  min-height: 10%;
+  width: 100%;
+  padding: 80px 0px 88px 0px;
 
-  ::-webkit-scrollbar-thumb {
+  ${STYLES_SCROLL}
-    background: ${Constants.system.darkGray};
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    display: block;
   }
 `;
 
@@ -63,48 +82,35 @@ const STYLES_NAVIGATION = css`
   width: ${Constants.sizes.navigation}px;
   border-right: 1px solid ${Constants.system.border};
 
-  overflow-y: scroll;
+  ${STYLES_SCROLL}
-  scrollbar-width: none;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-
-  ::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: ${Constants.system.foreground};
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: ${Constants.system.darkGray};
-  }
 
   @media (max-width: 768px) {
     width: auto;
   }
 `;
 
-const STYLES_SIDEBAR = css`
+const STYLES_SIDEBAR_MOBILE = css`
+  display: none;
+  width: 100%;
+  padding: 0;
+  flex-shrink: 0;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    display: block;
+  }
+`;
+
+const STYLES_SIDEBAR_WEB = css`
   height: 100vh;
   width: ${Constants.sizes.sidebar}px;
   padding: 0;
   flex-shrink: 0;
   box-shadow: inset 1px 0 0 0 ${Constants.system.border};
 
-  overflow-y: scroll;
+  ${STYLES_SCROLL}
-  scrollbar-width: none;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
 
-  ::-webkit-scrollbar {
+  @media (max-width: 768px) {
-    width: 6px;
+    display: none;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: ${Constants.system.foreground};
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: ${Constants.system.darkGray};
   }
 `;
 
@@ -133,23 +139,29 @@ const STYLES_SIDEBAR_CONTENT = css`
 
 export default class ApplicationLayout extends React.Component {
   render() {
-    return (
+    let sidebarElements = null;
-      <div css={STYLES_LAYOUT}>
+    if (this.props.sidebar) {
-        <div css={STYLES_NAVIGATION}>{this.props.navigation}</div>
+      sidebarElements = (
-        <div css={STYLES_CONTENT}>
+        <React.Fragment>
-          <div css={STYLES_HEADER}>{this.props.header}</div>
-          <div css={STYLES_BODY}>{this.props.children}</div>
-        </div>
-        {this.props.sidebar ? (
-          <div css={STYLES_SIDEBAR}>
           <div css={STYLES_SIDEBAR_HEADER}>
             <div css={STYLES_BLOCK} onClick={this.props.onDismissSidebar}>
               <SVG.Dismiss height="24px" />
             </div>
           </div>
           <div css={STYLES_SIDEBAR_CONTENT}>{this.props.sidebar}</div>
+        </React.Fragment>
+      );
+    }
+
+    return (
+      <div css={STYLES_LAYOUT}>
+        <div css={STYLES_NAVIGATION}>{this.props.navigation}</div>
+        <div css={STYLES_CONTENT}>
+          <div css={STYLES_HEADER}>{this.props.header}</div>
+          <div css={STYLES_BODY_WEB}>{this.props.children}</div>
+          <div css={STYLES_BODY_MOBILE}>{this.props.sidebar ? sidebarElements : this.props.children}</div>
         </div>
-        ) : null}
+        {this.props.sidebar ? <div css={STYLES_SIDEBAR_WEB}>{sidebarElements}</div> : null}
       </div>
     );
   }

components/core/ApplicationNavigation.js

@@ -1,11 +1,9 @@
 import * as React from "react";
-import * as Strings from "~/common/strings";
 import * as Constants from "~/common/constants";
 import * as System from "~/components/system";
 import * as SVG from "~/common/svg";
 
 import { css } from "@emotion/react";
-import { Tooltip } from "react-tippy";
 
 import ApplicationControlMenu from "~/components/core/ApplicationControlMenu";
 import Pill from "~/components/core/Pill";
@@ -46,7 +44,7 @@ const STYLES_NAVIGATION_HEADER = css`
   justify-content: flex-start;
   padding: 64px 24px 48px 48px;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 64px 0 48px 16px;
   }
 `;
@@ -86,7 +84,7 @@ const STYLES_PROFILE = css`
     background-color: ${Constants.system.brand};
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     display: none;
   }
 `;
@@ -105,7 +103,7 @@ const STYLES_PROFILE_IMAGE = css`
 const STYLES_EXPANDER = css`
   flex-shrink: 0;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     display: none;
   }
 `;
@@ -131,7 +129,7 @@ const STYLES_CHILDREN = css`
   align-items: flex-start;
   justify-content: flex-start;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     display: none;
   }
 `;
@@ -149,7 +147,7 @@ const STYLES_ICON_ELEMENT = css`
     transition: 200ms ease transform;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     margin: 0 8px 0 16px;
   }
 `;

components/core/ScenePage.js

@@ -7,6 +7,10 @@ const STYLES_SCENE = css`
   max-width: 1296px;
   width: 100%;
   padding: 88px 48px 128px 48px;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    padding: 88px 24px 128px 24px;
+  }
 `;
 
 export default (props) => {

components/core/WebsitePrototypeFooter.js

@@ -13,7 +13,7 @@ const STYLES_CONTAINER = css`
   justify-content: center;
   padding: 16px 24px 16px 24px;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     display: block;
   }
 `;
@@ -44,7 +44,7 @@ const STYLES_RIGHT = css`
   justify-content: flex-end;
   padding: 12px 0 12px 0;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     justify-content: center;
   }
 `;

components/core/WebsitePrototypeHeader.js

@@ -13,7 +13,7 @@ const STYLES_CONTAINER = css`
   justify-content: center;
   padding: 16px 24px 16px 24px;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     display: block;
   }
 `;
@@ -44,7 +44,7 @@ const STYLES_RIGHT = css`
   justify-content: flex-end;
   padding: 12px 0 12px 0;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     justify-content: center;
   }
 `;
@@ -53,11 +53,7 @@ export default (props) => {
   return (
     <div css={STYLES_CONTAINER} style={props.style}>
       <div css={STYLES_LEFT}>
-        <a
+        <a css={STYLES_LINK} href="/" style={{ marginRight: 24, fontFamily: Constants.font.codeBold }}>
-          css={STYLES_LINK}
-          href="/"
-          style={{ marginRight: 24, fontFamily: Constants.font.codeBold }}
-        >
           Slate {Constants.values.version}
         </a>
         <a css={STYLES_LINK} href="/_/system">

components/core/WebsitePrototypeHeaderGeneric.js

@@ -13,7 +13,7 @@ const STYLES_CONTAINER = css`
   justify-content: center;
   padding: 16px 24px 16px 24px;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     display: block;
   }
 `;
@@ -44,7 +44,7 @@ const STYLES_RIGHT = css`
   justify-content: flex-end;
   padding: 12px 0 12px 0;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     justify-content: center;
   }
 `;
@@ -53,11 +53,7 @@ export default (props) => {
   return (
     <div css={STYLES_CONTAINER} style={props.style}>
       <div css={STYLES_LEFT}>
-        <a
+        <a css={STYLES_LINK} href={`/${props.children}`} style={{ fontFamily: Constants.font.codeBold }}>
-          css={STYLES_LINK}
-          href={`/${props.children}`}
-          style={{ fontFamily: Constants.font.codeBold }}
-        >
           {props.children}
         </a>
       </div>

pages/_/slate.js

@@ -29,7 +29,7 @@ const STYLES_SLATE = css`
   min-height: 10%;
   height: 100%;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 0 24px 0 24px;
   }
 `;
@@ -75,21 +75,11 @@ export default class SlatePage extends React.Component {
     });
 
     return (
-      <WebsitePrototypeWrapper
+      <WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
-        title={title}
-        description={description}
-        url={url}
-        image={image}
-      >
         <div css={STYLES_ROOT}>
-          <WebsitePrototypeHeaderGeneric>
+          <WebsitePrototypeHeaderGeneric>{this.props.slate.ownername}</WebsitePrototypeHeaderGeneric>
-            {this.props.slate.ownername}
-          </WebsitePrototypeHeaderGeneric>
           <div css={STYLES_SLATE}>
-            <Slate
+            <Slate items={this.props.slate.data.objects} onSelect={this._handleSelect} />
-              items={this.props.slate.data.objects}
-              onSelect={this._handleSelect}
-            />
           </div>
           <WebsitePrototypeFooter style={{ marginTop: 88 }} />
         </div>

pages/index.js

@@ -18,7 +18,7 @@ const STYLES_ROOT = css`
   text-align: center;
   font-size: 1rem;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     font-size: 0.78rem;
   }
 `;
@@ -53,7 +53,7 @@ const STYLES_CARD_PARAGRAPH = css`
   font-size: 1.2rem;
   color: ${Constants.system.white};
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 24px;
     font-size: 1rem;
   }
@@ -66,7 +66,7 @@ const STYLES_CARD_ACTIONS = css`
   color: ${Constants.system.white};
   padding: 24px;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 16px;
   }
 `;
@@ -79,7 +79,7 @@ const STYLES_CARD_ACTIONS_LEFT = css`
   font-size: 12px;
   text-align: left;
 
-  @media (max-width: 768px) {
+  @media (max-width: ${Constants.sizes.mobile}px) {
     font-size: 10px;
   }
 `;
@@ -117,45 +117,29 @@ export default class IndexPage extends React.Component {
 
   render() {
     const title = `Slate`;
-    const description =
+    const description = "The place for all of your assets. Powered by Textile and Filecoin.";
-      "The place for all of your assets. Powered by Textile and Filecoin.";
     const url = "https://slate.host";
 
     return (
-      <WebsitePrototypeWrapper
+      <WebsitePrototypeWrapper title={title} description={description} url={url}>
-        title={title}
-        description={description}
-        url={url}
-      >
         <div css={STYLES_ROOT}>
           <WebsitePrototypeHeader />
           <div css={STYLES_MIDDLE}>
             <div css={STYLES_CARD}>
-              <img
+              <img css={STYLES_CARD_IMAGE} src="/static/social-github-dark.jpg" />
-                css={STYLES_CARD_IMAGE}
-                src="/static/social-github-dark.jpg"
-              />
               <p css={STYLES_CARD_PARAGRAPH}>
-                Store your files, turn them into collections, and share them
+                Store your files, turn them into collections, and share them with the world — with{" "}
-                with the world — with{" "}
+                <a css={STYLES_LINK} href="https://github.com/filecoin-project/slate" target="_blank">
-                <a
-                  css={STYLES_LINK}
-                  href="https://github.com/filecoin-project/slate"
-                  target="_blank"
-                >
                   Filecoin & Slate
                 </a>
                 .
               </p>
               <div css={STYLES_CARD_ACTIONS}>
                 <div css={STYLES_CARD_ACTIONS_LEFT}>
-                  Try out our alpha testing application v
+                  Try out our alpha testing application v{Constants.values.version} for Filecoin
-                  {Constants.values.version} for Filecoin
                 </div>
                 <div css={STYLES_CARD_ACTIONS_RIGHT}>
-                  <System.ButtonPrimary onClick={() => window.open("/_")}>
+                  <System.ButtonPrimary onClick={() => window.open("/_")}>Use Slate</System.ButtonPrimary>
-                    Use Slate
-                  </System.ButtonPrimary>
                 </div>
               </div>
             </div>

scenes/SceneHome.js

@@ -1,44 +1,12 @@
 import * as React from "react";
-import * as Strings from "~/common/strings";
 import * as Constants from "~/common/constants";
 import * as System from "~/components/system";
-import * as SchemaTable from "~/common/schema-table";
-import * as Data from "~/common/data";
 
 import { css } from "@emotion/react";
 
 import Section from "~/components/core/Section";
 import ScenePage from "~/components/core/ScenePage";
 
-const STYLES_ROW = css`
-  display: flex;
-  margin-top: 24px;
-  width: 100%;
-
-  :first-child {
-    margin-top: 0px;
-  }
-`;
-
-const STYLES_COLUMN = css`
-  display: inline-flex;
-  padding: 0 12px 0 12px;
-  max-width: 25%;
-  width: 100%;
-
-  :first-child {
-    padding: 0 12px 0 0;
-  }
-
-  :last-child {
-    padding: 0 0 0 12px;
-  }
-
-  @media (max-width: 768px) {
-    max-width: 100%;
-  }
-`;
-
 export default class SceneHome extends React.Component {
   state = {
     data: null,
@@ -78,9 +46,7 @@ export default class SceneHome extends React.Component {
     };
 
     // TODO(jim): Refactor later.
-    const slateButtons = [
+    const slateButtons = [{ name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" }];
-      { name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" },
-    ];
 
     // TODO(jim): Refactor later.
     const data = {
@@ -104,7 +70,6 @@ export default class SceneHome extends React.Component {
           name: "Network",
           type: "NETWORK_TYPE",
           width: "100%",
-          tooltip: "This data is publicly available to share on the internet!",
         },
       ],
       rows: this.props.viewer.library[0].children.map((each) => {
@@ -156,11 +121,7 @@ export default class SceneHome extends React.Component {
         />
         <System.H1 style={{ marginTop: 48 }}>Home</System.H1>
         {this.props.viewer.addresses[0] ? (
-          <Section
+          <Section title="Wallet addresses" buttons={walletButtons} onAction={this.props.onAction}>
-            title="Wallet addresses"
-            buttons={walletButtons}
-            onAction={this.props.onAction}
-          >
             <System.Table
               data={wallet}
               name="transaction"
@@ -170,11 +131,7 @@ export default class SceneHome extends React.Component {
           </Section>
         ) : null}
 
-        <Section
+        <Section title="Slates" buttons={slateButtons} onAction={this.props.onAction}>
-          title="Slates"
-          buttons={slateButtons}
-          onAction={this.props.onAction}
-        >
           <System.Table
             data={slates}
             name="slate"
@@ -184,11 +141,7 @@ export default class SceneHome extends React.Component {
         </Section>
 
         {this.props.viewer.library[0] ? (
-          <Section
+          <Section title="Recent data" buttons={dataButtons} onAction={this.props.onAction}>
-            title="Recent data"
-            buttons={dataButtons}
-            onAction={this.props.onAction}
-          >
             <System.Table
               data={data}
               name="data"

scenes/SceneSettingsDeveloper.js

@@ -14,17 +14,25 @@ const STYLES_KEY = css`
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
+  width: 100%;
+  max-width: 488px;
+  background-color: ${Constants.system.black};
+  color: ${Constants.system.white};
+  border: 4px solid ${Constants.system.black};
+  border-radius: 52px;
 `;
 
 const STYLES_KEY_LEFT = css`
-  flex-shrink: 0;
+  min-width: 10%;
+  width: 100%;
   font-family: ${Constants.font.code};
+  padding: 12px 16px 12px 16px;
+  font-size: 11px;
 `;
 
 const STYLES_KEY_RIGHT = css`
   padding-left: 24px;
-  min-width: 10%;
+  flex-shrink: 0;
-  width: 100%;
 `;
 
 const STYLES_CIRCLE_BUTTON = css`
@@ -35,10 +43,16 @@ const STYLES_CIRCLE_BUTTON = css`
   align-items: center;
   justify-content: center;
   user-select: none;
-  background: ${Constants.system.black};
+  background: ${Constants.system.white};
-  color: ${Constants.system.white};
+  color: ${Constants.system.black};
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
   cursor: pointer;
+  transition: 200ms ease all;
+
+  :hover {
+    background: ${Constants.system.brand};
+    color: ${Constants.system.white};
+  }
 `;
 
 class Key extends React.Component {
@@ -48,6 +62,10 @@ class Key extends React.Component {
     this.setState({ visible: !this.state.visible });
   };
 
+  _handleDelete = async (id) => {
+    await this.props.onDelete(id);
+  };
+
   render() {
     return (
       <div css={STYLES_KEY}>
@@ -61,12 +79,11 @@ class Key extends React.Component {
             css={STYLES_CIRCLE_BUTTON}
             onClick={this._handleToggleVisible}
             style={{
-              marginRight: 16,
+              marginRight: 12,
-              backgroundColor: this.state.visible ? null : Constants.system.brand,
             }}>
             <SVG.Privacy height="16px" />
           </span>
-          <span css={STYLES_CIRCLE_BUTTON} onClick={() => this.props.onDelete(this.props.data.id)}>
+          <span css={STYLES_CIRCLE_BUTTON} onClick={() => this._handleDelete(this.props.data.id)}>
             <SVG.Dismiss height="16px" />
           </span>
         </div>