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

update to data bar appearance

Browse Source
This commit is contained in:
Martina 2020-12-05 19:15:26 -08:00
parent 82dcb84e90
commit 6d6eb3b3f3
5 changed files with 160 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
components/core/DataView.js
View File

@ -110,16 +110,27 @@ const STYLES_ACTION_BAR = css`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: 0 0 0 1px ${Constants.system.lightBorder} inset,
0 0 4px 2px ${Constants.system.shadow};
border-radius: 4px; border-radius: 4px;
padding: 12px 32px; padding: 0px 32px;
box-sizing: border-box; box-sizing: border-box;
background-color: ${Constants.system.foreground}; background-color: ${Constants.system.textGrayDark};
width: 90vw;
max-width: 878px;
height: 48px;
@media (max-width: ${Constants.sizes.mobile}px) {
display: none;
}
`;
const STYLES_ACTION_BAR_CONTAINER = css`
position: fixed; position: fixed;
bottom: 12px; bottom: 12px;
left: 10vw; left: 0px;
width: 80vw; width: 100vw;
display: flex;
justify-content: center;
z-index: ${Constants.zindex.header};
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
display: none; display: none;
@ -141,6 +152,7 @@ const STYLES_LEFT = css`
const STYLES_FILES_SELECTED = css` const STYLES_FILES_SELECTED = css`
font-family: ${Constants.font.semiBold}; font-family: ${Constants.font.semiBold};
color: ${Constants.system.white};
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
display: none; display: none;
@ -448,37 +460,43 @@ export default class DataView extends React.Component {
const footer = ( const footer = (
<React.Fragment> <React.Fragment>
{numChecked ? ( {numChecked ? (
<div css={STYLES_ACTION_BAR}> <div css={STYLES_ACTION_BAR_CONTAINER}>
<div css={STYLES_LEFT}> <div css={STYLES_ACTION_BAR}>
<span css={STYLES_FILES_SELECTED}> <div css={STYLES_LEFT}>
{numChecked} file{numChecked > 1 ? "s" : ""} selected <span css={STYLES_FILES_SELECTED}>
</span> {numChecked} file{numChecked > 1 ? "s" : ""} selected
</div> </span>
<div css={STYLES_RIGHT}> </div>
<ButtonPrimary transparent onClick={this._handleAddToSlate}> <div css={STYLES_RIGHT}>
Add to slate <ButtonPrimary
</ButtonPrimary> transparent
<ButtonWarning style={{ color: Constants.system.white }}
transparent onClick={this._handleAddToSlate}
style={{ marginLeft: 8 }} >
onClick={() => this._handleDelete()} Add to slate
loading={ </ButtonPrimary>
this.state.loading && <ButtonWarning
Object.values(this.state.loading).some((elem) => { transparent
return !!elem; style={{ marginLeft: 8, color: Constants.system.white }}
}) onClick={() => this._handleDelete()}
} loading={
> this.state.loading &&
Delete files Object.values(this.state.loading).some((elem) => {
</ButtonWarning> return !!elem;
<div })
css={STYLES_ICON_BOX} }
onClick={() => { >
this.setState({ checked: {} }); Delete files
this.lastSelectedItemIndex = null; </ButtonWarning>
}} <div
> css={STYLES_ICON_BOX}
<SVG.Dismiss height="20px" style={{ color: Constants.system.darkGray }} /> onClick={() => {
this.setState({ checked: {} });
this.lastSelectedItemIndex = null;
}}
>
<SVG.Dismiss height="20px" style={{ color: Constants.system.darkGray }} />
</div>
</div> </div>
</div> </div>
</div> </div>

173
components/core/SlateLayout.js
View File

@ -213,20 +213,30 @@ const STYLES_ACTION_BAR = css`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: 0 0 0 1px ${Constants.system.lightBorder} inset,
0 0 4px 2px ${Constants.system.shadow};
border-radius: 4px; border-radius: 4px;
padding: 12px 32px; padding: 0px 32px;
box-sizing: border-box; box-sizing: border-box;
background-color: ${Constants.system.foreground}; background-color: ${Constants.system.textGrayDark};
width: 90vw;
max-width: 878px;
height: 48px;
@media (max-width: ${Constants.sizes.mobile}px) {
display: none;
}
`;
const STYLES_ACTION_BAR_CONTAINER = css`
position: fixed; position: fixed;
bottom: 12px; bottom: 12px;
width: calc(100vw - ${Constants.sizes.sidebar}px + 32px); left: 0px;
max-width: 1660px; width: 100vw;
display: flex;
justify-content: center;
z-index: ${Constants.zindex.header}; z-index: ${Constants.zindex.header};
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
width: calc(100vw - 48px); display: none;
} }
`; `;
@ -245,6 +255,7 @@ const STYLES_LEFT = css`
const STYLES_FILES_SELECTED = css` const STYLES_FILES_SELECTED = css`
font-family: ${Constants.font.semiBold}; font-family: ${Constants.font.semiBold};
color: ${Constants.system.white};
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
display: none; display: none;
@ -921,7 +932,7 @@ export class SlateLayout extends React.Component {
//NOTE(martina): collapses the z-indexes back down to 0 through n-1 (so they don't continuously get higher) //NOTE(martina): collapses the z-indexes back down to 0 through n-1 (so they don't continuously get higher)
let zIndexes = this.state.layout.map((pos) => pos.z); let zIndexes = this.state.layout.map((pos) => pos.z);
zIndexes = [...new Set(zIndexes)]; zIndexes = [...new Set(zIndexes)];
zIndexes.sort(function(a, b) { zIndexes.sort(function (a, b) {
return a - b; return a - b;
}); });
let layout = this.cloneLayout(this.state.layout); let layout = this.cloneLayout(this.state.layout);
@ -1239,10 +1250,12 @@ export class SlateLayout extends React.Component {
height: this.state.editing height: this.state.editing
? `calc(100vh + ${this.state.containerHeight}px)` ? `calc(100vh + ${this.state.containerHeight}px)`
: `calc(96px + ${this.state.containerHeight}px)`, : `calc(96px + ${this.state.containerHeight}px)`,
backgroundSize: `${(CONTAINER_SIZE / 108) * this.state.unit}px ${10 * backgroundSize: `${(CONTAINER_SIZE / 108) * this.state.unit}px ${
this.state.unit}px`, 10 * this.state.unit
backgroundPosition: `-${(CONTAINER_SIZE / 220) * }px`,
this.state.unit}px -${(CONTAINER_SIZE / 220) * this.state.unit}px`, backgroundPosition: `-${(CONTAINER_SIZE / 220) * this.state.unit}px -${
(CONTAINER_SIZE / 220) * this.state.unit
}px`,
}} }}
ref={(c) => { ref={(c) => {
this._ref = c; this._ref = c;
@ -1691,66 +1704,80 @@ export class SlateLayout extends React.Component {
</div> </div>
</div> </div>
{numChecked ? ( {numChecked ? (
<div css={STYLES_ACTION_BAR}> <div css={STYLES_ACTION_BAR_CONTAINER}>
<div css={STYLES_LEFT}> <div css={STYLES_ACTION_BAR}>
<span css={STYLES_FILES_SELECTED}> <div css={STYLES_LEFT}>
{numChecked} file{numChecked > 1 ? "s" : ""} selected <span css={STYLES_FILES_SELECTED}>
</span> {numChecked} file{numChecked > 1 ? "s" : ""} selected
</span>
</div>
{this.props.isOwner ? (
<div css={STYLES_RIGHT}>
<ButtonPrimary
transparent
style={{ color: Constants.system.white }}
onClick={this._handleAddToSlate}
>
Add to slate
</ButtonPrimary>
{/* <ButtonPrimary transparent onClick={this._handleDownload}>
Download
</ButtonPrimary> */}
<ButtonWarning
transparent
style={{ marginLeft: 8, color: Constants.system.white }}
onClick={this._handleRemoveFromSlate}
loading={
this.state.loading &&
Object.values(this.state.loading).some((elem) => {
return !!elem;
})
}
>
Remove
</ButtonWarning>
<ButtonWarning
transparent
style={{ marginLeft: 8, color: Constants.system.white }}
onClick={this._handleDeleteFiles}
loading={
this.state.loading &&
Object.values(this.state.loading).some((elem) => {
return !!elem;
})
}
>
Delete files
</ButtonWarning>
<div css={STYLES_ICON_BOX} onClick={() => this.setState({ checked: {} })}>
<SVG.Dismiss height="20px" style={{ color: Constants.system.darkGray }} />
</div>
</div>
) : (
<div css={STYLES_RIGHT}>
<ButtonPrimary
transparent
onClick={this._handleAddToSlate}
style={{ color: Constants.system.white }}
>
Add to slate
</ButtonPrimary>
<ButtonPrimary
transparent
onClick={this._handleSaveCopy}
style={{ color: Constants.system.white }}
>
Save copy
</ButtonPrimary>
{/* <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>
</div>
)}
</div> </div>
{this.props.isOwner ? (
<div css={STYLES_RIGHT}>
<ButtonPrimary transparent onClick={this._handleAddToSlate}>
Add to slate
</ButtonPrimary>
{/* <ButtonPrimary transparent onClick={this._handleDownload}>
Download
</ButtonPrimary> */}
<ButtonWarning
transparent
style={{ marginLeft: 8 }}
onClick={this._handleRemoveFromSlate}
loading={
this.state.loading &&
Object.values(this.state.loading).some((elem) => {
return !!elem;
})
}
>
Remove
</ButtonWarning>
<ButtonWarning
transparent
style={{ marginLeft: 8 }}
onClick={this._handleDeleteFiles}
loading={
this.state.loading &&
Object.values(this.state.loading).some((elem) => {
return !!elem;
})
}
>
Delete files
</ButtonWarning>
<div css={STYLES_ICON_BOX} onClick={() => this.setState({ checked: {} })}>
<SVG.Dismiss height="20px" style={{ color: Constants.system.darkGray }} />
</div>
</div>
) : (
<div css={STYLES_RIGHT}>
<ButtonPrimary transparent onClick={this._handleAddToSlate}>
Add to slate
</ButtonPrimary>
<ButtonPrimary transparent onClick={this._handleSaveCopy}>
Save copy
</ButtonPrimary>
{/* <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>
</div>
)}
</div> </div>
) : null} ) : null}
<input <input
@ -1767,9 +1794,7 @@ export class SlateLayout extends React.Component {
onClose={() => this.setState({ signInModal: false })} onClose={() => this.setState({ signInModal: false })}
viewer={this.props.viewer} viewer={this.props.viewer}
open={this.state.signInModal} open={this.state.signInModal}
redirectURL={`/_?scene=V1_NAVIGATION_SLATE&user=${ redirectURL={`/_?scene=V1_NAVIGATION_SLATE&user=${this.props.creator.username}&slate=${this.props.slate.slatename}`}
this.props.creator.username
}&slate=${this.props.slate.slatename}`}
/> />
</div> </div>
)} )}

7
components/core/SlateMediaObjectPreview.js
View File

@ -46,6 +46,9 @@ const STYLES_TITLE = css`
overflow: hidden; overflow: hidden;
word-break: break-all; word-break: break-all;
text-overflow: break-word; text-overflow: break-word;
color: ${Constants.system.textGray};
font-size: ${Constants.typescale.lvlN1};
font-family: ${Constants.font.medium};
`; `;
const STYLES_BLUR_CONTAINER = css` const STYLES_BLUR_CONTAINER = css`
@ -203,8 +206,8 @@ export default class SlateMediaObjectPreview extends React.Component {
let element = ( let element = (
<FileTypeIcon <FileTypeIcon
type={this.props.type} type={this.props.type}
height={this.props.previewPanel ? "80px" : "24px"} height={this.props.previewPanel ? "80px" : "32px"}
style={this.props.previewPanel ? { color: "#bfbfbf" } : null} style={{ color: Constants.system.textGray }}
/> />
); );
return ( return (

1
scenes/SceneSlates.js
View File

@ -35,7 +35,6 @@ export default class SceneSlates extends React.Component {
}; };
render() { render() {
console.log(this.props.viewer.slates);
let subscriptions = this.props.viewer.subscriptions let subscriptions = this.props.viewer.subscriptions
.filter((each) => { .filter((each) => {
return !!each.target_slate_id; return !!each.target_slate_id;

2
server.js
View File

@ -108,7 +108,7 @@ app.prepare().then(async () => {
const isBucketsAvailable = await Utilities.checkTextile(); const isBucketsAvailable = await Utilities.checkTextile();
if (!isBucketsAvailable) { if (!isBucketsAvailable && Environment.IS_PRODUCTION) {
return res.redirect("/maintenance"); return res.redirect("/maintenance");
} }