[tryton-commits] changeset in sao:default Align tab content bottom border with me...

[Cédric Krier]

changeset 6e3501f437fb in sao:default
details: https://hg.tryton.org/sao?cmd=changeset;node=6e3501f437fb
description:
        Align tab content bottom border with menu border

        We remove the margin bottom on panel to gain 20px on the treeview height
        calculation.
        We compute the height of the treeview taking into account the padding 
and
        box-shadow of the parents.

        issue9454
        review300091002
diffstat:

 src/sao.less     |   5 ++++-
 src/view/tree.js |  34 ++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletions(-)

diffs (73 lines):

diff -r bd6fb67891e6 -r 6e3501f437fb src/sao.less
--- a/src/sao.less      Tue Jul 21 14:30:37 2020 +0200
+++ b/src/sao.less      Tue Jul 21 14:42:32 2020 +0200
@@ -49,6 +49,10 @@
     }
 }
 
+#tabcontent > .tab-pane > .panel {
+    margin-bottom: 0;
+}
+
 @media screen and (min-width: @screen-sm-min) {
     #global-search-entry {
         width: 10em;
@@ -228,7 +232,6 @@
     -moz-user-select: none;
     -webkit-user-select: none;
     overflow-x: auto;
-    height: calc(100vh - 300px);
 
     > table.tree {
         width: 100%;
diff -r bd6fb67891e6 -r 6e3501f437fb src/view/tree.js
--- a/src/view/tree.js  Tue Jul 21 14:30:37 2020 +0200
+++ b/src/view/tree.js  Tue Jul 21 14:42:32 2020 +0200
@@ -15,6 +15,38 @@
         });
     }
 
+    function set_treeview_height(el) {
+        var height = '';
+        if (!el.parents('.form').length &&
+            !el.parents('#menu')) {
+            var padding = ' ';
+            el.parents('.panel-body').each(function(i, panel) {
+                panel = jQuery(panel);
+                padding += '- ' + panel.css('padding-top');
+                padding += ' - ' + panel.css('padding-bottom');
+            });
+            var box_shadow = ' ';
+            el.parents('.panel').each(function(i, panel) {
+                panel = jQuery(panel);
+                var lengths = panel.css('box-shadow').match(/\d+px/g);
+                if (lengths.length) {
+                    lengths = lengths.map(function(length) {
+                        return length.replace('px', '');
+                    });
+                    box_shadow += '- ' + Math.max.apply(null, lengths) + 'px';
+                }
+            });
+            var y = el[0].getBoundingClientRect().y;
+            height = 'calc(100vh - ' + y + 'px' + padding + box_shadow + ')';
+        }
+        el.css('height', height);
+    }
+    jQuery(window).resize(function() {
+        jQuery('.treeview').each(function(i, el) {
+            set_treeview_height(jQuery(el));
+        });
+    });
+
     Sao.View.TreeXMLViewParser = Sao.class_(Sao.View.XMLViewParser, {
         _parse_tree: function(node, attributes) {
             [].forEach.call(node.childNodes, function(child) {
@@ -514,6 +546,8 @@
             return buttons;
         },
         display: function(selected, expanded) {
+            set_treeview_height(this.treeview);
+
             var current_record = this.record;
             if (jQuery.isEmptyObject(selected)) {
                 selected = this.get_selected_paths();