status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-02-02 08:56:43 +00:00
Code Issues Projects Releases Wiki Activity

ui: Alter resizing for tabular-collection for sizing based on rows (#5586)

Browse Source
This commit is contained in:
John Cowen 2019-04-08 11:19:31 +01:00 committed by John Cowen
parent cbded4a10a
commit 6474cec99c
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui-v2/app/components/tabular-collection.js
View File

@ -113,7 +113,8 @@ export default CollectionComponent.extend(SlotsMixin, WithResizing, {
classNames: ['dom-recycling'], classNames: ['dom-recycling'],
attributeBindings: ['style'], attributeBindings: ['style'],
width: 1150, width: 1150,
height: 500, rowHeight: 50,
maxHeight: 500,
style: style('getStyle'), style: style('getStyle'),
checked: null, checked: null,
hasCaption: false, hasCaption: false,
@ -123,11 +124,17 @@ export default CollectionComponent.extend(SlotsMixin, WithResizing, {
this.change = change.bind(this); this.change = change.bind(this);
this.confirming = []; this.confirming = [];
// TODO: The row height should auto calculate properly from the CSS // TODO: The row height should auto calculate properly from the CSS
this['cell-layout'] = new ZIndexedGrid(get(this, 'width'), 50); this['cell-layout'] = new ZIndexedGrid(get(this, 'width'), get(this, 'rowHeight'));
}, },
getStyle: computed('height', function() { getStyle: computed('rowHeight', '_items', 'maxRows', 'maxHeight', function() {
const maxRows = get(this, 'rows');
let rows = get(this._items || [], 'length');
if (maxRows) {
rows = Math.min(maxRows, rows);
}
const height = get(this, 'rowHeight') * rows + 29;
return { return {
height: get(this, 'height'), height: Math.min(get(this, 'maxHeight'), height),
}; };
}), }),
resize: function(e) { resize: function(e) {
@ -140,9 +147,9 @@ export default CollectionComponent.extend(SlotsMixin, WithResizing, {
const $footer = dom.element('footer[role="contentinfo"]'); const $footer = dom.element('footer[role="contentinfo"]');
const space = rect.top + $footer.clientHeight + border; const space = rect.top + $footer.clientHeight + border;
const height = e.detail.height - space; const height = e.detail.height - space;
this.set('height', Math.max(0, height)); this.set('maxHeight', Math.max(0, height));
// TODO: The row height should auto calculate properly from the CSS // TODO: The row height should auto calculate properly from the CSS
this['cell-layout'] = new ZIndexedGrid($appContent.clientWidth, 50); this['cell-layout'] = new ZIndexedGrid($appContent.clientWidth, get(this, 'rowHeight'));
this.updateItems(); this.updateItems();
this.updateScrollPosition(); this.updateScrollPosition();
} }

4
ui-v2/app/styles/components/tabular-collection.scss
View File

@ -3,10 +3,6 @@ table.dom-recycling {
@extend %dom-recycling-table; @extend %dom-recycling-table;
} }
/* project specific */ /* project specific */
%dom-recycling-table {
/* minimum of 4x50px heigh rows plus top/bottom margins*/
min-height: 249px;
}
%dom-recycling-table tbody { %dom-recycling-table tbody {
/* tbodys are all absolute so,*/ /* tbodys are all absolute so,*/
/* make room for the header */ /* make room for the header */