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

preview image uploader ui

Browse Source
This commit is contained in:
tarafanlin 2020-11-02 16:05:31 -08:00
parent f3c821f5a3
commit 8dee4811a9
1 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/core/CarouselSidebarData.js
View File

@ -2,6 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as Strings from "~/common/strings";
import * as Actions from "~/common/actions";
import * as System from "~/components/system";
import * as SVG from "~/common/svg";
import * as Window from "~/common/window";
@ -146,6 +147,26 @@ const STYLES_HIDDEN = css`
pointer-events: none;
`;
const STYLES_IMAGE_BOX = css`
max-width: 100%;
max-height: 368px;
display: flex;
align-items: center;
justify-content: center;
background-color: ${Constants.system.white};
overflow: hidden;
${"" /* box-shadow: 0 0 0 1px ${Constants.system.border} inset; */}
border-radius: 4px;
`;
const STYLES_GROUPING = css`
width: 100%;
border: 1px solid rgba(100, 100, 100, 0.5);
border-radius: 6px;
padding: 16px;
margin-bottom: 24px;
`;
export default class CarouselSidebarData extends React.Component {
_ref = null;
@ -296,6 +317,22 @@ export default class CarouselSidebarData extends React.Component {
loading={this.props.loading}
selectedColor={Constants.system.white}
/>
<System.P css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
Preview image
</System.P>
<System.P style={{ color: Constants.system.darkGray, lineHeight: "1.5" }}>
This is the preview image of your file.
</System.P>
<div css={STYLES_IMAGE_BOX} style={{ marginTop: 24 }}>
<img
src="https://slate.textile.io/ipfs/bafybeihaqkeoarr3sr55stdzaatcfmvxxek4qb6myd6cwdnswwic3q3ufu"
alt=""
style={{ maxWidth: "100%", maxHeight: "368px" }}
/>
</div>
<System.ButtonPrimary full style={{ marginTop: 16 }}>
Upload image
</System.ButtonPrimary>
<div css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
Privacy
</div>