hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

render styling palette to toolbar

Browse Source
main
Mike Fix 5 years ago committed by repo-ranger[bot]
parent 71e6d44ab3
commit 423e578acd
3 changed files with 91 additions and 76 deletions
Show Stats Download Patch File Download Diff File

18
components/Carbon.js
Unescape Escape View File

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom'
import dynamic from 'next/dynamic' import dynamic from 'next/dynamic'
import hljs from 'highlight.js/lib/highlight' import hljs from 'highlight.js/lib/highlight'
import javascript from 'highlight.js/lib/languages/javascript' import javascript from 'highlight.js/lib/languages/javascript'
@ -318,13 +319,16 @@ class Carbon extends React.PureComponent {
<SpinnerWrapper loading={this.props.loading}>{content}</SpinnerWrapper> <SpinnerWrapper loading={this.props.loading}>{content}</SpinnerWrapper>
<div className="twitter-png-fix" /> <div className="twitter-png-fix" />
</div> </div>
{!this.props.readOnly && this.state.selectionAt && ( {!this.props.readOnly &&
<SelectionEditor this.state.selectionAt &&
position={{ top: -4, right: 6 }} ReactDOM.createPortal(
onChange={this.onSelectionChange} <SelectionEditor
onClose={this.closeSelectionEditor} onChange={this.onSelectionChange}
/> onClose={this.closeSelectionEditor}
)} />,
// TODO: don't use portal?
document.getElementById('style-editor-button')
)}
<style jsx> <style jsx>
{` {`
.section, .section,

1
components/Editor.js
Unescape Escape View File

@ -392,6 +392,7 @@ class Editor extends React.Component {
applyPreset={this.applyPreset} applyPreset={this.applyPreset}
getCarbonImage={this.getCarbonImage} getCarbonImage={this.getCarbonImage}
/> />
<div id="style-editor-button" />
<div className="buttons"> <div className="buttons">
<TweetButton onClick={this.upload} /> <TweetButton onClick={this.upload} />
<ExportMenu <ExportMenu

148
components/SelectionEditor.js
Unescape Escape View File

@ -1,9 +1,12 @@
import React from 'react' import React from 'react'
import { useKeyboardListener } from 'actionsack'
import Popout from './Popout' import Popout from './Popout'
import Button from './Button' import Button from './Button'
import ColorPicker from './ColorPicker' import ColorPicker from './ColorPicker'
import ThemeIcon from './svg/Theme'
import { COLORS } from '../lib/constants' import { COLORS } from '../lib/constants'
import { useKeyboardListener } from 'actionsack'
const styleEditorButtonStyle = { width: 32, maxWidth: 32, height: 32, borderRadius: '50%' }
function ModifierButton(props) { function ModifierButton(props) {
return ( return (
@ -50,9 +53,10 @@ function reducer(state, action) {
throw new Error('Invalid action') throw new Error('Invalid action')
} }
function SelectionEditor({ position, onChange, onClose }) { function SelectionEditor({ onChange, onClose }) {
useKeyboardListener('Escape', onClose) useKeyboardListener('Escape', onClose)
const [open, setOpen] = React.useState(false) const [visible, setVisible] = React.useState(false)
const [open, setOpen] = React.useState(true)
const [state, dispatch] = React.useReducer(reducer, { const [state, dispatch] = React.useReducer(reducer, {
bold: false, bold: false,
@ -66,73 +70,79 @@ function SelectionEditor({ position, onChange, onClose }) {
}, [onChange, state]) }, [onChange, state])
return ( return (
<Popout <div style={{ position: 'relative' }}>
hidden={false} <Button
pointerRight="16px" title="Style Menu"
style={{ border
zIndex: 100, center
...position selected={visible}
}} style={styleEditorButtonStyle}
> margin="4px 0 0"
<div className="colorizer"> onClick={() => setVisible(v => !v)}
<div className="modifier"> >
<ModifierButton selected={state.bold} onClick={() => dispatch({ type: 'BOLD' })}> <ThemeIcon />
<b>B</b> </Button>
</ModifierButton> <Popout hidden={!visible} pointerLeft="9px">
<ModifierButton selected={state.italics} onClick={() => dispatch({ type: 'ITALICS' })}> <div className="colorizer">
<i>I</i> <div className="modifier">
</ModifierButton> <ModifierButton selected={state.bold} onClick={() => dispatch({ type: 'BOLD' })}>
<ModifierButton <b>B</b>
selected={state.underline} </ModifierButton>
onClick={() => dispatch({ type: 'UNDERLINE' })} <ModifierButton selected={state.italics} onClick={() => dispatch({ type: 'ITALICS' })}>
> <i>I</i>
<u>U</u> </ModifierButton>
</ModifierButton> <ModifierButton
<button className="color-square" onClick={() => setOpen(o => !o)} /> selected={state.underline}
</div> onClick={() => dispatch({ type: 'UNDERLINE' })}
{open && ( >
<div className="color-picker-container"> <u>U</u>
<ColorPicker </ModifierButton>
color={state.color || COLORS.PRIMARY} <button className="color-square" onClick={() => setOpen(o => !o)} />
disableAlpha={true}
onChange={d => dispatch({ type: 'COLOR', color: d.hex })}
/>
</div> </div>
)} {open && (
</div> <div className="color-picker-container">
<style jsx> <ColorPicker
{` color={state.color || COLORS.PRIMARY}
.modifier { disableAlpha={true}
padding: 0px 8px; onChange={d => dispatch({ type: 'COLOR', color: d.hex })}
display: flex; />
} </div>
.colorizer b { )}
font-weight: bold; </div>
} <style jsx>
.colorizer i { {`
font-style: italic; .modifier {
} padding: 0px 8px;
.colorizer :global(button) { display: flex;
min-width: 24px; }
} .colorizer b {
.color-square { font-weight: bold;
cursor: pointer; }
appearance: none; .colorizer i {
outline: none; font-style: italic;
border: none; }
border-radius: 3px; .colorizer :global(button) {
padding: 12px; min-width: 24px;
margin: 4px 0 4px auto; }
background: ${state.color || COLORS.PRIMARY}; .color-square {
box-shadow: ${`inset 0px 0px 0px ${open ? 2 : 1}px ${COLORS.SECONDARY}`}; cursor: pointer;
} appearance: none;
.color-picker-container { outline: none;
width: 218px; border: none;
border-top: 2px solid ${COLORS.SECONDARY}; border-radius: 3px;
} padding: 12px;
`} margin: 4px 0 4px auto;
</style> background: ${state.color || COLORS.PRIMARY};
</Popout> box-shadow: ${`inset 0px 0px 0px ${open ? 2 : 1}px ${COLORS.SECONDARY}`};
}
.color-picker-container {
width: 218px;
border-top: 2px solid ${COLORS.SECONDARY};
}
`}
</style>
</Popout>
</div>
) )
} }

Write Preview
Loading…
Cancel
Save