status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

WIP: Make sure I can get the values I need to calculate sizing 

`rect.top` is zero until the tab panel becomes visible, resize will need
to be called when the tab is clicked also
This commit is contained in:
John Cowen 2018-06-01 18:06:07 +01:00
parent 16fc7ebd8b
commit f1b25c009e
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -101,7 +101,7 @@ const change = function(e) {
// therefore we don't need to calculate // therefore we don't need to calculate
if (e.currentTarget.getAttribute('id') !== 'actions_close') { if (e.currentTarget.getAttribute('id') !== 'actions_close') {
const $tr = closest('tr', e.currentTarget); const $tr = closest('tr', e.currentTarget);
const $group = [...$('~ ul', e.currentTarget)][0]; const $group = [...$$('~ ul', e.currentTarget)][0];
const $footer = [...$$('footer[role="contentinfo"]')][0]; const $footer = [...$$('footer[role="contentinfo"]')][0];
const groupRect = $group.getBoundingClientRect(); const groupRect = $group.getBoundingClientRect();
const footerRect = $footer.getBoundingClientRect(); const footerRect = $footer.getBoundingClientRect();
@ -166,14 +166,18 @@ export default Component.extend(SlotsMixin, {
}, },
resize: function(e) { resize: function(e) {
const $tbody = [...$$('tbody', this.element)][0]; const $tbody = [...$$('tbody', this.element)][0];
if ($tbody) { const $appContent = [...$$('main > div')][0];
if ($appContent) {
// TODO: This is zero if the tabular collection is in a tab
// need to make sure this also is calculated when
// things become visible
const rect = $tbody.getBoundingClientRect(); const rect = $tbody.getBoundingClientRect();
const $footer = [...$$('footer[role="contentinfo"]')][0]; const $footer = [...$$('footer[role="contentinfo"]')][0];
const space = rect.top + $footer.clientHeight; const space = rect.top + $footer.clientHeight;
const height = new Number(e.detail.height - space); const height = new Number(e.detail.height - space);
this.set('height', Math.max(0, height)); this.set('height', 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($tbody.clientWidth, 50); this['cell-layout'] = new ZIndexedGrid($appContent.clientWidth, 50);
this.updateItems(); this.updateItems();
this.updateScrollPosition(); this.updateScrollPosition();
} }