Skip to content
This repository has been archived by the owner on Jul 11, 2019. It is now read-only.

Commit

Permalink
feature: DataTable2 can scroll its data-section + Emits Event on click
Browse files Browse the repository at this point in the history
  • Loading branch information
@MikeMitterer
MikeMitterer committed Jan 14, 2016
1 parent 04e7426 commit d921f62
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 20 deletions.
23 changes: 21 additions & 2 deletions lib/assets/styles/data-table/_data-tableex.scss
View file
Expand Up @@ -18,7 +18,6 @@


.mdl-data-tableex { .mdl-data-tableex {
position : relative; position : relative;
border : $data-table-dividers;
border-collapse : collapse; border-collapse : collapse;
white-space : nowrap; white-space : nowrap;
font-size : $data-table-font-size; font-size : $data-table-font-size;
Expand All @@ -33,8 +32,24 @@
align-content: space-between; // = align-content: space-between; // =
align-items: flex-start; // ⇾ 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 // row
> * { .mdl-div-data-tableex__row {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;


Expand All @@ -46,6 +61,10 @@
align-items: center; // ↓ align-items: center; // ↓


height: $data-table-row-height; height: $data-table-row-height;

border-left : $data-table-dividers;
border-right : $data-table-dividers;

&:not(:last-child) { &:not(:last-child) {
border-bottom: $data-table-dividers; border-bottom: $data-table-dividers;
} }
Expand Down
37 changes: 21 additions & 16 deletions lib/assets/styles/material.css
View file
Expand Up @@ -4000,7 +4000,6 @@ input.mdl-button[type="submit"] {
*/ */
.mdl-data-tableex { .mdl-data-tableex {
position: relative; position: relative;
border: 1px solid rgba(0, 0, 0, 0.12);
border-collapse: collapse; border-collapse: collapse;
white-space: nowrap; white-space: nowrap;
font-size: 13px; font-size: 13px;
Expand All @@ -4027,10 +4026,14 @@ input.mdl-button[type="submit"] {
-webkit-box-align: start; -webkit-box-align: start;
-webkit-align-items: flex-start; -webkit-align-items: flex-start;
-ms-flex-align: 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 { .debug .mdl-data-tableex {
border: 1px solid red; } 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; box-sizing: border-box;
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
Expand All @@ -4057,21 +4060,23 @@ input.mdl-button[type="submit"] {
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
height: 48px; 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; -webkit-transition-duration: 0.28s;
transition-duration: 0.28s; transition-duration: 0.28s;
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
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; -webkit-transition-property: background-color;
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); } 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; } background-color: #e0e0e0; }
.mdl-data-tableex > *:hover { .mdl-data-tableex .mdl-div-data-tableex__row:hover {
background-color: #eeeeee; } background-color: #eeeeee; }
.debug .mdl-data-tableex > * { .debug .mdl-data-tableex .mdl-div-data-tableex__row {
border: 1px solid green; } 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-box-align: end;
-webkit-align-items: flex-end; -webkit-align-items: flex-end;
-ms-flex-align: end; -ms-flex-align: end;
Expand All @@ -4087,9 +4092,9 @@ input.mdl-button[type="submit"] {
padding-bottom: 8px; padding-bottom: 8px;
box-sizing: border-box; box-sizing: border-box;
background-color: inherit; } 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; } background-color: inherit; }
.mdl-data-tableex > * > * { .mdl-data-tableex .mdl-div-data-tableex__row > * {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
Expand All @@ -4115,24 +4120,24 @@ input.mdl-button[type="submit"] {
align-items: flex-start; align-items: flex-start;
padding: 0 18px 0 18px; padding: 0 18px 0 18px;
text-align: right; } text-align: right; }
.mdl-data-tableex > * > *:first-of-type { .mdl-data-tableex .mdl-div-data-tableex__row > *:first-of-type {
padding-left: 24px; } padding-left: 24px; }
.mdl-data-tableex > * > *:last-of-type { .mdl-data-tableex .mdl-div-data-tableex__row > *:last-of-type {
padding-right: 24px; } padding-right: 24px; }
.debug .mdl-data-tableex > * > * { .debug .mdl-data-tableex .mdl-div-data-tableex__row > * {
border: 1px solid blue; } 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-box-align: end;
-webkit-align-items: flex-end; -webkit-align-items: flex-end;
-ms-flex-align: end; -ms-flex-align: end;
align-items: flex-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; width: initial;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
-ms-flex-positive: 1; -ms-flex-positive: 1;
flex-grow: 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; width: 17px !important;
padding-right: 0; } padding-right: 0; }
.mdl-data-tableex .mdl-data-tableex__select { .mdl-data-tableex .mdl-data-tableex__select {
Expand Down
2 changes: 1 addition & 1 deletion lib/assets/styles/material.min.css
View file

Large diffs are not rendered by default.

35 changes: 35 additions & 0 deletions lib/src/components/MaterialDivDataTable.dart
View file
Expand Up @@ -57,6 +57,13 @@ class _MaterialDivDataTableConstant {


class DataTableChangedEvent {} 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 { class MaterialDivDataTable extends MdlComponent {
final Logger _logger = new Logger('mdlcomponents.MaterialDivDataTable'); final Logger _logger = new Logger('mdlcomponents.MaterialDivDataTable');


Expand All @@ -66,6 +73,7 @@ class MaterialDivDataTable extends MdlComponent {
MaterialDivDataTableRow __headerRow; MaterialDivDataTableRow __headerRow;


StreamController<DataTableChangedEvent> _onChange; StreamController<DataTableChangedEvent> _onChange;
StreamController<DataTableRowClickedEvent> _onRowClick;


MaterialDivDataTable.fromElement(final dom.HtmlElement element, final di.Injector injector) MaterialDivDataTable.fromElement(final dom.HtmlElement element, final di.Injector injector)
: super(element, injector) { : super(element, injector) {
Expand Down Expand Up @@ -101,9 +109,17 @@ class MaterialDivDataTable extends MdlComponent {
return _onChange.stream; 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 { List<MaterialDivDataTableRow> get selectedRows {
return new UnmodifiableListView(_rows.where((final MaterialDivDataTableRow row) => row.isSelected)); return new UnmodifiableListView(_rows.where((final MaterialDivDataTableRow row) => row.isSelected));
} }

//- private ----------------------------------------------------------------------------------- //- private -----------------------------------------------------------------------------------


void _init() { void _init() {
Expand Down Expand Up @@ -154,6 +170,13 @@ class MaterialDivDataTable extends MdlComponent {
_onChange.add(new DataTableChangedEvent()); _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 /// Store strings for class names defined by this component that are used in
Expand Down Expand Up @@ -189,6 +212,11 @@ class _MaterialDivDataTableRowConstant {


const _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 { class MaterialDivDataTableRow extends MdlComponent {
final Logger _logger = new Logger('mdlcomponents.MaterialDivDataTableRow'); final Logger _logger = new Logger('mdlcomponents.MaterialDivDataTableRow');


Expand Down Expand Up @@ -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); element.classes.add(_cssClasses.IS_UPGRADED);
} }


Expand Down
2 changes: 1 addition & 1 deletion lib/src/grinder/src/samples.dart
View file
Expand Up @@ -160,7 +160,7 @@ void createSampleList() {


// MDL/Dart // MDL/Dart
samples.add(new Sample("accordion", Type.Dart, hasOwnDemoHtml: true)); 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("dialog", Type.Dart, hasOwnDartMain: true, hasOwnDemoHtml: true));
samples.add(new Sample("dnd", 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)); samples.add(new Sample("forms", Type.Dart, hasOwnDemoHtml: true));
Expand Down

0 comments on commit d921f62

Please sign in to comment.