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,