slate layout finished

This commit is contained in:
Martina 2020-10-21 15:54:01 -07:00
parent d2e002befe
commit a6a8f24dde
4 changed files with 121 additions and 292 deletions

View File

@ -225,12 +225,7 @@ export const SettingsDeveloper = (props) => {
height={props.height}
style={props.style}
>
<g
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<g 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
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<g 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
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<g 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
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<g 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
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<g 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
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<g 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
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<g 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
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<g 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
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<g 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
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<g 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
d="M14 16C14 16 13.25 15 12 15C10.75 15 10 16 10 16"
strokeWidth="1"
/>
<path 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>

View File

@ -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" }}
>
<div
css={STYLES_BUTTONS_ROW}
style={{ width: "100%", minWidth: "10%" }}
>
<div
css={STYLES_TOGGLE_BOX}
style={{ marginRight: 16, paddingLeft: 24 }}
>
<div css={STYLES_BUTTONS_ROW} 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
active={this.state.fileNames}
onChange={this._toggleFileNames}
/>
<Toggle 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
onClick={this._handleResetLayout}
style={{ marginRight: 16 }}
>
<ButtonSecondary onClick={this._handleResetLayout} style={{ marginRight: 16 }}>
Reset layout
</ButtonSecondary>
)}
{this.state.prevLayouts.length ? (
<ButtonSecondary
style={{ marginRight: 16 }}
onClick={this._handleUndo}
>
<ButtonSecondary style={{ marginRight: 16 }} onClick={this._handleUndo}>
Undo
</ButtonSecondary>
) : (
@ -1148,10 +1121,7 @@ export class SlateLayout extends React.Component {
</div>
</div>
) : (
<div
css={STYLES_BUTTONS_ROW}
style={{ justifyContent: "flex-end", marginBottom: 16 }}
>
<div 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={
this.state.editing ? STYLES_CONTAINER_EDITING : STYLES_CONTAINER
}
css={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={
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 ? (
<React.Fragment>
{this.state.tooltip &&
this.state.tooltip.startsWith(`${i}-`) ? (
{this.state.tooltip && 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={() =>
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` })
}
onMouseLeave={() =>
this.setState({ tooltip: null })
}
onClick={(e) => {
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);
}
: () => {}
}
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.startsWith(`${i}-`) ? (
{this.state.tooltip && 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={() =>
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={
<SVG.CheckBox
height="16px"
style={{ color: "#4b4a4d" }}
/>
<SVG.CheckBox height="16px" style={{ color: "#4b4a4d" }} />
}
style={{
height: 24,
@ -1544,21 +1485,14 @@ export class SlateLayout extends React.Component {
backdropFilter: "blur(25px)",
}}
>
<SVG.DeepLink
height="16px"
style={{ color: "#4b4a4d" }}
/>
<SVG.DeepLink height="16px" style={{ color: "#4b4a4d" }} />
</DynamicIcon>
<div
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={
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",
}}
>
<SVG.DragHandle height="24px" />
@ -1745,14 +1658,8 @@ export class SlateLayout extends React.Component {
>
Delete files
</ButtonWarning>
<div
css={STYLES_ICON_BOX}
onClick={() => this.setState({ checked: {} })}
>
<SVG.Dismiss
height="20px"
style={{ color: Constants.system.darkGray }}
/>
<div css={STYLES_ICON_BOX} 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
css={STYLES_ICON_BOX}
onClick={() => this.setState({ checked: {} })}
>
<SVG.Dismiss
height="20px"
style={{ color: Constants.system.darkGray }}
/>
<div css={STYLES_ICON_BOX} onClick={() => this.setState({ checked: {} })}>
<SVG.Dismiss height="20px" style={{ color: Constants.system.darkGray }} />
</div>
</div>
)}

View File

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

View File

@ -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: (
<SlateMediaObject key={each.id} useImageFallback data={each} />
),
component: <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)
? 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 (
<WebsitePrototypeWrapper
title={title}
description={body}
url={url}
image={image}
>
<WebsitePrototypeWrapper 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={
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}
/>
</div>
<WebsitePrototypeFooter style={{ marginTop: 88 }} />