Skip to content

Commit a055c63

Browse files
author
Diljit VJ
committed
#416: Update to 8 digit hex code
1 parent bc9a0e1 commit a055c63

File tree

6 files changed

+41
-14
lines changed

6 files changed

+41
-14
lines changed

‎src/components/compact/CompactFields.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const CompactFields = ({ hex, rgb, onChange }) => {
3939
display: 'none',
4040
},
4141
RGBwrap: {
42-
flex: '3',
42+
flex: '2',
4343
position: 'relative',
4444
},
4545
RGBinput: {
@@ -57,7 +57,7 @@ export const CompactFields = ({ hex, rgb, onChange }) => {
5757
position: 'absolute',
5858
top: '3px',
5959
left: '0px',
60-
lineHeight: '16px',
60+
lineHeight: '14px',
6161
textTransform: 'uppercase',
6262
fontSize: '12px',
6363
color: '#999',
@@ -108,6 +108,12 @@ export const CompactFields = ({ hex, rgb, onChange }) => {
108108
value={ rgb.b }
109109
onChange={ handleChange }
110110
/>
111+
<EditableInput
112+
style={{ wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel }}
113+
label="a"
114+
value={ rgb.a }
115+
onChange={ handleChange }
116+
/>
111117
</div>
112118
)
113119
}

‎src/components/google/GoogleFields.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export const GoogleFields = ({ onChange, rgb, hsl, hex, hsv }) => {
138138
},
139139
})
140140

141-
const rgbValue = `${ rgb.r }, ${ rgb.g }, ${ rgb.b }`
141+
const rgbValue = `${ rgb.r }, ${ rgb.g }, ${ rgb.b }, ${ Math.round(rgb.a * 100) }%`
142142
const hslValue = `${ Math.round(hsl.h) }°, ${ Math.round(hsl.s * 100) }%, ${ Math.round(hsl.l * 100) }%`
143143
const hsvValue = `${ Math.round(hsv.h) }°, ${ Math.round(hsv.s * 100) }%, ${ Math.round(hsv.v * 100) }%`
144144

‎src/components/material/Material.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const Material = ({ onChange, hex, rgb,
4848
RGBinput: {
4949
width: '100%',
5050
marginTop: '12px',
51-
fontSize: '15px',
51+
fontSize: '12px',
5252
color: '#333',
5353
padding: '0px',
5454
border: '0px',
@@ -69,9 +69,9 @@ export const Material = ({ onChange, hex, rgb,
6969
marginRight: '-10px',
7070
paddingTop: '11px',
7171
},
72-
third: {
72+
fourth: {
7373
flex: '1',
74-
paddingRight: '10px',
74+
paddingRight: '5px',
7575
},
7676
},
7777
}, passedStyles))
@@ -102,29 +102,37 @@ export const Material = ({ onChange, hex, rgb,
102102
onChange={ handleChange }
103103
/>
104104
<div style={ styles.split } className="flexbox-fix">
105-
<div style={ styles.third }>
105+
<div style={ styles.fourth }>
106106
<EditableInput
107107
style={{ wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel }}
108108
label="r" value={ rgb.r }
109109
onChange={ handleChange }
110110
/>
111111
</div>
112-
<div style={ styles.third }>
112+
<div style={ styles.fourth }>
113113
<EditableInput
114114
style={{ wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel }}
115115
label="g"
116116
value={ rgb.g }
117117
onChange={ handleChange }
118118
/>
119119
</div>
120-
<div style={ styles.third }>
120+
<div style={ styles.fourth }>
121121
<EditableInput
122122
style={{ wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel }}
123123
label="b"
124124
value={ rgb.b }
125125
onChange={ handleChange }
126126
/>
127127
</div>
128+
<div style={ styles.fourth }>
129+
<EditableInput
130+
style={{ wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel }}
131+
label="a"
132+
value={ Math.round(rgb.a) * 100 }
133+
onChange={ handleChange }
134+
/>
135+
</div>
128136
</div>
129137
</div>
130138
</Raised>

‎src/components/photoshop/PhotoshopFields.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,12 @@ export const PhotoshopPicker = ({ onChange, rgb, hsv, hex }) => {
8383
hex: data['#'],
8484
source: 'hex',
8585
}, e)
86-
} else if (data.r || data.g || data.b) {
86+
} else if (data.r || data.g || data.b || data.a) {
8787
onChange({
8888
r: data.r || rgb.r,
8989
g: data.g || rgb.g,
9090
b: data.b || rgb.b,
91+
a: data.a || rgb.a,
9192
source: 'rgb',
9293
}, e)
9394
} else if (data.h || data.s || data.v) {
@@ -139,6 +140,12 @@ export const PhotoshopPicker = ({ onChange, rgb, hsv, hex }) => {
139140
value={ rgb.b }
140141
onChange={ handleChange }
141142
/>
143+
<EditableInput
144+
style={{ wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel }}
145+
label="a"
146+
value={ Math.round(rgb.a * 100) }
147+
onChange={ handleChange }
148+
/>
142149
<div style={ styles.divider } />
143150
<EditableInput
144151
style={{ wrap: styles.HEXwrap, input: styles.HEXinput, label: styles.HEXlabel }}
@@ -150,6 +157,11 @@ export const PhotoshopPicker = ({ onChange, rgb, hsv, hex }) => {
150157
<div style={ styles.symbol }>°</div>
151158
<div style={ styles.symbol }>%</div>
152159
<div style={ styles.symbol }>%</div>
160+
<div style={ styles.divider } />
161+
<div style={ styles.symbol } />
162+
<div style={ styles.symbol } />
163+
<div style={ styles.symbol } />
164+
<div style={ styles.symbol }>%</div>
153165
</div>
154166
</div>
155167
)

‎src/components/sketch/SketchFields.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const SketchFields = ({ onChange, rgb, hsl, hex, disableAlpha }) => {
2222
paddingLeft: '6px',
2323
},
2424
double: {
25-
flex: '2',
25+
flex: '2.5',
2626
},
2727
input: {
2828
width: '80%',

‎src/helpers/color.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ export const toState = (data, oldHue) => {
2727
const hsl = color.toHsl()
2828
const hsv = color.toHsv()
2929
const rgb = color.toRgb()
30-
const hex = color.toHex()
30+
const hex = color.toHex8()
3131
if (hsl.s === 0) {
3232
hsl.h = oldHue || 0
3333
hsv.h = oldHue || 0
3434
}
35-
const transparent = hex === '000000' && rgb.a === 0
35+
const transparent = hex === '00000000'
3636

3737
return {
3838
hsl,
@@ -50,7 +50,7 @@ export const isValidHex = (hex) => {
5050
}
5151
// disable hex4 and hex8
5252
const lh = (String(hex).charAt(0) === '#') ? 1 : 0
53-
return hex.length !== (4 + lh) && hex.length < (7 + lh) && tinycolor(hex).isValid()
53+
return hex.length !== (4 + lh) && hex.length < (9 + lh) && tinycolor(hex).isValid()
5454
}
5555

5656
export const getContrastingColor = (data) => {
@@ -74,5 +74,6 @@ export const red = {
7474

7575
export const isvalidColorString = (string, type) => {
7676
const stringWithoutDegree = string.replace('°', '')
77+
// eslint-disable-next-line no-underscore-dangle
7778
return tinycolor(`${ type } (${ stringWithoutDegree })`)._ok
7879
}

0 commit comments

Comments
 (0)