mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-27 10:52:41 +03:00
updated style for profiles and slates
This commit is contained in:
Martina
parent
fec850639d
commit
6a524f68dd
@ -735,3 +735,19 @@ export const NoImage = (props) => (
|
||||
<path d="M15.28 15.28C14.9481 15.765 14.5134 16.171 14.0068 16.469C13.5002 16.7669 12.9342 16.9496 12.3489 17.004C11.7637 17.0584 11.1737 16.9831 10.6209 16.7836C10.0681 16.5841 9.56601 16.2652 9.15042 15.8496C8.73483 15.434 8.41593 14.9319 8.2164 14.3791C8.01688 13.8263 7.94163 13.2363 7.99601 12.6511C8.05039 12.0658 8.23306 11.4998 8.53103 10.9932C8.829 10.4866 9.23495 10.0519 9.72 9.72M21 21H3C2.46957 21 1.96086 20.7893 1.58579 20.4142C1.21071 20.0391 1 19.5304 1 19V8C1 7.46957 1.21071 6.96086 1.58579 6.58579C1.96086 6.21071 2.46957 6 3 6H6L21 21ZM9 3H15L17 6H21C21.5304 6 22.0391 6.21071 22.4142 6.58579C22.7893 6.96086 23 7.46957 23 8V17.34L9 3Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Plus = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -24,6 +24,7 @@ const STYLES_PROFILE_IMAGE = css`
|
||||
|
||||
const STYLES_NAME = css`
|
||||
font-size: ${Constants.typescale.lvl3};
|
||||
font-family: ${Constants.font.medium};
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
@ -86,14 +87,6 @@ export default class Profile extends React.Component {
|
||||
key={url}
|
||||
slate={slate}
|
||||
editing={this.props.editing}
|
||||
onClick={() =>
|
||||
this.props.onAction({
|
||||
type: "NAVIGATE",
|
||||
value: this.props.sceneId,
|
||||
scene: "PUBLIC_SLATE",
|
||||
data: slate,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -78,25 +78,8 @@ const STYLES_SLATE_ENTRY_CONTAINER = css`
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_IMAGES_CONTAINER = css`
|
||||
margin-left: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_IMAGE = css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
margin-left: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_LINK_HOVER = css`
|
||||
color: ${Constants.system.black};
|
||||
:hover {
|
||||
color: ${Constants.system.brand};
|
||||
}
|
||||
margin-top: 8px;
|
||||
margin-left: 40px;
|
||||
`;
|
||||
|
||||
const STYLES_TITLE = css`
|
||||
@ -119,17 +102,7 @@ const SlateEntry = ({ item }) => {
|
||||
</div>
|
||||
{item.data.objects.length ? (
|
||||
<div css={STYLES_SLATE_IMAGES_CONTAINER}>
|
||||
<SlatePreviewRow
|
||||
numItems={4}
|
||||
style={{ width: "72px", height: "72px", padding: "8px" }}
|
||||
containerStyle={{
|
||||
maxHeight: "72px",
|
||||
justifyContent: "flex-start",
|
||||
}}
|
||||
previewStyle={{ fontSize: "12px", padding: "4px" }}
|
||||
slate={item}
|
||||
small
|
||||
/>
|
||||
<SlatePreviewRow numItems={4} slate={item} small />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
@ -150,11 +123,11 @@ const FileEntry = ({ item }) => {
|
||||
<div>@{item.data.slate.owner.username}</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div css={STYLES_SLATE_IMAGE}>
|
||||
<SlateMediaObjectPreview
|
||||
style={{ fontSize: "12px", padding: "4px" }}
|
||||
url={item.data.file.url}
|
||||
type={item.data.file.type}
|
||||
<div css={STYLES_SLATE_IMAGES_CONTAINER}>
|
||||
<SlatePreviewRow
|
||||
numItems={1}
|
||||
slate={{ data: { objects: [item.data.file] } }}
|
||||
small
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,7 +16,6 @@ const STYLES_ENTITY = css`
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid ${Constants.system.border};
|
||||
background-color: ${Constants.system.foreground};
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -25,7 +24,7 @@ const STYLES_ENTITY = css`
|
||||
cursor: pointer;
|
||||
pointer-events: none;
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
font-size: 0.9rem;
|
||||
`;
|
||||
|
||||
const STYLES_TITLE = css`
|
||||
@ -34,8 +33,6 @@ const STYLES_TITLE = css`
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
${"" /* text-overflow: ellipsis;
|
||||
white-space: nowrap; */}
|
||||
`;
|
||||
|
||||
export default class SlateMediaObjectPreview extends React.Component {
|
||||
|
||||
@ -10,9 +10,9 @@ const STYLES_IMAGE_ROW = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 170px;
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
margin-right: -34px;
|
||||
margin: 0px -18px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
justify-content: center;
|
||||
@ -20,13 +20,40 @@ const STYLES_IMAGE_ROW = css`
|
||||
`;
|
||||
|
||||
const STYLES_ITEM_BOX = css`
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
margin-right: 32px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin: 0px 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0px 0px 0px 1px ${Constants.system.gray} inset;
|
||||
box-shadow: 0px 0px 0px 1px rgba(229, 229, 229, 0.5) inset;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_ROW_SMALL = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 56px;
|
||||
overflow: hidden;
|
||||
margin: 0px -8px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
justify-content: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_ITEM_BOX_SMALL = css`
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0px 0px 0px 1px rgba(229, 229, 229, 0.5) inset;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 0 auto;
|
||||
@ -40,13 +67,20 @@ export function SlatePreviewRow(props) {
|
||||
? props.slate.data.objects.slice(0, numItems)
|
||||
: props.slate.data.objects;
|
||||
return (
|
||||
<div css={STYLES_IMAGE_ROW} style={props.containerStyle}>
|
||||
<div
|
||||
css={props.small ? STYLES_IMAGE_ROW_SMALL : STYLES_IMAGE_ROW}
|
||||
style={props.containerStyle}
|
||||
>
|
||||
{objects.map((each) => (
|
||||
<div key={each.url} css={STYLES_ITEM_BOX} style={props.style}>
|
||||
<div
|
||||
key={each.url}
|
||||
css={props.small ? STYLES_ITEM_BOX_SMALL : STYLES_ITEM_BOX}
|
||||
style={props.style}
|
||||
>
|
||||
<SlateMediaObjectPreview
|
||||
type={each.type}
|
||||
url={each.url}
|
||||
style={props.previewStyle}
|
||||
style={{ border: "none", ...props.previewStyle }}
|
||||
title={each.title || each.name}
|
||||
small={props.small}
|
||||
/>
|
||||
@ -58,12 +92,12 @@ export function SlatePreviewRow(props) {
|
||||
|
||||
const STYLES_BLOCK = css`
|
||||
border: 1px solid ${Constants.system.border};
|
||||
border-radius: 20px;
|
||||
border-radius: 8px;
|
||||
padding: 32px 40px;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
margin: 24px auto 48px auto;
|
||||
max-width: 1058px;
|
||||
max-width: 1026px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
@ -91,11 +125,31 @@ const STYLES_COPY_INPUT = css`
|
||||
`;
|
||||
|
||||
const STYLES_TAG = css`
|
||||
margin-left: 24px;
|
||||
margin-left: 16px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 2px;
|
||||
background-color: ${Constants.system.gray};
|
||||
color: ${Constants.system.white};
|
||||
border: 1px solid ${Constants.system.black};
|
||||
color: ${Constants.system.black};
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-size: 0.9rem;
|
||||
`;
|
||||
|
||||
const STYLES_BODY = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 24px;
|
||||
line-height: 20px;
|
||||
`;
|
||||
|
||||
const STYLES_CREATE_NEW = css`
|
||||
color: ${Constants.system.darkGray};
|
||||
box-shadow: 0px 0px 0px 1px rgba(229, 229, 229, 0.5) inset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
`;
|
||||
|
||||
export default class SlatePreviewBlock extends Component {
|
||||
@ -106,31 +160,44 @@ export default class SlatePreviewBlock extends Component {
|
||||
};
|
||||
|
||||
_handleCopy = (e, value) => {
|
||||
e.stopPropagation();
|
||||
console.log("copy");
|
||||
this.setState({ copyable: value }, () => {
|
||||
this._ref.select();
|
||||
document.execCommand("copy");
|
||||
});
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
render() {
|
||||
if (!this.props.editing && !this.props.slate.data.objects.length) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div css={STYLES_BLOCK}>
|
||||
<div css={STYLES_TITLE_LINE}>
|
||||
<strong style={{ fontSize: Constants.typescale.lvl2 }}>
|
||||
<strong
|
||||
style={{
|
||||
fontSize: Constants.typescale.lvl2,
|
||||
fontFamily: Constants.font.semiBold,
|
||||
}}
|
||||
>
|
||||
{this.props.slate.data.name}
|
||||
</strong>
|
||||
{this.props.editing ? (
|
||||
this.props.slate.data.public ? (
|
||||
<div
|
||||
css={STYLES_TAG}
|
||||
style={{ backgroundColor: Constants.system.brand }}
|
||||
style={{
|
||||
borderColor: Constants.system.brand,
|
||||
color: Constants.system.brand,
|
||||
}}
|
||||
>
|
||||
Public
|
||||
</div>
|
||||
) : (
|
||||
<div css={STYLES_TAG}>Private</div>
|
||||
<div css={STYLES_TAG} style={{ opacity: "25%" }}>
|
||||
Private
|
||||
</div>
|
||||
)
|
||||
) : null}
|
||||
{this.props.editing ? (
|
||||
@ -144,10 +211,22 @@ export default class SlatePreviewBlock extends Component {
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<SlatePreviewRow
|
||||
{...this.props}
|
||||
previewStyle={this.props.previewStyle}
|
||||
/>
|
||||
{this.props.slate.data.body ? (
|
||||
<div css={STYLES_BODY}>{this.props.slate.data.body}</div>
|
||||
) : (
|
||||
<div style={{ height: "8px" }} />
|
||||
)}
|
||||
{this.props.slate.data.objects.length ? (
|
||||
<SlatePreviewRow
|
||||
{...this.props}
|
||||
previewStyle={this.props.previewStyle}
|
||||
/>
|
||||
) : (
|
||||
<div css={STYLES_CREATE_NEW}>
|
||||
<SVG.Plus height="24px" />
|
||||
<div>Add Files</div>
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
readOnly
|
||||
ref={(c) => {
|
||||
|
||||
@ -20,6 +20,7 @@ const STYLES_TAB = css`
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
font-family: ${Constants.font.medium};
|
||||
user-select: none;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
@ -36,10 +37,7 @@ export class TabGroup extends React.Component {
|
||||
css={STYLES_TAB}
|
||||
key={tab}
|
||||
style={{
|
||||
color:
|
||||
this.props.value === i
|
||||
? Constants.system.pitchBlack
|
||||
: Constants.system.gray,
|
||||
opacity: this.props.value === i ? "100%" : "25%",
|
||||
}}
|
||||
onClick={() => this.props.onChange(i)}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user