Permalink
Browse files

feature: DataTable2 can scroll its data-section + Emits Event on click

  • Loading branch information...
MikeMitterer committed Jan 14, 2016
1 parent 04e7426 commit d921f6251b045625e9a67f7ddfe1c01feec4dd07
@@ -18,7 +18,6 @@
.mdl-data-tableex {
position : relative;
border : $data-table-dividers;
border-collapse : collapse;
white-space : nowrap;
font-size : $data-table-font-size;
@@ -33,8 +32,24 @@
align-content: space-between; // =
align-items: flex-start; // ⇾
border-bottom : $data-table-dividers;
// Set height in your own CSS
// Sample:
// $_demo-data-tableex-table-height: ($data-table-row-height * 4);
//
// .mdl-div-data-tableex__data {
// max-height: $_demo-data-tableex-table-height;
// height: $_demo-data-tableex-table-height;
// }
//
.mdl-div-data-tableex__data {
width: 100%;
overflow: scroll;
}
// row
> * {
.mdl-div-data-tableex__row {
box-sizing: border-box;
width: 100%;
@@ -46,6 +61,10 @@
align-items: center; // ↓
height: $data-table-row-height;
border-left : $data-table-dividers;
border-right : $data-table-dividers;
&:not(:last-child) {
border-bottom: $data-table-dividers;
}
@@ -4000,7 +4000,6 @@ input.mdl-button[type="submit"] {
*/
.mdl-data-tableex {
position: relative;
border: 1px solid rgba(0, 0, 0, 0.12);
border-collapse: collapse;
white-space: nowrap;
font-size: 13px;
@@ -4027,10 +4026,14 @@ input.mdl-button[type="submit"] {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start; }
align-items: flex-start;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.debug .mdl-data-tableex {
border: 1px solid red; }
.mdl-data-tableex > * {
.mdl-data-tableex .mdl-div-data-tableex__data {
width: 100%;
overflow: scroll; }
.mdl-data-tableex .mdl-div-data-tableex__row {
box-sizing: border-box;
width: 100%;
display: -webkit-box;
@@ -4057,21 +4060,23 @@ input.mdl-button[type="submit"] {
-ms-flex-align: center;
align-items: center;
height: 48px;
border-left: 1px solid rgba(0, 0, 0, 0.12);
border-right: 1px solid rgba(0, 0, 0, 0.12);
-webkit-transition-duration: 0.28s;
transition-duration: 0.28s;
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-property: background-color;
transition-property: background-color; }
.mdl-data-tableex > *:not(:last-child) {
.mdl-data-tableex .mdl-div-data-tableex__row:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.mdl-data-tableex > *.is-selected {
.mdl-data-tableex .mdl-div-data-tableex__row.is-selected {
background-color: #e0e0e0; }
.mdl-data-tableex > *:hover {
.mdl-data-tableex .mdl-div-data-tableex__row:hover {
background-color: #eeeeee; }
.debug .mdl-data-tableex > * {
.debug .mdl-data-tableex .mdl-div-data-tableex__row {
border: 1px solid green; }
.mdl-data-tableex > *.mdl-div-data-tableex__head {
.mdl-data-tableex .mdl-div-data-tableex__row.mdl-div-data-tableex__head {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
@@ -4087,9 +4092,9 @@ input.mdl-button[type="submit"] {
padding-bottom: 8px;
box-sizing: border-box;
background-color: inherit; }
.mdl-data-tableex > *.mdl-div-data-tableex__head.is-selected, .mdl-data-tableex > *.mdl-div-data-tableex__head:hover {
.mdl-data-tableex .mdl-div-data-tableex__row.mdl-div-data-tableex__head.is-selected, .mdl-data-tableex .mdl-div-data-tableex__row.mdl-div-data-tableex__head:hover {
background-color: inherit; }
.mdl-data-tableex > * > * {
.mdl-data-tableex .mdl-div-data-tableex__row > * {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -4115,24 +4120,24 @@ input.mdl-button[type="submit"] {
align-items: flex-start;
padding: 0 18px 0 18px;
text-align: right; }
.mdl-data-tableex > * > *:first-of-type {
.mdl-data-tableex .mdl-div-data-tableex__row > *:first-of-type {
padding-left: 24px; }
.mdl-data-tableex > * > *:last-of-type {
.mdl-data-tableex .mdl-div-data-tableex__row > *:last-of-type {
padding-right: 24px; }
.debug .mdl-data-tableex > * > * {
.debug .mdl-data-tableex .mdl-div-data-tableex__row > * {
border: 1px solid blue; }
.mdl-data-tableex > * > *.mdl-data-tableex__cell--numeric {
.mdl-data-tableex .mdl-div-data-tableex__row > *.mdl-data-tableex__cell--numeric {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end; }
.mdl-data-tableex > * > *.mdl-data-tableex__cell--grow {
.mdl-data-tableex .mdl-div-data-tableex__row > *.mdl-data-tableex__cell--grow {
width: initial;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.mdl-data-tableex > * > *.mdl-data-tableex__cell--checkbox {
.mdl-data-tableex .mdl-div-data-tableex__row > *.mdl-data-tableex__cell--checkbox {
width: 17px !important;
padding-right: 0; }
.mdl-data-tableex .mdl-data-tableex__select {

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -57,6 +57,13 @@ class _MaterialDivDataTableConstant {
class DataTableChangedEvent {}
/// If user clicks on a row this Event will be triggered
class DataTableRowClickedEvent {
final MaterialDivDataTableRow row;
DataTableRowClickedEvent(this.row);
}
/// Controller for <div class="mdl-data-tableex"></div>
class MaterialDivDataTable extends MdlComponent {
final Logger _logger = new Logger('mdlcomponents.MaterialDivDataTable');
@@ -66,6 +73,7 @@ class MaterialDivDataTable extends MdlComponent {
MaterialDivDataTableRow __headerRow;
StreamController<DataTableChangedEvent> _onChange;
StreamController<DataTableRowClickedEvent> _onRowClick;
MaterialDivDataTable.fromElement(final dom.HtmlElement element, final di.Injector injector)
: super(element, injector) {
@@ -101,9 +109,17 @@ class MaterialDivDataTable extends MdlComponent {
return _onChange.stream;
}
Stream<DataTableRowClickedEvent> get onRowClick {
if(_onRowClick == null) {
_onRowClick = new StreamController<DataTableRowClickedEvent>.broadcast( onCancel: () => _onRowClick = null);
}
return _onRowClick.stream;
}
List<MaterialDivDataTableRow> get selectedRows {
return new UnmodifiableListView(_rows.where((final MaterialDivDataTableRow row) => row.isSelected));
}
//- private -----------------------------------------------------------------------------------
void _init() {
@@ -154,6 +170,13 @@ class MaterialDivDataTable extends MdlComponent {
_onChange.add(new DataTableChangedEvent());
}
}
/// Emitted by children (Rows)
void _fireClickEvent(final MaterialDivDataTableRow row) {
if(_onRowClick != null && _onRowClick.hasListener) {
_onRowClick.add(new DataTableRowClickedEvent(row));
}
}
}
/// Store strings for class names defined by this component that are used in
@@ -189,6 +212,11 @@ class _MaterialDivDataTableRowConstant {
const _MaterialDivDataTableRowConstant();
}
/// Controller for <div class="mdl-div-data-tableex__row"></div>
///
/// If you click on one the the rows the parent emits an onRowClick-Event
/// The Header does not emit this event
class MaterialDivDataTableRow extends MdlComponent {
final Logger _logger = new Logger('mdlcomponents.MaterialDivDataTableRow');
@@ -266,6 +294,13 @@ class MaterialDivDataTableRow extends MdlComponent {
}
}
if(!element.classes.contains(_cssClasses.HEAD)) {
eventStreams.add(
element.onClick.listen((_) {
parent._fireClickEvent(this);
}));
}
element.classes.add(_cssClasses.IS_UPGRADED);
}
@@ -160,7 +160,7 @@ void createSampleList() {
// MDL/Dart
samples.add(new Sample("accordion", Type.Dart, hasOwnDemoHtml: true));
samples.add(new Sample("data-table2", Type.Dart, hasOwnDemoHtml: true));
samples.add(new Sample("data-table2", Type.Dart, hasOwnDartMain: true, hasOwnDemoHtml: true));
samples.add(new Sample("dialog", Type.Dart, hasOwnDartMain: true, hasOwnDemoHtml: true));
samples.add(new Sample("dnd", Type.Dart, hasOwnDartMain: true, hasOwnDemoHtml: true));
samples.add(new Sample("forms", Type.Dart, hasOwnDemoHtml: true));

0 comments on commit d921f62

Please sign in to comment.