filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-09-20 02:37:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

suggested edits to modal styling

Browse Source
This commit is contained in:
Martina 2020-07-14 16:12:22 -07:00
parent 86c8b4739a
commit 631ac64a77
5 changed files with 47 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/system/components/GlobalModal.js
View File

@ -9,24 +9,27 @@ const STYLES_BACKGROUND = css`
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(45, 41, 38, 0.6);
z-index: ${Constants.zindex.modal};
`;
const STYLES_MODAL = css`
width: 50vw;
height: 60vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: relative;
padding: 8px;
max-width: 568px;
width: 100%;
max-height: 568px;
height: 100%;
border-radius: 4px;
background-color: ${Constants.system.white};
`;
const STYLES_X = css`
const STYLES_CLOSE_ICON = css`
height: 24px;
position: absolute;
top: 8px;
@ -58,20 +61,18 @@ export class GlobalModal extends React.Component {
};
render() {
if (this.state.modal) {
return (
<div
css={STYLES_BACKGROUND}
style={this.props.backgroundStyle}
onClick={this._handleDelete}
>
<div css={STYLES_MODAL} style={this.props.style}>
{this.state.modal}
<SVG.X css={STYLES_X} onClick={this._handleDelete} />
</div>
if (!this.state.modal) return null;
return (
<div
css={STYLES_BACKGROUND}
style={this.props.backgroundStyle}
onClick={this._handleDelete}
>
<div css={STYLES_MODAL} style={this.props.style}>
{this.state.modal}
<SVG.Close css={STYLES_CLOSE_ICON} onClick={this._handleDelete} />
</div>
);
}
return null;
</div>
);
}
}

5
components/system/components/ListEditor.js
View File

@ -195,7 +195,10 @@ export class ListEditor extends React.Component {
>
<SVG.Reorder className="cursor" css={STYLES_REORDER} />
<div>{item}</div>
<SVG.X css={STYLES_DELETE} onClick={() => this._handleDelete(i)} />
<SVG.Close
css={STYLES_DELETE}
onClick={() => this._handleDelete(i)}
/>
</div>
</Draggable>
));

73
components/system/svg.js
View File

@ -196,78 +196,7 @@ export const BandwidthUp = (props) => {
);
};
export const CheckCircle = (props) => {
return (
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
<g
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
>
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" />
<path d="M16.6666 8.5L10.25 14.9167L7.33331 12" />
</g>
</svg>
);
};
export const InfoCircle = (props) => {
return (
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
<g
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</g>
</svg>
);
};
export const AlertCircle = (props) => {
return (
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
<g
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</g>
</svg>
);
};
export const XCircle = (props) => {
return (
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
<g
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</g>
</svg>
);
};
export const X = (props) => {
export const Close = (props) => {
return (
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
<g

4
pages/system/inputs.js
View File

@ -220,7 +220,7 @@ import { Input, Textarea } from 'slate-react-system';`}
<System.Input
label="Icon and submit function"
name="exampleFive"
icon={SVG.X}
icon={SVG.Close}
onSubmit={() => {
this.setState({ exampleFive: "" });
}}
@ -241,7 +241,7 @@ import { Input, Textarea } from 'slate-react-system';`}
<Input
label="Icon with submit function"
name="exampleFive"
icon={SVG.X}
icon={SVG.Close}
onSubmit={() => {
this.setState({ exampleFive: "" });
}}

27
pages/system/modals.js
View File

@ -66,14 +66,27 @@ import { GlobalModal, dispatchCustomEvent } from 'slate-react-system';`}
render() {
return(
<React.Fragment>
<GlobalModal style={{ padding: "10px" }}/>
<GlobalModal style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
textAlign: "center",
}}
/>
{this.props.children}
</React.Fragment>
)
}
}`}
</System.CodeBlock>
<System.GlobalModal style={{ padding: "10px" }} />
<System.GlobalModal
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
textAlign: "center",
}}
/>
<br />
<br />
<br />
@ -84,15 +97,7 @@ import { GlobalModal, dispatchCustomEvent } from 'slate-react-system';`}
onClick={() =>
this._handleCreate({
modal: (
<div
style={{
textAlign: "center",
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
}}
>
<div>
<System.H2>Render whatever component you like here</System.H2>
<br />
<System.ButtonSecondary onClick={this._handleDelete}>