filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-09-20 10:47:18 +03:00
Code Issues Packages Projects Releases Wiki Activity

finished stylistic changes

Browse Source
This commit is contained in:
Martina 2020-10-23 11:38:30 -07:00
parent 71b416e212
commit d6afcf0dad
3 changed files with 74 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/core/Alert.js
View File

@ -154,7 +154,9 @@ export class Alert extends React.Component {
} }
> >
<div css={STYLES_MESSAGE_BOX}> <div css={STYLES_MESSAGE_BOX}>
<LoaderSpinner style={{ height: 16, width: 16, marginRight: 16 }} /> <div style={{ height: 16, width: 16, marginRight: 16 }}>
<LoaderSpinner style={{ height: 16, width: 16 }} />
</div>
<span css={STYLES_TEXT}> <span css={STYLES_TEXT}>
{uploaded} / {total} file {uploaded} / {total} file
{total === 1 ? "" : "s"} uploading{" "} {total === 1 ? "" : "s"} uploading{" "}

100
components/core/SlateMediaObjectSidebar.js
View File

@ -12,6 +12,24 @@ import { Input } from "~/components/system/components/Input";
import { Textarea } from "~/components/system/components/Textarea"; import { Textarea } from "~/components/system/components/Textarea";
import TextareaAutoSize from "~/vendor/react-textarea-autosize"; import TextareaAutoSize from "~/vendor/react-textarea-autosize";
const STYLES_NO_VISIBLE_SCROLL = css`
overflow-y: scroll;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
::-webkit-scrollbar {
width: 0px;
display: none;
}
::-webkit-scrollbar-track {
background: ${Constants.system.foreground};
}
::-webkit-scrollbar-thumb {
background: ${Constants.system.darkGray};
}
`;
const STYLES_SIDEBAR_INPUT = css` const STYLES_SIDEBAR_INPUT = css`
${STYLES_NO_VISIBLE_SCROLL} ${STYLES_NO_VISIBLE_SCROLL}
position: relative; position: relative;
@ -47,39 +65,21 @@ const STYLES_SIDEBAR_TEXTAREA = css`
} }
`; `;
class SidebarInput extends React.Component { // class SidebarInput extends React.Component {
render() { // render() {
return ( // return (
<Input // <Input
full // full
value={this.props.value} // value={this.props.value}
name={this.props.name} // name={this.props.name}
onChange={this.props.onChange} // onChange={this.props.onChange}
id={`sidebar-label-${this.props.name}`} // id={`sidebar-label-${this.props.name}`}
placeholder={this.props.placeholder} // placeholder={this.props.placeholder}
style={this.props.style} // style={this.props.style}
/> // />
); // );
} // }
} // }
const STYLES_NO_VISIBLE_SCROLL = css`
overflow-y: scroll;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
::-webkit-scrollbar {
width: 0px;
display: none;
}
::-webkit-scrollbar-track {
background: ${Constants.system.foreground};
}
::-webkit-scrollbar-thumb {
background: ${Constants.system.darkGray};
}
`;
const STYLES_SIDEBAR = css` const STYLES_SIDEBAR = css`
width: 420px; width: 420px;
@ -105,24 +105,24 @@ const STYLES_SIDEBAR = css`
} }
`; `;
const STYLES_BUTTON = css` // const STYLES_BUTTON = css`
border-top: 1px solid #222222; // border-top: 1px solid #222222;
flex-shrink: 0; // flex-shrink: 0;
color: ${Constants.system.white}; // color: ${Constants.system.white};
width: 100%; // width: 100%;
padding: 16px 24px 16px 24px; // padding: 16px 24px 16px 24px;
min-height: 56px; // min-height: 56px;
font-size: 14px; // font-size: 14px;
font-family: ${Constants.font.semiBold}; // font-family: ${Constants.font.semiBold};
transition: 200ms ease all; // transition: 200ms ease all;
cursor: pointer; // cursor: pointer;
overflow-wrap: break-word; // overflow-wrap: break-word;
text-decoration: none; // text-decoration: none;
:hover { // :hover {
background-color: ${Constants.system.brand}; // background-color: ${Constants.system.brand};
} // }
`; // `;
const STYLES_SIDEBAR_SECTION = css` const STYLES_SIDEBAR_SECTION = css`
flex-shrink: 0; flex-shrink: 0;

87
scenes/SceneSlate.js
View File

@ -9,10 +9,7 @@ import * as Window from "~/common/window";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { ProcessedText } from "~/components/system/components/Typography"; import { ProcessedText } from "~/components/system/components/Typography";
import { import { ButtonPrimary, ButtonSecondary } from "~/components/system/components/Buttons";
ButtonPrimary,
ButtonSecondary,
} from "~/components/system/components/Buttons";
import { dispatchCustomEvent } from "~/common/custom-events"; import { dispatchCustomEvent } from "~/common/custom-events";
import { SlateLayout } from "~/components/core/SlateLayout"; import { SlateLayout } from "~/components/core/SlateLayout";
import { SlateLayoutMobile } from "~/components/core/SlateLayoutMobile"; import { SlateLayoutMobile } from "~/components/core/SlateLayoutMobile";
@ -75,10 +72,7 @@ export default class SceneSlate extends React.Component {
isOwner: this.props.current.data.ownerId === this.props.viewer.id, isOwner: this.props.current.data.ownerId === this.props.viewer.id,
}); });
this._handleUpdateCarousel( this._handleUpdateCarousel(this.props.current.data.objects, this.state.isOwner);
this.props.current.data.objects,
this.state.isOwner
);
} }
} }
@ -90,18 +84,9 @@ export default class SceneSlate extends React.Component {
this._handleUpdateCarousel(); this._handleUpdateCarousel();
window.addEventListener( window.addEventListener("remote-update-slate-screen", this._handleRemoteAddObject);
"remote-update-slate-screen", window.addEventListener("remote-delete-object", this._handleRemoteDeleteObject);
this._handleRemoteAddObject window.addEventListener("remote-object-update", this._handleRemoteEditObject);
);
window.addEventListener(
"remote-delete-object",
this._handleRemoteDeleteObject
);
window.addEventListener(
"remote-object-update",
this._handleRemoteEditObject
);
if (this.state.isOwner) { if (this.state.isOwner) {
let changed = false; let changed = false;
@ -126,18 +111,9 @@ export default class SceneSlate extends React.Component {
componentWillUnmount() { componentWillUnmount() {
isMounted = false; isMounted = false;
window.removeEventListener( window.removeEventListener("remote-update-slate-screen", this._handleRemoteAddObject);
"remote-update-slate-screen", window.removeEventListener("remote-delete-object", this._handleRemoteDeleteObject);
this._handleRemoteAddObject window.removeEventListener("remote-object-update", this._handleRemoteEditObject);
);
window.removeEventListener(
"remote-delete-object",
this._handleRemoteDeleteObject
);
window.removeEventListener(
"remote-object-update",
this._handleRemoteEditObject
);
} }
_handleRemoteAddObject = () => { _handleRemoteAddObject = () => {
@ -187,8 +163,7 @@ export default class SceneSlate extends React.Component {
name: "create-alert", name: "create-alert",
detail: { detail: {
alert: { alert: {
message: message: "We're having trouble connecting right now. Please try again later",
"We're having trouble connecting right now. Please try again later",
}, },
}, },
}); });
@ -245,9 +220,7 @@ export default class SceneSlate extends React.Component {
}; };
_handleUpdateCarousel = (newObjects, isOwner) => { _handleUpdateCarousel = (newObjects, isOwner) => {
let objects = newObjects let objects = newObjects ? newObjects : [...this.props.current.data.objects];
? newObjects
: [...this.props.current.data.objects];
System.dispatchCustomEvent({ System.dispatchCustomEvent({
name: "slate-global-create-carousel", name: "slate-global-create-carousel",
detail: { detail: {
@ -294,8 +267,7 @@ export default class SceneSlate extends React.Component {
name: "create-alert", name: "create-alert",
detail: { detail: {
alert: { alert: {
message: message: "We're having trouble connecting right now. Please try again later",
"We're having trouble connecting right now. Please try again later",
}, },
}, },
}); });
@ -344,8 +316,7 @@ export default class SceneSlate extends React.Component {
name: "create-alert", name: "create-alert",
detail: { detail: {
alert: { alert: {
message: message: "We're having trouble connecting right now. Please try again later",
"We're having trouble connecting right now. Please try again later",
}, },
}, },
}); });
@ -397,8 +368,7 @@ export default class SceneSlate extends React.Component {
name: "create-alert", name: "create-alert",
detail: { detail: {
alert: { alert: {
message: message: "We're having trouble connecting right now. Please try again later",
"We're having trouble connecting right now. Please try again later",
}, },
}, },
}); });
@ -425,6 +395,7 @@ export default class SceneSlate extends React.Component {
}; };
render() { render() {
console.log(this.props);
const { user, data } = this.props.current; const { user, data } = this.props.current;
const { body = "", preview } = data; const { body = "", preview } = data;
let objects = this.props.current.data.objects; let objects = this.props.current.data.objects;
@ -524,9 +495,7 @@ export default class SceneSlate extends React.Component {
<SlateLayoutMobile <SlateLayoutMobile
isOwner={this.state.isOwner} isOwner={this.state.isOwner}
items={objects} items={objects}
fileNames={ fileNames={layouts && layouts.ver === "2.0" ? layouts.fileNames : false}
layouts && layouts.ver === "2.0" ? layouts.fileNames : false
}
onSelect={this._handleSelect} onSelect={this._handleSelect}
/> />
) : ( ) : (
@ -540,32 +509,20 @@ export default class SceneSlate extends React.Component {
: this.state.isOwner : this.state.isOwner
? `${window.location.hostname}${ ? `${window.location.hostname}${
window.location.port ? ":" + window.location.port : "" window.location.port ? ":" + window.location.port : ""
}/${this.props.viewer.username}/${ }/${this.props.viewer.username}/${this.props.current.slatename}`
this.props.current.slatename
}`
: "" : ""
} }
viewer={this.props.viewer} viewer={this.props.viewer}
slateId={this.props.current.id} slateId={this.props.current.id}
layout={ layout={layouts && layouts.ver === "2.0" ? layouts.layout || [] : null}
layouts && layouts.ver === "2.0" ? layouts.layout || [] : null
}
onSaveLayout={this._handleSaveLayout} onSaveLayout={this._handleSaveLayout}
isOwner={this.state.isOwner} isOwner={this.state.isOwner}
fileNames={ fileNames={layouts && layouts.ver === "2.0" ? layouts.fileNames : false}
layouts && layouts.ver === "2.0" ? layouts.fileNames : false
}
preview={preview} preview={preview}
onSavePreview={(preview) => onSavePreview={(preview) => this._handleSave(null, null, null, false, preview)}
this._handleSave(null, null, null, false, preview)
}
items={objects} items={objects}
onSelect={this._handleSelect} onSelect={this._handleSelect}
defaultLayout={ defaultLayout={layouts && layouts.ver === "2.0" ? layouts.defaultLayout : true}
layouts && layouts.ver === "2.0"
? layouts.defaultLayout
: true
}
onAction={this.props.onAction} onAction={this.props.onAction}
onRemoveFromSlate={this._handleRemoteDeleteObject} onRemoveFromSlate={this._handleRemoteDeleteObject}
onDeleteFiles={this._handleDeleteFiles} onDeleteFiles={this._handleDeleteFiles}
@ -583,9 +540,7 @@ export default class SceneSlate extends React.Component {
<SVG.Book height="24px" style={{ margin: "0 16px" }} /> <SVG.Book height="24px" style={{ margin: "0 16px" }} />
<SVG.Video height="24px" style={{ margin: "0 16px" }} /> <SVG.Video height="24px" style={{ margin: "0 16px" }} />
</div> </div>
<div style={{ marginTop: 24 }}> <div style={{ marginTop: 24 }}>Drag and drop files to add them to this slate</div>
Drag and drop files to add them to this slate
</div>
</EmptyState> </EmptyState>
</div> </div>
) : ( ) : (