Merge pull request #406 from filecoin-project/@tarafanlin/slatepreviewblock

update external profile view with new slate preview blocks

components/core/Profile.js

@@ -4,9 +4,10 @@ import * as Strings from "~/common/strings";
 
 import { css } from "@emotion/core";
 import { ProcessedText } from "~/components/system/components/Typography";
+import { SceneUtils } from "three";
 
 import SlatePreviewBlocks from "~/components/core/SlatePreviewBlock";
-import { SceneUtils } from "three";
+import SlatePreviewBlocksExternal from "~/components/core/SlatePreviewBlockExternal";
 
 const STYLES_PROFILE_INTERNAL = css`
   width: 100%;
@@ -17,7 +18,7 @@ const STYLES_PROFILE_INTERNAL = css`
 
 const STYLES_PROFILE = css`
   width: 100%;
-  padding: 80px 64px 0px 64px;
+  padding: 64px 64px 0px 64px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
   flex-shrink: 0;
@@ -30,11 +31,12 @@ const STYLES_PROFILE = css`
 const STYLES_PROFILE_INFO = css`
   display: flex;
   line-height: 1.3;
-  margin: 0 auto;
-  width: 100%;
-  max-width: ${Constants.sizes.desktop}px;
+  width: 50%;
   overflow-wrap: break-word;
   white-space: pre-wrap;
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    width: 100%;
+  }
 `;
 
 const STYLES_PROFILE_INFO_INTERNAL = css`
@@ -98,7 +100,7 @@ const STYLES_NAME = css`
   overflow-wrap: break-word;
   white-space: pre-wrap;
   @media (max-width: ${Constants.sizes.mobile}px) {
-    margin-bottom: 16px;
+    margin-bottom: 8px;
     margin-right: 0;
   }
 `;
@@ -112,9 +114,6 @@ const STYLES_NAME_INTERNAL = css`
   margin-top: 8px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    margin-bottom: 16px;
-  }
 `;
 
 const STYLES_DESCRIPTION = css`
@@ -130,7 +129,7 @@ const STYLES_DESCRIPTION = css`
 const STYLES_STATS = css`
   font-size: ${Constants.typescale.lvl0};
   line-height: 1.5;
-  margin-top: 24px;
+  margin: 12px 0 24px 0;
   display: flex;
   width: 100%;
   flex-wrap: wrap;
@@ -140,9 +139,6 @@ const STYLES_STAT = css`
   margin-right: 16px;
   width: 112px;
   flex-shrink: 0;
-  margin-bottom: 16px;
-  ${"" /* border-left: 1px solid ${Constants.system.darkGray};
-padding-left: 12px; */};
 `;
 
 const STYLES_BUTTON = css`
@@ -167,7 +163,9 @@ const STYLES_FLEX = css`
   display: flex;
   margin-bottom: 12px;
   align-items: baseline;
-  @media (max-width: ${Constants.sizes.mobile}px) {
+  justify-content: space-between;
+  flex-wrap: wrap;
+  @media (max-width: ${Constants.sizes.tablet}px) {
     display: block;
   }
 `;
@@ -193,19 +191,8 @@ export default class Profile extends React.Component {
             <div css={STYLES_INFO_INTERNAL}>
               <div css={STYLES_FLEX}>
                 <div css={STYLES_NAME_INTERNAL}>{Strings.getPresentationName(data)}</div>
+                <div>{this.props.buttons}</div>
               </div>
-
-              {data.data.body ? (
-                <div css={STYLES_DESCRIPTION}>
-                  <ProcessedText text={data.data.body} />
-                </div>
-              ) : null
-              // <div css={STYLES_DESCRIPTION}>
-              //   <ProcessedText text={"Joined Slate Month, Year"} />
-              // </div>
-              }
-
-              <div>{this.props.buttons}</div>
               <div css={STYLES_STATS}>
                 <div css={STYLES_STAT}>
                   <div style={{ color: `${Constants.system.darkGray}` }}>Public data</div>
@@ -220,6 +207,12 @@ export default class Profile extends React.Component {
                 <div style={{ fontFamily: `${Constants.font.semiBold}` }}>0</div>
               </div> */}
               </div>
+
+              {data.data.body ? (
+                <div css={STYLES_DESCRIPTION}>
+                  <ProcessedText text={data.data.body} />
+                </div>
+              ) : null}
             </div>
           </div>
         ) : (
@@ -232,20 +225,11 @@ export default class Profile extends React.Component {
               <div css={STYLES_INFO}>
                 <div css={STYLES_FLEX}>
                   <div css={STYLES_NAME}>{Strings.getPresentationName(data)}</div>
-                </div>
-                {data.data.body ? (
-                  <div css={STYLES_DESCRIPTION} style={{ marginBottom: 16 }}>
-                    <ProcessedText text={data.data.body} />
+                  <div css={STYLES_BUTTON}>
+                    <a css={STYLES_BUTTON} href={"http://slate.host/_"}>
+                      Follow
+                    </a>
                   </div>
-                ) : null
-                // <div css={STYLES_DESCRIPTION}>
-                //   <ProcessedText text={"Joined Slate Month, Year"} />
-                // </div>
-                }
-                <div css={STYLES_BUTTON}>
-                  <a css={STYLES_BUTTON} href={"http://slate.host/_"}>
-                    Follow
-                  </a>
                 </div>
                 <div css={STYLES_STATS}>
                   <div css={STYLES_STAT}>
@@ -263,6 +247,11 @@ export default class Profile extends React.Component {
                 <div style={{ fontFamily: `${Constants.font.semiBold}` }}>0</div>
               </div> */}
                 </div>
+                {data.data.body ? (
+                  <div css={STYLES_DESCRIPTION} style={{ marginBottom: 16 }}>
+                    <ProcessedText text={data.data.body} />
+                  </div>
+                ) : null}
               </div>
             </div>
           </div>
@@ -282,9 +271,8 @@ export default class Profile extends React.Component {
         ) : (
           <div css={STYLES_PROFILE} style={{ paddingTop: 0 }}>
             {data.slates && data.slates.length ? (
-              <SlatePreviewBlocks
+              <SlatePreviewBlocksExternal
                 isOwner={this.props.isOwner}
-                external={this.props.onAction ? false : true}
                 slates={data.slates}
                 username={data.username}
                 onAction={this.props.onAction}

components/core/SlateMediaObjectPreview.js

@@ -18,7 +18,7 @@ const STYLES_IMAGE_CONTAINER = css`
 const STYLES_IMAGE = css`
   background-color: ${Constants.system.foreground};
   display: block;
-  max-width: 100%;
+  width: 100%;
   pointer-events: none;
   transition: 200ms ease all;
 `;

components/core/SlatePreviewBlockExternal.js

@@ -0,0 +1,432 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+import * as SVG from "~/common/svg";
+import * as Window from "~/common/window";
+
+import { css } from "@emotion/core";
+import { ProcessedText } from "~/components/system/components/Typography";
+import { ViewAllButton } from "~/components/core/ViewAll";
+
+import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
+
+const MARGIN = 12;
+const MIN_WIDTH = 144;
+const placeholder =
+  "https://slate.textile.io/ipfs/bafkreidq27ycqubd4pxbo76n3rv5eefgxl3a2lh3wfvdgtil4u47so3nqe";
+
+const STYLES_MOBILE_HIDDEN = css`
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    display: none;
+  }
+`;
+
+const STYLES_MOBILE_ONLY = css`
+  @media (min-width: ${Constants.sizes.mobile}px) {
+    display: none;
+  }
+`;
+
+const STYLES_IMAGE_ROW = css`
+  overflow: hidden;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    justify-content: center;
+    margin: 0 -8px;
+  }
+`;
+
+const STYLES_ITEM_BOX = css`
+  height: calc(33.33% - 4px);
+  overflow: hidden;
+  margin: 0px 0px 4px 4px;
+  box-shadow: 0px 0px 0px 1px ${Constants.system.lightBorder} inset;
+  cursor: pointer;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    margin: 0 8px;
+  }
+`;
+
+const STYLES_PLACEHOLDER = css`
+  width: 100%;
+  height: 320px;
+  background-size: cover;
+  background-position: 50% 50%;
+  margin-bottom: 4px;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    height: 100%;
+  }
+`;
+
+export class SlatePreviewRow extends React.Component {
+  render() {
+    let numItems = this.props.numItems || 4;
+    let objects;
+    if (this.props.slate.data.objects.length === 0) {
+      objects = [
+        <div
+          css={STYLES_PLACEHOLDER}
+          style={{
+            backgroundImage: `url(${placeholder})`,
+            ...this.props.imageStyle,
+          }}
+        />,
+      ];
+    } else {
+      let trimmed =
+        this.props.slate.data.objects.length > numItems
+          ? this.props.slate.data.objects.slice(1, numItems)
+          : this.props.slate.data.objects.slice(1, this.props.slate.data.objects.length);
+      objects = trimmed.map((each) => (
+        <div key={each.id} css={STYLES_ITEM_BOX}>
+          <SlateMediaObjectPreview
+            blurhash={each.blurhash}
+            charCap={30}
+            centeredImage
+            type={each.type}
+            url={each.url}
+            style={this.props.previewStyle}
+            title={each.title || each.name}
+            iconOnly={this.props.small}
+          />
+        </div>
+      ));
+    }
+    return (
+      <div css={STYLES_IMAGE_ROW} style={{ height: `100%`, ...this.props.containerStyle }}>
+        {objects}
+      </div>
+    );
+  }
+}
+
+const STYLES_BLOCK = css`
+  box-shadow: 0 0 0 0.5px ${Constants.system.lightBorder} inset,
+    0 0 40px 0 ${Constants.system.shadow};
+  padding: 16px;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+  height: 480px;
+  width: 100%;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    margin: 24px auto;
+    height: auto;
+  }
+`;
+
+const STYLES_TITLE_LINE = css`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-size: ${Constants.typescale.lvl1};
+  margin-bottom: 8px;
+  overflow-wrap: break-word;
+`;
+
+const STYLES_BODY = css`
+  font-family: ${Constants.font.text};
+  font-size: ${Constants.typescale.lvl1};
+  margin-bottom: 24px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    display: none;
+  }
+`;
+
+const STYLES_TITLE = css`
+  font-size: ${Constants.typescale.lvl2};
+  font-family: ${Constants.font.semiBold};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 16px 0 0 0;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    font-size: ${Constants.typescale.lvl1};
+  }
+`;
+
+const STYLES_PREVIEW = css`
+  display: flex;
+`;
+
+const STYLES_INFO = css`
+  display: flex;
+`;
+
+const STYLES_OBJECT_COUNT = css`
+  margin-top: 18px;
+  width: 15%;
+  font-size: ${Constants.typescale.lvl0};
+  color: ${Constants.system.darkGray};
+`;
+
+export class SlatePreviewBlock extends React.Component {
+  _ref;
+  _test;
+
+  state = {
+    showMenu: false,
+    copyValue: "",
+    windowWidth: 360,
+  };
+
+  componentDidMount = () => {
+    this.calculateWidth();
+    window.addEventListener("resize", this.calculateWidth);
+  };
+
+  componentWillUnmount = () => {
+    window.removeEventListener("resize", this.calculateWidth);
+  };
+
+  calculateWidth = () => {
+    this.setState({ windowWidth: window.innerWidth });
+  };
+
+  _handleCopy = (e, value) => {
+    e.stopPropagation();
+    this.setState({ copyValue: value }, () => {
+      this._ref.select();
+      document.execCommand("copy");
+      this._handleHide();
+    });
+  };
+
+  _handleClick = (e) => {
+    e.stopPropagation();
+    if (this.state.showMenu) {
+      this._handleHide();
+      return;
+    }
+    this.setState({ showMenu: true });
+    // dispatchCustomEvent({
+    //   name: "show-tooltip",
+    //   detail: {
+    //     id: `slate-tooltip-${this.props.slate.id}`,
+    //   },
+    // });
+  };
+
+  _handleHide = (e) => {
+    this.setState({ showMenu: false });
+    // dispatchCustomEvent({
+    //   name: "hide-tooltip",
+    //   detail: {
+    //     id: `slate-tooltip-${this.props.slate.id}`,
+    //   },
+    // });
+  };
+
+  render() {
+    let first = this.props.slate.data.objects ? this.props.slate.data.objects[0] : null;
+    console.log(this.props.slate.data);
+
+    return (
+      <div css={STYLES_BLOCK}>
+        <span css={STYLES_MOBILE_HIDDEN}>
+          {this.props.slate.data.objects.length === 1 ? (
+            <div
+              style={{
+                width: "100%",
+                height: 320,
+              }}
+            >
+              <SlateMediaObjectPreview
+                blurhash={first.blurhash}
+                centeredImage
+                charCap={30}
+                type={first.type}
+                url={first.url}
+                title={first.title || first.name}
+              />
+            </div>
+          ) : first ? (
+            <div css={STYLES_PREVIEW}>
+              <div
+                style={{
+                  width: "75%",
+                  height: 320,
+                }}
+              >
+                <SlateMediaObjectPreview
+                  blurhash={first.blurhash}
+                  centeredImage
+                  charCap={30}
+                  type={first.type}
+                  url={first.url}
+                  title={first.title || first.name}
+                />
+              </div>
+              <div
+                style={{
+                  width: `25%`,
+                  height: 324,
+                }}
+              >
+                <SlatePreviewRow
+                  {...this.props}
+                  imageSize={this.props.imageSize}
+                  previewStyle={this.props.previewStyle}
+                />
+              </div>
+            </div>
+          ) : (
+            <div
+              css={STYLES_PLACEHOLDER}
+              style={{
+                backgroundImage: `url(${placeholder})`,
+                ...this.props.imageStyle,
+              }}
+            />
+          )}
+          <div css={STYLES_INFO}>
+            <div css={STYLES_OBJECT_COUNT}>{this.props.slate.data.objects.length}</div>
+            <div style={{ width: `85%` }}>
+              <div css={STYLES_TITLE_LINE}>
+                <div css={STYLES_TITLE}>{this.props.slate.data.name}</div>
+              </div>
+              {this.props.slate.data.body ? (
+                <div css={STYLES_BODY}>
+                  <ViewAllButton noButton fullText={this.props.slate.data.body} maxCharacter={100}>
+                    <ProcessedText text={this.props.slate.data.body} />
+                  </ViewAllButton>
+                </div>
+              ) : (
+                <div style={{ height: "8px" }} />
+              )}
+            </div>
+          </div>
+        </span>
+
+        <span css={STYLES_MOBILE_ONLY}>
+          <div
+            style={{
+              width: "100%",
+              height: `${this.state.windowWidth - 80}px`,
+            }}
+          >
+            {first ? (
+              <SlateMediaObjectPreview
+                blurhash={first.blurhash}
+                centeredImage
+                charCap={30}
+                type={first.type}
+                url={first.url}
+                title={first.title || first.name}
+              />
+            ) : (
+              <div
+                css={STYLES_PLACEHOLDER}
+                style={{
+                  backgroundImage: `url(${placeholder})`,
+                  ...this.props.imageStyle,
+                }}
+              />
+            )}
+          </div>
+          <div css={STYLES_INFO}>
+            <div css={STYLES_OBJECT_COUNT}>{this.props.slate.data.objects.length}</div>
+            <div style={{ width: `85%` }}>
+              <div css={STYLES_TITLE_LINE}>
+                <div css={STYLES_TITLE}>{this.props.slate.data.name}</div>
+              </div>
+            </div>
+          </div>
+        </span>
+      </div>
+    );
+  }
+}
+
+const STYLES_LINK = css`
+  color: ${Constants.system.black};
+  text-decoration: none;
+  width: calc(33.33% - 16px);
+  margin-bottom: 24px;
+
+  @media (max-width: ${Constants.sizes.tablet}px) {
+    width: 50%;
+  }
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    width: 100%;
+  }
+`;
+
+const STYLES_SLATES = css`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  overflow: hidden;
+  padding-bottom: 48px;
+  justify-content: space-between;
+
+  @media (max-width: ${Constants.sizes.mobile}px) {
+    display: block;
+  }
+`;
+
+export default class SlatePreviewBlocksExternal extends React.Component {
+  state = {
+    imageSize: 56,
+  };
+
+  componentDidMount = () => {
+    this.calculateWidth();
+    this.debounceInstance = this.debounce(this.calculateWidth, 350);
+    window.addEventListener("resize", this.debounceInstance);
+  };
+
+  componentWillUnmount = () => {
+    window.removeEventListener("resize", this.debounceInstance);
+  };
+
+  debounce = (func, wait) => {
+    Window.debounce(func, wait);
+  };
+
+  calculateWidth = () => {
+    let windowWidth = window.innerWidth;
+    if (windowWidth > Constants.sizes.mobile) {
+      if (this.props.external) {
+        windowWidth -= 48;
+      } else {
+        windowWidth -= Constants.sizes.navigation + 96;
+      }
+      windowWidth = Math.min(windowWidth, Constants.sizes.desktop);
+      windowWidth -= 80; //NOTE(martina): 48px padding on scene page, 40px padding on block
+      for (let i = this.props.numItems || 5; i > 0; i--) {
+        let width = (windowWidth - MARGIN * 2 * (i - 1)) / i;
+        if (width < MIN_WIDTH) {
+          continue;
+        }
+        this.setState({ imageSize: width });
+        return;
+      }
+    }
+    this.setState({ imageSize: windowWidth - 48 - 32 }); //NOTE(martina): 24px padding on scene page, 16px padding on block on mobile
+  };
+
+  render() {
+    return (
+      <div css={STYLES_SLATES}>
+        {this.props.slates.map((slate) => (
+          <a key={slate.id} href={`/${this.props.username}/${slate.slatename}`} css={STYLES_LINK}>
+            <SlatePreviewBlock
+              isOwner={this.props.isOwner}
+              imageSize={this.state.imageSize}
+              username={this.props.username}
+              slate={slate}
+            />
+          </a>
+        ))}
+      </div>
+    );
+  }
+}

components/core/ViewAll.js

@@ -10,9 +10,8 @@ const STYLES_VIEW_BUTTON = css`
   font-size: 14px;
   margin-top: 4px;
   color: ${Constants.system.grayBlack};
-  text-decoration: underline;
   cursor: pointer;
-  width: 64px;
+  width: 120px;
 `;
 
 export const ViewAllButton = (props) => {
@@ -21,6 +20,7 @@ export const ViewAllButton = (props) => {
   const maxCharacter = props.maxCharacter;
   const displayText = isTruncated ? text.slice(0, maxCharacter) : text;
   const textCount = text.length;
+  const noButton = props.noButton;
 
   return (
     <div>
@@ -28,9 +28,11 @@ export const ViewAllButton = (props) => {
       {textCount > maxCharacter ? (
         <span>
           <span>{isTruncated ? "..." : ""}</span>
-          <div css={STYLES_VIEW_BUTTON} onClick={() => setTruncated(!isTruncated)}>
-            {isTruncated ? "view all" : "view less"}
-          </div>
+          {noButton ? null : (
+            <div css={STYLES_VIEW_BUTTON} onClick={() => setTruncated(!isTruncated)}>
+              {isTruncated ? "+ View all" : "- View less"}
+            </div>
+          )}
         </span>
       ) : (
         ""

pages/_/profile.js

@@ -37,11 +37,11 @@ export default class ProfilePage extends React.Component {
         url={url}
         image={this.props.creator.data.photo}
       >
+        <WebsitePrototypeHeader />
         <div css={STYLES_ROOT}>
-          <WebsitePrototypeHeader />
           <Profile {...this.props} />
-          <WebsitePrototypeFooter />
         </div>
+        <WebsitePrototypeFooter />
       </WebsitePrototypeWrapper>
     );
   }