firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

RTL support for DataTable (#12229)

Browse Source 
Just some very minor tweaks to remove subtle LTR bias.

We use the same arrow rotation animation in RTL and LTR, but I think
that's correct. Usually, rotations are either clockwise or
anitclockwise, which are the same in RTL and LTR. We might need to check
with someone who reads an RTL language to confirm.

Fixes #11845
This commit is contained in:
Adam Barth 2017-09-24 00:33:21 -07:00 committed by GitHub
parent 78a29260ff
commit 260353f292
1 changed files with 42 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
packages/flutter/lib/src/material/data_table.dart
View File

@ -36,7 +36,7 @@ class DataColumn {
@required this.label,
this.tooltip,
this.numeric: false,
this.onSort
this.onSort,
}) : assert(label != null);
/// The column heading.
@ -88,7 +88,7 @@ class DataRow {
this.key,
this.selected: false,
this.onSelectChanged,
@required this.cells
@required this.cells,
}) : assert(cells != null);
/// Creates the configuration for a row of a [DataTable], deriving
@ -99,7 +99,7 @@ class DataRow {
int index,
this.selected: false,
this.onSelectChanged,
@required this.cells
@required this.cells,
}) : assert(cells != null),
key = new ValueKey<int>(index);
@ -258,7 +258,7 @@ class DataTable extends StatelessWidget {
this.sortColumnIndex,
this.sortAscending: true,
this.onSelectAll,
@required this.rows
@required this.rows,
}) : assert(columns != null),
assert(columns.isNotEmpty),
assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
@ -367,19 +367,19 @@ class DataTable extends StatelessWidget {
child: new Checkbox(
activeColor: color,
value: checked,
onChanged: onCheckboxChanged
)
)
onChanged: onCheckboxChanged,
),
),
);
if (onRowTap != null) {
contents = new TableRowInkWell(
onTap: onRowTap,
child: contents
child: contents,
);
}
return new TableCell(
verticalAlignment: TableCellVerticalAlignment.fill,
child: contents
child: contents,
);
}
@ -391,18 +391,18 @@ class DataTable extends StatelessWidget {
bool numeric,
VoidCallback onSort,
bool sorted,
bool ascending
bool ascending,
}) {
if (onSort != null) {
final Widget arrow = new _SortArrow(
visible: sorted,
down: sorted ? ascending : null,
duration: _kSortArrowAnimationDuration
duration: _kSortArrowAnimationDuration,
);
final Widget arrowPadding = const SizedBox(width: _kSortArrowPadding);
label = new Row(
children: numeric ? <Widget>[ arrow, arrowPadding, label ]
: <Widget>[ label, arrowPadding, arrow ]
textDirection: numeric ? TextDirection.rtl : null,
children: <Widget>[ label, arrowPadding, arrow ],
);
}
label = new Container(
@ -417,23 +417,22 @@ class DataTable extends StatelessWidget {
height: _kHeadingRowHeight / _kHeadingFontSize,
color: (Theme.of(context).brightness == Brightness.light)
? ((onSort != null && sorted) ? Colors.black87 : Colors.black54)
: ((onSort != null && sorted) ? Colors.white : Colors.white70)
: ((onSort != null && sorted) ? Colors.white : Colors.white70),
),
duration: _kSortArrowAnimationDuration,
child: label
)
child: label,
),
);
if (tooltip != null) {
label = new Tooltip(
message: tooltip,
child: label
child: label,
);
}
if (onSort != null) {
label = new InkWell(
onTap: onSort,
// TODO(ianh): When we do RTL, we need to use 'end' ordering for the non-numeric case
child: label
child: label,
);
}
return label;
@ -447,13 +446,16 @@ class DataTable extends StatelessWidget {
bool placeholder,
bool showEditIcon,
VoidCallback onTap,
VoidCallback onSelectChanged
VoidCallback onSelectChanged,
}) {
final bool isLightTheme = Theme.of(context).brightness == Brightness.light;
if (showEditIcon) {
final Widget icon = const Icon(Icons.edit, size: 18.0);
label = new Expanded(child: label);
label = new Row(children: numeric ? <Widget>[ icon, label ] : <Widget>[ label, icon ]);
label = new Row(
textDirection: numeric ? TextDirection.rtl : null,
children: <Widget>[ label, icon ],
);
}
label = new Container(
padding: padding,
@ -465,25 +467,25 @@ class DataTable extends StatelessWidget {
fontSize: 13.0,
color: isLightTheme
? (placeholder ? Colors.black38 : Colors.black87)
: (placeholder ? Colors.white30 : Colors.white70)
: (placeholder ? Colors.white30 : Colors.white70),
),
child: IconTheme.merge(
data: new IconThemeData(
color: isLightTheme ? Colors.black54 : Colors.white70
color: isLightTheme ? Colors.black54 : Colors.white70,
),
child: new DropdownButtonHideUnderline(child: label)
child: new DropdownButtonHideUnderline(child: label),
)
)
);
if (onTap != null) {
label = new InkWell(
onTap: onTap,
child: label
child: label,
);
} else if (onSelectChanged != null) {
label = new TableRowInkWell(
onTap: onSelectChanged,
child: label
child: label,
);
}
return label;
@ -497,10 +499,10 @@ class DataTable extends StatelessWidget {
final BoxDecoration _kSelectedDecoration = new BoxDecoration(
border: new Border(bottom: new BorderSide(color: theme.dividerColor)),
// The backgroundColor has to be transparent so you can see the ink on the material
color: (Theme.of(context).brightness == Brightness.light) ? _kGrey100Opacity : _kGrey300Opacity
color: (Theme.of(context).brightness == Brightness.light) ? _kGrey100Opacity : _kGrey300Opacity,
);
final BoxDecoration _kUnselectedDecoration = new BoxDecoration(
border: new Border(bottom: new BorderSide(color: theme.dividerColor))
border: new Border(bottom: new BorderSide(color: theme.dividerColor)),
);
final bool showCheckboxColumn = rows.any((DataRow row) => row.onSelectChanged != null);
@ -516,7 +518,7 @@ class DataTable extends StatelessWidget {
: _kUnselectedDecoration,
children: new List<Widget>(tableColumns.length)
);
}
},
);
int rowIndex;
@ -527,7 +529,7 @@ class DataTable extends StatelessWidget {
tableRows[0].children[0] = _buildCheckbox(
color: theme.accentColor,
checked: allChecked,
onCheckboxChanged: _handleSelectAll
onCheckboxChanged: _handleSelectAll,
);
rowIndex = 1;
for (DataRow row in rows) {
@ -535,7 +537,7 @@ class DataTable extends StatelessWidget {
color: theme.accentColor,
checked: row.selected,
onRowTap: () => row.onSelectChanged(!row.selected),
onCheckboxChanged: row.onSelectChanged
onCheckboxChanged: row.onSelectChanged,
);
rowIndex += 1;
}
@ -561,7 +563,7 @@ class DataTable extends StatelessWidget {
numeric: column.numeric,
onSort: () => column.onSort(dataColumnIndex, sortColumnIndex == dataColumnIndex ? !sortAscending : true),
sorted: dataColumnIndex == sortColumnIndex,
ascending: sortAscending
ascending: sortAscending,
);
rowIndex = 1;
for (DataRow row in rows) {
@ -574,7 +576,7 @@ class DataTable extends StatelessWidget {
placeholder: cell.placeholder,
showEditIcon: cell.showEditIcon,
onTap: cell.onTap,
onSelectChanged: () => row.onSelectChanged(!row.selected)
onSelectChanged: () => row.onSelectChanged(!row.selected),
);
rowIndex += 1;
}
@ -609,7 +611,7 @@ class TableRowInkWell extends InkResponse {
GestureTapCallback onTap,
GestureTapCallback onDoubleTap,
GestureLongPressCallback onLongPress,
ValueChanged<bool> onHighlightChanged
ValueChanged<bool> onHighlightChanged,
}) : super(
key: key,
child: child,
@ -618,7 +620,7 @@ class TableRowInkWell extends InkResponse {
onLongPress: onLongPress,
onHighlightChanged: onHighlightChanged,
containedInkWell: true,
highlightShape: BoxShape.rectangle
highlightShape: BoxShape.rectangle,
);
@override
@ -661,7 +663,7 @@ class _SortArrow extends StatefulWidget {
Key key,
this.visible,
this.down,
this.duration
this.duration,
}) : super(key: key);
final bool visible;
@ -699,7 +701,7 @@ class _SortArrowState extends State<_SortArrow> with TickerProviderStateMixin {
_opacityController.value = widget.visible ? 1.0 : 0.0;
_orientationAnimation = new Tween<double>(
begin: 0.0,
end: math.PI
end: math.PI,
).animate(new CurvedAnimation(
parent: _orientationController = new AnimationController(
duration: widget.duration,
@ -776,9 +778,9 @@ class _SortArrowState extends State<_SortArrow> with TickerProviderStateMixin {
child: new Icon(
Icons.arrow_downward,
size: _kArrowIconSize,
color: (Theme.of(context).brightness == Brightness.light) ? Colors.black87 : Colors.white70
)
)
color: (Theme.of(context).brightness == Brightness.light) ? Colors.black87 : Colors.white70,
),
),
);
}