diff --git a/src/components/CreateNewModal.jsx b/src/components/CreateNewModal.jsx index 69bce81..27f940d 100644 --- a/src/components/CreateNewModal.jsx +++ b/src/components/CreateNewModal.jsx @@ -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,197 +30,190 @@ export class CreateNewModal extends Component { onImportGithubRepoSelect, onTemplateSelect } = this.props; + const option1 = ( +
+ { + this.setState({ isFileModeSelected: false }); + }} + aria-hidden="true" + > + + + + + + + + + + + + + + + +

+ 3 separate panes to write HTML, CSS and JavaScript. Good for quickly + testing something. +

+
+ ); + const option2 = ( +
+ { + this.setState({ isFileModeSelected: true }); + }} + aria-hidden="true" + > + + + + + + + + + + +

+ Manage your code in files. Just like you would have files on your + local machine. +

+
+ ); + return (

Create New

-
-
- { - this.setState({ isFileModeSelected: false }); - }} - > - + +
+
-
- -
-
- { - this.setState({ isFileModeSelected: true }); - }} - > - - - - - - - - - - -

- Manage your code in files. Just like you would have files on your - local machine. -

-
-
- - -
- -

Or choose from a template:

-
- {templates.map(template => { - if ( - !this.state.isFileModeSelected || - template.isFileModeSupported - ) { + Start Blank + + {templates.map(template => { return ( ); - } - })} -
-
-
+ })} +
+ + +
+ + {templates.map(template => { + if (template.isFileModeSupported) { + return ( + + ); + } + })} +
+ + + + {/*

- {/**/} + {this.state.isGhRepoInputVisible ? (

@@ -245,7 +238,7 @@ export class CreateNewModal extends Component {
) : null}

-
+
*/} ); } diff --git a/src/components/Tabs.jsx b/src/components/Tabs.jsx index db792b4..5527cef 100644 --- a/src/components/Tabs.jsx +++ b/src/components/Tabs.jsx @@ -1,7 +1,10 @@ import { h, Component } from 'preact'; function hyphenate(text) { - return text.replace(/\s/g, '-'); + if (text.replace) { + return text.replace(/\s/g, '-'); + } + return ''; } const ID_PREFIX = 'tab-panel-'; @@ -63,7 +66,7 @@ export default class Tabs extends Component { render() { const tabs = this.props.children; return ( -
+
- {tabs.map( - (child, index) => (this.state.selectedTab === index ? child : null) + {tabs.map((child, index) => + this.state.selectedTab === index ? child : null )}
diff --git a/src/components/common.jsx b/src/components/common.jsx index eb13646..21f8ac3 100644 --- a/src/components/common.jsx +++ b/src/components/common.jsx @@ -36,3 +36,7 @@ export function AutoFocusInput(props) { export function Divider(props) { return
; } + +export function BetaTag() { + return Beta; +} diff --git a/src/style.css b/src/style.css index 7f8f59d..8e344ef 100644 --- a/src/style.css +++ b/src/style.css @@ -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 {