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

34
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,6 +460,7 @@ export default class DataView extends React.Component {
const footer = ( const footer = (
<React.Fragment> <React.Fragment>
{numChecked ? ( {numChecked ? (
<div css={STYLES_ACTION_BAR_CONTAINER}>
<div css={STYLES_ACTION_BAR}> <div css={STYLES_ACTION_BAR}>
<div css={STYLES_LEFT}> <div css={STYLES_LEFT}>
<span css={STYLES_FILES_SELECTED}> <span css={STYLES_FILES_SELECTED}>
@ -455,12 +468,16 @@ export default class DataView extends React.Component {
</span> </span>
</div> </div>
<div css={STYLES_RIGHT}> <div css={STYLES_RIGHT}>
<ButtonPrimary transparent onClick={this._handleAddToSlate}> <ButtonPrimary
transparent
style={{ color: Constants.system.white }}
onClick={this._handleAddToSlate}
>
Add to slate Add to slate
</ButtonPrimary> </ButtonPrimary>
<ButtonWarning <ButtonWarning
transparent transparent
style={{ marginLeft: 8 }} style={{ marginLeft: 8, color: Constants.system.white }}
onClick={() => this._handleDelete()} onClick={() => this._handleDelete()}
loading={ loading={
this.state.loading && this.state.loading &&
@ -482,6 +499,7 @@ export default class DataView extends React.Component {
</div> </div>
</div> </div>
</div> </div>
</div>
) : null} ) : null}
</React.Fragment> </React.Fragment>
); );

63
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;
@ -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,6 +1704,7 @@ export class SlateLayout extends React.Component {
</div> </div>
</div> </div>
{numChecked ? ( {numChecked ? (
<div css={STYLES_ACTION_BAR_CONTAINER}>
<div css={STYLES_ACTION_BAR}> <div css={STYLES_ACTION_BAR}>
<div css={STYLES_LEFT}> <div css={STYLES_LEFT}>
<span css={STYLES_FILES_SELECTED}> <span css={STYLES_FILES_SELECTED}>
@ -1699,7 +1713,11 @@ export class SlateLayout extends React.Component {
</div> </div>
{this.props.isOwner ? ( {this.props.isOwner ? (
<div css={STYLES_RIGHT}> <div css={STYLES_RIGHT}>
<ButtonPrimary transparent onClick={this._handleAddToSlate}> <ButtonPrimary
transparent
style={{ color: Constants.system.white }}
onClick={this._handleAddToSlate}
>
Add to slate Add to slate
</ButtonPrimary> </ButtonPrimary>
{/* <ButtonPrimary transparent onClick={this._handleDownload}> {/* <ButtonPrimary transparent onClick={this._handleDownload}>
@ -1707,7 +1725,7 @@ export class SlateLayout extends React.Component {
</ButtonPrimary> */} </ButtonPrimary> */}
<ButtonWarning <ButtonWarning
transparent transparent
style={{ marginLeft: 8 }} style={{ marginLeft: 8, color: Constants.system.white }}
onClick={this._handleRemoveFromSlate} onClick={this._handleRemoveFromSlate}
loading={ loading={
this.state.loading && this.state.loading &&
@ -1720,7 +1738,7 @@ export class SlateLayout extends React.Component {
</ButtonWarning> </ButtonWarning>
<ButtonWarning <ButtonWarning
transparent transparent
style={{ marginLeft: 8 }} style={{ marginLeft: 8, color: Constants.system.white }}
onClick={this._handleDeleteFiles} onClick={this._handleDeleteFiles}
loading={ loading={
this.state.loading && this.state.loading &&
@ -1737,10 +1755,18 @@ export class SlateLayout extends React.Component {
</div> </div>
) : ( ) : (
<div css={STYLES_RIGHT}> <div css={STYLES_RIGHT}>
<ButtonPrimary transparent onClick={this._handleAddToSlate}> <ButtonPrimary
transparent
onClick={this._handleAddToSlate}
style={{ color: Constants.system.white }}
>
Add to slate Add to slate
</ButtonPrimary> </ButtonPrimary>
<ButtonPrimary transparent onClick={this._handleSaveCopy}> <ButtonPrimary
transparent
onClick={this._handleSaveCopy}
style={{ color: Constants.system.white }}
>
Save copy Save copy
</ButtonPrimary> </ButtonPrimary>
{/* <ButtonPrimary transparent onClick={this._handleDownload}> {/* <ButtonPrimary transparent onClick={this._handleDownload}>
@ -1752,6 +1778,7 @@ export class SlateLayout extends React.Component {
</div> </div>
)} )}
</div> </div>
</div>
) : null} ) : null}
<input <input
ref={(c) => { ref={(c) => {
@ -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");
} }