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}>
<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}>
{uploaded} / {total} file
{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 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`
${STYLES_NO_VISIBLE_SCROLL}
position: relative;
@ -47,39 +65,21 @@ const STYLES_SIDEBAR_TEXTAREA = css`
}
`;
class SidebarInput extends React.Component {
render() {
return (
<Input
full
value={this.props.value}
name={this.props.name}
onChange={this.props.onChange}
id={`sidebar-label-${this.props.name}`}
placeholder={this.props.placeholder}
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};
}
`;
// class SidebarInput extends React.Component {
// render() {
// return (
// <Input
// full
// value={this.props.value}
// name={this.props.name}
// onChange={this.props.onChange}
// id={`sidebar-label-${this.props.name}`}
// placeholder={this.props.placeholder}
// style={this.props.style}
// />
// );
// }
// }
const STYLES_SIDEBAR = css`
width: 420px;
@ -105,24 +105,24 @@ const STYLES_SIDEBAR = css`
}
`;
const STYLES_BUTTON = css`
border-top: 1px solid #222222;
flex-shrink: 0;
color: ${Constants.system.white};
width: 100%;
padding: 16px 24px 16px 24px;
min-height: 56px;
font-size: 14px;
font-family: ${Constants.font.semiBold};
transition: 200ms ease all;
cursor: pointer;
overflow-wrap: break-word;
text-decoration: none;
// const STYLES_BUTTON = css`
// border-top: 1px solid #222222;
// flex-shrink: 0;
// color: ${Constants.system.white};
// width: 100%;
// padding: 16px 24px 16px 24px;
// min-height: 56px;
// font-size: 14px;
// font-family: ${Constants.font.semiBold};
// transition: 200ms ease all;
// cursor: pointer;
// overflow-wrap: break-word;
// text-decoration: none;
:hover {
background-color: ${Constants.system.brand};
}
`;
// :hover {
// background-color: ${Constants.system.brand};
// }
// `;
const STYLES_SIDEBAR_SECTION = css`
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 { ProcessedText } from "~/components/system/components/Typography";
import {
ButtonPrimary,
ButtonSecondary,
} from "~/components/system/components/Buttons";
import { ButtonPrimary, ButtonSecondary } from "~/components/system/components/Buttons";
import { dispatchCustomEvent } from "~/common/custom-events";
import { SlateLayout } from "~/components/core/SlateLayout";
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,
});
this._handleUpdateCarousel(
this.props.current.data.objects,
this.state.isOwner
);
this._handleUpdateCarousel(this.props.current.data.objects, this.state.isOwner);
}
}
@ -90,18 +84,9 @@ export default class SceneSlate extends React.Component {
this._handleUpdateCarousel();
window.addEventListener(
"remote-update-slate-screen",
this._handleRemoteAddObject
);
window.addEventListener(
"remote-delete-object",
this._handleRemoteDeleteObject
);
window.addEventListener(
"remote-object-update",
this._handleRemoteEditObject
);
window.addEventListener("remote-update-slate-screen", this._handleRemoteAddObject);
window.addEventListener("remote-delete-object", this._handleRemoteDeleteObject);
window.addEventListener("remote-object-update", this._handleRemoteEditObject);
if (this.state.isOwner) {
let changed = false;
@ -126,18 +111,9 @@ export default class SceneSlate extends React.Component {
componentWillUnmount() {
isMounted = false;
window.removeEventListener(
"remote-update-slate-screen",
this._handleRemoteAddObject
);
window.removeEventListener(
"remote-delete-object",
this._handleRemoteDeleteObject
);
window.removeEventListener(
"remote-object-update",
this._handleRemoteEditObject
);
window.removeEventListener("remote-update-slate-screen", this._handleRemoteAddObject);
window.removeEventListener("remote-delete-object", this._handleRemoteDeleteObject);
window.removeEventListener("remote-object-update", this._handleRemoteEditObject);
}
_handleRemoteAddObject = () => {
@ -187,8 +163,7 @@ export default class SceneSlate extends React.Component {
name: "create-alert",
detail: {
alert: {
message:
"We're having trouble connecting right now. Please try again later",
message: "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) => {
let objects = newObjects
? newObjects
: [...this.props.current.data.objects];
let objects = newObjects ? newObjects : [...this.props.current.data.objects];
System.dispatchCustomEvent({
name: "slate-global-create-carousel",
detail: {
@ -294,8 +267,7 @@ export default class SceneSlate extends React.Component {
name: "create-alert",
detail: {
alert: {
message:
"We're having trouble connecting right now. Please try again later",
message: "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",
detail: {
alert: {
message:
"We're having trouble connecting right now. Please try again later",
message: "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",
detail: {
alert: {
message:
"We're having trouble connecting right now. Please try again later",
message: "We're having trouble connecting right now. Please try again later",
},
},
});
@ -425,6 +395,7 @@ export default class SceneSlate extends React.Component {
};
render() {
console.log(this.props);
const { user, data } = this.props.current;
const { body = "", preview } = data;
let objects = this.props.current.data.objects;
@ -524,9 +495,7 @@ export default class SceneSlate extends React.Component {
<SlateLayoutMobile
isOwner={this.state.isOwner}
items={objects}
fileNames={
layouts && layouts.ver === "2.0" ? layouts.fileNames : false
}
fileNames={layouts && layouts.ver === "2.0" ? layouts.fileNames : false}
onSelect={this._handleSelect}
/>
) : (
@ -540,32 +509,20 @@ export default class SceneSlate extends React.Component {
: this.state.isOwner
? `${window.location.hostname}${
window.location.port ? ":" + window.location.port : ""
}/${this.props.viewer.username}/${
this.props.current.slatename
}`
}/${this.props.viewer.username}/${this.props.current.slatename}`
: ""
}
viewer={this.props.viewer}
slateId={this.props.current.id}
layout={
layouts && layouts.ver === "2.0" ? layouts.layout || [] : null
}
layout={layouts && layouts.ver === "2.0" ? layouts.layout || [] : null}
onSaveLayout={this._handleSaveLayout}
isOwner={this.state.isOwner}
fileNames={
layouts && layouts.ver === "2.0" ? layouts.fileNames : false
}
fileNames={layouts && layouts.ver === "2.0" ? layouts.fileNames : false}
preview={preview}
onSavePreview={(preview) =>
this._handleSave(null, null, null, false, preview)
}
onSavePreview={(preview) => this._handleSave(null, null, null, false, preview)}
items={objects}
onSelect={this._handleSelect}
defaultLayout={
layouts && layouts.ver === "2.0"
? layouts.defaultLayout
: true
}
defaultLayout={layouts && layouts.ver === "2.0" ? layouts.defaultLayout : true}
onAction={this.props.onAction}
onRemoveFromSlate={this._handleRemoteDeleteObject}
onDeleteFiles={this._handleDeleteFiles}
@ -583,9 +540,7 @@ export default class SceneSlate extends React.Component {
<SVG.Book height="24px" style={{ margin: "0 16px" }} />
<SVG.Video height="24px" style={{ margin: "0 16px" }} />
</div>
<div style={{ marginTop: 24 }}>
Drag and drop files to add them to this slate
</div>
<div style={{ marginTop: 24 }}>Drag and drop files to add them to this slate</div>
</EmptyState>
</div>
) : (