From ec4ce2be299606feed2fcc8582a91e5045ca5eb7 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Tue, 14 Aug 2018 23:56:46 +0530 Subject: [PATCH 1/7] add switch component --- src/components/Settings.jsx | 28 ++++++++------- src/style.css | 69 +++++++++++++++++++++++++++++++++++++ 2 files changed, 84 insertions(+), 13 deletions(-) diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx index 6286448..cbbbf7a 100644 --- a/src/components/Settings.jsx +++ b/src/components/Settings.jsx @@ -1,5 +1,6 @@ import { h, Component } from 'preact'; import { editorThemes } from '../editorThemes'; +import Switch from './Switch'; function CheckboxSetting({ title, @@ -10,18 +11,19 @@ function CheckboxSetting({ showWhenExtension }) { return ( - + // + {label} ); } export default class Settings extends Component { @@ -208,7 +210,7 @@ export default class Settings extends Component { -
+
svg { bottom: 0; } +.check-switch { + display: block; + overflow: hidden; + padding: 0.5em; + position: relative; +} + +.check-switch:hover { + background: rgba(0, 0, 0, 0.1); +} + +.check-switch .check-switch__toggle:after { + background: #fff; + border-radius: 100%; + height: 1.5em; + right: 1.5em; + transition: right 0.1825s ease-in-out; + width: 1.5em; +} + +.check-switch .check-switch__toggle:before, +.check-switch .check-switch__toggle:after { + border: 1px solid #565656; + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +.check-switch .check-switch__toggle:before { + background: #eee; + border-radius: 1.75em; + height: 1.75em; + right: 0.25em; + transition: background 0.2s ease-in-out; + width: 2.75em; +} + +.check-switch input:not([role='button']) { + pointer-events: none; +} + +.check-switch input { + height: 100%; + left: 0; + opacity: 0.0001; + position: absolute; + top: 0; + width: 100%; +} + +.check-switch__status { + text-transform: uppercase; + font-size: 14px; +} + +.check-switch input:focus + .check-switch__toggle:before { + outline: 2px solid; + outline-color: var(--color-focus-outline); +} + +.check-switch input:checked + .check-switch__toggle:after { + right: 0.25em; +} + +.check-switch input:checked + .check-switch__toggle:before { + background: #61ad1c; +} + .btn { display: inline-block; color: var(--color-button); From f2a96b3ec229095bfbf9c7861a07d7b2a1414625 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Wed, 7 Nov 2018 01:39:24 +0530 Subject: [PATCH 2/7] Refactor settings. Add switches and tabs. fixes #339 --- src/components/Settings.jsx | 578 ++++++++++++++++++------------------ src/components/Switch.jsx | 16 + src/components/Tabs.jsx | 79 +++++ src/style.css | 30 +- 4 files changed, 409 insertions(+), 294 deletions(-) create mode 100644 src/components/Switch.jsx create mode 100644 src/components/Tabs.jsx diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx index cbbbf7a..c52636f 100644 --- a/src/components/Settings.jsx +++ b/src/components/Settings.jsx @@ -1,6 +1,7 @@ import { h, Component } from 'preact'; import { editorThemes } from '../editorThemes'; import Switch from './Switch'; +import Tabs, { TabPanel } from './Tabs'; function CheckboxSetting({ title, @@ -40,304 +41,301 @@ export default class Settings extends Component {

Settings

-

Indentation

-
- - -
- - -
- -

Editor

-
-
- -
- - - -
- -
+ + +

+ -

+ +

+ + +

+ +

+ If any loop iteration takes more than the defined time, it is + detected as a potential infinite loop and further iterations are + stopped. +
+

-

Fun

-

- - - -

- -
- -

Advanced

-

- -

- If any loop iteration takes more than the defined time, it is - detected as a potential infinite loop and further iterations are - stopped. -
-

- -

- -

+

+ +

+ +
); } diff --git a/src/components/Switch.jsx b/src/components/Switch.jsx new file mode 100644 index 0000000..7d84bcb --- /dev/null +++ b/src/components/Switch.jsx @@ -0,0 +1,16 @@ +import { h, Component } from 'preact'; + +export default class Switch extends Component { + render() { + return ( + + ); + } +} diff --git a/src/components/Tabs.jsx b/src/components/Tabs.jsx new file mode 100644 index 0000000..8512a55 --- /dev/null +++ b/src/components/Tabs.jsx @@ -0,0 +1,79 @@ +import { h, Component } from 'preact'; + +function hyphenate(text) { + return text.replace(/\s/g, '-'); +} +const ID_PREFIX = 'tab-panel-'; +export function TabPanel({ label }) { + return ( +
+ {this.props.children} +
+ ); +} +function Tab({ label, isSelected, onKeyUp, onClick }) { + return ( + + ); +} +export default class Tabs extends Component { + constructor(props) { + super(props); + this.state = { + selectedTab: 0 + }; + } + isSelected(index) { + return this.state.selectedTab === index; + } + keyUpHandler(e) { + let { selectedTab } = this.state; + if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { + selectedTab--; + selectedTab = selectedTab < 0 ? this.props.length - 1 : selectedTab; + this.setState({ selectedTab: selectedTab }); + e.preventDefault(); + } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { + selectedTab++; + selectedTab %= this.props.children.length; + this.setState({ selectedTab: selectedTab }); + e.preventDefault(); + } + } + render() { + const tabs = this.props.children; + return ( +
+
+ {tabs.map((child, index) => ( + this.setState({ selectedTab: index })} + /> + ))} +
+
+ {tabs.map( + (child, index) => (this.state.selectedTab === index ? child : null) + )} +
+
+ ); + } +} diff --git a/src/style.css b/src/style.css index 6c559a8..d9fa624 100644 --- a/src/style.css +++ b/src/style.css @@ -976,10 +976,9 @@ body > #demo-frame { /* Make settings modal smaller */ -@media screen and (min-width: 600px) { - .modal--settings { - /* width: 600px; */ - /* margin-lef.t: -300px; */ +@media screen and (min-width: 850px) { + .modal--settings > .modal__content { + width: 850px; } } @@ -1891,6 +1890,29 @@ while the theme CSS file is loading */ padding: 5px; z-index: 1; } +.tabs { + display: flex; +} +.tabs__tablist { + margin-right: 40px; + flex-shrink: 0; +} +.tabs__tab { + display: block; + margin-bottom: 10px; + background: transparent; + border: 0; + text-align: left; + width: 100%; + color: inherit; +} +.tabs__tab--selected { + background-color: rgba(0, 0, 0, 0.3); +} +.tabs__tabpanel-wrap { + flex: 1; +} + @media screen and (max-width: 600px) { body { font-size: 70%; From 6776855cadaec8be5225acb1cc1f56f5433c2a5f Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Thu, 8 Nov 2018 14:48:54 +0530 Subject: [PATCH 3/7] Distribute settings in categories and fixes in tab/switch --- src/components/Settings.jsx | 128 +++++++++++++++++++----------------- src/components/Switch.jsx | 24 +++++-- src/components/Tabs.jsx | 3 +- src/components/common.jsx | 4 ++ src/style.css | 48 +++++++++----- 5 files changed, 125 insertions(+), 82 deletions(-) diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx index c52636f..10fb298 100644 --- a/src/components/Settings.jsx +++ b/src/components/Settings.jsx @@ -2,6 +2,7 @@ import { h, Component } from 'preact'; import { editorThemes } from '../editorThemes'; import Switch from './Switch'; import Tabs, { TabPanel } from './Tabs'; +import { Divider } from './common'; function CheckboxSetting({ title, @@ -42,6 +43,56 @@ export default class Settings extends Component {

Settings

+ + + + + + + + + + + + +
+ + - - - - - -
-

- - - -

+ + +

diff --git a/src/components/Switch.jsx b/src/components/Switch.jsx index 7d84bcb..d9a3ebb 100644 --- a/src/components/Switch.jsx +++ b/src/components/Switch.jsx @@ -4,12 +4,26 @@ export default class Switch extends Component { render() { return (

+ +
+ + {this.props.children} ); } diff --git a/src/components/Tabs.jsx b/src/components/Tabs.jsx index 8512a55..efb1625 100644 --- a/src/components/Tabs.jsx +++ b/src/components/Tabs.jsx @@ -44,7 +44,8 @@ export default class Tabs extends Component { let { selectedTab } = this.state; if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { selectedTab--; - selectedTab = selectedTab < 0 ? this.props.length - 1 : selectedTab; + selectedTab = + selectedTab < 0 ? this.props.children.length - 1 : selectedTab; this.setState({ selectedTab: selectedTab }); e.preventDefault(); } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { diff --git a/src/components/common.jsx b/src/components/common.jsx index 4c53f63..90e7b31 100644 --- a/src/components/common.jsx +++ b/src/components/common.jsx @@ -32,3 +32,7 @@ export function AutoFocusInput(props) { el && setTimeout(() => el.focus(), 100)} {...props} /> ); } + +export function Divider(props) { + return
; +} diff --git a/src/style.css b/src/style.css index d9fa624..227d20e 100644 --- a/src/style.css +++ b/src/style.css @@ -212,6 +212,11 @@ hr { label { cursor: pointer; } +.divider { + margin: 10px 0; + height: 1px; + background: rgba(255, 255, 255, 0.1); +} [class*='hint--']:after { text-transform: none; @@ -260,31 +265,35 @@ a > svg { background: rgba(0, 0, 0, 0.1); } +.check-switch .check-switch__toggle { + position: relative; + margin: 0 5px; +} .check-switch .check-switch__toggle:after { background: #fff; + position: absolute; border-radius: 100%; - height: 1.5em; + width: 1.1em; + height: 1.1em; + top: 3px; right: 1.5em; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); transition: right 0.1825s ease-in-out; - width: 1.5em; } .check-switch .check-switch__toggle:before, .check-switch .check-switch__toggle:after { - border: 1px solid #565656; content: ''; - position: absolute; - top: 50%; - transform: translateY(-50%); + display: block; } .check-switch .check-switch__toggle:before { - background: #eee; + background: rgba(255, 255, 255, 0.2); border-radius: 1.75em; - height: 1.75em; + width: 2.75em; + height: 1.45em; right: 0.25em; transition: background 0.2s ease-in-out; - width: 2.75em; } .check-switch input:not([role='button']) { @@ -292,31 +301,38 @@ a > svg { } .check-switch input { + width: 100%; height: 100%; + top: 0; left: 0; opacity: 0.0001; position: absolute; - top: 0; - width: 100%; } .check-switch__status { text-transform: uppercase; font-size: 14px; + font-weight: 600; } -.check-switch input:focus + .check-switch__toggle:before { +.check-switch input:focus + * .check-switch__toggle:before { outline: 2px solid; outline-color: var(--color-focus-outline); } -.check-switch input:checked + .check-switch__toggle:after { - right: 0.25em; +.check-switch input:checked + * .check-switch__toggle:after { + right: 0.15em; + left: auto; } -.check-switch input:checked + .check-switch__toggle:before { +.check-switch input:checked + * .check-switch__toggle:before { background: #61ad1c; } +.check-switch__toggle-wrap { + float: right; + display: flex; + align-items: center; +} .btn { display: inline-block; @@ -1907,7 +1923,7 @@ while the theme CSS file is loading */ color: inherit; } .tabs__tab--selected { - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.5); } .tabs__tabpanel-wrap { flex: 1; From 29725026eea8c96c0703cc06c3c593ff9533b634 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Mon, 12 Nov 2018 18:22:31 +0530 Subject: [PATCH 4/7] Fix settings updation for switches --- src/components/Settings.jsx | 474 +++++++++++++++++++----------------- src/components/Switch.jsx | 7 +- src/components/Tabs.jsx | 1 + src/components/app.jsx | 11 +- src/style.css | 6 +- 5 files changed, 261 insertions(+), 238 deletions(-) diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx index 10fb298..5c918a8 100644 --- a/src/components/Settings.jsx +++ b/src/components/Settings.jsx @@ -4,33 +4,22 @@ import Switch from './Switch'; import Tabs, { TabPanel } from './Tabs'; import { Divider } from './common'; -function CheckboxSetting({ - title, - label, - onChange, - pref, - name, - showWhenExtension -}) { +function CheckboxSetting({ label, onChange, pref }) { return ( - // - {label} + + {label} + ); } export default class Settings extends Component { - updateSetting(e) { - this.props.onChange(e); + updateSetting(e, settingName) { + const value = + e.target.type === 'checkbox' ? e.target.checked : e.target.value; + this.props.onChange(settingName, value); } shouldComponentUpdate() { // TODO: add check on prefs @@ -45,295 +34,322 @@ export default class Settings extends Component { this.updateSetting(e, 'preserveLastCode')} /> +

+ Loads the last open creation when app starts +

this.updateSetting(e, 'lightVersion')} /> +

+ Switch to lighter version for better performance. Removes things + like blur etc. +

this.updateSetting(e, 'autoPreview')} /> +

+ Refreshes the preview as you code. Otherwise use the Run button +

this.updateSetting(e, 'autoSave')} /> +

+ Auto-save keeps saving your code at regular intervals after you + hit the first save manually +

this.updateSetting(e, 'refreshOnResize')} /> +

+ Preview will refresh when you resize the preview pane +

+ +
+ this.updateSetting(e, 'replaceNewTab')} + showWhenExtension + /> +

+ Turning this on will start showing Web Maker in every new tab + you open +

+
this.updateSetting(e, 'preserveConsoleLogs')} /> +

+ Preserves the console logs across your preview refreshes +

-
- - +
+
+ + +
- -
- - - +
+ Default Preprocessors +
+ + + +
+ + + + + + +
Key bindings - - +
+ + +
+ +
this.updateSetting(e, 'lineWrap')} /> + - - this.updateSetting(e, 'autoComplete')} />
this.updateSetting(e, 'isCodeBlastOn')} /> +

+ Enjoy wonderful particle blasts while you type +

this.updateSetting(e, 'isJs13kModeOn')} /> +

+ Make the app ready to build some games for{' '} + + Js13kGames + . +

-

-

+ -
+

If any loop iteration takes more than the defined time, it is detected as a potential infinite loop and further iterations are stopped. -

-

+

+
+ -

+

-

+
diff --git a/src/components/Switch.jsx b/src/components/Switch.jsx index d9a3ebb..b56c282 100644 --- a/src/components/Switch.jsx +++ b/src/components/Switch.jsx @@ -4,7 +4,12 @@ export default class Switch extends Component { render() { return (