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

2024-12-23 09:01:56 +03:00 · 2020-08-08 15:04:17 -07:00 · 2020-08-08 15:04:17 -07:00 · dd47556452
commit dd47556452
parent 7b0941b950
12 changed files with 142 additions and 210 deletions
--- a/common/constants.js
+++ b/common/constants.js
@ -4,6 +4,7 @@ export const values = {
 };

 export const sizes = {
+  mobile: 768,
  navigation: 288,
  sidebar: 416,
  header: 72,
--- a/components/core/ApplicationHeader.js
+++ b/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(
-    to bottom,
-    rgba(255, 255, 255, 1) 50%,
-    rgba(255, 255, 255, 0) 100%
-  );
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    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 =
-      this.props.currentIndex === 0 || this.props.history.length < 2;
+    const isBackDisabled = this.props.currentIndex === 0 || this.props.history.length < 2;

    const isForwardDisabled =
-      this.props.currentIndex === this.props.history.length - 1 ||
-      this.props.history.length < 2;
+      this.props.currentIndex === this.props.history.length - 1 || this.props.history.length < 2;

    return (
      <header css={STYLES_APPLICATION_HEADER}>
        <div css={STYLES_LEFT}>
          <span
            css={STYLES_ICON_ELEMENT}
-            style={
-              isBackDisabled
-                ? { cursor: "not-allowed", color: Constants.system.border }
-                : null
-            }
-            onClick={isBackDisabled ? () => {} : this.props.onBack}
-          >
+            style={isBackDisabled ? { cursor: "not-allowed", color: Constants.system.border } : null}
+            onClick={isBackDisabled ? () => {} : this.props.onBack}>
            <Tooltip animation="fade" animateFill={false} title="Go back">
-              <SVG.NavigationArrow
-                height="16px"
-                style={{ transform: `rotate(180deg)` }}
-              />
+              <SVG.NavigationArrow height="16px" style={{ transform: `rotate(180deg)` }} />
            </Tooltip>
          </span>
          <span
            css={STYLES_ICON_ELEMENT}
-            style={
-              isForwardDisabled
-                ? { cursor: "not-allowed", color: Constants.system.border }
-                : null
-            }
-            onClick={isForwardDisabled ? () => {} : this.props.onForward}
-          >
+            style={isForwardDisabled ? { 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>
--- a/components/core/ApplicationLayout.js
+++ b/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 HEADER_HEIGHT = 72;
+const STYLES_SCROLL = css`
+  -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`
-  -webkit-overflow-scrolling: touch;
+const STYLES_BODY_WEB = css`
+  display: block;
  height: 100%;
  min-height: 10%;
  width: 100%;

-  overflow-y: scroll;
-  scrollbar-width: none;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
+  ${STYLES_SCROLL}

-  ::-webkit-scrollbar {
-    width: 6px;
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    display: none;
  }
+`;

-  ::-webkit-scrollbar-track {
-    background: ${Constants.system.foreground};
-  }
+const STYLES_BODY_MOBILE = css`
+  display: none;
+  height: 100%;
+  min-height: 10%;
+  width: 100%;
+  padding: 80px 0px 88px 0px;

-  ::-webkit-scrollbar-thumb {
-    background: ${Constants.system.darkGray};
+  ${STYLES_SCROLL}
+
+  @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;
-  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};
-  }
+  ${STYLES_SCROLL}

  @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;
-  scrollbar-width: none;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
+  ${STYLES_SCROLL}

-  ::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: ${Constants.system.foreground};
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: ${Constants.system.darkGray};
+  @media (max-width: 768px) {
+    display: none;
  }
 `;

@ -133,23 +139,29 @@ const STYLES_SIDEBAR_CONTENT = css`

 export default class ApplicationLayout extends React.Component {
  render() {
-    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}>{this.props.children}</div>
-        </div>
-        {this.props.sidebar ? (
-          <div css={STYLES_SIDEBAR}>
+    let sidebarElements = null;
+    if (this.props.sidebar) {
+      sidebarElements = (
+        <React.Fragment>
          <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>
    );
  }
--- a/components/core/ApplicationNavigation.js
+++ b/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;
  }
 `;
--- a/components/core/ScenePage.js
+++ b/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) => {
--- a/components/core/WebsitePrototypeFooter.js
+++ b/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;
  }
 `;
--- a/components/core/WebsitePrototypeHeader.js
+++ b/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
-          css={STYLES_LINK}
-          href="/"
-          style={{ marginRight: 24, fontFamily: Constants.font.codeBold }}
-        >
+        <a css={STYLES_LINK} href="/" style={{ marginRight: 24, fontFamily: Constants.font.codeBold }}>
          Slate {Constants.values.version}
        </a>
        <a css={STYLES_LINK} href="/_/system">
--- a/components/core/WebsitePrototypeHeaderGeneric.js
+++ b/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
-          css={STYLES_LINK}
-          href={`/${props.children}`}
-          style={{ fontFamily: Constants.font.codeBold }}
-        >
+        <a css={STYLES_LINK} href={`/${props.children}`} style={{ fontFamily: Constants.font.codeBold }}>
          {props.children}
        </a>
      </div>
--- a/pages/_/slate.js
+++ b/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
-        title={title}
-        description={description}
-        url={url}
-        image={image}
-      >
+      <WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
        <div css={STYLES_ROOT}>
-          <WebsitePrototypeHeaderGeneric>
-            {this.props.slate.ownername}
-          </WebsitePrototypeHeaderGeneric>
+          <WebsitePrototypeHeaderGeneric>{this.props.slate.ownername}</WebsitePrototypeHeaderGeneric>
          <div css={STYLES_SLATE}>
-            <Slate
-              items={this.props.slate.data.objects}
-              onSelect={this._handleSelect}
-            />
+            <Slate items={this.props.slate.data.objects} onSelect={this._handleSelect} />
          </div>
          <WebsitePrototypeFooter style={{ marginTop: 88 }} />
        </div>
--- a/pages/index.js
+++ b/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 =
-      "The place for all of your assets. Powered by Textile and Filecoin.";
+    const description = "The place for all of your assets. Powered by Textile and Filecoin.";
    const url = "https://slate.host";

    return (
-      <WebsitePrototypeWrapper
-        title={title}
-        description={description}
-        url={url}
-      >
+      <WebsitePrototypeWrapper title={title} description={description} url={url}>
        <div css={STYLES_ROOT}>
          <WebsitePrototypeHeader />
          <div css={STYLES_MIDDLE}>
            <div css={STYLES_CARD}>
-              <img
-                css={STYLES_CARD_IMAGE}
-                src="/static/social-github-dark.jpg"
-              />
+              <img 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
-                with the world — with{" "}
-                <a
-                  css={STYLES_LINK}
-                  href="https://github.com/filecoin-project/slate"
-                  target="_blank"
-                >
+                Store your files, turn them into collections, and share them with the world — with{" "}
+                <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
-                  {Constants.values.version} for Filecoin
+                  Try out our alpha testing application v{Constants.values.version} for Filecoin
                </div>
                <div css={STYLES_CARD_ACTIONS_RIGHT}>
-                  <System.ButtonPrimary onClick={() => window.open("/_")}>
-                    Use Slate
-                  </System.ButtonPrimary>
+                  <System.ButtonPrimary onClick={() => window.open("/_")}>Use Slate</System.ButtonPrimary>
                </div>
              </div>
            </div>
--- a/scenes/SceneHome.js
+++ b/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 = [
-      { name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" },
-    ];
+    const slateButtons = [{ 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
-            title="Wallet addresses"
-            buttons={walletButtons}
-            onAction={this.props.onAction}
-          >
+          <Section 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
-          title="Slates"
-          buttons={slateButtons}
-          onAction={this.props.onAction}
-        >
+        <Section 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
-            title="Recent data"
-            buttons={dataButtons}
-            onAction={this.props.onAction}
-          >
+          <Section title="Recent data" buttons={dataButtons} onAction={this.props.onAction}>
            <System.Table
              data={data}
              name="data"
--- a/scenes/SceneSettingsDeveloper.js
+++ b/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%;
-  width: 100%;
+  flex-shrink: 0;
 `;

 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};
-  color: ${Constants.system.white};
+  background: ${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,
-              backgroundColor: this.state.visible ? null : Constants.system.brand,
+              marginRight: 12,
            }}>
            <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>