You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/components/Settings.js

452 lines
12 KiB
JavaScript

import React from 'react'
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
import omitBy from 'lodash.omitby'
import ThemeSelect from './ThemeSelect'
import FontSelect from './FontSelect'
import Slider from './Slider'
import Input from './Input'
import Toggle from './Toggle'
import Popout, { managePopout } from './Popout'
import Button from './Button'
import Presets from './Presets'
import MenuButton from './MenuButton'
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
import { COLORS, DEFAULT_PRESETS } from '../lib/constants'
import { toggle, getPresets, savePresets, generateId, fileToJSON } from '../lib/util'
import SettingsIcon from './svg/Settings'
const WindowSettings = React.memo(
({
onChange,
windowTheme,
paddingHorizontal,
paddingVertical,
dropShadow,
dropShadowBlurRadius,
dropShadowOffsetY,
windowControls,
lineNumbers,
firstLineNumber,
widthAdjustment,
watermark,
onWidthChanging,
onWidthChanged
}) => {
return (
<div className="settings-content">
<ThemeSelect
selected={windowTheme || 'none'}
onChange={onChange.bind(null, 'windowTheme')}
/>
<div className="row">
<Slider
label="Padding (vert)"
value={paddingVertical}
maxValue={200}
onChange={onChange.bind(null, 'paddingVertical')}
/>
<Slider
label="Padding (horiz)"
value={paddingHorizontal}
onChange={onChange.bind(null, 'paddingHorizontal')}
onMouseDown={onWidthChanging}
onMouseUp={onWidthChanged}
/>
</div>
<Toggle
label="Drop shadow"
enabled={dropShadow}
onChange={onChange.bind(null, 'dropShadow')}
/>
{dropShadow && (
<div className="row drop-shadow-options">
<Slider
label="(offset-y)"
value={dropShadowOffsetY}
onChange={onChange.bind(null, 'dropShadowOffsetY')}
/>
<Slider
label="(blur-radius)"
value={dropShadowBlurRadius}
onChange={onChange.bind(null, 'dropShadowBlurRadius')}
/>
</div>
)}
<Toggle
label="Window controls"
enabled={windowControls}
onChange={onChange.bind(null, 'windowControls')}
/>
<Toggle
label="Line numbers"
enabled={lineNumbers}
onChange={onChange.bind(null, 'lineNumbers')}
/>
{lineNumbers && (
<div className="row settings-row first-line-number-row">
<Input
label="First line number"
type="number"
value={firstLineNumber}
min={0}
onChange={e => onChange('firstLineNumber', Number(e.target.value))}
width="50%"
/>
</div>
)}
<Toggle
label="Auto-adjust width"
enabled={widthAdjustment}
onChange={onChange.bind(null, 'widthAdjustment')}
/>
<Toggle label="Watermark" enabled={watermark} onChange={onChange.bind(null, 'watermark')} />
<style jsx>
{`
.row > :global(div:first-child) {
border-right: 1px solid ${COLORS.SECONDARY};
}
.drop-shadow-options :global(.slider-bg),
.drop-shadow-options :global(label) {
opacity: 0.5;
}
.settings-content :global(.settings-row:focus-within) {
outline: -webkit-focus-ring-color auto 4px;
}
.first-line-number-row {
padding: 8px 12px 8px 8px;
}
`}
</style>
</div>
)
}
)
const TypeSettings = React.memo(
({ onChange, onUpload, font, size, lineHeight, onWidthChanging, onWidthChanged }) => {
return (
<div className="settings-content">
<FontSelect
selected={font}
onUpload={onUpload}
onChange={onChange.bind(null, 'fontFamily')}
/>
<Slider
label="Size"
value={size}
minValue={10}
maxValue={18}
step={0.5}
onChange={onChange.bind(null, 'fontSize')}
onMouseDown={onWidthChanging}
onMouseUp={onWidthChanged}
/>
<Slider
label="Line height"
value={lineHeight}
minValue={90}
maxValue={250}
unit="%"
onChange={onChange.bind(null, 'lineHeight')}
/>
</div>
)
}
)
const resetButtonStyle = { borderTop: `1px solid ${COLORS.SECONDARY}` }
const MiscSettings = React.memo(({ format, reset, applyPreset, settings }) => {
const input = React.useRef(null)
let download
try {
download = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(settings))}`
} catch (error) {
// pass
}
return (
<div className="settings-content">
<div className="row">
<input
hidden
ref={input}
type="file"
accept=".json"
onChange={async e => {
const json = await fileToJSON(e.target.files[0])
if (json) {
applyPreset(json)
}
}}
/>
<Button
center
style={{ borderRight: `1px solid ${COLORS.SECONDARY}` }}
onClick={() => input.current.click()}
>
Import config
</Button>
<Button center Component="a" href={download} download="carbon-config.json">
Export config
</Button>
</div>
<Button center onClick={format} style={resetButtonStyle}>
Prettify code
</Button>
<Button center color={COLORS.RED} onClick={reset} style={resetButtonStyle}>
Reset settings
</Button>
<style jsx>
{`
.row {
flex: 1;
}
.settings-content {
display: flex;
flex-direction: column;
}
.settings-content :global(a) {
display: flex;
flex: 1;
user-drag: none;
}
`}
</style>
</div>
)
})
const settingButtonStyle = {
width: '40px',
height: '100%'
}
class Settings extends React.PureComponent {
state = {
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
presets: DEFAULT_PRESETS,
selectedMenu: 'Window',
showPresets: true,
previousSettings: null,
widthChanging: false
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
}
settingsRef = React.createRef()
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
componentDidMount() {
const storedPresets = getPresets(localStorage) || []
this.setState(({ presets }) => ({
presets: [...storedPresets, ...presets]
}))
}
togglePresets = () => this.setState(toggle('showPresets'))
selectMenu = selectedMenu => () => this.setState({ selectedMenu })
handleWidthChanging = () => {
const rect = this.settingsRef.current.getBoundingClientRect()
this.settingPosition = { top: rect.bottom, left: rect.left }
this.setState({ widthChanging: true })
}
handleWidthChanged = () => this.setState({ widthChanging: false })
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
handleChange = (key, value) => {
this.props.onChange(key, value)
this.setState({ previousSettings: null })
}
handleReset = () => {
this.props.resetDefaultSettings()
this.setState({ previousSettings: null })
}
handleFontUpload = (id, url) => {
this.props.onChange('fontFamily', id)
this.props.onChange('fontUrl', url)
this.props.toggleVisibility()
}
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
getSettingsFromProps = () =>
omitBy(this.props, (v, k) => typeof v === 'function' || k === 'preset')
applyPreset = preset => {
const previousSettings = this.getSettingsFromProps()
this.props.applyPreset(preset)
this.setState({ previousSettings })
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
}
undoPreset = () => {
this.props.applyPreset({ ...this.state.previousSettings, id: null })
this.setState({ previousSettings: null })
}
removePreset = id => {
if (this.props.preset === id) {
this.props.onChange('preset', null)
this.setState({ previousSettings: null })
}
this.setState(
({ presets }) => ({ presets: presets.filter(p => p.id !== id) }),
this.savePresets
)
}
createPreset = async () => {
const newPreset = this.getSettingsFromProps()
newPreset.id = `preset:${generateId()}`
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
newPreset.custom = true
newPreset.icon = await this.props.getCarbonImage({
format: 'png',
squared: true,
exportSize: 1
})
this.props.onChange('preset', newPreset.id)
this.setState(
({ presets }) => ({
previousSettings: null,
presets: [newPreset, ...presets]
}),
this.savePresets
)
}
savePresets = () => savePresets(this.state.presets.filter(p => p.custom))
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
renderContent = () => {
switch (this.state.selectedMenu) {
case 'Window':
return (
<WindowSettings
onChange={this.handleChange}
onWidthChanging={this.handleWidthChanging}
onWidthChanged={this.handleWidthChanged}
windowTheme={this.props.windowTheme}
paddingHorizontal={this.props.paddingHorizontal}
paddingVertical={this.props.paddingVertical}
dropShadow={this.props.dropShadow}
dropShadowBlurRadius={this.props.dropShadowBlurRadius}
dropShadowOffsetY={this.props.dropShadowOffsetY}
windowControls={this.props.windowControls}
lineNumbers={this.props.lineNumbers}
firstLineNumber={this.props.firstLineNumber}
widthAdjustment={this.props.widthAdjustment}
watermark={this.props.watermark}
/>
)
case 'Type':
return (
<TypeSettings
onChange={this.handleChange}
onUpload={this.handleFontUpload}
onWidthChanging={this.handleWidthChanging}
onWidthChanged={this.handleWidthChanged}
font={this.props.fontFamily}
size={this.props.fontSize}
lineHeight={this.props.lineHeight}
/>
)
case 'Misc': {
const settings = this.getSettingsFromProps()
return (
<MiscSettings
format={this.props.format}
reset={this.handleReset}
applyPreset={this.props.applyPreset}
settings={settings}
/>
)
}
default:
return null
}
}
render() {
const { selectedMenu, showPresets, presets, previousSettings, widthChanging } = this.state
const { preset, isVisible, toggleVisibility } = this.props
return (
<div className="settings-container" ref={this.settingsRef}>
<Button
title="Settings Menu"
border
center
selected={isVisible}
style={settingButtonStyle}
onClick={toggleVisibility}
7 years ago
>
<SettingsIcon />
</Button>
<Popout
pointerLeft="15px"
hidden={!isVisible}
style={{
position: widthChanging ? 'fixed' : 'absolute',
width: '316px',
top: widthChanging ? this.settingPosition.top : 'initial',
left: widthChanging ? this.settingPosition.left : 'initial'
}}
>
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
<Presets
show={showPresets}
presets={presets}
selected={preset}
toggle={this.togglePresets}
apply={this.applyPreset}
undo={this.undoPreset}
remove={this.removePreset}
create={this.createPreset}
applied={!!previousSettings}
/>
<div className="settings-bottom">
<div className="settings-menu">
<MenuButton name="Window" select={this.selectMenu} selected={selectedMenu} />
<MenuButton name="Type" select={this.selectMenu} selected={selectedMenu} />
<MenuButton name="Misc" select={this.selectMenu} selected={selectedMenu} />
</div>
{this.renderContent()}
</div>
</Popout>
<style jsx>
{`
.settings-container {
position: relative;
}
.settings-bottom {
display: flex;
}
.settings-menu {
display: flex;
flex-direction: column;
flex: 0 0 96px;
background-color: ${COLORS.DARK_GRAY};
}
.settings-bottom :global(.settings-content) {
width: 100%;
6 years ago
border-left: 2px solid ${COLORS.SECONDARY};
}
.settings-bottom :global(.settings-content > div:not(:first-child)) {
border-top: solid 1px ${COLORS.SECONDARY};
}
`}
</style>
</div>
)
}
}
export default managePopout(Settings)