From 8f73ccc61238401274e4ba7f2f2718c5397e77e2 Mon Sep 17 00:00:00 2001 From: Martina Date: Fri, 27 Nov 2020 15:02:16 -0800 Subject: [PATCH] many misc fixes --- components/core/Alert.js | 2 +- components/core/CarouselSidebarData.js | 1 + components/core/DataView.js | 43 +++++++--- components/core/ScenePage.js | 2 +- components/core/SearchModal.js | 7 +- components/core/SlateLayout.js | 2 +- components/core/SlateMediaObjectPreview.js | 12 ++- components/core/SlatePicker.js | 83 ++++++++++--------- components/core/SlatePreviewBlock.js | 12 +-- .../system/components/GlobalCarousel.js | 3 - 10 files changed, 90 insertions(+), 77 deletions(-) diff --git a/components/core/Alert.js b/components/core/Alert.js index 98ad5d01..b1f95ffb 100644 --- a/components/core/Alert.js +++ b/components/core/Alert.js @@ -13,7 +13,7 @@ const STYLES_ALERT = ` width: 100%; color: ${Constants.system.white}; min-height: 48px; - padding: 12px 32px; + padding: 12px 56px; display: flex; flex-wrap: wrap; align-items: center; diff --git a/components/core/CarouselSidebarData.js b/components/core/CarouselSidebarData.js index ef578562..031b7800 100644 --- a/components/core/CarouselSidebarData.js +++ b/components/core/CarouselSidebarData.js @@ -55,6 +55,7 @@ const STYLES_SIDEBAR = css` align-items: flex-start; justify-content: space-between; background-color: rgba(20, 20, 20, 0.8); + ${STYLES_NO_VISIBLE_SCROLL} @supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) { -webkit-backdrop-filter: blur(75px); diff --git a/components/core/DataView.js b/components/core/DataView.js index 73b9f22e..2cc5850f 100644 --- a/components/core/DataView.js +++ b/components/core/DataView.js @@ -118,11 +118,11 @@ const STYLES_ACTION_BAR = css` background-color: ${Constants.system.foreground}; position: fixed; bottom: 12px; - width: calc(100vw - ${Constants.sizes.sidebar}px + 32px); - max-width: ${Constants.sizes.desktop}px; + left: 10vw; + width: 80vw; @media (max-width: ${Constants.sizes.mobile}px) { - width: calc(100vw - 48px); + display: none; } `; @@ -155,20 +155,19 @@ const STYLES_COPY_INPUT = css` const STYLES_IMAGE_GRID = css` display: grid; - grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); - margin: 0 -27px; + grid-template-columns: repeat(5, 1fr); + grid-column-gap: 20px; + grid-row-gap: 20px; + width: 100%; @media (max-width: ${Constants.sizes.mobile}px) { - display: grid; - grid-template-columns: 1fr 1fr; - margin: 0px -12px; + grid-template-columns: repeat(2, 1fr); } `; const STYLES_IMAGE_BOX = css` - width: 160px; - height: 160px; - margin: 27px; + width: 100%; + height: 100%; display: flex; align-items: center; justify-content: center; @@ -178,8 +177,6 @@ const STYLES_IMAGE_BOX = css` position: relative; @media (max-width: ${Constants.sizes.mobile}px) { - width: 144px; - height: 144px; margin: 12px auto; } `; @@ -200,20 +197,36 @@ export default class DataView extends React.Component { view: "grid", viewLimit: 40, scrollDebounce: false, + imageSize: 100, }; async componentDidMount() { + this.calculateWidth(); + this.debounceInstance = Window.debounce(this.calculateWidth, 200); if (!this._mounted) { this._mounted = true; window.addEventListener("scroll", this._handleCheckScroll); + window.addEventListener("resize", this.debounceInstance); } } componentWillUnmount() { this._mounted = false; window.removeEventListener("scroll", this._handleCheckScroll); + window.removeEventListener("resize", this.debounceInstance); } + calculateWidth = () => { + let windowWidth = window.innerWidth; + let imageSize; + if (windowWidth < Constants.sizes.mobile) { + imageSize = (windowWidth - 2 * 24 - 20) / 2; + } else { + imageSize = (windowWidth - 2 * 56 - 4 * 20) / 5; + } + this.setState({ imageSize }); + }; + _handleScroll = (e) => { const windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight; @@ -402,6 +415,10 @@ export default class DataView extends React.Component {
this._handleSelect(i)} onMouseEnter={() => this.setState({ hover: i })} onMouseLeave={() => this.setState({ hover: null })} diff --git a/components/core/ScenePage.js b/components/core/ScenePage.js index 418aaea0..8a0c5fe6 100644 --- a/components/core/ScenePage.js +++ b/components/core/ScenePage.js @@ -6,7 +6,7 @@ import { css } from "@emotion/core"; const STYLES_SCENE = css` flex-shrink: 0; width: 100%; - padding: 128px 32px 128px 32px; + padding: 128px 56px 128px 56px; display: block; @media (max-width: ${Constants.sizes.mobile}px) { diff --git a/components/core/SearchModal.js b/components/core/SearchModal.js index eae4135f..a5fcff2f 100644 --- a/components/core/SearchModal.js +++ b/components/core/SearchModal.js @@ -197,7 +197,8 @@ const STYLES_PREVIEW_TEXT = css` font-family: ${Constants.font.medium}; font-size: ${Constants.typescale.lvlN1}; color: ${Constants.system.textGray}; - margin: 4px 0; + margin: 4px 16px; + word-break: break-word; `; const STYLES_EMPTY_SLATE_PREVIEW = css` @@ -670,8 +671,10 @@ export class SearchModal extends React.Component { let results; if (this.state.results && this.state.results.length) { results = this.state.results; - } else { + } else if (!this.state.inputValue || !this.state.inputValue.length) { results = this.state.defaultResults; + } else { + return; } if (e.keyCode === 27) { this._handleHide(); diff --git a/components/core/SlateLayout.js b/components/core/SlateLayout.js index 0cc227b3..7faaf6e9 100644 --- a/components/core/SlateLayout.js +++ b/components/core/SlateLayout.js @@ -1279,7 +1279,7 @@ export class SlateLayout extends React.Component { type={this.state.items[i].type} url={this.state.items[i].url} title={this.state.items[i].title || this.state.items[i].name} - previewImage={this.state.previewImage} + previewImage={this.state.items[i].previewImage} height={pos.h * unit} width={pos.w * unit} style={{ diff --git a/components/core/SlateMediaObjectPreview.js b/components/core/SlateMediaObjectPreview.js index 8bb5e529..744eafe6 100644 --- a/components/core/SlateMediaObjectPreview.js +++ b/components/core/SlateMediaObjectPreview.js @@ -186,17 +186,15 @@ export default class SlateMediaObjectPreview extends React.Component { style={this.props.previewPanel ? { color: "#bfbfbf" } : null} /> ); - + console.log(this.props.previewImage); return ( {this.props.previewImage ? ( - ) : ( diff --git a/components/core/SlatePicker.js b/components/core/SlatePicker.js index fd8005fe..00cb13c9 100644 --- a/components/core/SlatePicker.js +++ b/components/core/SlatePicker.js @@ -122,50 +122,55 @@ export class SlatePicker extends React.Component { />
Create new slate
-
-
- {this.props.slates.map((slate) => ( + + {this.props.slates.length ? ( + +
this.props.onAdd(slate)} + css={STYLES_SLATE_LIST} + style={{ border: this.props.dark ? "1px solid #3c3c3c" : "none" }} > -
- {this.props.loading && this.props.loading === slate.id ? ( - - ) : selected[slate.id] ? ( - ( +
this.props.onAdd(slate)} + > +
+ {this.props.loading && this.props.loading === slate.id ? ( + + ) : selected[slate.id] ? ( + + ) : ( + + )} +
+
- ) : ( - - )} -
-
- {Strings.getPresentationSlateName(slate)} -
+ > + {Strings.getPresentationSlateName(slate)} +
+
+ ))}
- ))} -
+ + ) : null} ); } diff --git a/components/core/SlatePreviewBlock.js b/components/core/SlatePreviewBlock.js index 45462151..462e04b9 100644 --- a/components/core/SlatePreviewBlock.js +++ b/components/core/SlatePreviewBlock.js @@ -2,6 +2,7 @@ import * as React from "react"; import * as Constants from "~/common/constants"; import * as SVG from "~/common/svg"; import * as Strings from "~/common/strings"; +import * as Window from "~/common/window"; import { css } from "@emotion/core"; import { Boundary } from "~/components/system/components/fragments/Boundary"; @@ -428,7 +429,7 @@ export default class SlatePreviewBlocks extends React.Component { componentDidMount = () => { this.calculateWidth(); - this.debounceInstance = this.debounce(this.calculateWidth, 350); + this.debounceInstance = Window.debounce(this.calculateWidth, 350); window.addEventListener("resize", this.debounceInstance); }; @@ -436,15 +437,6 @@ export default class SlatePreviewBlocks extends React.Component { window.removeEventListener("resize", this.debounceInstance); }; - debounce = (fn, time) => { - let timer; - - return () => { - window.clearTimeout(timer); - timer = window.setTimeout(fn, time); - }; - }; - calculateWidth = () => { let windowWidth = window.innerWidth; if (windowWidth > Constants.sizes.mobile) { diff --git a/components/system/components/GlobalCarousel.js b/components/system/components/GlobalCarousel.js index 6513c3a7..78139de4 100644 --- a/components/system/components/GlobalCarousel.js +++ b/components/system/components/GlobalCarousel.js @@ -164,15 +164,12 @@ export class GlobalCarousel extends React.Component { _handleSetLoading = (e) => this.setState({ ...e.detail }); _handleOpen = (e) => { - console.log("handle open"); - console.log(e.detail.index); let carouselType = !this.props.current || (this.props.current && (this.props.current.decorator === "FOLDER" || this.props.current.decorator === "HOME")) ? "data" : "slate"; - console.log(carouselType); this.setState({ carouselType: carouselType, visible: true,