Skip to content

Commit 33790f9

Browse files
bassarissebassarisse
committed
Separated legacy code and migrated header and footer to React
1 parent 9846d79 commit 33790f9

14 files changed

+967
-110
lines changed

‎app/App.jsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
11

2+
import 'normalize.css'
3+
24
import React from 'react'
35

6+
import Header from './components/Header'
7+
import Footer from './components/Footer'
8+
49
function App() {
5-
return <div></div>
10+
return (
11+
<div>
12+
<Header />
13+
<Footer />
14+
</div>
15+
)
616
}
717

818
export default App

‎app/components/Footer.jsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
import React from 'react'
3+
import styled from 'emotion/react'
4+
5+
const Info = styled.div`
6+
padding-top: 1pt;
7+
margin-top: 10px;
8+
clear: both;
9+
`
10+
11+
function Footer() {
12+
return (
13+
<Info>
14+
<h2>About</h2>
15+
<p>
16+
For many times I wanted to consistently change the colors of stylesheets, but it always ended up being a tedious and large amount of work.
17+
So, I decided to build a tool that would do that, and here it is!
18+
I think it could be useful for someone out there on this little planet of ours.
19+
</p>
20+
<p>
21+
Feel free to share your thoughts and inform me about some bug that you may stumble upon. You can check out <a href='http://bassarisse.com' target='_blank'>my website</a> or talk to me on <a href='http://twitter.com/bassarisse' target='_blank'>Twitter</a>.
22+
</p>
23+
<p>
24+
<strong>Requirements:</strong><br />
25+
Any browser should work fairly well, but please update yours to the latest version.
26+
</p>
27+
<p>
28+
<strong>Github:</strong><br />
29+
<a href='https://github.com/bassarisse/css-color-shifter' target='_blank'>https://github.com/bassarisse/css-color-shifter</a>
30+
</p>
31+
</Info>
32+
)
33+
}
34+
35+
export default Footer

‎app/components/Header.jsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
import React from 'react'
3+
import styled from 'emotion/react'
4+
5+
const Title = styled.h1`
6+
padding: 4pt;
7+
margin: 0;
8+
background-color: #333;
9+
color: white;
10+
`
11+
12+
const Version = styled.small`
13+
font-size: 0.5em;
14+
`
15+
16+
const Credit = styled.h4`
17+
display: block;
18+
font-weight: normal;
19+
font-size: 9pt;
20+
margin-top: 0;
21+
text-align: right;
22+
padding-right: 4pt;
23+
`
24+
25+
function Header() {
26+
return (
27+
<div>
28+
<Title>CSS Color Shifter <Version>v{APP_VERSION}</Version></Title>
29+
<Credit>by <a href='http://bassarisse.com' target='_blank'>Bruno Assarisse</a></Credit>
30+
</div>
31+
)
32+
}
33+
34+
export default Header

‎app/entry/index.js

+2-40
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,9 @@
11

2-
import ColorShifterUI from '../ColorShifterUI.js'
3-
4-
new ColorShifterUI({
5-
sourceFieldId: 'source',
6-
targetFieldId: 'target',
7-
hueFieldId: 'hueChange',
8-
hueNumericFieldId: 'hueChangeNumeric',
9-
hueResetButtonId: 'hueReset',
10-
saturationFieldId: 'saturationChange',
11-
saturationNumericFieldId: 'saturationChangeNumeric',
12-
saturationResetButtonId: 'saturationReset',
13-
lightnessFieldId: 'lightnessChange',
14-
lightnessNumericFieldId: 'lightnessChangeNumeric',
15-
lightnessResetButtonId: 'lightnessReset',
16-
alphaFieldId: 'alphaChange',
17-
alphaNumericFieldId: 'alphaChangeNumeric',
18-
alphaResetButtonId: 'alphaReset',
19-
contrastFieldId: 'contrastChange',
20-
contrastNumericFieldId: 'contrastChangeNumeric',
21-
contrastResetButtonId: 'contrastReset',
22-
allResetButtonId: 'allReset',
23-
formatFieldId: 'colorformat',
24-
postProcessingFieldId: 'postprocessing',
25-
fixHueFieldId: 'fixHue',
26-
colorNamesFieldId: 'colorNames',
27-
contractedHexCodesFieldId: 'contractedhexcodes',
28-
hexWithAlphaFieldId: 'hexwithalpha',
29-
preferHSLFieldId: 'preferhsl',
30-
fixAlphaFieldId: 'fixAlpha',
31-
proportionalSaturationFieldId: 'proportionalsaturation',
32-
proportionalLightnessFieldId: 'proportionallightness',
33-
enableCssCheckFieldId: 'enablecsssyntax',
34-
originalColorsContainerId: 'originalColors',
35-
newColorsContainerId: 'newColors'
36-
})
37-
38-
var versionNode = document.getElementById('version')
39-
if (versionNode)
40-
versionNode.innerText = 'v' + APP_VERSION
41-
422
import React from 'react'
433
import { render } from 'react-dom'
444

455
import App from '../App'
466

477
render(<App />, document.getElementById('root'))
8+
9+
import '../legacy'

‎app/index.tmpl.html

+4-25
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,11 @@
1010
<meta charset="utf-8" />
1111
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
1212
<title>CSS Color Shifter</title>
13-
14-
<link rel="stylesheet" href="./css-color-shifter.css" type="text/css" />
1513
</head>
16-
<body id="color-shifter-container">
14+
<body>
1715
<div id="root"></div>
1816

19-
<h1>CSS Color Shifter <small id="version"></small></h1>
20-
<h4>by <a href="http://bassarisse.com" target="_blank">Bruno Assarisse</a></h4>
21-
17+
<div id="color-shifter-container" style="visibility:hidden;">
2218
<div class="css-area-column">
2319
<div class="css-area-content">
2420
<label for="source"><strong>Source</strong> (paste your CSS here)</label>
@@ -144,28 +140,10 @@ <h4>by <a href="http://bassarisse.com" target="_blank">Bruno Assarisse</a></h4>
144140
</div>
145141
</div>
146142

147-
<div class="info">
148-
<h2>About</h2>
149-
<p>
150-
For many times I wanted to consistently change the colors of stylesheets, but it always ended up being a tedious and large amount of work.
151-
So, I decided to build a tool that would do that, and here it is!
152-
I think it could be useful for someone out there on this little planet of ours.
153-
</p>
154-
<p>
155-
Feel free to share your thoughts and inform me about some bug that you may stumble upon. You can check out <a href="http://bassarisse.com" target="_blank">my website</a> or talk to me on <a href="http://twitter.com/bassarisse" target="_blank">Twitter</a>.
156-
</p>
157-
<p>
158-
<strong>Requirements:</strong><br />
159-
Any browser should work fairly well, but please update yours to the latest version.
160-
</p>
161-
<p>
162-
<strong>Github:</strong><br />
163-
<a href="https://github.com/bassarisse/css-color-shifter" target="_blank">https://github.com/bassarisse/css-color-shifter</a>
164-
</p>
165-
166143
</div>
167144

168145
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default-3.4"></script>
146+
<!--
169147
<script type="text/javascript">
170148
var _gaq = _gaq || [];
171149
_gaq.push(['_setAccount', 'UA-6147007-1']);
@@ -177,6 +155,7 @@ <h2>About</h2>
177155
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
178156
})();
179157
</script>
158+
-->
180159

181160
</body>
182161
</html>

‎app/ColorShifterUI.js ‎app/legacy/ColorShifterUI.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

2-
import ColorShifter from './ColorShifter.js'
3-
import CssColor from './CssColor.js'
4-
import Util from './Util.js'
2+
import ColorShifter from '../lib/ColorShifter'
3+
import CssColor from '../lib/CssColor'
4+
import Util from './Util'
55

66
function ColorShifterUI(options) {
77

‎app/Util.js ‎app/legacy/Util.js

File renamed without changes.

‎app/css-color-shifter.css ‎app/legacy/css-color-shifter.css

-26
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,6 @@ body, html, input, select {
88
font: 10pt Helvetica, Arial, sans-serif;
99
}
1010

11-
h1 {
12-
padding: 4pt;
13-
margin: 0;
14-
background-color: #333;
15-
color: white;
16-
}
17-
18-
h1 small {
19-
font-size: 0.5em;
20-
}
21-
22-
h4 {
23-
display: block;
24-
font-weight: normal;
25-
font-size: 9pt;
26-
margin-top: 0;
27-
text-align: right;
28-
padding-right: 4pt;
29-
}
30-
3111
.options-box {
3212
background-color: #F0F0F0;
3313
margin: 2px;
@@ -143,9 +123,3 @@ textarea {
143123
textarea.target-field {
144124
resize: none;
145125
}
146-
147-
.info {
148-
padding-top: 1pt;
149-
margin-top: 10px;
150-
clear: both;
151-
}

‎app/legacy/index.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
import './css-color-shifter.css'
3+
4+
import ColorShifterUI from './ColorShifterUI.js'
5+
6+
document.getElementById('color-shifter-container').style.visibility = ''
7+
8+
new ColorShifterUI({
9+
sourceFieldId: 'source',
10+
targetFieldId: 'target',
11+
hueFieldId: 'hueChange',
12+
hueNumericFieldId: 'hueChangeNumeric',
13+
hueResetButtonId: 'hueReset',
14+
saturationFieldId: 'saturationChange',
15+
saturationNumericFieldId: 'saturationChangeNumeric',
16+
saturationResetButtonId: 'saturationReset',
17+
lightnessFieldId: 'lightnessChange',
18+
lightnessNumericFieldId: 'lightnessChangeNumeric',
19+
lightnessResetButtonId: 'lightnessReset',
20+
alphaFieldId: 'alphaChange',
21+
alphaNumericFieldId: 'alphaChangeNumeric',
22+
alphaResetButtonId: 'alphaReset',
23+
contrastFieldId: 'contrastChange',
24+
contrastNumericFieldId: 'contrastChangeNumeric',
25+
contrastResetButtonId: 'contrastReset',
26+
allResetButtonId: 'allReset',
27+
formatFieldId: 'colorformat',
28+
postProcessingFieldId: 'postprocessing',
29+
fixHueFieldId: 'fixHue',
30+
colorNamesFieldId: 'colorNames',
31+
contractedHexCodesFieldId: 'contractedhexcodes',
32+
hexWithAlphaFieldId: 'hexwithalpha',
33+
preferHSLFieldId: 'preferhsl',
34+
fixAlphaFieldId: 'fixAlpha',
35+
proportionalSaturationFieldId: 'proportionalsaturation',
36+
proportionalLightnessFieldId: 'proportionallightness',
37+
enableCssCheckFieldId: 'enablecsssyntax',
38+
originalColorsContainerId: 'originalColors',
39+
newColorsContainerId: 'newColors'
40+
})

‎app/ColorShifter.js ‎app/lib/ColorShifter.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import beautify from 'js-beautify'
33
import csso from 'csso'
44
import CssColorNames from 'css-color-names'
55

6-
import CssColor from './CssColor.js'
6+
import CssColor from './CssColor'
77

88
function ColorShifter() {
99

‎app/CssColor.js ‎app/lib/CssColor.js

File renamed without changes.

‎package.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,15 @@
2424
"homepage": "http://bassarisse.com/csscolorshifter",
2525
"dependencies": {
2626
"css-color-names": "^0.0.4",
27+
"css-loader": "^0.28.4",
2728
"csso": "^3.1.1",
29+
"emotion": "^6.0.3",
30+
"extract-text-webpack-plugin": "^3.0.0",
2831
"js-beautify": "^1.6.14",
32+
"normalize.css": "^7.0.0",
2933
"react": "^15.6.1",
30-
"react-dom": "^15.6.1"
34+
"react-dom": "^15.6.1",
35+
"style-loader": "^0.18.2"
3136
},
3237
"devDependencies": {
3338
"babel-core": "^6.25.0",

‎webpack.config.js

+13-4
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ var webpack = require('webpack')
55
var CleanWebpackPlugin = require('clean-webpack-plugin')
66
var HtmlWebpackPlugin = require('html-webpack-plugin')
77
var CopyWebpackPlugin = require('copy-webpack-plugin')
8+
var ExtractTextPlugin = require('extract-text-webpack-plugin')
89

910
var appVersion = require('./package.json').version
1011

@@ -28,6 +29,11 @@ entryPointFiles
2829
entryPoints[entryPointName] = path.join(mainPath, fileName)
2930
})
3031

32+
var extractStyles = new ExtractTextPlugin({
33+
filename: 'style_app_[chunkhash:8].css',
34+
allChunks: true,
35+
})
36+
3137
var config = {
3238
entry: entryPoints,
3339
output: {
@@ -62,6 +68,7 @@ var config = {
6268
'transform-runtime',
6369
'transform-strict-mode',
6470
'transform-decorators-legacy',
71+
[ 'emotion/babel', { inline: true }],
6572
],
6673
env: {
6774
development: {
@@ -79,8 +86,11 @@ var config = {
7986
}
8087
},
8188
{
82-
test: /\.css?$/i,
83-
use: 'file',
89+
test: /\.css$/,
90+
use: extractStyles.extract({
91+
fallback: 'style',
92+
use: 'css'
93+
})
8494
},
8595
]
8696
},
@@ -94,8 +104,7 @@ var config = {
94104
hints: isProd ? 'warning' : false,
95105
},
96106
plugins: [
97-
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // avoiding auto load of moment locale files
98-
new webpack.IgnorePlugin(/unicode\/category\/So/), // this is needed only when using unicode characters in slugs
107+
extractStyles,
99108
new webpack.DefinePlugin({
100109
APP_VERSION: JSON.stringify(appVersion),
101110
}),

0 commit comments

Comments
 (0)