mirror of
https://github.com/chinchang/web-maker.git
synced 2025-06-09 03:07:20 +02:00
CreateNewModal: refactor ux
This commit is contained in:
Kushagra Gour
parent
27eee4fb16
commit
2bc061f33b
@ -3,8 +3,18 @@ import Modal from './Modal';
|
|||||||
import { ItemTile } from './ItemTile';
|
import { ItemTile } from './ItemTile';
|
||||||
import templates from '../templateList';
|
import templates from '../templateList';
|
||||||
import { Divider } from './common';
|
import { Divider } from './common';
|
||||||
|
import Switch from './Switch';
|
||||||
|
|
||||||
export class CreateNewModal extends Component {
|
export class CreateNewModal extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.modeChangeHandler = this.modeChangeHandler.bind(this);
|
||||||
|
}
|
||||||
|
modeChangeHandler(e) {
|
||||||
|
this.setState({
|
||||||
|
isFileModeSelected: e.target.checked
|
||||||
|
});
|
||||||
|
}
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
show,
|
show,
|
||||||
@ -16,41 +26,179 @@ export class CreateNewModal extends Component {
|
|||||||
} = this.props;
|
} = this.props;
|
||||||
return (
|
return (
|
||||||
<Modal show={show} closeHandler={closeHandler}>
|
<Modal show={show} closeHandler={closeHandler}>
|
||||||
|
<h2>Create New</h2>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div>
|
<div style="flex:1;" class="tac">
|
||||||
<button className="btn" onClick={onBlankTemplateSelect}>
|
<svg
|
||||||
Start a blank creation
|
width="287px"
|
||||||
</button>
|
height="150px"
|
||||||
|
viewBox="0 0 287 197"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
style={`opacity:${!this.state.isFileModeSelected ? '1' : '0.4'}`}
|
||||||
|
onClick={() => {
|
||||||
|
this.setState({ isFileModeSelected: false });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
id="Page-1"
|
||||||
|
stroke="none"
|
||||||
|
stroke-width="1"
|
||||||
|
fill="none"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
>
|
||||||
|
<g id="codepane" fill="#C5C5C5">
|
||||||
|
<rect
|
||||||
|
id="Rectangle"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="89"
|
||||||
|
height="80"
|
||||||
|
rx="5"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="codepane"
|
||||||
|
transform="translate(99.000000, 0.000000)"
|
||||||
|
fill="#C5C5C5"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
id="Rectangle"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="89"
|
||||||
|
height="80"
|
||||||
|
rx="5"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="codepane"
|
||||||
|
transform="translate(198.000000, 0.000000)"
|
||||||
|
fill="#C5C5C5"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
id="Rectangle"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="89"
|
||||||
|
height="80"
|
||||||
|
rx="5"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="codepane"
|
||||||
|
transform="translate(0.000000, 88.000000)"
|
||||||
|
fill="#C5C5C5"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
id="Rectangle"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="287"
|
||||||
|
height="109"
|
||||||
|
rx="5"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
<p>
|
<p>
|
||||||
This gives you 3 separate panes to write HTML, CSS and JavaScript.
|
3 separate panes to write HTML, CSS and JavaScript. Good for
|
||||||
Good for quickly testing something.
|
quickly testing something.
|
||||||
</p>
|
</p>
|
||||||
<Divider />
|
</div>
|
||||||
Or choose from a template:
|
<div class="tac ml-2" style="margin-top:100px;">
|
||||||
<div class="saved-items-pane__container">
|
<Switch
|
||||||
{templates.map(template => (
|
checked={this.state.isFileModeSelected}
|
||||||
<ItemTile
|
labels={['3 panes', 'Files (beta)']}
|
||||||
inline
|
onChange={this.modeChangeHandler}
|
||||||
item={template}
|
showBothLabels
|
||||||
focusable
|
/>
|
||||||
onClick={onTemplateSelect.bind(null, template)}
|
</div>
|
||||||
|
<div style="flex:1" class="tac ml-2">
|
||||||
|
<svg
|
||||||
|
width="286px"
|
||||||
|
height="150px"
|
||||||
|
viewBox="0 0 286 196"
|
||||||
|
version="1.1"
|
||||||
|
style={`opacity:${this.state.isFileModeSelected ? '1' : '0.4'}`}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
onClick={() => {
|
||||||
|
this.setState({ isFileModeSelected: true });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
id="Page-1"
|
||||||
|
stroke="none"
|
||||||
|
stroke-width="1"
|
||||||
|
fill="none"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M5,0 L49,0 C51.7614237,-5.07265313e-16 54,2.23857625 54,5 L54,191 C54,193.761424 51.7614237,196 49,196 L5,196 C2.23857625,196 1.62803173e-14,193.761424 0,191 L0,5 C-3.38176876e-16,2.23857625 2.23857625,5.07265313e-16 5,0 Z M7.59574468,29 C5.93889043,29 4.59574468,30.3431458 4.59574468,32 C4.59574468,33.6568542 5.93889043,35 7.59574468,35 L39.5106383,35 C41.1674925,35 42.5106383,33.6568542 42.5106383,32 C42.5106383,30.3431458 41.1674925,29 39.5106383,29 L7.59574468,29 Z M7.59574468,71 C5.93889043,71 4.59574468,72.3431458 4.59574468,74 C4.59574468,75.6568542 5.93889043,77 7.59574468,77 L24.5744681,77 C26.2313223,77 27.5744681,75.6568542 27.5744681,74 C27.5744681,72.3431458 26.2313223,71 24.5744681,71 L7.59574468,71 Z M14.4893617,84 C12.8325075,84 11.4893617,85.3431458 11.4893617,87 C11.4893617,88.6568542 12.8325075,90 14.4893617,90 L32.6170213,90 C34.2738755,90 35.6170213,88.6568542 35.6170213,87 C35.6170213,85.3431458 34.2738755,84 32.6170213,84 L14.4893617,84 Z M7.59574468,15 C5.93889043,15 4.59574468,16.3431458 4.59574468,18 C4.59574468,19.6568542 5.93889043,21 7.59574468,21 L32.6170213,21 C34.2738755,21 35.6170213,19.6568542 35.6170213,18 C35.6170213,16.3431458 34.2738755,15 32.6170213,15 L7.59574468,15 Z M13.3404255,42 C11.6835713,42 10.3404255,43.3431458 10.3404255,45 C10.3404255,46.6568542 11.6835713,48 13.3404255,48 L44.106383,48 C45.7632372,48 47.106383,46.6568542 47.106383,45 C47.106383,43.3431458 45.7632372,42 44.106383,42 L13.3404255,42 Z M14.4893617,57 C12.8325075,57 11.4893617,58.3431458 11.4893617,60 C11.4893617,61.6568542 12.8325075,63 14.4893617,63 L45.2553191,63 C46.9121734,63 48.2553191,61.6568542 48.2553191,60 C48.2553191,58.3431458 46.9121734,57 45.2553191,57 L14.4893617,57 Z"
|
||||||
|
id="Combined-Shape"
|
||||||
|
fill="#C5C5C5"
|
||||||
/>
|
/>
|
||||||
))}
|
<g
|
||||||
</div>
|
id="codepane"
|
||||||
</div>
|
transform="translate(64.000000, 0.000000)"
|
||||||
<div>
|
fill="#C5C5C5"
|
||||||
<Divider vertical />
|
>
|
||||||
</div>
|
<rect
|
||||||
<div>
|
id="Rectangle"
|
||||||
<button className="btn" onClick={onBlankFileTemplateSelect}>
|
x="0"
|
||||||
Start a blank creation with files (beta)
|
y="0"
|
||||||
</button>
|
width="106"
|
||||||
|
height="196"
|
||||||
|
rx="5"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="codepane"
|
||||||
|
transform="translate(180.000000, 0.000000)"
|
||||||
|
fill="#C5C5C5"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
id="Rectangle"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="106"
|
||||||
|
height="196"
|
||||||
|
rx="5"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
<p>
|
<p>
|
||||||
Manage your code in files. Just like you would have files on your
|
Manage your code in files. Just like you would have files on your
|
||||||
local machine.
|
local machine.
|
||||||
</p>
|
</p>
|
||||||
<Divider />
|
</div>
|
||||||
Templates coming soon!
|
</div>
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
<div class="tac">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn--primary"
|
||||||
|
onClick={() => {
|
||||||
|
this.state.isFileModeSelected
|
||||||
|
? onBlankFileTemplateSelect()
|
||||||
|
: onBlankTemplateSelect();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Start Blank
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
Or choose from a template:
|
||||||
|
<div class="saved-items-pane__container">
|
||||||
|
{templates.map(template => (
|
||||||
|
<ItemTile
|
||||||
|
inline
|
||||||
|
item={template}
|
||||||
|
focusable
|
||||||
|
onClick={onTemplateSelect.bind(null, template)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tac">
|
<div class="tac">
|
||||||
|
|||||||
@ -1,35 +1,43 @@
|
|||||||
import { h, Component } from 'preact';
|
import { h } from 'preact';
|
||||||
|
|
||||||
export default class Switch extends Component {
|
export default function Switch({
|
||||||
render() {
|
checked,
|
||||||
return (
|
onChange,
|
||||||
<label class="check-switch">
|
labels,
|
||||||
<input
|
children,
|
||||||
role="switch"
|
showBothLabels
|
||||||
type="checkbox"
|
}) {
|
||||||
checked={this.props.checked}
|
return (
|
||||||
onChange={this.props.onChange}
|
<label class="check-switch">
|
||||||
/>
|
<input
|
||||||
<div class="check-switch__toggle-wrap">
|
role="switch"
|
||||||
<span
|
type="checkbox"
|
||||||
aria-hidden="true"
|
checked={checked}
|
||||||
class="check-switch__status"
|
onChange={onChange}
|
||||||
style={`visibility:${this.props.checked ? 'hidden' : 'visible'}`}
|
/>
|
||||||
>
|
<div class="check-switch__toggle-wrap">
|
||||||
Off
|
<span
|
||||||
</span>
|
aria-hidden="true"
|
||||||
<span aria-hidden="true" class="check-switch__toggle" />
|
class="check-switch__status"
|
||||||
<span
|
style={`visibility:${
|
||||||
aria-hidden="true"
|
checked && !showBothLabels ? 'hidden' : 'visible'
|
||||||
class="check-switch__status"
|
}`}
|
||||||
style={`visibility:${this.props.checked ? 'visible' : 'hidden'}`}
|
>
|
||||||
>
|
{labels[0] || 'Off'}
|
||||||
On
|
</span>
|
||||||
</span>
|
<span aria-hidden="true" class="check-switch__toggle" />
|
||||||
</div>
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class="check-switch__status"
|
||||||
|
style={`visibility:${
|
||||||
|
checked || showBothLabels ? 'visible' : 'hidden'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{labels[1] || 'On'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
{this.props.children}
|
{children}
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -322,6 +322,7 @@ a > svg {
|
|||||||
|
|
||||||
.check-switch__status {
|
.check-switch__status {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
white-space: nowrap;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user