mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-23 09:01:56 +03:00
slate layout finished
This commit is contained in:
Martina
parent
d2e002befe
commit
a6a8f24dde
@ -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>
|
||||
|
||||
@ -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` })
|
||||
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",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 }} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user