diff --git a/common/svg.js b/common/svg.js index 9ec8ca1a..5151356b 100644 --- a/common/svg.js +++ b/common/svg.js @@ -225,12 +225,7 @@ export const SettingsDeveloper = (props) => { height={props.height} style={props.style} > - + @@ -266,12 +261,7 @@ export const ProfileUser = (props) => { height={props.height} style={props.style} > - + @@ -292,12 +282,7 @@ export const Slates = (props) => ( height={props.height} style={props.style} > - + @@ -470,12 +455,7 @@ export const Home = (props) => ( export const Channels = (props) => ( - + @@ -490,12 +470,7 @@ export const Channels = (props) => ( export const Peers = (props) => ( - + @@ -535,12 +510,7 @@ export const Deals = (props) => ( export const DataTransfer = (props) => ( - + @@ -564,12 +534,7 @@ export const Stats = (props) => ( export const Logs = (props) => ( - + @@ -583,12 +548,7 @@ export const Logs = (props) => ( export const Status = (props) => ( - + @@ -627,12 +587,7 @@ export const Miners = (props) => ( export const StorageMarket = (props) => ( - + @@ -994,12 +949,7 @@ export const FileImage = (props) => ( style={props.style} {...props} > - + @@ -1491,10 +1441,7 @@ export const FileNotFound = (props) => ( > - + diff --git a/components/core/SlateLayout.js b/components/core/SlateLayout.js index 12318059..6d30d450 100644 --- a/components/core/SlateLayout.js +++ b/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 - .border} 10%, + ${Constants.system.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: nesw-resize; + cursor: nwse-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); - window.addEventListener( - "remote-object-update", - this._handleRemoteEditObject - ); + this.debounceInstance = this.debounce(this._recalculate, 250); + window.addEventListener("resize", this.debounceInstance); + window.addEventListener("remote-object-update", 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( - "remote-object-update", - this._handleRemoteEditObject - ); + window.removeEventListener("resize", this.debounceInstance); + window.removeEventListener("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: - layout && layout.length - ? Math.max(...layout.map((pos) => pos.z)) + 1 - : 1, + zIndexMax: 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 - ? layouts.defaultLayout - : this.state.defaultLayout; + let defaultLayout = layouts ? layouts.defaultLayout : this.state.defaultLayout; let fileNames = layouts ? layouts.fileNames : this.state.fileNames; - let layout = layouts - ? this.cloneLayout(layouts.layout) - : this.cloneLayout(this.state.layout); + let layout = layouts ? 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 - ? (i % 5) * (SIZE + MARGIN) - : (h % 5) * (SIZE + MARGIN), + x: defaultLayout ? (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: - oldLayout && oldLayout.length > i ? oldLayout[i].h || height : height, + h: 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( - this.state.items.map((item, i) => preload(item, i)) - ); + let results = await Promise.allSettled(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( - this.state.items, - this.state.savedProperties - ); + let layout = await this.repairLayout(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( - "Are you sure you want to reset your layout to the default column layout?" - ) + !window.confirm("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: - this.state.items[i].cid || - Strings.urlToCid(this.state.items[i].url), + cid: 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: - this.state.items[i].cid || - Strings.urlToCid(this.state.items[i].url), + cid: 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" }} > -
-
+
+
- +
{this.state.defaultLayout ? ( @@ -1107,18 +1086,12 @@ export class SlateLayout extends React.Component { Reset layout ) : ( - + Reset layout )} {this.state.prevLayouts.length ? ( - + Undo ) : ( @@ -1148,10 +1121,7 @@ export class SlateLayout extends React.Component {
) : ( -
+
{ 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={ - this.state.editing - ? (e) => this._handleMouseDown(e, i) - : () => {} - } - onClick={ - this.state.editing ? () => {} : () => this.props.onSelect(i) - } + onMouseDown={this.state.editing ? (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 - ? (pos.h + TAG_HEIGHT) * unit - : pos.h * unit, + height: this.state.fileNames ? (pos.h + TAG_HEIGHT) * unit : pos.h * unit, zIndex: pos.z, - boxShadow: - this.state.dragIndex === i - ? `0 0 44px 0 rgba(0, 0, 0, 0.25)` - : null, + boxShadow: 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={ - this.state.items[i].title || this.state.items[i].name - } + title={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 ? ( - {this.state.tooltip && - this.state.tooltip.startsWith(`${i}-`) ? ( + {this.state.tooltip && this.state.tooltip.startsWith(`${i}-`) ? ( - this.setState({ tooltip: `${i}-remove` }) - } - onMouseLeave={() => - this.setState({ tooltip: null }) - } + onMouseEnter={() => this.setState({ tooltip: `${i}-remove` })} + 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={() => - this.setState({ tooltip: `${i}-view` }) - } - onMouseLeave={() => - this.setState({ tooltip: null }) - } + onMouseEnter={() => this.setState({ tooltip: `${i}-view` })} + 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={() => - this.setState({ tooltip: `${i}-download` }) - } - onMouseLeave={() => - this.setState({ tooltip: null }) - } + onMouseEnter={() => this.setState({ tooltip: `${i}-download` })} + 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={() => - this.setState({ tooltip: `${i}-delete` }) + onMouseEnter={() => this.setState({ tooltip: `${i}-delete` })} + onMouseLeave={() => this.setState({ tooltip: null })} + onClick={ + this.state.items[i].ownerId === this.props.viewer.id + ? (e) => { + this._handleDeleteFiles(e, i); + } + : () => {} } - onMouseLeave={() => - this.setState({ tooltip: null }) - } - onClick={(e) => { - this._handleDeleteFiles(e, i); + style={{ + cursor: + this.state.items[i].ownerId === this.props.viewer.id + ? "pointer" + : "not-allowed", }} >
) : ( - {this.state.tooltip && - this.state.tooltip.startsWith(`${i}-`) ? ( + {this.state.tooltip && this.state.tooltip.startsWith(`${i}-`) ? ( - this.setState({ tooltip: `${i}-add` }) - } - onMouseLeave={() => - this.setState({ tooltip: null }) - } + onMouseEnter={() => this.setState({ tooltip: `${i}-add` })} + 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={() => - this.setState({ tooltip: `${i}-copy` }) - } - onMouseLeave={() => - this.setState({ tooltip: null }) - } + onMouseEnter={() => this.setState({ tooltip: `${i}-copy` })} + onMouseLeave={() => this.setState({ tooltip: null })} successState={ - + } style={{ height: 24, @@ -1544,21 +1485,14 @@ export class SlateLayout extends React.Component { backdropFilter: "blur(25px)", }} > - +
- this.setState({ tooltip: `${i}-download` }) - } - onMouseLeave={() => - this.setState({ tooltip: null }) - } + onMouseEnter={() => this.setState({ tooltip: `${i}-download` })} + 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={() => - this.setState({ tooltip: `${i}-preview` }) - } - onMouseLeave={() => - this.setState({ tooltip: null }) - } + onMouseEnter={() => this.setState({ tooltip: `${i}-preview` })} + onMouseLeave={() => this.setState({ tooltip: null })} onClick={ this.props.external ? this._handleLoginModal : this.state.items[i].type && - this.state.items[i].type.startsWith( - "image/" - ) && + this.state.items[i].type.startsWith("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( - "https://undefined", - "https://" - ) + this.state.items[i].url.replace("https://undefined", "https://") ? { - backgroundColor: - "rgba(0, 97, 187, 0.75)", + backgroundColor: "rgba(0, 97, 187, 0.75)", } : this.state.items[i].type && - this.state.items[i].type.startsWith( - "image/" - ) && + this.state.items[i].type.startsWith("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={() => - this.setState({ tooltip: `${i}-save` }) - } - onMouseLeave={() => - this.setState({ tooltip: null }) - } + onMouseEnter={() => this.setState({ tooltip: `${i}-save` })} + 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 - ? `calc(4px + ${TAG_HEIGHT}px)` - : 4, + bottom: this.state.fileNames ? `calc(0px + ${TAG_HEIGHT}px)` : 0, right: 0, - opacity: - this.state.hover === i || this.state.dragIndex === i - ? "1" - : "0", - cursor: "nwse-resize", + display: + this.state.hover === i || this.state.dragIndex === i ? "block" : "none", }} > @@ -1745,14 +1658,8 @@ export class SlateLayout extends React.Component { > Delete files -
this.setState({ checked: {} })} - > - +
this.setState({ checked: {} })}> +
) : ( @@ -1766,14 +1673,8 @@ export class SlateLayout extends React.Component { Download -
this.setState({ checked: {} })} - > - +
this.setState({ checked: {} })}> +
)} diff --git a/node_common/data/methods/delete-reposts-by-cid.js b/node_common/data/methods/delete-reposts-by-cid.js index 774a0983..83d7f065 100644 --- a/node_common/data/methods/delete-reposts-by-cid.js +++ b/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) => - DB.raw(`(?? -> ??) @> ?::jsonb`, [ - "data", - "objects", - JSON.stringify({ cid: cid }), - ]); - - const slates = await DB.select("slatename") - .from("slates") - .where(hasCid(cid)); + const hasCid = (cidValue) => + DB.raw(`(?? -> ??) @> ?::jsonb`, ["data", "objects", JSON.stringify({ cid: cidValue })]); + //NOTE(martina): this is WIP. Do not use yet + const slates = await DB.select("*").from("slates").where(hasCid(cid)); console.log(slates); return true; diff --git a/pages/_/slate.js b/pages/_/slate.js index 029417f9..99bcfd0c 100644 --- a/pages/_/slate.js +++ b/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: , }; }), }, @@ -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) - ? Strings.elide(object.body) - : `An object on ${url}`; + body = !Strings.isEmpty(object.body) ? 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 ( - +
@@ -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={ - layouts && layouts.ver === "2.0" ? layouts.fileNames : false - } + fileNames={layouts && layouts.ver === "2.0" ? layouts.fileNames : false} items={objects} onSelect={this._handleSelect} - defaultLayout={ - layouts && layouts.ver === "2.0" ? layouts.defaultLayout : true - } + defaultLayout={layouts && layouts.ver === "2.0" ? layouts.defaultLayout : true} />