Commit 5bacc9f8 authored by Hans Muller's avatar Hans Muller

GridTileBar uses ellipsis, etc (#3881)

parent a590ee26
...@@ -31,23 +31,23 @@ class Photo { ...@@ -31,23 +31,23 @@ class Photo {
const String photoHeroTag = 'Photo'; const String photoHeroTag = 'Photo';
typedef void PhotoFavoriteCallback(Photo photo); typedef void BannerTapCallback(Photo photo);
class GridDemoPhotoItem extends StatelessWidget { class GridDemoPhotoItem extends StatelessWidget {
GridDemoPhotoItem({ GridDemoPhotoItem({
Key key, Key key,
this.photo, this.photo,
this.tileStyle, this.tileStyle,
this.onPressedFavorite this.onBannerTap
}) : super(key: key) { }) : super(key: key) {
assert(photo != null && photo.isValid); assert(photo != null && photo.isValid);
assert(tileStyle != null); assert(tileStyle != null);
assert(onPressedFavorite != null); assert(onBannerTap != null);
} }
final Photo photo; final Photo photo;
final GridDemoTileStyle tileStyle; final GridDemoTileStyle tileStyle;
final PhotoFavoriteCallback onPressedFavorite; final BannerTapCallback onBannerTap; // User taps on the photo's header or footer.
void showPhoto(BuildContext context) { void showPhoto(BuildContext context) {
Key photoKey = new Key(photo.assetName); Key photoKey = new Key(photo.assetName);
...@@ -99,28 +99,32 @@ class GridDemoPhotoItem extends StatelessWidget { ...@@ -99,28 +99,32 @@ class GridDemoPhotoItem extends StatelessWidget {
case GridDemoTileStyle.oneLine: case GridDemoTileStyle.oneLine:
return new GridTile( return new GridTile(
header: new GridTileBar( header: new GestureDetector(
backgroundColor: Colors.black45, onTap: () { onBannerTap(photo); },
leading: new IconButton( child: new GridTileBar(
icon: icon, title: new Text(photo.title),
color: Colors.white, backgroundColor: Colors.black45,
onPressed: () { onPressedFavorite(photo); } leading: new Icon(
), icon: icon,
title: new Text(photo.title) color: Colors.white
)
)
), ),
child: image child: image
); );
case GridDemoTileStyle.twoLine: case GridDemoTileStyle.twoLine:
return new GridTile( return new GridTile(
footer: new GridTileBar( footer: new GestureDetector(
backgroundColor: Colors.black45, onTap: () { onBannerTap(photo); },
title: new Text(photo.title), child: new GridTileBar(
subtitle: new Text(photo.caption), backgroundColor: Colors.black45,
trailing: new IconButton( title: new Text(photo.title),
icon: icon, subtitle: new Text(photo.caption),
color: Colors.white, trailing: new Icon(
onPressed: () { onPressedFavorite(photo); } icon: icon,
color: Colors.white
)
) )
), ),
child: image child: image
...@@ -204,31 +208,9 @@ class GridListDemoState extends State<GridListDemo> { ...@@ -204,31 +208,9 @@ class GridListDemoState extends State<GridListDemo> {
), ),
]; ];
void showTileStyleMenu(BuildContext context) { void changeTileStyle(GridDemoTileStyle value) {
final List<PopupMenuItem<GridDemoTileStyle>> items = <PopupMenuItem<GridDemoTileStyle>>[ setState(() {
new PopupMenuItem<GridDemoTileStyle>( tileStyle = value;
value: GridDemoTileStyle.imageOnly,
child: new Text('Image only')
),
new PopupMenuItem<GridDemoTileStyle>(
value: GridDemoTileStyle.oneLine,
child: new Text('One line')
),
new PopupMenuItem<GridDemoTileStyle>(
value: GridDemoTileStyle.twoLine,
child: new Text('Two line')
)
];
final EdgeInsets padding = MediaQuery.of(context).padding;
final RelativeRect position = new RelativeRect.fromLTRB(
0.0, padding.top + 16.0, padding.right + 16.0, 0.0
);
showMenu(context: context, position: position, items: items).then((GridDemoTileStyle value) {
setState(() {
tileStyle = value;
});
}); });
} }
...@@ -242,10 +224,22 @@ class GridListDemoState extends State<GridListDemo> { ...@@ -242,10 +224,22 @@ class GridListDemoState extends State<GridListDemo> {
appBar: new AppBar( appBar: new AppBar(
title: new Text('Grid list'), title: new Text('Grid list'),
actions: <Widget>[ actions: <Widget>[
new IconButton( new PopupMenuButton<GridDemoTileStyle>(
icon: Icons.more_vert, onSelected: changeTileStyle,
onPressed: () { showTileStyleMenu(context); }, itemBuilder: (BuildContext context) => <PopupMenuItem<GridDemoTileStyle>>[
tooltip: 'Show menu' new PopupMenuItem<GridDemoTileStyle>(
value: GridDemoTileStyle.imageOnly,
child: new Text('Image only')
),
new PopupMenuItem<GridDemoTileStyle>(
value: GridDemoTileStyle.oneLine,
child: new Text('One line')
),
new PopupMenuItem<GridDemoTileStyle>(
value: GridDemoTileStyle.twoLine,
child: new Text('Two line')
)
]
) )
] ]
), ),
...@@ -264,7 +258,7 @@ class GridListDemoState extends State<GridListDemo> { ...@@ -264,7 +258,7 @@ class GridListDemoState extends State<GridListDemo> {
return new GridDemoPhotoItem( return new GridDemoPhotoItem(
photo: photo, photo: photo,
tileStyle: tileStyle, tileStyle: tileStyle,
onPressedFavorite: (Photo photo) { onBannerTap: (Photo photo) {
setState(() { setState(() {
photo.isFavorite = !photo.isFavorite; photo.isFavorite = !photo.isFavorite;
}); });
......
...@@ -50,7 +50,7 @@ class IconsDemoState extends State<IconsDemo> { ...@@ -50,7 +50,7 @@ class IconsDemoState extends State<IconsDemo> {
size: size, size: size,
icon: icon, icon: icon,
color: iconColor, color: iconColor,
tooltip: "${enabled ? 'enabled' : 'disabled'} icon button", tooltip: "${enabled ? 'Enabled' : 'Disabled'} icon button",
onPressed: enabled ? handleIconButtonPress : null onPressed: enabled ? handleIconButtonPress : null
); );
} }
......
...@@ -44,7 +44,7 @@ class TooltipDemo extends StatelessWidget { ...@@ -44,7 +44,7 @@ class TooltipDemo extends StatelessWidget {
size: 48.0, size: 48.0,
icon: Icons.call, icon: Icons.call,
color: theme.primaryColor, color: theme.primaryColor,
tooltip: 'place a phone call', tooltip: 'Place a phone call',
onPressed: () { onPressed: () {
Scaffold.of(context).showSnackBar(new SnackBar( Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text('That was an ordinary tap.') content: new Text('That was an ordinary tap.')
......
...@@ -85,10 +85,14 @@ class GridTileBar extends StatelessWidget { ...@@ -85,10 +85,14 @@ class GridTileBar extends StatelessWidget {
children: <Widget>[ children: <Widget>[
new DefaultTextStyle( new DefaultTextStyle(
style: Typography.white.subhead, style: Typography.white.subhead,
softWrap: false,
overflow: TextOverflow.ellipsis,
child: title child: title
), ),
new DefaultTextStyle( new DefaultTextStyle(
style: Typography.white.caption, style: Typography.white.caption,
softWrap: false,
overflow: TextOverflow.ellipsis,
child: subtitle child: subtitle
) )
] ]
...@@ -100,6 +104,8 @@ class GridTileBar extends StatelessWidget { ...@@ -100,6 +104,8 @@ class GridTileBar extends StatelessWidget {
new Flexible( new Flexible(
child: new DefaultTextStyle( child: new DefaultTextStyle(
style: Typography.white.subhead, style: Typography.white.subhead,
softWrap: false,
overflow: TextOverflow.ellipsis,
child: title ?? subtitle child: title ?? subtitle
) )
) )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment