many misc fixes

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;

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);

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 {
                 <div
                   key={each.id}
                   css={STYLES_IMAGE_BOX}
+                  style={{
+                    width: this.state.imageSize,
+                    height: this.state.imageSize,
+                  }}
                   onClick={() => this._handleSelect(i)}
                   onMouseEnter={() => this.setState({ hover: i })}
                   onMouseLeave={() => this.setState({ hover: null })}

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) {

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();

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={{

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 (
       <React.Fragment>
         {this.props.previewImage ? (
-          <img
-            src={this.props.previewImage}
-            alt=""
-            css={STYLES_IMAGE}
+          <div
+            css={STYLES_IMAGE_CONTAINER}
             style={{
-              maxWidth: "100%",
-              maxHeight: "100%",
+              backgroundImage: `url(${this.props.previewImage})`,
+              ...this.props.imageStyle,
             }}
           />
         ) : (

components/core/SlatePicker.js

@@ -122,50 +122,55 @@ export class SlatePicker extends React.Component {
           />
           <div>Create new slate</div>
         </div>
-        <br />
-        <div
-          css={STYLES_SLATE_LIST}
-          style={{ border: this.props.dark ? "1px solid #3c3c3c" : "none" }}
-        >
-          {this.props.slates.map((slate) => (
+
+        {this.props.slates.length ? (
+          <React.Fragment>
+            <br />
             <div
-              key={slate.id}
-              css={this.props.dark ? STYLES_SLATE_LINE_DARK : STYLES_SLATE_LINE}
-              onClick={() => this.props.onAdd(slate)}
+              css={STYLES_SLATE_LIST}
+              style={{ border: this.props.dark ? "1px solid #3c3c3c" : "none" }}
             >
-              <div css={STYLES_ICON_BOX}>
-                {this.props.loading && this.props.loading === slate.id ? (
-                  <LoaderSpinner style={{ height: 20, width: 20, margin: "2px 8px 2px 2px" }} />
-                ) : selected[slate.id] ? (
-                  <SVG.Slate
-                    height="24px"
+              {this.props.slates.map((slate) => (
+                <div
+                  key={slate.id}
+                  css={this.props.dark ? STYLES_SLATE_LINE_DARK : STYLES_SLATE_LINE}
+                  onClick={() => this.props.onAdd(slate)}
+                >
+                  <div css={STYLES_ICON_BOX}>
+                    {this.props.loading && this.props.loading === slate.id ? (
+                      <LoaderSpinner style={{ height: 20, width: 20, margin: "2px 8px 2px 2px" }} />
+                    ) : selected[slate.id] ? (
+                      <SVG.Slate
+                        height="24px"
+                        style={{
+                          marginRight: 8,
+                          pointerEvents: "none",
+                          color: this.props.dark ? Constants.system.white : Constants.system.black,
+                        }}
+                      />
+                    ) : (
+                      <SVG.PlusCircle
+                        height="24px"
+                        style={{
+                          marginRight: 8,
+                          pointerEvents: "none",
+                        }}
+                      />
+                    )}
+                  </div>
+                  <div
+                    css={this.props.dark ? STYLES_SLATE_NAME_DARK : STYLES_SLATE_NAME}
                     style={{
-                      marginRight: 8,
-                      pointerEvents: "none",
-                      color: this.props.dark ? Constants.system.white : Constants.system.black,
+                      color: selected[slate.id] ? this.props.selectedColor : "inherit",
                     }}
-                  />
-                ) : (
-                  <SVG.PlusCircle
-                    height="24px"
-                    style={{
-                      marginRight: 8,
-                      pointerEvents: "none",
-                    }}
-                  />
-                )}
-              </div>
-              <div
-                css={this.props.dark ? STYLES_SLATE_NAME_DARK : STYLES_SLATE_NAME}
-                style={{
-                  color: selected[slate.id] ? this.props.selectedColor : "inherit",
-                }}
-              >
-                {Strings.getPresentationSlateName(slate)}
-              </div>
+                  >
+                    {Strings.getPresentationSlateName(slate)}
+                  </div>
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
+          </React.Fragment>
+        ) : null}
       </React.Fragment>
     );
   }

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) {

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,