misc style and bug fixes

2024-11-23 14:07:20 +03:00 · 2020-09-27 13:11:04 -07:00 · 2020-09-27 13:11:04 -07:00 · fa86bd6b66
commit fa86bd6b66
parent 193f824429
13 changed files with 107 additions and 54 deletions
--- a/common/constants.js
+++ b/common/constants.js
@ -7,9 +7,10 @@ export const sizes = {
  mobile: 768,
  navigation: 288,
  sidebar: 416,
+  mobileSidebar: 60,
  header: 72,
  tablet: 960,
-  desktop: 1440,
+  desktop: 1024,
 };

 export const system = {
--- a/common/navigation-data.js
+++ b/common/navigation-data.js
@ -50,7 +50,7 @@ const constructSlatesTreeForNavigation = (slates) => {
    return {
      ...s,
      slateId: s.id,
-      name: s.data.name || s.slatename,
+      name: Strings.getPresentationSlateName(s),
      pageTitle: `Viewing ${s.slatename}`,
      decorator: "SLATE",
      ignore: true,
--- a/components/core/DataView.js
+++ b/components/core/DataView.js
@ -116,10 +116,19 @@ const STYLES_ACTION_BAR = css`
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 0 1px ${Constants.system.lightBorder} inset,
-    0 0 40px 0 ${Constants.system.shadow};
+    0 0 4px 2px ${Constants.system.shadow};
  border-radius: 4px;
  padding: 12px 32px;
-  background-color: rgba(248, 248, 248, 0.75);
+  box-sizing: border-box;
+  background-color: ${Constants.system.foreground};
+  position: fixed;
+  bottom: 12px;
+  width: calc(100vw - ${Constants.sizes.sidebar}px + 32px);
+  max-width: ${Constants.sizes.desktop}px;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    width: calc(100vw - ${Constants.sizes.mobileSidebar}px - 64px);
+  }
 `;

 const STYLES_RIGHT = css`
@ -137,6 +146,10 @@ const STYLES_LEFT = css`

 const STYLES_FILES_SELECTED = css`
  font-family: ${Constants.font.semiBold};
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    display: none;
+  }
 `;

 const STYLES_ICON_ELEMENT = css`
@ -883,20 +896,19 @@ export default class DataView extends React.Component {
        return {
          ...each,
          checkbox: (
-            <div
-              style={{
-                margin: "12px 0",
-                opacity: numChecked > 0 || this.state.hover === index ? 1 : 0,
-              }}
-            >
            <CheckBox
              name={this.state.startIndex + index}
              value={!!this.state.checked[this.state.startIndex + index]}
              onChange={this._handleCheckBox}
              boxStyle={{ height: 16, width: 16 }}
-                style={{ position: "relative", right: 3 }}
+              style={{
+                position: "relative",
+                right: 3,
+                margin: "12px 0",
+                opacity:
+                  numChecked > 0 || this.state.hover === index ? "100%" : "0%",
+              }}
            />
-            </div>
          ),
          name: (
            <div
--- a/components/core/Profile.js
+++ b/components/core/Profile.js
@ -1,5 +1,6 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
+import * as Strings from "~/common/strings";

 import { css } from "@emotion/react";
 import { ProcessedText } from "~/components/system/components/Typography";
@ -58,7 +59,7 @@ export default class Profile extends React.Component {
          style={{ backgroundImage: `url('${data.data.photo}')` }}
        />
        <br />
-        <div css={STYLES_NAME}>{data.data.name || data.username}</div>
+        <div css={STYLES_NAME}>{Strings.getPresentationName(data)}</div>
        <br />
        {data.data.body ? (
          <React.Fragment>
--- a/components/core/ScenePage.js
+++ b/components/core/ScenePage.js
@ -15,7 +15,7 @@ const STYLES_SCENE = css`
 `;

 const STYLES_CONTENT = css`
-  max-width: 1024px;
+  max-width: ${Constants.sizes.desktop}px;
  margin: 0 auto;
 `;

--- a/components/core/SlateMediaObjectPreview.js
+++ b/components/core/SlateMediaObjectPreview.js
@ -17,7 +17,7 @@ const STYLES_IMAGE = css`
 const STYLES_ENTITY = css`
  height: 100%;
  width: 100%;
-  border: 1px solid ${Constants.system.border};
+  border: 1px solid ${Constants.system.lightBorder};
  font-size: 24px;
  display: flex;
  flex-direction: column;
--- a/components/core/SlatePicker.js
+++ b/components/core/SlatePicker.js
@ -28,7 +28,7 @@ const STYLES_SLATE_LINE = css`
  color: ${Constants.system.darkGray};

  :hover {
-    color: ${Constants.system.black} !important;
+    color: ${Constants.system.grayBlack};
  }
 `;

@ -58,6 +58,7 @@ export class SlatePicker extends React.Component {
        <div css={STYLES_SLATE_LIST} style={this.props.style}>
          {this.props.slates.map((slate) => (
            <div
+              key={slate.id}
              css={STYLES_SLATE_LINE}
              onClick={() => this.props.onAdd(slate)}
            >
@ -95,7 +96,7 @@ export class SlatePicker extends React.Component {
                    : "inherit",
                }}
              >
-                {slate.data.name || slate.slatename}
+                {Strings.getPresentationSlateName(slate)}
              </div>
            </div>
          ))}
--- a/components/core/SlatePreviewBlock.js
+++ b/components/core/SlatePreviewBlock.js
@ -49,7 +49,7 @@ const STYLES_ITEM_BOX = css`
  display: flex;
  align-items: center;
  justify-content: center;
-  box-shadow: 0px 0px 0px 1px rgba(229, 229, 229, 0.5) inset;
+  box-shadow: 0px 0px 0px 1px ${Constants.system.lightBorder} inset;
  cursor: pointer;

  @media (max-width: ${Constants.sizes.mobile}px) {
@ -87,7 +87,7 @@ const STYLES_ITEM_BOX_SMALL = css`
  display: flex;
  align-items: center;
  justify-content: center;
-  box-shadow: 0px 0px 0px 1px rgba(229, 229, 229, 0.5) inset;
+  box-shadow: 0px 0px 0px 1px ${Constants.system.lightBorder} inset;
 `;

 const STYLES_EMPTY_BOX_SMALL = css`
@ -159,7 +159,7 @@ const STYLES_BLOCK = css`
  font-size: 12px;
  text-align: left;
  margin: 24px auto 48px auto;
-  max-width: 1024px;
+  max-width: ${Constants.sizes.desktop}px;
  cursor: pointer;
 `;

@ -346,8 +346,8 @@ export default class SlatePreviewBlock extends React.Component {
              <div
                css={STYLES_TAG}
                style={{
-                  color: "rgba(0,0,0,0.25)",
-                  borderColor: "rgba(0,0,0,0.25)",
+                  color: Constants.system.darkGray,
+                  borderColor: Constants.system.darkGray,
                }}
              >
                Private
--- a/components/core/viewers/GlobalViewerCID.js
+++ b/components/core/viewers/GlobalViewerCID.js
@ -61,7 +61,7 @@ const STYLES_BOX = css`
  padding: 0;

  :hover {
-    background-color: ${Constants.system.black};
+    background-color: ${Constants.system.gray};
  }
 `;

--- a/components/core/viewers/GlobalViewerCIDSidebarSlates.js
+++ b/components/core/viewers/GlobalViewerCIDSidebarSlates.js
@ -5,7 +5,10 @@ import * as Constants from "~/common/constants";
 import * as Actions from "~/common/actions";

 import { css } from "@emotion/react";
-import { LoaderSpinner } from "~/components/system/components/Loaders";
+import {
+  LoaderSpinner,
+  LoaderCircles,
+} from "~/components/system/components/Loaders";
 import { SlatePicker } from "~/components/core/SlatePicker";
 import { dispatchCustomEvent } from "~/common/custom-events";

@ -58,7 +61,7 @@ const STYLES_META_DETAILS = css`
 `;

 const STYLES_ACTIONS = css`
-  color: ${Constants.system.darkGray};
+  color: ${Constants.system.grayBlack};
  border: 1px solid ${Constants.system.gray};
  border-radius: 4px;
  background-color: ${Constants.system.white};
@ -148,24 +151,28 @@ export default class GlobalViewerCIDSidebarSlates extends React.Component {
    }
  };

-  _handleCopy = (copyValue) => {
-    this.setState({ copyValue }, () => {
+  _handleCopy = (copyValue, loading) => {
+    this.setState({ copyValue, loading }, () => {
      this._ref.select();
      document.execCommand("copy");
    });
+    setTimeout(() => {
+      this.setState({ loading: false });
+    }, 10000);
  };

  _handleDelete = async (cid) => {
+    this.setState({ loading: "deleting" });
    if (
      !window.confirm(
        "Are you sure you want to delete this? It will be removed from your Slates too."
      )
    ) {
+      this.setState({ loading: false });
      return;
    }

    const response = await Actions.deleteBucketItem({ cid });
-    console.log(response);
    if (!response) {
      dispatchCustomEvent({
        name: "create-alert",
@ -176,6 +183,7 @@ export default class GlobalViewerCIDSidebarSlates extends React.Component {
          },
        },
      });
+      this.setState({ loading: false });
      return;
    }
    if (response.error) {
@ -183,13 +191,11 @@ export default class GlobalViewerCIDSidebarSlates extends React.Component {
        name: "create-alert",
        detail: { alert: { decorator: response.decorator } },
      });
+      this.setState({ loading: false });
      return;
    }
-
-    this.props.onClose();
-
    await this.props.onRehydrate();
-
+    this.setState({ loading: false });
    dispatchCustomEvent({
      name: "remote-update-carousel",
      detail: {},
@ -215,13 +221,25 @@ export default class GlobalViewerCIDSidebarSlates extends React.Component {
          </div>
        </div>
        <div css={STYLES_ACTIONS}>
-          <div css={STYLES_ACTION} onClick={() => this._handleCopy(cid)}>
+          <div
+            css={STYLES_ACTION}
+            onClick={() => this._handleCopy(cid, "cidCopying")}
+          >
            <SVG.CopyAndPaste height="24px" />
-            <span style={{ marginLeft: 16 }}>Copy file CID</span>
+            <span style={{ marginLeft: 16 }}>
+              {this.state.loading === "cidCopying"
+                ? "Copied!"
+                : "Copy file CID"}
+            </span>
          </div>
-          <div css={STYLES_ACTION} onClick={() => this._handleCopy(url)}>
+          <div
+            css={STYLES_ACTION}
+            onClick={() => this._handleCopy(url, "urlCopying")}
+          >
            <SVG.DeepLink height="24px" />
-            <span style={{ marginLeft: 16 }}>Copy link</span>
+            <span style={{ marginLeft: 16 }}>
+              {this.state.loading === "urlCopying" ? "Copied!" : "Copy link"}
+            </span>
          </div>
          {/* <div css={STYLES_ACTION} onClick={this.props.onDownload}>
            <SVG.Download height="24px" />
@ -229,7 +247,13 @@ export default class GlobalViewerCIDSidebarSlates extends React.Component {
          </div> */}
          <div css={STYLES_ACTION} onClick={() => this._handleDelete(cid)}>
            <SVG.Trash height="24px" />
+            {this.state.loading === "deleting" ? (
+              <LoaderSpinner
+                style={{ height: 20, width: 20, marginLeft: 16 }}
+              />
+            ) : (
              <span style={{ marginLeft: 16 }}>Delete</span>
+            )}
          </div>
        </div>
        <div css={STYLES_SECTION_HEADER}>Connected Slates</div>
--- a/components/sidebars/SidebarAddFileToBucket.js
+++ b/components/sidebars/SidebarAddFileToBucket.js
@ -125,7 +125,7 @@ export default class SidebarAddFileToBucket extends React.Component {
              {" "}
              to{" "}
              <strong>
-                {this.props.current.data.name || this.props.current.slatename}
+                {Strings.getPresentationSlateName(this.props.current)}
              </strong>
            </span>
          ) : (
--- a/components/system/components/GlobalCarousel.js
+++ b/components/system/components/GlobalCarousel.js
@ -172,6 +172,7 @@ export class GlobalCarousel extends React.Component {
  };

  _handleNext = () => {
+    if (!this.state.slides) return;
    const index = (this.state.index + 1) % this.state.slides.length;
    this.setState({ index, loading: false, saving: false });

@ -186,6 +187,7 @@ export class GlobalCarousel extends React.Component {
  };

  _handlePrevious = () => {
+    if (!this.state.slides) return;
    const index =
      (this.state.index + this.state.slides.length - 1) %
      this.state.slides.length;
--- a/scenes/SceneLogs.js
+++ b/scenes/SceneLogs.js
@ -21,7 +21,8 @@ const TAB_GROUP = [
            color: Constants.system.white,
            position: "relative",
            marginLeft: 8,
-          }}>
+          }}
+        >
          14
        </Pill>
      </React.Fragment>
@ -38,7 +39,8 @@ const TAB_GROUP = [
            color: Constants.system.white,
            position: "relative",
            marginLeft: 8,
-          }}>
+          }}
+        >
          14
        </Pill>
      </React.Fragment>
@ -55,7 +57,8 @@ const TAB_GROUP = [
            color: Constants.system.white,
            position: "relative",
            marginLeft: 8,
-          }}>
+          }}
+        >
          56
        </Pill>
      </React.Fragment>
@ -72,7 +75,8 @@ const TAB_GROUP = [
            color: Constants.system.white,
            position: "relative",
            marginLeft: 8,
-          }}>
+          }}
+        >
          56
        </Pill>
      </React.Fragment>
@ -81,7 +85,7 @@ const TAB_GROUP = [
 ];

 const STYLES_SCENE = css`
-  max-width: 1024px;
+  max-width: ${Constants.sizes.desktop}px;
  width: 100%;
  padding: 24px 0 128px 0;
 `;
@ -129,7 +133,8 @@ export default class SceneLogs extends React.Component {
                    color: Constants.system.white,
                    position: "relative",
                    marginLeft: 8,
-                  }}>
+                  }}
+                >
                  14
                </Pill>
              </React.Fragment>
@ -145,7 +150,8 @@ export default class SceneLogs extends React.Component {
                type: "DOWNLOAD",
                value: "CSV_LOGS_ALL",
              },
-            ]}>
+            ]}
+          >
            <div css={STYLES_LOGS}>
              message in mempool has too high of a nonce (5000 > 4686) <br />
              message in mempool has too high of a nonce (5000 > 4686) <br />
@ -220,7 +226,8 @@ export default class SceneLogs extends React.Component {
                    color: Constants.system.white,
                    position: "relative",
                    marginLeft: 8,
-                  }}>
+                  }}
+                >
                  14
                </Pill>
              </React.Fragment>
@ -236,7 +243,8 @@ export default class SceneLogs extends React.Component {
                type: "DOWNLOAD",
                value: "CSV_LOGS_NODE",
              },
-            ]}>
+            ]}
+          >
            <div css={STYLES_LOGS}>
              message in mempool has too high of a nonce (5000 > 4686) <br />
              message in mempool has too high of a nonce (5000 > 4686) <br />
@ -311,7 +319,8 @@ export default class SceneLogs extends React.Component {
                    color: Constants.system.white,
                    position: "relative",
                    marginLeft: 8,
-                  }}>
+                  }}
+                >
                  56
                </Pill>
              </React.Fragment>
@ -327,7 +336,8 @@ export default class SceneLogs extends React.Component {
                type: "DOWNLOAD",
                value: "CSV_LOGS_SEALING",
              },
-            ]}>
+            ]}
+          >
            <div css={STYLES_LOGS}>
              message in mempool has too high of a nonce (5000 > 4686) <br />
              message in mempool has too high of a nonce (5000 > 4686) <br />
@ -402,7 +412,8 @@ export default class SceneLogs extends React.Component {
                    color: Constants.system.white,
                    position: "relative",
                    marginLeft: 8,
-                  }}>
+                  }}
+                >
                  56
                </Pill>
              </React.Fragment>
@ -418,7 +429,8 @@ export default class SceneLogs extends React.Component {
                type: "DOWNLOAD",
                value: "CSV_LOGS_MINING",
              },
-            ]}>
+            ]}
+          >
            <div css={STYLES_LOGS}>
              message in mempool has too high of a nonce (5000 > 4686) <br />
              message in mempool has too high of a nonce (5000 > 4686) <br />