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

convert ids to classNames, use refs (#488)

Browse Source
main
Michael Fix 6 years ago committed by GitHub
parent e8f72be402
commit bd695b7fd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 67 additions and 55 deletions
Show Stats Download Patch File Download Diff File

2
api/handlers/image.js
Unescape Escape View File

@ -14,7 +14,7 @@ module.exports = browser => async (req, res) => {
// wait for page to detect language // wait for page to detect language
await delay(ARBITRARY_WAIT_TIME) await delay(ARBITRARY_WAIT_TIME)
const targetElement = await page.$('#export-container') const targetElement = await page.$('.export-container')
const dataUrl = await page.evaluate((target = document) => { const dataUrl = await page.evaluate((target = document) => {
const config = { const config = {

57
components/Carbon.js
Unescape Escape View File

@ -12,7 +12,8 @@ import { COLORS, LANGUAGE_MODE_HASH, LANGUAGE_NAME_HASH, DEFAULT_SETTINGS } from
class Carbon extends React.PureComponent { class Carbon extends React.PureComponent {
static defaultProps = { static defaultProps = {
onAspectRatioChange: () => {}, onAspectRatioChange: () => {},
updateCode: () => {} updateCode: () => {},
innerRef: () => {}
} }
componentDidMount() { componentDidMount() {
@ -74,7 +75,7 @@ class Carbon extends React.PureComponent {
this.props.config.backgroundImage this.props.config.backgroundImage
const content = ( const content = (
<div id="container"> <div className="container">
{config.windowControls ? ( {config.windowControls ? (
<WindowControls <WindowControls
titleBar={this.props.titleBar} titleBar={this.props.titleBar}
@ -91,21 +92,21 @@ class Carbon extends React.PureComponent {
options={options} options={options}
/> />
{config.watermark && <Watermark />} {config.watermark && <Watermark />}
<div id="container-bg"> <div className="container-bg">
<div className="white eliminateOnRender" /> <div className="white eliminateOnRender" />
<div className="alpha eliminateOnRender" /> <div className="alpha eliminateOnRender" />
<div className="bg" /> <div className="bg" />
</div> </div>
<style jsx> <style jsx>
{` {`
#container { .container {
position: relative; position: relative;
min-width: ${config.widthAdjustment ? '90px' : '680px'}; min-width: ${config.widthAdjustment ? '90px' : '680px'};
max-width: 1024px; max-width: 1024px;
padding: ${config.paddingVertical} ${config.paddingHorizontal}; padding: ${config.paddingVertical} ${config.paddingHorizontal};
} }
#container :global(.watermark) { .container :global(.watermark) {
fill-opacity: 0.3; fill-opacity: 0.3;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
@ -113,7 +114,7 @@ class Carbon extends React.PureComponent {
right: calc(${config.paddingHorizontal} + 16px); right: calc(${config.paddingHorizontal} + 16px);
} }
#container #container-bg { .container .container-bg {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
@ -121,7 +122,7 @@ class Carbon extends React.PureComponent {
left: 0px; left: 0px;
} }
#container .white { .container .white {
background: #fff; background: #fff;
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -130,7 +131,7 @@ class Carbon extends React.PureComponent {
left: 0px; left: 0px;
} }
#container .bg { .container .bg {
${this.props.config.backgroundMode === 'image' ${this.props.config.backgroundMode === 'image'
? `background: url(${backgroundImage}); ? `background: url(${backgroundImage});
background-size: cover; background-size: cover;
@ -144,7 +145,7 @@ class Carbon extends React.PureComponent {
left: 0px; left: 0px;
} }
#container .alpha { .container .alpha {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
@ -153,24 +154,24 @@ class Carbon extends React.PureComponent {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==); background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
} }
#container :global(.cm-s-dracula .CodeMirror-cursor) { .container :global(.cm-s-dracula .CodeMirror-cursor) {
border-left: solid 2px #159588; border-left: solid 2px #159588;
} }
#container :global(.cm-s-solarized) { .container :global(.cm-s-solarized) {
box-shadow: none; box-shadow: none;
} }
#container :global(.cm-s-solarized.cm-s-light) { .container :global(.cm-s-solarized.cm-s-light) {
text-shadow: #eee8d5 0 1px; text-shadow: #eee8d5 0 1px;
} }
#container :global(.CodeMirror-gutters) { .container :global(.CodeMirror-gutters) {
background-color: unset; background-color: unset;
border-right: none; border-right: none;
} }
#container :global(.CodeMirror__container) { .container :global(.CodeMirror__container) {
min-width: inherit; min-width: inherit;
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -182,7 +183,7 @@ class Carbon extends React.PureComponent {
: ''}; : ''};
} }
#container :global(.CodeMirror__container .CodeMirror) { .container :global(.CodeMirror__container .CodeMirror) {
height: auto; height: auto;
min-width: inherit; min-width: inherit;
padding: 18px 18px; padding: 18px 18px;
@ -195,19 +196,19 @@ class Carbon extends React.PureComponent {
user-select: none; user-select: none;
} }
#container :global(.CodeMirror-scroll) { .container :global(.CodeMirror-scroll) {
overflow: hidden !important; overflow: hidden !important;
} }
#container :global(.window-theme__sharp > .CodeMirror) { .container :global(.window-theme__sharp > .CodeMirror) {
border-radius: 0px; border-radius: 0px;
} }
#container :global(.window-theme__bw > .CodeMirror) { .container :global(.window-theme__bw > .CodeMirror) {
border: 2px solid ${COLORS.SECONDARY}; border: 2px solid ${COLORS.SECONDARY};
} }
#container :global(.window-controls + .CodeMirror__container > .CodeMirror) { .container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
padding-top: 48px; padding-top: 48px;
} }
`} `}
@ -216,15 +217,21 @@ class Carbon extends React.PureComponent {
) )
return ( return (
<div id="section"> <div className="section">
<div id="export-container" ref={ele => (this.exportContainerNode = ele)}> <div
className="export-container"
ref={ele => {
this.exportContainerNode = ele
this.props.innerRef(ele)
}}
>
{content} {content}
<div id="twitter-png-fix" /> <div className="twitter-png-fix" />
</div> </div>
<style jsx> <style jsx>
{` {`
#section, .section,
#export-container { .export-container {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -234,7 +241,7 @@ class Carbon extends React.PureComponent {
} }
/* forces twitter to save images as png — https://github.com/dawnlabs/carbon/issues/86 */ /* forces twitter to save images as png — https://github.com/dawnlabs/carbon/issues/86 */
#twitter-png-fix { .twitter-png-fix {
height: 1px; height: 1px;
width: 100%; width: 100%;
background: rgba(0, 0, 0, 0.01); background: rgba(0, 0, 0, 0.01);

8
components/Editor.js
Unescape Escape View File

@ -67,6 +67,7 @@ class Editor extends React.Component {
this.setOffline = () => this.setState({ online: false }) this.setOffline = () => this.setState({ online: false })
this.setOnline = () => this.setState({ online: true }) this.setOnline = () => this.setState({ online: true })
this.innerRef = node => (this.carbonNode = node)
} }
async componentDidMount() { async componentDidMount() {
@ -142,7 +143,7 @@ class Editor extends React.Component {
}) })
} }
const node = document.getElementById('export-container') const node = this.carbonNode
const exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value const exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value
const width = node.offsetWidth * exportSize const width = node.offsetWidth * exportSize
@ -269,7 +270,7 @@ class Editor extends React.Component {
} }
return ( return (
<React.Fragment> <React.Fragment>
<div id="editor"> <div className="editor">
<Toolbar> <Toolbar>
<Dropdown <Dropdown
selected={THEMES_HASH[this.state.theme] || DEFAULT_THEME} selected={THEMES_HASH[this.state.theme] || DEFAULT_THEME}
@ -327,6 +328,7 @@ class Editor extends React.Component {
onAspectRatioChange={this.updateAspectRatio} onAspectRatioChange={this.updateAspectRatio}
titleBar={this.state.titleBar} titleBar={this.state.titleBar}
updateTitleBar={this.updateTitleBar} updateTitleBar={this.updateTitleBar}
innerRef={this.innerRef}
> >
{this.state.code != null ? this.state.code : DEFAULT_CODE} {this.state.code != null ? this.state.code : DEFAULT_CODE}
</Carbon> </Carbon>
@ -336,7 +338,7 @@ class Editor extends React.Component {
</div> </div>
<style jsx> <style jsx>
{` {`
#editor { .editor {
background: ${COLORS.BLACK}; background: ${COLORS.BLACK};
border: 3px solid ${COLORS.SECONDARY}; border: 3px solid ${COLORS.SECONDARY};
border-radius: 8px; border-radius: 8px;

8
components/Toolbar.js
Unescape Escape View File

@ -1,11 +1,11 @@
import React from 'react' import React from 'react'
const Toolbar = props => ( const Toolbar = props => (
<div id="toolbar"> <div className="toolbar">
{props.children} {props.children}
<style jsx> <style jsx>
{` {`
#toolbar { .toolbar {
width: 100%; width: 100%;
height: 40px; // TODO fix height: 40px; // TODO fix
margin-bottom: 16px; margin-bottom: 16px;
@ -16,11 +16,11 @@ const Toolbar = props => (
color: #fff; color: #fff;
} }
#toolbar > :global(div) { .toolbar > :global(div) {
margin-right: 8px; margin-right: 8px;
} }
#toolbar > :global(div):last-child { .toolbar > :global(div):last-child {
margin-right: 0px; margin-right: 0px;
} }
`} `}

12
components/svg/WindowThemes.js
Unescape Escape View File

@ -9,10 +9,10 @@ export const Sharp = () => (
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<defs> <defs>
<rect id="a1" width="81" height="81" rx="3" /> <rect width="81" height="81" rx="3" />
</defs> </defs>
<g fill="none" fillRule="evenodd"> <g fill="none" fillRule="evenodd">
<mask id="b1" fill="white"> <mask fill="white">
<use xlinkHref="#a1" /> <use xlinkHref="#a1" />
</mask> </mask>
<use fill="#616161" xlinkHref="#a1" /> <use fill="#616161" xlinkHref="#a1" />
@ -58,10 +58,10 @@ export const BW = () => (
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<defs> <defs>
<rect id="a2" width="81" height="81" rx="3" /> <rect width="81" height="81" rx="3" />
</defs> </defs>
<g fill="none" fillRule="evenodd"> <g fill="none" fillRule="evenodd">
<mask id="b2" fill="white"> <mask fill="white">
<use xlinkHref="#a2" /> <use xlinkHref="#a2" />
</mask> </mask>
<use fill="#616161" xlinkHref="#a2" /> <use fill="#616161" xlinkHref="#a2" />
@ -90,10 +90,10 @@ export const None = () => (
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink"
> >
<defs> <defs>
<rect id="a3" width="81" height="81" rx="3" /> <rect width="81" height="81" rx="3" />
</defs> </defs>
<g fill="none" fillRule="evenodd"> <g fill="none" fillRule="evenodd">
<mask id="b3" fill="white"> <mask fill="white">
<use xlinkHref="#a3" /> <use xlinkHref="#a3" />
</mask> </mask>
<use fill="#616161" xlinkHref="#a3" /> <use fill="#616161" xlinkHref="#a3" />

6
cypress/integration/background-color-spec.js
Unescape Escape View File

@ -40,13 +40,13 @@ describe('background color', () => {
cy.url().should('contain', '?bg=') cy.url().should('contain', '?bg=')
// confirm color change // confirm color change
cy.get('#container-bg .bg').should('have.css', 'background-color', hex2rgb(darkRed).rgbString) cy.get('.container-bg .bg').should('have.css', 'background-color', hex2rgb(darkRed).rgbString)
}) })
it('specifies color in url', () => { it('specifies color in url', () => {
cy.visit('?bg=rgb(255,0,0)') cy.visit('?bg=rgb(255,0,0)')
editorVisible() editorVisible()
cy.get('#container-bg .bg').should('have.css', 'background-color', 'rgb(255, 0, 0)') cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(255, 0, 0)')
}) })
it('enters neon pink', () => { it('enters neon pink', () => {
@ -61,6 +61,6 @@ describe('background color', () => {
closePicker() closePicker()
cy.url().should('contain', `?bg=rgba(${encodeURIComponent('255,0,255,1')}`) cy.url().should('contain', `?bg=rgba(${encodeURIComponent('255,0,255,1')}`)
cy.get('#container-bg .bg').should('have.css', 'background-color', 'rgb(255, 0, 255)') cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(255, 0, 255)')
}) })
}) })

11
cypress/integration/basic.js
Unescape Escape View File

@ -3,13 +3,14 @@
import { editorVisible } from '../support' import { editorVisible } from '../support'
describe('Basic', () => { describe('Basic', () => {
it('Should open editor with the correct text encoding', () => { it('Should open editor with the correct text encoding', () => {
cy.visit('/?code=%250A%252F*%2520Passing%2520Boolean%2520as%2520method%2520to%2520find%2520returns%2520the%250A%2520*%2520first%2520truthy%2520value%2520in%2520the%2520array!%250A%2520*%252F%250A%255Bfalse%252C%2520false%252C%2520%27%27%252C%2520undefined%252C%2520%27qwijo%27%252C%25200%255D.find(Boolean)%2520%252F%252F%2520%27qwijo%27') cy.visit(
'/?code=%250A%252F*%2520Passing%2520Boolean%2520as%2520method%2520to%2520find%2520returns%2520the%250A%2520*%2520first%2520truthy%2520value%2520in%2520the%2520array!%250A%2520*%252F%250A%255Bfalse%252C%2520false%252C%2520%27%27%252C%2520undefined%252C%2520%27qwijo%27%252C%25200%255D.find(Boolean)%2520%252F%252F%2520%27qwijo%27'
)
editorVisible() editorVisible()
cy.contains( cy.contains(
'#container', '.container',
'/* Passing Boolean as method to find returns the * first truthy value in the array! */[false, false, \'\', undefined, \'qwijo\', 0].find(Boolean) // \'qwijo\'' "/* Passing Boolean as method to find returns the * first truthy value in the array! */[false, false, '', undefined, 'qwijo', 0].find(Boolean) // 'qwijo'"
) )
}) })
@ -17,7 +18,7 @@ describe('Basic', () => {
cy.visit('/?code=%25') cy.visit('/?code=%25')
editorVisible() editorVisible()
cy.contains('#container', '%') cy.contains('.container', '%')
}) })
/* /*

16
cypress/integration/localStorage-spec.js
Unescape Escape View File

@ -7,7 +7,7 @@ import { editorVisible } from '../support'
// so instead visit the desired url in each test // so instead visit the desired url in each test
describe('localStorage', () => { describe('localStorage', () => {
const themeDropdown = () => cy.get('#toolbar .dropdown-container').first() const themeDropdown = () => cy.get('.toolbar .dropdown-container').first()
const pickTheme = (name = 'Blackboard') => const pickTheme = (name = 'Blackboard') =>
themeDropdown() themeDropdown()
@ -18,8 +18,7 @@ describe('localStorage', () => {
it.skip('is empty initially', () => { it.skip('is empty initially', () => {
cy.visit('/') cy.visit('/')
editorVisible() editorVisible()
cy cy.window()
.window()
.its('localStorage') .its('localStorage')
.should('have.length', 0) .should('have.length', 0)
}) })
@ -28,10 +27,11 @@ describe('localStorage', () => {
cy.visit('/') cy.visit('/')
editorVisible() editorVisible()
pickTheme('Blackboard') pickTheme('Blackboard')
themeDropdown().click().contains('Blackboard') themeDropdown()
.click()
.contains('Blackboard')
cy cy.window()
.window()
.its('localStorage.CARBON_STATE') .its('localStorage.CARBON_STATE')
.then(JSON.parse) .then(JSON.parse)
.its('theme') .its('theme')
@ -39,7 +39,9 @@ describe('localStorage', () => {
// visiting page again restores theme from localStorage // visiting page again restores theme from localStorage
cy.visit('/') cy.visit('/')
themeDropdown().click().contains('Blackboard') themeDropdown()
.click()
.contains('Blackboard')
cy.url().should('contain', 't=blackboard') cy.url().should('contain', 't=blackboard')
}) })
}) })

2
cypress/support/index.js
Unescape Escape View File

@ -15,7 +15,7 @@
/* global cy */ /* global cy */
export const editorVisible = () => cy.get('#editor').should('be.visible') export const editorVisible = () => cy.get('.editor').should('be.visible')
// Import commands.js using ES2015 syntax: // Import commands.js using ES2015 syntax:
// import './commands' // import './commands'

Write Preview
Loading…
Cancel
Save