slate layout finished

common/svg.js

@@ -225,12 +225,7 @@ export const SettingsDeveloper = (props) => {
       height={props.height}
       style={props.style}
     >
-      <g
+      <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
         <path d="m18.25 2.251c-1.061 1.061-3.04.96-4.75-.75l-1.5 1.499 8 8 3.5-3.5z" />
         <path d="m11.939 9.94-3.793-3.792.00000007-.00000015c.910118-2.01295.0160937-4.38257-1.99686-5.29269-1.04732-.473526-2.24773-.473639-3.29514-.00031106l2.146 2.145v2h-2l-2.146-2.145.00000008-.00000019c-.910118 2.01295-.0160941 4.38257 1.99686 5.29269 1.04732.473526 2.24773.47364 3.29514.00031136l3.793 3.792" />
         <path d="m12.061 14.062 3.793 3.793.00000008-.00000019c-.910118 2.01295-.0160941 4.38257 1.99686 5.29269 1.04732.473526 2.24773.47364 3.29514.00031136l-2.146-2.148v-2h2l2.146 2.147.00000007-.00000015c.910118-2.01295.0160937-4.38257-1.99686-5.29269-1.04732-.473526-2.24773-.473639-3.29514-.00031106l-3.793-3.793" />
@@ -266,12 +261,7 @@ export const ProfileUser = (props) => {
       height={props.height}
       style={props.style}
     >
-      <g
+      <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
         <path d="m1.9 17.5h10.12" />
         <path d="m2.51 5.5h18.99" />
         <path d="m12 11.5h-11.49" />
@@ -292,12 +282,7 @@ export const Slates = (props) => (
     height={props.height}
     style={props.style}
   >
-    <g
+    <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
       <path d="m17.42 17.27-2.787-8.02-3.42 6-2.138-3-2.476 5.048" />
       <path d="m10.7071 8.29289c.390524.390524.390524 1.02369 0 1.41421-.390524.390524-1.02369.390524-1.41421 0-.390524-.390524-.390524-1.02369 0-1.41421.390524-.390524 1.02369-.390524 1.41421 0" />
       <path d="m1.5 6.5h-.00000004c-.552285-.00000002-1-.447715-1-1v-1 .00000015c-.00000008-.552285.447715-1 1-1h2v-2 .00000015c-.00000008-.552285.447715-1 1-1h1-.00000004c.552285-.00000002 1 .447715 1 1v2h13-.00000004c.552285-.00000002 1 .447715 1 1v13h2-.00000004c.552285-.00000002 1 .447715 1 1v1c0 .552285-.447715 1-1 1h-2v2c0 .552285-.447715 1-1 1h-1-.00000004c-.552285-.00000002-1-.447715-1-1v-2h-13-.00000004c-.552285-.00000002-1-.447715-1-1v-13z" />
@@ -470,12 +455,7 @@ export const Home = (props) => (
 
 export const Channels = (props) => (
   <svg viewBox="0 0 24 24" height={props.height} style={props.style}>
-    <g
+    <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
       <circle cx="16.004" cy="8" r="7.5" />
       <path d="m8.53 8.526a7.5 7.5 0 1 0 6.948 6.948" />
       <path d="m7.504 13.5v-1" />
@@ -490,12 +470,7 @@ export const Channels = (props) => (
 
 export const Peers = (props) => (
   <svg viewBox="0 0 24 24" height={props.height} style={props.style}>
-    <g
+    <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
       <path d="m17 7.02 3.11-3.09" />
       <path d="m22.9142 1.08579c.781049.781049.781049 2.04738 0 2.82843-.781049.781049-2.04738.781049-2.82843 0-.781049-.781049-.781049-2.04738 0-2.82843.781049-.781049 2.04738-.781049 2.82843 0" />
       <path d="m17.96 17.98 2.12 2.13" />
@@ -535,12 +510,7 @@ export const Deals = (props) => (
 
 export const DataTransfer = (props) => (
   <svg viewBox="0 0 24 24" height={props.height} style={props.style}>
-    <g
+    <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
       <path d="m20.5 14.406a4.311 4.311 0 0 0 2.5-4.049 4.711 4.711 0 0 0 -4.954-4.635 6.706 6.706 0 0 0 -6.046-3.722 6.605 6.605 0 0 0 -6.675 6.109 3.561 3.561 0 0 0 -4.325 3.409 3.186 3.186 0 0 0 2.5 3.282" />
       <path d="m6 19 3 3 3-3" />
       <path d="m9 22v-9" />
@@ -564,12 +534,7 @@ export const Stats = (props) => (
 
 export const Logs = (props) => (
   <svg viewBox="0 0 24 24" height={props.height} style={props.style}>
-    <g
+    <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
       <path d="m8.5 20.5h-7a1 1 0 0 1 -1-1v-16a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5" />
       <path d="m4.5 4.5v-4" />
       <path d="m8.5 4.5v-4" />
@@ -583,12 +548,7 @@ export const Logs = (props) => (
 
 export const Status = (props) => (
   <svg viewBox="0 0 24 24" height={props.height} style={props.style}>
-    <g
+    <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
       <path d="m14.061 5.243a1.5 1.5 0 0 1 0 2.121" />
       <path d="m16.182 3.121a4.5 4.5 0 0 1 0 6.364" />
       <path d="m16.182 3.121a4.5 4.5 0 0 1 0 6.364" />
@@ -627,12 +587,7 @@ export const Miners = (props) => (
 
 export const StorageMarket = (props) => (
   <svg viewBox="0 0 24 24" height={props.height} style={props.style}>
-    <g
+    <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
       <path d="m23.5 22h-22.5a.5.5 0 0 1 -.5-.5v-19.5" />
       <path d="m12.872 15.523c.182 1 .458 3.477 3.128 3.477" />
       <path d="m3 19a3 3 0 0 0 2.947-2.46l1.2-6.571a2.4 2.4 0 0 1 3.8-1.487" />
@@ -994,12 +949,7 @@ export const FileImage = (props) => (
     style={props.style}
     {...props}
   >
-    <g
+    <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
       <path d="m21.207 4.5-.00000002-.00000002c.187549.187493.292943.441805.293.707v17.293c0 .552285-.447715 1-1 1h-17-.00000004c-.552285-.00000002-1-.447715-1-1v-21 .00000015c-.00000008-.552285.447715-1 1-1h13.293.00000001c.265195.00005664.519507.105451.707.293z" />
       <path d="m12.826 12.366-2.8-3.74.00000001.00000002c-.165798-.22083-.479221-.265442-.700051-.0996437-.0578698.0434484-.105619.0989405-.139949.162644l-3.276 6.074.00000001-.00000002c-.130892.24315-.0398879.546371.203262.677262.0727636.0391698.154101.0596942.236738.0597376h4.181" />
       <path d="m17.3284 13.1716c1.5621 1.5621 1.5621 4.09476 0 5.65685-1.5621 1.5621-4.09476 1.5621-5.65685 0-1.5621-1.5621-1.5621-4.09476 0-5.65685 1.5621-1.5621 4.09476-1.5621 5.65685 0" />
@@ -1491,10 +1441,7 @@ export const FileNotFound = (props) => (
   >
     <path d="M13 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V9L13 2Z" />
     <path d="M13 2V9H20" />
-    <path
+    <path d="M14 16C14 16 13.25 15 12 15C10.75 15 10 16 10 16" strokeWidth="1" />
-      d="M14 16C14 16 13.25 15 12 15C10.75 15 10 16 10 16"
-      strokeWidth="1"
-    />
     <path d="M10.5 12.5H10.505" strokeWidth="1" />
     <path d="M13.5 12.5H13.505" strokeWidth="1" />
   </svg>

components/core/SlateLayout.js

@@ -118,8 +118,7 @@ const STYLES_CONTAINER = css`
 const STYLES_CONTAINER_EDITING = css`
   ${STYLES_CONTAINER}
   background-image: radial-gradient(
-    ${Constants.system
+    ${Constants.system.border} 10%,
-    .border} 10%,
     transparent 0
   );
   background-size: 30px 30px;
@@ -191,9 +190,11 @@ const STYLES_FILE_TYPE = css`
 `;
 
 const STYLES_HANDLE_BOX = css`
-  padding: 2px;
+  cursor: nwse-resize;
-  cursor: nesw-resize;
   position: absolute;
+  height: 24px;
+  width: 24px;
+  color: rgba(195, 195, 196, 0.75);
 `;
 
 const STYLES_ACTION_BAR = css`
@@ -303,11 +304,9 @@ export class SlateLayout extends React.Component {
   //add flag for following defaultLayout for last element or not. so know where to put next one. "unchanged since last add" flag. if something deleted, messes this up as well
 
   componentDidMount = async () => {
-    window.addEventListener("resize", this.calculateUnit);
+    this.debounceInstance = this.debounce(this._recalculate, 250);
-    window.addEventListener(
+    window.addEventListener("resize", this.debounceInstance);
-      "remote-object-update",
+    window.addEventListener("remote-object-update", this._handleRemoteEditObject);
-      this._handleRemoteEditObject
-    );
     await this.calculateUnit();
     if (this.props.layout) {
       let layout = await this.repairLayout(this.state.items);
@@ -342,11 +341,8 @@ export class SlateLayout extends React.Component {
   };
 
   componentWillUnmount = () => {
-    window.removeEventListener("resize", this._calculateUnit);
+    window.removeEventListener("resize", this.debounceInstance);
-    window.removeEventListener(
+    window.removeEventListener("remote-object-update", this._handleRemoteEditObject);
-      "remote-object-update",
-      this._handleRemoteEditObject
-    );
     if (this.state.editing) {
       window.removeEventListener("keydown", this._handleKeyDown);
       window.removeEventListener("keyup", this._handleKeyUp);
@@ -397,10 +393,7 @@ export class SlateLayout extends React.Component {
         items: this.props.items,
         layout,
         prevLayouts: [],
-        zIndexMax:
+        zIndexMax: layout && layout.length ? Math.max(...layout.map((pos) => pos.z)) + 1 : 1,
-          layout && layout.length
-            ? Math.max(...layout.map((pos) => pos.z)) + 1
-            : 1,
         fileNames,
         defaultLayout,
         editing: false,
@@ -443,6 +436,21 @@ export class SlateLayout extends React.Component {
     this.setState({ items });
   };
 
+  debounce = (func, ms) => {
+    let timer;
+
+    return () => {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(func, ms);
+    };
+  };
+
+  _recalculate = async () => {
+    let prevUnit = this.state.unit;
+    await this.calculateUnit();
+    this.setState({ containerHeight: this.state.containerHeight * (this.state.unit / prevUnit) });
+  };
+
   calculateUnit = () => {
     let ref = this._ref;
     if (!ref) {
@@ -464,13 +472,9 @@ export class SlateLayout extends React.Component {
   };
 
   repairLayout = async (items, layouts) => {
-    let defaultLayout = layouts
+    let defaultLayout = layouts ? layouts.defaultLayout : this.state.defaultLayout;
-      ? layouts.defaultLayout
-      : this.state.defaultLayout;
     let fileNames = layouts ? layouts.fileNames : this.state.fileNames;
-    let layout = layouts
+    let layout = layouts ? this.cloneLayout(layouts.layout) : this.cloneLayout(this.state.layout);
-      ? this.cloneLayout(layouts.layout)
-      : this.cloneLayout(this.state.layout);
     let layoutIds = layout.map((pos) => pos.id);
     let repairNeeded = false;
     if (items.length === layout.length) {
@@ -482,7 +486,6 @@ export class SlateLayout extends React.Component {
         }
       }
       if (!repairNeeded) {
-        console.log("no repair needed");
         return;
       }
     }
@@ -525,9 +528,7 @@ export class SlateLayout extends React.Component {
         let itemAbove = h - 5 < 0 ? null : newLayout[i - 5];
         let height = heights[h];
         newLayout[i] = {
-          x: defaultLayout
+          x: defaultLayout ? (i % 5) * (SIZE + MARGIN) : (h % 5) * (SIZE + MARGIN),
-            ? (i % 5) * (SIZE + MARGIN)
-            : (h % 5) * (SIZE + MARGIN),
           y: defaultLayout
             ? 0
             : itemAbove
@@ -554,7 +555,6 @@ export class SlateLayout extends React.Component {
           : 0;
       }
     }
-    console.log("repaired layout");
     return newLayout;
   };
 
@@ -573,8 +573,7 @@ export class SlateLayout extends React.Component {
             : itemAbove.y + itemAbove.h + MARGIN
           : 0,
         w: SIZE,
-        h:
+        h: oldLayout && oldLayout.length > i ? oldLayout[i].h || height : height,
-          oldLayout && oldLayout.length > i ? oldLayout[i].h || height : height,
         z: 0,
         id: this.state.items[i].id,
       };
@@ -583,9 +582,7 @@ export class SlateLayout extends React.Component {
   };
 
   calculateHeights = async () => {
-    let results = await Promise.allSettled(
+    let results = await Promise.allSettled(this.state.items.map((item, i) => preload(item, i)));
-      this.state.items.map((item, i) => preload(item, i))
-    );
     let heights = results.map((result) => {
       if (result.status === "fulfilled") {
         return result.value;
@@ -609,10 +606,7 @@ export class SlateLayout extends React.Component {
       window.removeEventListener("keydown", this._handleKeyDown);
       window.removeEventListener("keyup", this._handleKeyUp);
       if (discardChanges) {
-        let layout = await this.repairLayout(
+        let layout = await this.repairLayout(this.state.items, this.state.savedProperties);
-          this.state.items,
-          this.state.savedProperties
-        );
         let { fileNames, defaultLayout } = this.state.savedProperties;
         if (
           layout ||
@@ -878,9 +872,7 @@ export class SlateLayout extends React.Component {
 
   _handleResetLayout = async () => {
     if (
-      !window.confirm(
+      !window.confirm("Are you sure you want to reset your layout to the default column layout?")
-        "Are you sure you want to reset your layout to the default column layout?"
-      )
     ) {
       return;
     }
@@ -978,18 +970,14 @@ export class SlateLayout extends React.Component {
       items = [
         {
           ownerId: this.state.items[i].ownerId,
-          cid:
+          cid: this.state.items[i].cid || Strings.urlToCid(this.state.items[i].url),
-            this.state.items[i].cid ||
-            Strings.urlToCid(this.state.items[i].url),
         },
       ];
     } else {
       for (let i of Object.keys(this.state.checked)) {
         items.push({
           ownerId: this.state.items[i].ownerId,
-          cid:
+          cid: this.state.items[i].cid || Strings.urlToCid(this.state.items[i].url),
-            this.state.items[i].cid ||
-            Strings.urlToCid(this.state.items[i].url),
         });
       }
     }
@@ -1068,14 +1056,8 @@ export class SlateLayout extends React.Component {
               css={STYLES_BUTTONS_ROW}
               style={{ marginBottom: 16, justifyContent: "space-between" }}
             >
-              <div
+              <div css={STYLES_BUTTONS_ROW} style={{ width: "100%", minWidth: "10%" }}>
-                css={STYLES_BUTTONS_ROW}
+                <div css={STYLES_TOGGLE_BOX} style={{ marginRight: 16, paddingLeft: 24 }}>
-                style={{ width: "100%", minWidth: "10%" }}
-              >
-                <div
-                  css={STYLES_TOGGLE_BOX}
-                  style={{ marginRight: 16, paddingLeft: 24 }}
-                >
                   <span
                     style={{
                       fontFamily: Constants.font.semiBold,
@@ -1091,10 +1073,7 @@ export class SlateLayout extends React.Component {
                       marginLeft: 8,
                     }}
                   >
-                    <Toggle
+                    <Toggle active={this.state.fileNames} onChange={this._toggleFileNames} />
-                      active={this.state.fileNames}
-                      onChange={this._toggleFileNames}
-                    />
                   </div>
                 </div>
                 {this.state.defaultLayout ? (
@@ -1107,18 +1086,12 @@ export class SlateLayout extends React.Component {
                     Reset layout
                   </ButtonDisabled>
                 ) : (
-                  <ButtonSecondary
+                  <ButtonSecondary onClick={this._handleResetLayout} style={{ marginRight: 16 }}>
-                    onClick={this._handleResetLayout}
-                    style={{ marginRight: 16 }}
-                  >
                     Reset layout
                   </ButtonSecondary>
                 )}
                 {this.state.prevLayouts.length ? (
-                  <ButtonSecondary
+                  <ButtonSecondary style={{ marginRight: 16 }} onClick={this._handleUndo}>
-                    style={{ marginRight: 16 }}
-                    onClick={this._handleUndo}
-                  >
                     Undo
                   </ButtonSecondary>
                 ) : (
@@ -1148,10 +1121,7 @@ export class SlateLayout extends React.Component {
               </div>
             </div>
           ) : (
-            <div
+            <div css={STYLES_BUTTONS_ROW} style={{ justifyContent: "flex-end", marginBottom: 16 }}>
-              css={STYLES_BUTTONS_ROW}
-              style={{ justifyContent: "flex-end", marginBottom: 16 }}
-            >
               <ButtonSecondary
                 onClick={this._toggleEditing}
                 style={{ cursor: "pointer", marginLeft: 16 }}
@@ -1186,9 +1156,7 @@ export class SlateLayout extends React.Component {
           style={{ opacity: this.state.show ? 1 : 0 }}
         >
           <div
-            css={
+            css={this.state.editing ? STYLES_CONTAINER_EDITING : STYLES_CONTAINER}
-              this.state.editing ? STYLES_CONTAINER_EDITING : STYLES_CONTAINER
-            }
             style={{
               height: this.state.editing
                 ? `calc(100vh + ${this.state.containerHeight}px)`
@@ -1196,9 +1164,9 @@ export class SlateLayout extends React.Component {
               backgroundSize: `${(CONTAINER_SIZE / 108) * this.state.unit}px ${
                 10 * this.state.unit
               }px`,
-              backgroundPosition: `-${
+              backgroundPosition: `-${(CONTAINER_SIZE / 220) * this.state.unit}px -${
                 (CONTAINER_SIZE / 220) * this.state.unit
-              }px -${(CONTAINER_SIZE / 220) * this.state.unit}px`,
+              }px`,
             }}
             ref={(c) => {
               this._ref = c;
@@ -1212,26 +1180,15 @@ export class SlateLayout extends React.Component {
                   name={i}
                   onMouseEnter={() => this.setState({ hover: i })}
                   onMouseLeave={() => this.setState({ hover: null })}
-                  onMouseDown={
+                  onMouseDown={this.state.editing ? (e) => this._handleMouseDown(e, i) : () => {}}
-                    this.state.editing
+                  onClick={this.state.editing ? () => {} : () => this.props.onSelect(i)}
-                      ? (e) => this._handleMouseDown(e, i)
-                      : () => {}
-                  }
-                  onClick={
-                    this.state.editing ? () => {} : () => this.props.onSelect(i)
-                  }
                   style={{
                     top: pos.y * unit,
                     left: pos.x * unit,
                     width: pos.w * unit,
-                    height: this.state.fileNames
+                    height: this.state.fileNames ? (pos.h + TAG_HEIGHT) * unit : pos.h * unit,
-                      ? (pos.h + TAG_HEIGHT) * unit
-                      : pos.h * unit,
                     zIndex: pos.z,
-                    boxShadow:
+                    boxShadow: this.state.dragIndex === i ? `0 0 44px 0 rgba(0, 0, 0, 0.25)` : null,
-                      this.state.dragIndex === i
-                        ? `0 0 44px 0 rgba(0, 0, 0, 0.25)`
-                        : null,
                     backgroundColor: Constants.system.foreground,
                   }}
                 >
@@ -1242,9 +1199,7 @@ export class SlateLayout extends React.Component {
                       charCap={70}
                       type={this.state.items[i].type}
                       url={this.state.items[i].url}
-                      title={
+                      title={this.state.items[i].title || this.state.items[i].name}
-                        this.state.items[i].title || this.state.items[i].name
-                      }
                       height={pos.h * unit}
                       width={pos.w * unit}
                       style={{
@@ -1299,8 +1254,7 @@ export class SlateLayout extends React.Component {
                         )}
                         {this.state.editing ? (
                           <React.Fragment>
-                            {this.state.tooltip &&
+                            {this.state.tooltip && this.state.tooltip.startsWith(`${i}-`) ? (
-                            this.state.tooltip.startsWith(`${i}-`) ? (
                               <Tooltip
                                 light
                                 style={
@@ -1342,12 +1296,8 @@ export class SlateLayout extends React.Component {
                             <div
                               onMouseDown={this._stopProp}
                               onMouseUp={this._stopProp}
-                              onMouseEnter={() =>
+                              onMouseEnter={() => this.setState({ tooltip: `${i}-remove` })}
-                                this.setState({ tooltip: `${i}-remove` })
+                              onMouseLeave={() => this.setState({ tooltip: null })}
-                              }
-                              onMouseLeave={() =>
-                                this.setState({ tooltip: null })
-                              }
                               onClick={(e) => {
                                 this._handleRemoveFromSlate(e, i);
                               }}
@@ -1374,12 +1324,8 @@ export class SlateLayout extends React.Component {
                                 css={STYLES_ICON_CIRCLE}
                                 onMouseDown={this._stopProp}
                                 onMouseUp={this._stopProp}
-                                onMouseEnter={() =>
+                                onMouseEnter={() => this.setState({ tooltip: `${i}-view` })}
-                                  this.setState({ tooltip: `${i}-view` })
+                                onMouseLeave={() => this.setState({ tooltip: null })}
-                                }
-                                onMouseLeave={() =>
-                                  this.setState({ tooltip: null })
-                                }
                                 onClick={(e) => {
                                   this._stopProp(e);
                                   this.props.onSelect(i);
@@ -1391,12 +1337,8 @@ export class SlateLayout extends React.Component {
                                 css={STYLES_ICON_CIRCLE}
                                 onMouseDown={this._stopProp}
                                 onMouseUp={this._stopProp}
-                                onMouseEnter={() =>
+                                onMouseEnter={() => this.setState({ tooltip: `${i}-download` })}
-                                  this.setState({ tooltip: `${i}-download` })
+                                onMouseLeave={() => this.setState({ tooltip: null })}
-                                }
-                                onMouseLeave={() =>
-                                  this.setState({ tooltip: null })
-                                }
                                 onClick={(e) => {
                                   this._handleDownload(e, i);
                                 }}
@@ -1407,27 +1349,37 @@ export class SlateLayout extends React.Component {
                                 css={STYLES_ICON_CIRCLE}
                                 onMouseDown={this._stopProp}
                                 onMouseUp={this._stopProp}
-                                onMouseEnter={() =>
+                                onMouseEnter={() => this.setState({ tooltip: `${i}-delete` })}
-                                  this.setState({ tooltip: `${i}-delete` })
+                                onMouseLeave={() => this.setState({ tooltip: null })}
-                                }
+                                onClick={
-                                onMouseLeave={() =>
+                                  this.state.items[i].ownerId === this.props.viewer.id
-                                  this.setState({ tooltip: null })
+                                    ? (e) => {
-                                }
-                                onClick={(e) => {
                                         this._handleDeleteFiles(e, i);
+                                      }
+                                    : () => {}
+                                }
+                                style={{
+                                  cursor:
+                                    this.state.items[i].ownerId === this.props.viewer.id
+                                      ? "pointer"
+                                      : "not-allowed",
                                 }}
                               >
                                 <SVG.Trash
                                   height="16px"
-                                  style={{ color: Constants.system.red }}
+                                  style={{
+                                    color:
+                                      this.state.items[i].ownerId === this.props.viewer.id
+                                        ? Constants.system.red
+                                        : "#999999",
+                                  }}
                                 />
                               </div>
                             </div>
                           </React.Fragment>
                         ) : (
                           <React.Fragment>
-                            {this.state.tooltip &&
+                            {this.state.tooltip && this.state.tooltip.startsWith(`${i}-`) ? (
-                            this.state.tooltip.startsWith(`${i}-`) ? (
                               <Tooltip
                                 light
                                 style={
@@ -1470,12 +1422,8 @@ export class SlateLayout extends React.Component {
                             <div
                               onMouseDown={this._stopProp}
                               onMouseUp={this._stopProp}
-                              onMouseEnter={() =>
+                              onMouseEnter={() => this.setState({ tooltip: `${i}-add` })}
-                                this.setState({ tooltip: `${i}-add` })
+                              onMouseLeave={() => this.setState({ tooltip: null })}
-                              }
-                              onMouseLeave={() =>
-                                this.setState({ tooltip: null })
-                              }
                               onClick={
                                 this.props.external
                                   ? this._handleLoginModal
@@ -1517,17 +1465,10 @@ export class SlateLayout extends React.Component {
                                 }}
                                 onMouseDown={this._stopProp}
                                 onMouseUp={this._stopProp}
-                                onMouseEnter={() =>
+                                onMouseEnter={() => this.setState({ tooltip: `${i}-copy` })}
-                                  this.setState({ tooltip: `${i}-copy` })
+                                onMouseLeave={() => this.setState({ tooltip: null })}
-                                }
-                                onMouseLeave={() =>
-                                  this.setState({ tooltip: null })
-                                }
                                 successState={
-                                  <SVG.CheckBox
+                                  <SVG.CheckBox height="16px" style={{ color: "#4b4a4d" }} />
-                                    height="16px"
-                                    style={{ color: "#4b4a4d" }}
-                                  />
                                 }
                                 style={{
                                   height: 24,
@@ -1544,21 +1485,14 @@ export class SlateLayout extends React.Component {
                                   backdropFilter: "blur(25px)",
                                 }}
                               >
-                                <SVG.DeepLink
+                                <SVG.DeepLink height="16px" style={{ color: "#4b4a4d" }} />
-                                  height="16px"
-                                  style={{ color: "#4b4a4d" }}
-                                />
                               </DynamicIcon>
                               <div
                                 css={STYLES_ICON_CIRCLE}
                                 onMouseDown={this._stopProp}
                                 onMouseUp={this._stopProp}
-                                onMouseEnter={() =>
+                                onMouseEnter={() => this.setState({ tooltip: `${i}-download` })}
-                                  this.setState({ tooltip: `${i}-download` })
+                                onMouseLeave={() => this.setState({ tooltip: null })}
-                                }
-                                onMouseLeave={() =>
-                                  this.setState({ tooltip: null })
-                                }
                                 onClick={
                                   this.props.external
                                     ? this._handleLoginModal
@@ -1574,19 +1508,13 @@ export class SlateLayout extends React.Component {
                                   css={STYLES_ICON_CIRCLE}
                                   onMouseDown={this._stopProp}
                                   onMouseUp={this._stopProp}
-                                  onMouseEnter={() =>
+                                  onMouseEnter={() => this.setState({ tooltip: `${i}-preview` })}
-                                    this.setState({ tooltip: `${i}-preview` })
+                                  onMouseLeave={() => this.setState({ tooltip: null })}
-                                  }
-                                  onMouseLeave={() =>
-                                    this.setState({ tooltip: null })
-                                  }
                                   onClick={
                                     this.props.external
                                       ? this._handleLoginModal
                                       : this.state.items[i].type &&
-                                        this.state.items[i].type.startsWith(
+                                        this.state.items[i].type.startsWith("image/") &&
-                                          "image/"
-                                        ) &&
                                         this.state.items[i].size &&
                                         this.state.items[i].size < SIZE_LIMIT
                                       ? (e) => this._handleSetPreview(e, i)
@@ -1594,18 +1522,12 @@ export class SlateLayout extends React.Component {
                                   }
                                   style={
                                     this.props.preview ===
-                                    this.state.items[i].url.replace(
+                                    this.state.items[i].url.replace("https://undefined", "https://")
-                                      "https://undefined",
-                                      "https://"
-                                    )
                                       ? {
-                                          backgroundColor:
+                                          backgroundColor: "rgba(0, 97, 187, 0.75)",
-                                            "rgba(0, 97, 187, 0.75)",
                                         }
                                       : this.state.items[i].type &&
-                                        this.state.items[i].type.startsWith(
+                                        this.state.items[i].type.startsWith("image/") &&
-                                          "image/"
-                                        ) &&
                                         this.state.items[i].size &&
                                         this.state.items[i].size < SIZE_LIMIT
                                       ? {}
@@ -1635,12 +1557,8 @@ export class SlateLayout extends React.Component {
                                   css={STYLES_ICON_CIRCLE}
                                   onMouseDown={this._stopProp}
                                   onMouseUp={this._stopProp}
-                                  onMouseEnter={() =>
+                                  onMouseEnter={() => this.setState({ tooltip: `${i}-save` })}
-                                    this.setState({ tooltip: `${i}-save` })
+                                  onMouseLeave={() => this.setState({ tooltip: null })}
-                                  }
-                                  onMouseLeave={() =>
-                                    this.setState({ tooltip: null })
-                                  }
                                   onClick={
                                     this.props.external
                                       ? this._handleLoginModal
@@ -1681,15 +1599,10 @@ export class SlateLayout extends React.Component {
                       css={STYLES_HANDLE_BOX}
                       onMouseDown={(e) => this._handleMouseDownResize(e, i)}
                       style={{
-                        bottom: this.state.fileNames
+                        bottom: this.state.fileNames ? `calc(0px + ${TAG_HEIGHT}px)` : 0,
-                          ? `calc(4px + ${TAG_HEIGHT}px)`
-                          : 4,
                         right: 0,
-                        opacity:
+                        display:
-                          this.state.hover === i || this.state.dragIndex === i
+                          this.state.hover === i || this.state.dragIndex === i ? "block" : "none",
-                            ? "1"
-                            : "0",
-                        cursor: "nwse-resize",
                       }}
                     >
                       <SVG.DragHandle height="24px" />
@@ -1745,14 +1658,8 @@ export class SlateLayout extends React.Component {
                 >
                   Delete files
                 </ButtonWarning>
-                <div
+                <div css={STYLES_ICON_BOX} onClick={() => this.setState({ checked: {} })}>
-                  css={STYLES_ICON_BOX}
+                  <SVG.Dismiss height="20px" style={{ color: Constants.system.darkGray }} />
-                  onClick={() => this.setState({ checked: {} })}
-                >
-                  <SVG.Dismiss
-                    height="20px"
-                    style={{ color: Constants.system.darkGray }}
-                  />
                 </div>
               </div>
             ) : (
@@ -1766,14 +1673,8 @@ export class SlateLayout extends React.Component {
                 <ButtonPrimary transparent onClick={this._handleDownload}>
                   Download
                 </ButtonPrimary>
-                <div
+                <div css={STYLES_ICON_BOX} onClick={() => this.setState({ checked: {} })}>
-                  css={STYLES_ICON_BOX}
+                  <SVG.Dismiss height="20px" style={{ color: Constants.system.darkGray }} />
-                  onClick={() => this.setState({ checked: {} })}
-                >
-                  <SVG.Dismiss
-                    height="20px"
-                    style={{ color: Constants.system.darkGray }}
-                  />
                 </div>
               </div>
             )}

node_common/data/methods/delete-reposts-by-cid.js

@@ -2,18 +2,12 @@ import { runQuery } from "~/node_common/data/utilities";
 
 export default async ({ cid, ownerId }) => {
   return await runQuery({
-    label: "DELETE_SLATES_FOR_USER_ID", //chngae this
+    label: "DELETE_SLATES_FOR_USER_ID", //change this
     queryFn: async (DB) => {
-      const hasCid = (cid) =>
+      const hasCid = (cidValue) =>
-        DB.raw(`(?? -> ??) @> ?::jsonb`, [
+        DB.raw(`(?? -> ??) @> ?::jsonb`, ["data", "objects", JSON.stringify({ cid: cidValue })]);
-          "data",
+      //NOTE(martina): this is WIP. Do not use yet
-          "objects",
+      const slates = await DB.select("*").from("slates").where(hasCid(cid));
-          JSON.stringify({ cid: cid }),
-        ]);
-
-      const slates = await DB.select("slatename")
-        .from("slates")
-        .where(hasCid(cid));
 
       console.log(slates);
       return true;

pages/_/slate.js

@@ -29,7 +29,7 @@ const STYLES_ROOT = css`
 
 const STYLES_SLATE = css`
   padding: 0 88px 0 88px;
-  max-width: 1660px;
+  ${"" /* max-width: 1660px; */}
   display: block;
   width: 100%;
   margin: 48px auto 0 auto;
@@ -69,9 +69,7 @@ export default class SlatePage extends React.Component {
             id: each.id,
             data: each,
             isOwner: false,
-            component: (
+            component: <SlateMediaObject key={each.id} useImageFallback data={each} />,
-              <SlateMediaObject key={each.id} useImageFallback data={each} />
-            ),
           };
         }),
       },
@@ -142,9 +140,7 @@ export default class SlatePage extends React.Component {
 
       if (object) {
         title = !Strings.isEmpty(object.title) ? object.title : this.props.cid;
-        body = !Strings.isEmpty(object.body)
+        body = !Strings.isEmpty(object.body) ? Strings.elide(object.body) : `An object on ${url}`;
-          ? Strings.elide(object.body)
-          : `An object on ${url}`;
         image = object.type.includes("image/") ? object.url : image;
         url = `${url}/cid:${this.props.cid}`;
       }
@@ -153,12 +149,7 @@ export default class SlatePage extends React.Component {
     const headerTitle = `${this.props.creator.username} / ${this.props.slate.slatename}`;
 
     return (
-      <WebsitePrototypeWrapper
+      <WebsitePrototypeWrapper title={title} description={body} url={url} image={image}>
-        title={title}
-        description={body}
-        url={url}
-        image={image}
-      >
         <div css={STYLES_ROOT}>
           <WebsitePrototypeHeaderGeneric href={headerURL} title={headerTitle}>
             <ProcessedText text={this.props.slate.data.body} />
@@ -170,14 +161,10 @@ export default class SlatePage extends React.Component {
               layout={layouts && layouts.ver === "2.0" ? layouts.layout : null}
               onSaveLayout={this._handleSave}
               isOwner={false}
-              fileNames={
+              fileNames={layouts && layouts.ver === "2.0" ? layouts.fileNames : false}
-                layouts && layouts.ver === "2.0" ? layouts.fileNames : false
-              }
               items={objects}
               onSelect={this._handleSelect}
-              defaultLayout={
+              defaultLayout={layouts && layouts.ver === "2.0" ? layouts.defaultLayout : true}
-                layouts && layouts.ver === "2.0" ? layouts.defaultLayout : true
-              }
             />
           </div>
           <WebsitePrototypeFooter style={{ marginTop: 88 }} />