diff --git a/components/BackgroundSelect.js b/components/BackgroundSelect.js
index 5a36544..63aeac6 100644
--- a/components/BackgroundSelect.js
+++ b/components/BackgroundSelect.js
@@ -186,7 +186,7 @@ class BackgroundSelect extends React.Component {
position: absolute;
width: 222px;
margin-left: 36px;
- margin-top: 4px;
+ margin-top: 12px;
border: 1px solid ${COLORS.SECONDARY};
border-radius: 3px;
background: #1a1a1a;
diff --git a/components/Button.js b/components/Button.js
index cd47412..52f0ddc 100644
--- a/components/Button.js
+++ b/components/Button.js
@@ -8,7 +8,7 @@ export default props => (
...props.style,
background: COLORS.BLACK,
color: props.color,
- border: `1px solid ${props.color}`
+ border: `${props.selected ? 2 : 1}px solid ${props.color}`
}}
disabled={props.disabled}
>
diff --git a/components/Editor.js b/components/Editor.js
index 052d2d4..23ce90c 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -17,7 +17,7 @@ import Settings from './Settings'
import Toolbar from './Toolbar'
import Overlay from './Overlay'
import Carbon from './Carbon'
-import ExportButton from './ExportButton'
+import ExportMenu from './ExportMenu'
import {
THEMES,
THEMES_HASH,
@@ -36,14 +36,6 @@ import {
import { serializeState, getQueryStringState } from '../lib/routing'
import { getState, escapeHtml, unescapeHtml } from '../lib/util'
-const saveButtonOptions = {
- button: true,
- color: '#c198fb',
- selected: { id: 'SAVE_IMAGE', name: 'Export Image' },
- list: ['png', 'svg', 'copy embed', 'open ↗'].map(id => ({ id, name: id.toUpperCase() })),
- itemWrapper: props =>
-}
-
class Editor extends React.Component {
constructor(props) {
super(props)
@@ -205,18 +197,16 @@ class Editor extends React.Component {
this.setState({ [key]: value })
}
- export({ id: format = 'png' }) {
- if (format === 'copy embed') {
- return
- }
-
+ export(format = 'png') {
const link = document.createElement('a')
const timestamp = this.state.timestamp ? `_${formatTimestamp()}` : ''
const prefix = this.state.filename || 'carbon'
return this.getCarbonImage({ format, type: 'blob' }).then(url => {
- if (format !== 'open ↗') {
+ if (format === 'open') {
+ link.target = '_blank'
+ } else {
link.download = `${prefix}${timestamp}.${format}`
}
link.href = url
@@ -272,7 +262,22 @@ class Editor extends React.Component {
}
render() {
- if (this.state.loading) {
+ const {
+ loading,
+ theme,
+ language,
+ backgroundColor,
+ backgroundImage,
+ backgroundMode,
+ aspectRatio,
+ uploading,
+ online,
+ titleBar,
+ code,
+ exportSize
+ } = this.state
+
+ if (loading) {
return (
@@ -294,15 +299,15 @@ class Editor extends React.Component {
{this.props.api.tweet &&
- this.state.online && (
+ online && (
)}
-
+
@@ -343,15 +352,15 @@ class Editor extends React.Component {
>
{/*key ensures Carbon's internal language state is updated when it's changed by Dropdown*/}
- {this.state.code != null ? this.state.code : DEFAULT_CODE}
+ {code != null ? code : DEFAULT_CODE}
)}
diff --git a/components/ExportButton.js b/components/ExportButton.js
index b49e391..d9e6354 100644
--- a/components/ExportButton.js
+++ b/components/ExportButton.js
@@ -11,16 +11,12 @@ const toIFrame = url =>
`
-function ExportButton({ router, children, color }) {
+function ExportButton({ router, color }) {
return (
- {children === 'COPY EMBED' ? (
-
- {({ copied }) => }
-
- ) : (
-
- )}
+
+ {({ copied }) => }
+
+
+ )
+ }
+}
+
+export default enhanceWithClickOutside(ExportMenu)
diff --git a/components/ExportSizeSelect.js b/components/ExportSizeSelect.js
deleted file mode 100644
index e5bbb2a..0000000
--- a/components/ExportSizeSelect.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import ListSetting from './ListSetting'
-import { EXPORT_SIZES } from '../lib/constants'
-
-const exportSize = size =>
{size.name}
-
-function ExportSizeSelect(props) {
- return (
-
- {exportSize}
-
- )
-}
-
-export default ExportSizeSelect
diff --git a/components/Settings.js b/components/Settings.js
index b8f1724..f5f20eb 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -3,7 +3,6 @@ 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'
@@ -20,7 +19,6 @@ class Settings extends React.PureComponent {
}
this.toggle = this.toggle.bind(this)
this.format = this.format.bind(this)
- this.handleInputChange = this.handleInputChange.bind(this)
}
toggle() {
@@ -31,10 +29,6 @@ class Settings extends React.PureComponent {
this.setState({ isVisible: false })
}
- handleInputChange(e) {
- this.props.onChange(e.target.name, e.target.value)
- }
-
format() {
return formatCode(this.props.code)
.then(this.props.onChange.bind(this, 'code'))
@@ -58,13 +52,6 @@ class Settings extends React.PureComponent {
selected={this.props.windowTheme || 'none'}
onChange={this.props.onChange.bind(null, 'windowTheme')}
/>
-
-
-
Reset settings}
@@ -194,7 +172,7 @@ class Settings extends React.PureComponent {
.settings-settings {
display: none;
position: absolute;
- top: 44px;
+ top: 52px;
left: 0;
border: 1px solid ${COLORS.SECONDARY};
width: 184px;
@@ -215,17 +193,6 @@ class Settings extends React.PureComponent {
.red {
color: red;
}
-
- input {
- padding: 8px;
- width: 100%;
- font-size: 12px;
- color: ${COLORS.SECONDARY};
- background: ${COLORS.BLACK};
- border: none;
- border-bottom: solid 1px ${COLORS.SECONDARY};
- outline: none;
- }
`}
diff --git a/components/WindowPointer.js b/components/WindowPointer.js
index cd83bec..03c1277 100644
--- a/components/WindowPointer.js
+++ b/components/WindowPointer.js
@@ -1,7 +1,7 @@
import React from 'react'
-export default ({ fromLeft }) => (
-
+export default ({ fromLeft, fromRight, color = '#fff' }) => (
+
diff --git a/lib/constants.js b/lib/constants.js
index 827bcbf..dc1307b 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -478,7 +478,8 @@ export const COLORS = {
PRIMARY: '#F8E81C',
SECONDARY: '#fff',
GRAY: '#858585',
- HOVER: '#1F1F1F'
+ HOVER: '#1F1F1F',
+ PURPLE: '#C198FB'
}
export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
diff --git a/yarn.lock b/yarn.lock
index b7a6f37..74b32b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1823,10 +1823,10 @@ code-point-at@^1.0.0:
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
-codemirror-graphql@^0.8.2:
- version "0.8.2"
- resolved "https://registry.yarnpkg.com/codemirror-graphql/-/codemirror-graphql-0.8.2.tgz#387fdeb7ffe5023b5d48ef7b1e48dd53812d1383"
- integrity sha512-bIRvsIhbGMvaKzyq3CYlOWz55+X9JUNPPgzrJwZUO8KVxj1iZLHdp3tiUxLUsTU9MdjS6iNjHDlhJiC+5IFBeQ==
+codemirror-graphql@0.7.1:
+ version "0.7.1"
+ resolved "https://registry.yarnpkg.com/codemirror-graphql/-/codemirror-graphql-0.7.1.tgz#64b995643d511b9aa8f85eeeb2feac7aeb4b94d4"
+ integrity sha512-HtHXMJAn6iGJYpijkzi3IlqWIdGrB6V0RqJ607yffJTCKk/OgaNtdLOb8hZJyEtHfkw7PZDaKybMAVCi6ScWSQ==
dependencies:
graphql-language-service-interface "^1.3.2"
graphql-language-service-parser "^1.2.2"