git.iko.soy/bridge
on master help sign in
feat: update indigo with transparency and include button/input disabled states
commit099a69a03aa0f48303278f7dc3a79ad655247812 authorMatt Condon (shrugs) <mattgcondon@gmail.com> dateWed 19 Jun 2019, 13:02 (7 years ago) parentc99b5ed
4 files changed+48−7
compare with master
unifiedsplit
src/indigo-react/components/Button.js+16−3 src/indigo-react/components/Input.js+4−1 src/indigo-react/indigo.css+25−1 src/views/ViewPoint.js+3−2
src/indigo-react/components/Button.js+16−3
@@ -3,6 +3,7 @@ import cn from 'classnames';
33
44export default function Button({
55 solid = false,
6+ disabled = false,
67 className,
78 icon,
89 children,
@@ -13,14 +14,26 @@ export default function Button({
1314 className={cn(
1415 'pointer pv3 pl4 pr0 truncate flex-row justify-between',
1516 {
16− 'white bg-black bg-gray6-hover': solid,
17− 'black bg-gray1-hover': !solid,
17+ 'white bg-black bg-gray6-hover': solid && !disabled,
18+ 'white bg-gray3': solid && disabled,
19+ 'black bg-transparent bg-gray1-hover': !solid && !disabled,
20+ 'gray4 bg-transparent': !solid && disabled,
1821 },
1922 className
2023 )}
24+ style={{
25+ ...(disabled && { pointerEvents: 'none', cursor: 'not-allowed' }),
26+ }}
2127 {...rest}>
2228 {children}
23− <div className="ph4">{icon}</div>
29+ <div
30+ className={cn('ph4', {
31+ white: solid,
32+ black: !solid && !disabled,
33+ gray4: !solid && disabled,
34+ })}>
35+ {icon}
36+ </div>
2437 </a>
2538 );
2639}
src/indigo-react/components/Input.js+4−1
@@ -171,7 +171,7 @@ export default function Input({
171171 { mono },
172172 {
173173 'bg-white': !disabled,
174− 'bg-gray1': disabled,
174+ 'bg-gray3': disabled,
175175 },
176176 {
177177 gray4: !focused,
@@ -185,6 +185,9 @@ export default function Input({
185185 },
186186 className
187187 )}
188+ style={{
189+ ...(disabled && { pointerEvents: 'none', cursor: 'not-allowed' }),
190+ }}
188191 id={name}
189192 name={name}
190193 autoFocus={autoFocus}
src/indigo-react/indigo.css+25−1
@@ -13,7 +13,7 @@
1313 * git+https://github.com/urbit/Indigo.git
1414 * Bugs: https://github.com/urbit/Indigo/issues
1515 * License: MIT
16− * Timestamp: Tue Jun 18 2019 18:39:16 GMT-0700 (Pacific Daylight Time)
16+ * Timestamp: Wed Jun 19 2019 12:58:16 GMT-0700 (Pacific Daylight Time)
1717 *******************************************************************************/
1818/**********************
1919Color variables
@@ -934,6 +934,9 @@ caption,
934934.b-yellow1 {
935935 border-color: #ffefc5; }
936936
937+.b-transparent {
938+ border-color: rgba(0, 0, 0, 0); }
939+
937940.b-black {
938941 border-color: #000000; }
939942
@@ -1006,6 +1009,9 @@ caption,
10061009.bg-yellow1 {
10071010 background-color: #ffefc5; }
10081011
1012+.bg-transparent {
1013+ background-color: rgba(0, 0, 0, 0); }
1014+
10091015.bg-black {
10101016 background-color: #000000; }
10111017
@@ -1078,6 +1084,9 @@ caption,
10781084.yellow1 {
10791085 color: #ffefc5; }
10801086
1087+.transparent {
1088+ color: rgba(0, 0, 0, 0); }
1089+
10811090.black {
10821091 color: #000000; }
10831092
@@ -6472,6 +6481,21 @@ caption,
64726481/*******************************************************************************
64736482 Size classes
64746483*******************************************************************************/
6484+.w-full {
6485+ width: 100%; }
6486+
6487+@media only screen and (min-width: 550px) {
6488+ .w-full-ns {
6489+ width: 100%; } }
6490+
6491+@media only screen and (min-width: 750px) and (max-width: 960px) {
6492+ .w-full-md {
6493+ width: 100%; } }
6494+
6495+@media only screen and (min-width: 960px) {
6496+ .w-full-lg {
6497+ width: 100%; } }
6498+
64756499.w0 {
64766500 width: 0px; }
64776501
src/views/ViewPoint.js+3−2
@@ -48,12 +48,13 @@ export default function ViewPoint() {
4848 />
4949
5050 <ForwardButton
51− disabled={error}
51+ disabled={!pass}
5252 onClick={() => {
5353 setPointCursor(Maybe.Just(parseInt(ob.patp2dec(pointName), 10)));
5454 // ^ pointCursor expects native number type, not string
5555 history.popAndPush(ROUTE_NAMES.SHIP);
56− }}>
56+ }}
57+ solid>
5758 Continue
5859 </ForwardButton>
5960 </View>