mirror of
https://github.com/chinchang/web-maker.git
synced 2025-05-07 19:15:24 +02:00
createnewmodal: change ux
This commit is contained in:
Kushagra Gour
parent
1b00f87002
commit
1e71020d0b
@ -2,9 +2,9 @@ import { h, Component } from 'preact';
|
||||
import Modal from './Modal';
|
||||
import { ItemTile } from './ItemTile';
|
||||
import templates from '../templateList';
|
||||
import { Divider } from './common';
|
||||
import Switch from './Switch';
|
||||
import { BetaTag } from './common';
|
||||
import { trackEvent } from '../analytics';
|
||||
import Tabs, { TabPanel } from './Tabs';
|
||||
|
||||
export class CreateNewModal extends Component {
|
||||
constructor(props) {
|
||||
@ -30,10 +30,7 @@ export class CreateNewModal extends Component {
|
||||
onImportGithubRepoSelect,
|
||||
onTemplateSelect
|
||||
} = this.props;
|
||||
return (
|
||||
<Modal show={show} closeHandler={closeHandler}>
|
||||
<h1 class="mt-0">Create New</h1>
|
||||
<div class="flex">
|
||||
const option1 = (
|
||||
<div style="flex:1;" class="tac">
|
||||
<svg
|
||||
width="287px"
|
||||
@ -45,6 +42,7 @@ export class CreateNewModal extends Component {
|
||||
onClick={() => {
|
||||
this.setState({ isFileModeSelected: false });
|
||||
}}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<g
|
||||
id="Page-1"
|
||||
@ -54,42 +52,21 @@ export class CreateNewModal extends Component {
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<g id="codepane" fill="#C5C5C5">
|
||||
<rect
|
||||
id="Rectangle"
|
||||
x="0"
|
||||
y="0"
|
||||
width="89"
|
||||
height="80"
|
||||
rx="5"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<rect id="Rectangle" x="0" y="0" width="89" height="80" rx="5" />
|
||||
</g>
|
||||
<g
|
||||
id="codepane"
|
||||
@ -107,19 +84,13 @@ export class CreateNewModal extends Component {
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<p>
|
||||
3 separate panes to write HTML, CSS and JavaScript. Good for
|
||||
quickly testing something.
|
||||
<p class="mb-0">
|
||||
3 separate panes to write HTML, CSS and JavaScript. Good for quickly
|
||||
testing something.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tac ml-2" style="margin-top:100px;">
|
||||
<Switch
|
||||
checked={this.state.isFileModeSelected}
|
||||
labels={['3 panes', 'Files (beta)']}
|
||||
onChange={this.modeChangeHandler}
|
||||
showBothLabels
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const option2 = (
|
||||
<div style="flex:1" class="tac ml-2">
|
||||
<svg
|
||||
width="286px"
|
||||
@ -131,6 +102,7 @@ export class CreateNewModal extends Component {
|
||||
onClick={() => {
|
||||
this.setState({ isFileModeSelected: true });
|
||||
}}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<g
|
||||
id="Page-1"
|
||||
@ -174,53 +146,74 @@ export class CreateNewModal extends Component {
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<p>
|
||||
<p class="mb-0">
|
||||
Manage your code in files. Just like you would have files on your
|
||||
local machine.
|
||||
local machine. <BetaTag />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
);
|
||||
|
||||
<div class="tac">
|
||||
return (
|
||||
<Modal show={show} closeHandler={closeHandler}>
|
||||
<h1 class="mt-0">Create New</h1>
|
||||
<Tabs horizontal>
|
||||
<TabPanel label={option1}>
|
||||
<div class="d-f fxw-w">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn--primary"
|
||||
style="margin:20px 10px"
|
||||
onClick={() => {
|
||||
trackEvent('ui', 'startBlankBtnClick');
|
||||
this.state.isFileModeSelected
|
||||
? onBlankFileTemplateSelect()
|
||||
: onBlankTemplateSelect();
|
||||
onBlankTemplateSelect();
|
||||
}}
|
||||
>
|
||||
Start Blank
|
||||
</button>
|
||||
<p>Or choose from a template:</p>
|
||||
<div class="saved-items-pane__container">
|
||||
{templates.map(template => {
|
||||
if (
|
||||
!this.state.isFileModeSelected ||
|
||||
template.isFileModeSupported
|
||||
) {
|
||||
return (
|
||||
<ItemTile
|
||||
inline
|
||||
item={template}
|
||||
focusable
|
||||
onClick={onTemplateSelect.bind(
|
||||
null,
|
||||
template,
|
||||
this.state.isFileModeSelected
|
||||
)}
|
||||
onClick={onTemplateSelect.bind(null, template)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel label={option2}>
|
||||
<div class="d-f fxw-w">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn--primary"
|
||||
style="margin:20px 10px"
|
||||
onClick={() => {
|
||||
trackEvent('ui', 'startBlankFileBtnClick');
|
||||
onBlankFileTemplateSelect();
|
||||
}}
|
||||
>
|
||||
Start Blank in File Mode
|
||||
</button>
|
||||
{templates.map(template => {
|
||||
if (template.isFileModeSupported) {
|
||||
return (
|
||||
<ItemTile
|
||||
inline
|
||||
item={template}
|
||||
focusable
|
||||
onClick={onTemplateSelect.bind(null, template, true)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tac">
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
||||
{/*<div class="tac">
|
||||
<p>
|
||||
{/*<button
|
||||
<button
|
||||
className="btn"
|
||||
onClick={() =>
|
||||
this.setState({
|
||||
@ -229,7 +222,7 @@ export class CreateNewModal extends Component {
|
||||
}
|
||||
>
|
||||
Import Github Repository
|
||||
</button>*/}
|
||||
</button>
|
||||
|
||||
{this.state.isGhRepoInputVisible ? (
|
||||
<div>
|
||||
@ -245,7 +238,7 @@ export class CreateNewModal extends Component {
|
||||
</div>
|
||||
) : null}
|
||||
</p>
|
||||
</div>
|
||||
</div>*/}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import { h, Component } from 'preact';
|
||||
|
||||
function hyphenate(text) {
|
||||
if (text.replace) {
|
||||
return text.replace(/\s/g, '-');
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const ID_PREFIX = 'tab-panel-';
|
||||
|
||||
export function TabPanel({ label }) {
|
||||
@ -63,7 +66,7 @@ export default class Tabs extends Component {
|
||||
render() {
|
||||
const tabs = this.props.children;
|
||||
return (
|
||||
<div class="tabs">
|
||||
<div class={`tabs ${this.props.horizontal ? 'tabs--horizontal' : ''}`}>
|
||||
<div
|
||||
class="tabs__tablist"
|
||||
role="tablist"
|
||||
@ -79,8 +82,8 @@ export default class Tabs extends Component {
|
||||
))}
|
||||
</div>
|
||||
<div class="tabs__tabpanel-wrap">
|
||||
{tabs.map(
|
||||
(child, index) => (this.state.selectedTab === index ? child : null)
|
||||
{tabs.map((child, index) =>
|
||||
this.state.selectedTab === index ? child : null
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -36,3 +36,7 @@ export function AutoFocusInput(props) {
|
||||
export function Divider(props) {
|
||||
return <div class={`divider ${props.vertical ? 'divider--vertical' : ''}`} />;
|
||||
}
|
||||
|
||||
export function BetaTag() {
|
||||
return <span class="beta-tag">Beta</span>;
|
||||
}
|
||||
|
||||
@ -123,6 +123,12 @@ button {
|
||||
.jc-sb {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.fxd-c {
|
||||
flex-direction: column;
|
||||
}
|
||||
.fxw-w {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
@ -1610,19 +1616,15 @@ body > #demo-frame {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*
|
||||
.web-maker-with-tag:after {
|
||||
content: 'BETA';
|
||||
position: relative;
|
||||
left: 3px;
|
||||
top: -7px;
|
||||
.beta-tag {
|
||||
border-radius: 4px;
|
||||
background: #b76b29;
|
||||
text-transform: uppercase;
|
||||
background: #c68955;
|
||||
color: white;
|
||||
letter-spacing: 0.6px;
|
||||
padding: 2px;
|
||||
font-size: 10px;
|
||||
} */
|
||||
padding: 2px 5px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.is-extension .web-maker-with-tag:after {
|
||||
display: none;
|
||||
@ -1948,7 +1950,7 @@ while the theme CSS file is loading */
|
||||
display: flex;
|
||||
}
|
||||
.tabs__tablist {
|
||||
margin-right: 40px;
|
||||
/* margin-right: 40px; */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tabs__tab {
|
||||
@ -1961,11 +1963,23 @@ while the theme CSS file is loading */
|
||||
color: inherit;
|
||||
}
|
||||
.tabs__tab--selected {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.tabs__tabpanel-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
.tabs__tabpanel {
|
||||
padding: 2em;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.tabs--horizontal {
|
||||
flex-direction: column;
|
||||
}
|
||||
.tabs--horizontal .tabs__tablist {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
body {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user