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
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 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 {
static defaultProps = {
onAspectRatioChange: () => {},
updateCode: () => {}
updateCode: () => {},
innerRef: () => {}
}
componentDidMount() {
@ -74,7 +75,7 @@ class Carbon extends React.PureComponent {
this.props.config.backgroundImage
const content = (
<div id="container">
<div className="container">
{config.windowControls ? (
<WindowControls
titleBar={this.props.titleBar}
@ -91,21 +92,21 @@ class Carbon extends React.PureComponent {
options={options}
/>
{config.watermark && <Watermark />}
<div id="container-bg">
<div className="container-bg">
<div className="white eliminateOnRender" />
<div className="alpha eliminateOnRender" />
<div className="bg" />
</div>
<style jsx>
{`
#container {
.container {
position: relative;
min-width: ${config.widthAdjustment ? '90px' : '680px'};
max-width: 1024px;
padding: ${config.paddingVertical} ${config.paddingHorizontal};
}
#container :global(.watermark) {
.container :global(.watermark) {
fill-opacity: 0.3;
position: absolute;
z-index: 2;
@ -113,7 +114,7 @@ class Carbon extends React.PureComponent {
right: calc(${config.paddingHorizontal} + 16px);
}
#container #container-bg {
.container .container-bg {
position: absolute;
top: 0px;
right: 0px;
@ -121,7 +122,7 @@ class Carbon extends React.PureComponent {
left: 0px;
}
#container .white {
.container .white {
background: #fff;
position: absolute;
top: 0px;
@ -130,7 +131,7 @@ class Carbon extends React.PureComponent {
left: 0px;
}
#container .bg {
.container .bg {
${this.props.config.backgroundMode === 'image'
? `background: url(${backgroundImage});
background-size: cover;
@ -144,7 +145,7 @@ class Carbon extends React.PureComponent {
left: 0px;
}
#container .alpha {
.container .alpha {
position: absolute;
top: 0px;
right: 0px;
@ -153,24 +154,24 @@ class Carbon extends React.PureComponent {
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;
}
#container :global(.cm-s-solarized) {
.container :global(.cm-s-solarized) {
box-shadow: none;
}
#container :global(.cm-s-solarized.cm-s-light) {
.container :global(.cm-s-solarized.cm-s-light) {
text-shadow: #eee8d5 0 1px;
}
#container :global(.CodeMirror-gutters) {
.container :global(.CodeMirror-gutters) {
background-color: unset;
border-right: none;
}
#container :global(.CodeMirror__container) {
.container :global(.CodeMirror__container) {
min-width: inherit;
position: relative;
z-index: 1;
@ -182,7 +183,7 @@ class Carbon extends React.PureComponent {
: ''};
}
#container :global(.CodeMirror__container .CodeMirror) {
.container :global(.CodeMirror__container .CodeMirror) {
height: auto;
min-width: inherit;
padding: 18px 18px;
@ -195,19 +196,19 @@ class Carbon extends React.PureComponent {
user-select: none;
}
#container :global(.CodeMirror-scroll) {
.container :global(.CodeMirror-scroll) {
overflow: hidden !important;
}
#container :global(.window-theme__sharp > .CodeMirror) {
.container :global(.window-theme__sharp > .CodeMirror) {
border-radius: 0px;
}
#container :global(.window-theme__bw > .CodeMirror) {
.container :global(.window-theme__bw > .CodeMirror) {
border: 2px solid ${COLORS.SECONDARY};
}
#container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
.container :global(.window-controls + .CodeMirror__container > .CodeMirror) {
padding-top: 48px;
}
`}
@ -216,15 +217,21 @@ class Carbon extends React.PureComponent {
)
return (
<div id="section">
<div id="export-container" ref={ele => (this.exportContainerNode = ele)}>
<div className="section">
<div
className="export-container"
ref={ele => {
this.exportContainerNode = ele
this.props.innerRef(ele)
}}
>
{content}
<div id="twitter-png-fix" />
<div className="twitter-png-fix" />
</div>
<style jsx>
{`
#section,
#export-container {
.section,
.export-container {
height: 100%;
display: flex;
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 */
#twitter-png-fix {
.twitter-png-fix {
height: 1px;
width: 100%;
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.setOnline = () => this.setState({ online: true })
this.innerRef = node => (this.carbonNode = node)
}
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 width = node.offsetWidth * exportSize
@ -269,7 +270,7 @@ class Editor extends React.Component {
}
return (
<React.Fragment>
<div id="editor">
<div className="editor">
<Toolbar>
<Dropdown
selected={THEMES_HASH[this.state.theme] || DEFAULT_THEME}
@ -327,6 +328,7 @@ class Editor extends React.Component {
onAspectRatioChange={this.updateAspectRatio}
titleBar={this.state.titleBar}
updateTitleBar={this.updateTitleBar}
innerRef={this.innerRef}
>
{this.state.code != null ? this.state.code : DEFAULT_CODE}
</Carbon>
@ -336,7 +338,7 @@ class Editor extends React.Component {
</div>
<style jsx>
{`
#editor {
.editor {
background: ${COLORS.BLACK};
border: 3px solid ${COLORS.SECONDARY};
border-radius: 8px;

8
components/Toolbar.js
Unescape Escape View File

@ -1,11 +1,11 @@
import React from 'react'
const Toolbar = props => (
<div id="toolbar">
<div className="toolbar">
{props.children}
<style jsx>
{`
#toolbar {
.toolbar {
width: 100%;
height: 40px; // TODO fix
margin-bottom: 16px;
@ -16,11 +16,11 @@ const Toolbar = props => (
color: #fff;
}
#toolbar > :global(div) {
.toolbar > :global(div) {
margin-right: 8px;
}
#toolbar > :global(div):last-child {
.toolbar > :global(div):last-child {
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"
>
<defs>
<rect id="a1" width="81" height="81" rx="3" />
<rect width="81" height="81" rx="3" />
</defs>
<g fill="none" fillRule="evenodd">
<mask id="b1" fill="white">
<mask fill="white">
<use xlinkHref="#a1" />
</mask>
<use fill="#616161" xlinkHref="#a1" />
@ -58,10 +58,10 @@ export const BW = () => (
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<rect id="a2" width="81" height="81" rx="3" />
<rect width="81" height="81" rx="3" />
</defs>
<g fill="none" fillRule="evenodd">
<mask id="b2" fill="white">
<mask fill="white">
<use xlinkHref="#a2" />
</mask>
<use fill="#616161" xlinkHref="#a2" />
@ -90,10 +90,10 @@ export const None = () => (
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<rect id="a3" width="81" height="81" rx="3" />
<rect width="81" height="81" rx="3" />
</defs>
<g fill="none" fillRule="evenodd">
<mask id="b3" fill="white">
<mask fill="white">
<use xlinkHref="#a3" />
</mask>
<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=')
// 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', () => {
cy.visit('?bg=rgb(255,0,0)')
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', () => {
@ -61,6 +61,6 @@ describe('background color', () => {
closePicker()
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'
describe('Basic', () => {
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()
cy.contains(
'#container',
'/* Passing Boolean as method to find returns the * first truthy value in the array! */[false, false, \'\', undefined, \'qwijo\', 0].find(Boolean) // \'qwijo\''
'.container',
"/* 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')
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
describe('localStorage', () => {
const themeDropdown = () => cy.get('#toolbar .dropdown-container').first()
const themeDropdown = () => cy.get('.toolbar .dropdown-container').first()
const pickTheme = (name = 'Blackboard') =>
themeDropdown()
@ -18,8 +18,7 @@ describe('localStorage', () => {
it.skip('is empty initially', () => {
cy.visit('/')
editorVisible()
cy
.window()
cy.window()
.its('localStorage')
.should('have.length', 0)
})
@ -28,10 +27,11 @@ describe('localStorage', () => {
cy.visit('/')
editorVisible()
pickTheme('Blackboard')
themeDropdown().click().contains('Blackboard')
themeDropdown()
.click()
.contains('Blackboard')
cy
.window()
cy.window()
.its('localStorage.CARBON_STATE')
.then(JSON.parse)
.its('theme')
@ -39,7 +39,9 @@ describe('localStorage', () => {
// visiting page again restores theme from localStorage
cy.visit('/')
themeDropdown().click().contains('Blackboard')
themeDropdown()
.click()
.contains('Blackboard')
cy.url().should('contain', 't=blackboard')
})
})

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

@ -15,7 +15,7 @@
/* 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'

Write Preview
Loading…
Cancel
Save