Make RaisedButton support being disabled.

R=jackson@google.com

Review URL: https://codereview.chromium.org/1179943005.
This commit is contained in:
Hixie 2015-06-15 17:32:13 -07:00
parent a22064a7a3
commit 2b4cf61644
3 changed files with 51 additions and 19 deletions

View File

@ -24,10 +24,19 @@ class ContainerApp extends App {
key: 'b',
decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFF00)),
padding: new EdgeDims.symmetric(horizontal: 50.0, vertical: 75.0),
child: new RaisedButton(
child: new Text('PRESS ME'),
onPressed: () => print("Hello World")
)
child: new Flex([
new RaisedButton(
key: 'b1',
child: new Text('PRESS ME'),
onPressed: () => print("Hello World")
),
new RaisedButton(
key: 'b2',
child: new Text('DISABLED'),
onPressed: () => print("Hello World"),
enabled: false
)
])
),
new FlexExpandingChild(
new Container(

View File

@ -230,7 +230,7 @@ const Map<int, Color> Grey = const {
100: const Color(0xFFF5F5F5),
200: const Color(0xFFEEEEEE),
300: const Color(0xFFE0E0E0),
350: const Color(0xFFD6D6D6), // only for raised button while pressed
350: const Color(0xFFD6D6D6), // only for raised button while pressed or disabled
400: const Color(0xFFBDBDBD),
500: const Color(0xFF9E9E9E),
600: const Color(0xFF757575),

View File

@ -13,21 +13,51 @@ enum RaisedButtonTheme { light, dark }
class RaisedButton extends ButtonBase {
RaisedButton({ Object key, this.child, this.onPressed, this.theme: RaisedButtonTheme.light }) : super(key: key);
RaisedButton({
Object key,
this.child,
this.enabled: true,
this.onPressed,
this.theme: RaisedButtonTheme.light
}) : super(key: key);
UINode child;
int level;
bool enabled;
Function onPressed;
RaisedButtonTheme theme;
void syncFields(RaisedButton source) {
child = source.child;
level = source.level;
enabled = source.enabled;
onPressed = source.onPressed;
theme = source.theme;
super.syncFields(source);
}
UINode buildContent() {
UINode contents = new Container(
padding: new EdgeDims.symmetric(horizontal: 8.0),
child: new Center(child: child) // TODO(ianh): figure out a way to compell the child to have gray text when disabled...
);
Color color;
if (enabled) {
switch (theme) {
case RaisedButtonTheme.light:
if (highlight)
color = Grey[350];
else
color = Grey[300];
break;
case RaisedButtonTheme.dark:
if (highlight)
color = Blue[700];
else
color = Blue[600];
break;
}
} else {
color = Grey[350];
}
return new EventListenerNode(
new Container(
height: 36.0,
@ -35,19 +65,12 @@ class RaisedButton extends ButtonBase {
margin: new EdgeDims.all(4.0),
child: new Material(
edge: MaterialEdge.card,
child: new InkWell(
child: new Container(
padding: new EdgeDims.symmetric(horizontal: 8.0),
child: new Center(child: child)
)
),
level: highlight ? 2 : 1,
color: theme == RaisedButtonTheme.light
? (highlight ? Grey[350] : Grey[300])
: (highlight ? Blue[700] : Blue[600])
child: enabled ? new InkWell(child: contents) : contents,
level: enabled ? (highlight ? 2 : 1) : 0,
color: color
)
),
onGestureTap: (_) { if (onPressed != null) onPressed(); }
onGestureTap: (_) { if (onPressed != null && enabled) onPressed(); }
);
}