diff --git a/components/Carbon.js b/components/Carbon.js
index 82eb69f..e59654f 100644
--- a/components/Carbon.js
+++ b/components/Carbon.js
@@ -13,25 +13,10 @@ import {
DEFAULT_LANGUAGE,
LANGUAGES,
LANGUAGE_MODE_HASH,
- LANGUAGE_NAME_HASH
+ LANGUAGE_NAME_HASH,
+ DEFAULT_SETTINGS
} from '../lib/constants'
-const DEFAULT_SETTINGS = {
- paddingVertical: '50px',
- paddingHorizontal: '50px',
- marginVertical: '45px',
- marginHorizontal: '45px',
- backgroundMode: 'color',
- backgroundColor: 'rgba(171, 184, 195, 1)',
- dropShadowOffsetY: '20px',
- dropShadowBlurRadius: '68px',
- theme: 'seti',
- windowTheme: 'none',
- language: DEFAULT_LANGUAGE,
- fontFamily: 'Hack',
- fontSize: '14px'
-}
-
class Carbon extends React.Component {
constructor(props) {
super(props)
@@ -42,6 +27,7 @@ class Carbon extends React.Component {
}
this.handleLanguageChange = this.handleLanguageChange.bind(this)
+ this.handleTitleBarChange = this.handleTitleBarChange.bind(this)
this.codeUpdated = this.codeUpdated.bind(this)
}
@@ -68,6 +54,10 @@ class Carbon extends React.Component {
this.props.updateCode(newCode)
}
+ handleTitleBarChange(newTitle) {
+ this.props.updateTitleBar(newTitle)
+ }
+
handleLanguageChange = debounce(
(newCode, config) => {
const props = (config && config.customProps) || this.props
@@ -119,7 +109,12 @@ class Carbon extends React.Component {
if (this.state.loading === false) {
content = (
- {config.windowControls ?
: null}
+ {config.windowControls ? (
+
+ ) : null}
this.codeUpdated(code)}
diff --git a/components/Dropdown.js b/components/Dropdown.js
index 36f553f..6e180dc 100644
--- a/components/Dropdown.js
+++ b/components/Dropdown.js
@@ -1,145 +1,171 @@
import React from 'react'
-import enhanceWithClickOutside from 'react-click-outside'
+import Downshift from 'downshift'
import ArrowDown from './svg/Arrowdown'
-import Checkmark from './svg/Checkmark'
+import CheckMark from './svg/Checkmark'
import { COLORS } from '../lib/constants'
-class Dropdown extends React.Component {
- constructor(props) {
- super(props)
- this.state = {
- isVisible: false
- }
- this.select = this.select.bind(this)
- this.toggle = this.toggle.bind(this)
- }
-
- select(item) {
- if (this.props.selected !== item) {
- this.props.onChange(item)
- }
- }
-
- toggle() {
- this.setState({ isVisible: !this.state.isVisible })
- }
+const Dropdown = ({ button, color, list, selected, onChange }) => {
+ return (
+ it === selected)}
+ itemToString={item => item.name}
+ onChange={onChange}
+ stateReducer={reduceState(list)}
+ />
+ )
+}
- handleClickOutside() {
- this.setState({ isVisible: false })
+const reduceState = list => (state, changes) => {
+ switch (changes.type) {
+ case Downshift.stateChangeTypes.keyDownArrowUp:
+ case Downshift.stateChangeTypes.keyDownArrowDown:
+ return { ...changes, selectedItem: list[changes.highlightedIndex] }
+ default:
+ return changes
}
+}
- renderListItems() {
- return this.props.list.map((item, i) => (
-
- {item.name}
- {this.props.selected === item ? : null}
-
+
+ )
+}
- .dropdown-list-item:hover {
- background: ${COLORS.HOVER};
- }
+const SelectedItem = ({ children, isOpen, color, ...rest }) => {
+ const itemColor = color || COLORS.SECONDARY
- .dropdown-list-item:last-of-type {
- border-bottom: none;
- border-radius: 0px 0px 2px 2px;
- }
- `}
+ return (
+
+ {children}
+
- ))
- }
-
- render() {
- const color = this.props.color || COLORS.SECONDARY
-
- // find longest list value in number of characters
- const list = this.props.button ? [...this.props.list, this.props.selected] : this.props.list
- const MIN_WIDTH = list.reduce(
- (max, { name }) => (name && name.length > max ? name.length : max),
- 0
- )
-
- return (
-
-
-
{this.props.selected.name}
-
-
-
{this.renderListItems()}
-
+
+ )
+}
- .dropdown-display span {
- color: ${color};
- }
+const ListItems = ({ children, color }) => {
+ return (
+
+ )
+}
- .dropdown-display:hover {
- background: ${COLORS.HOVER};
- }
+const ListItem = ({ children, color, isHighlighted, isSelected, ...rest }) => {
+ const itemColor = color || COLORS.SECONDARY
+
+ return (
+
+ {children}
+ {isSelected ? : null}
+
+
+ )
+}
- .is-visible + .dropdown-list {
- display: block;
- }
+function minWidth(isButton, selected, list) {
+ const items = isButton ? [...list, selected] : list
- .dropdown-list {
- display: none;
- margin-top: -1px;
- border: 1px solid ${color};
- border-radius: 0px 0px 3px 3px;
- max-height: 350px;
- overflow-y: scroll;
- }
- `}
-
+ {exportSize.name}
+ {this.props.selected === exportSize.id ? : null}
+
+
+ )
+ })
+ }
+
+ render() {
+ const selectedExportSize =
+ EXPORT_SIZES.filter(exportSize => exportSize.id === this.props.selected)[0] || {}
+ return (
+
+
+ Export Size
+ {selectedExportSize.name}
+
+
{this.renderExportSizes()}
+
+
(
-
-
+
+
-
+
)
export default Footer
diff --git a/components/Header.js b/components/Header.js
index f00bc8d..cc061cc 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -2,7 +2,7 @@ import React from 'react'
import Logo from './svg/Logo'
const Header = ({ enableHeroText }) => (
-
+
)
export default Header
diff --git a/components/Page.js b/components/Page.js
index e08d49e..9071455 100644
--- a/components/Page.js
+++ b/components/Page.js
@@ -4,7 +4,7 @@ import Header from './Header'
import Footer from './Footer'
export default ({ children, enableHeroText }) => (
-
+
{children}
@@ -19,5 +19,5 @@ export default ({ children, enableHeroText }) => (
align-items: center;
}
`}
-
+
)
diff --git a/components/Settings.js b/components/Settings.js
index 4746007..edebcaf 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -3,6 +3,7 @@ import enhanceWithClickOutside from 'react-click-outside'
import SettingsIcon from './svg/Settings'
import ThemeSelect from './ThemeSelect'
import FontSelect from './FontSelect'
+import ExportSizeSelect from './ExportSizeSelect'
import Slider from './Slider'
import Toggle from './Toggle'
import WindowPointer from './WindowPointer'
@@ -71,6 +72,7 @@ class Settings extends React.Component {
+
+
+
diff --git a/components/style/Font.js b/components/style/Font.js
index d5c1de0..83d6f8d 100644
--- a/components/style/Font.js
+++ b/components/style/Font.js
@@ -1,5 +1,18 @@
export default () => (
