From fa86bd6b6605a6accc1c8f9dfe2a184e0759ab06 Mon Sep 17 00:00:00 2001 From: Martina Date: Sun, 27 Sep 2020 13:11:04 -0700 Subject: [PATCH] misc style and bug fixes --- common/constants.js | 3 +- common/navigation-data.js | 2 +- components/core/DataView.js | 38 +++++++++----- components/core/Profile.js | 3 +- components/core/ScenePage.js | 2 +- components/core/SlateMediaObjectPreview.js | 2 +- components/core/SlatePicker.js | 5 +- components/core/SlatePreviewBlock.js | 10 ++-- components/core/viewers/GlobalViewerCID.js | 2 +- .../viewers/GlobalViewerCIDSidebarSlates.js | 52 ++++++++++++++----- components/sidebars/SidebarAddFileToBucket.js | 2 +- .../system/components/GlobalCarousel.js | 2 + scenes/SceneLogs.js | 38 +++++++++----- 13 files changed, 107 insertions(+), 54 deletions(-) diff --git a/common/constants.js b/common/constants.js index 2defd64f..26dfce6b 100644 --- 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 = { diff --git a/common/navigation-data.js b/common/navigation-data.js index c17ae7cd..7cf09a13 100644 --- 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, diff --git a/components/core/DataView.js b/components/core/DataView.js index 889f85bf..2c23fae7 100644 --- 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: ( -
0 || this.state.hover === index ? 1 : 0, + opacity: + numChecked > 0 || this.state.hover === index ? "100%" : "0%", }} - > - -
+ /> ), name: (

-
{data.data.name || data.username}
+
{Strings.getPresentationName(data)}

{data.data.body ? ( diff --git a/components/core/ScenePage.js b/components/core/ScenePage.js index 1a4d4ce2..14491a4b 100644 --- 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; `; diff --git a/components/core/SlateMediaObjectPreview.js b/components/core/SlateMediaObjectPreview.js index f131adb5..6791090f 100644 --- 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; diff --git a/components/core/SlatePicker.js b/components/core/SlatePicker.js index c0c098eb..f0e702d6 100644 --- 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 {
{this.props.slates.map((slate) => (
this.props.onAdd(slate)} > @@ -95,7 +96,7 @@ export class SlatePicker extends React.Component { : "inherit", }} > - {slate.data.name || slate.slatename} + {Strings.getPresentationSlateName(slate)}
))} diff --git a/components/core/SlatePreviewBlock.js b/components/core/SlatePreviewBlock.js index 77afbfa5..89c8a52a 100644 --- 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 {
Private diff --git a/components/core/viewers/GlobalViewerCID.js b/components/core/viewers/GlobalViewerCID.js index 086b6e53..8b00bfd2 100644 --- 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}; } `; diff --git a/components/core/viewers/GlobalViewerCIDSidebarSlates.js b/components/core/viewers/GlobalViewerCIDSidebarSlates.js index d9f19f6f..0bae9e7a 100644 --- 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 {
-
this._handleCopy(cid)}> +
this._handleCopy(cid, "cidCopying")} + > - Copy file CID + + {this.state.loading === "cidCopying" + ? "Copied!" + : "Copy file CID"} +
-
this._handleCopy(url)}> +
this._handleCopy(url, "urlCopying")} + > - Copy link + + {this.state.loading === "urlCopying" ? "Copied!" : "Copy link"} +
{/*
@@ -229,7 +247,13 @@ export default class GlobalViewerCIDSidebarSlates extends React.Component {
*/}
this._handleDelete(cid)}> - Delete + {this.state.loading === "deleting" ? ( + + ) : ( + Delete + )}
Connected Slates
diff --git a/components/sidebars/SidebarAddFileToBucket.js b/components/sidebars/SidebarAddFileToBucket.js index 508adabc..34b41539 100644 --- a/components/sidebars/SidebarAddFileToBucket.js +++ b/components/sidebars/SidebarAddFileToBucket.js @@ -125,7 +125,7 @@ export default class SidebarAddFileToBucket extends React.Component { {" "} to{" "} - {this.props.current.data.name || this.props.current.slatename} + {Strings.getPresentationSlateName(this.props.current)} ) : ( diff --git a/components/system/components/GlobalCarousel.js b/components/system/components/GlobalCarousel.js index adfbcb98..009c2883 100644 --- 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; diff --git a/scenes/SceneLogs.js b/scenes/SceneLogs.js index 5e3f3f7d..a442a4d8 100644 --- a/scenes/SceneLogs.js +++ b/scenes/SceneLogs.js @@ -21,7 +21,8 @@ const TAB_GROUP = [ color: Constants.system.white, position: "relative", marginLeft: 8, - }}> + }} + > 14 @@ -38,7 +39,8 @@ const TAB_GROUP = [ color: Constants.system.white, position: "relative", marginLeft: 8, - }}> + }} + > 14 @@ -55,7 +57,8 @@ const TAB_GROUP = [ color: Constants.system.white, position: "relative", marginLeft: 8, - }}> + }} + > 56 @@ -72,7 +75,8 @@ const TAB_GROUP = [ color: Constants.system.white, position: "relative", marginLeft: 8, - }}> + }} + > 56 @@ -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 @@ -145,7 +150,8 @@ export default class SceneLogs extends React.Component { type: "DOWNLOAD", value: "CSV_LOGS_ALL", }, - ]}> + ]} + >
message in mempool has too high of a nonce (5000 > 4686)
message in mempool has too high of a nonce (5000 > 4686)
@@ -220,7 +226,8 @@ export default class SceneLogs extends React.Component { color: Constants.system.white, position: "relative", marginLeft: 8, - }}> + }} + > 14 @@ -236,7 +243,8 @@ export default class SceneLogs extends React.Component { type: "DOWNLOAD", value: "CSV_LOGS_NODE", }, - ]}> + ]} + >
message in mempool has too high of a nonce (5000 > 4686)
message in mempool has too high of a nonce (5000 > 4686)
@@ -311,7 +319,8 @@ export default class SceneLogs extends React.Component { color: Constants.system.white, position: "relative", marginLeft: 8, - }}> + }} + > 56 @@ -327,7 +336,8 @@ export default class SceneLogs extends React.Component { type: "DOWNLOAD", value: "CSV_LOGS_SEALING", }, - ]}> + ]} + >
message in mempool has too high of a nonce (5000 > 4686)
message in mempool has too high of a nonce (5000 > 4686)
@@ -402,7 +412,8 @@ export default class SceneLogs extends React.Component { color: Constants.system.white, position: "relative", marginLeft: 8, - }}> + }} + > 56 @@ -418,7 +429,8 @@ export default class SceneLogs extends React.Component { type: "DOWNLOAD", value: "CSV_LOGS_MINING", }, - ]}> + ]} + >
message in mempool has too high of a nonce (5000 > 4686)
message in mempool has too high of a nonce (5000 > 4686)