Use a pure CSS solution to compute the container view height and width

Closes #12983

sao/index.html

@@ -81,7 +81,7 @@ this repository contains the full copyright notices and license terms. -->
                      style="height: calc(100vh - 50px - 1px - 20px); margin: 0px;">
                     <div class="col-xs-12 col-sm-4 col-lg-3 sidebar-offcanvas" id="menu" role="navigation"
                                                                                          style="overflow-y: auto; height: 100%;"></div>
-                    <div class="col-xs-12 col-sm-8 col-lg-9 main-offcanvas" style="overflow-y: auto; height: 100%;" id="tabs" role="tabpanel">
+                    <div class="col-xs-12 col-sm-8 col-lg-9 main-offcanvas" style="display:flex; overflow-y: auto; height: 100%;" id="tabs" role="tabpanel">
                         <div id="tabcontent" class="tab-content"></div>
                     </div>
                 </div>

sao/src/sao.less

@@ -152,7 +152,6 @@ html[theme="default"] {
 
 #menu, #tabs {
     margin-top: 5px;
-    padding-bottom: 5px;
 
     .navbar-brand {
         .title {
@@ -231,8 +230,54 @@ html[theme="default"] {
     }
 }
 
-#tabcontent > .tab-pane > .panel {
-    margin-bottom: 0;
+#tabcontent {
+    display: block;
+    width: 100%;
+
+    > .tab-pane > .panel {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        margin-bottom: 5px;
+
+        > .panel-body {
+            display: flex;
+            flex: 1;
+            flex-direction: row;
+            padding-top: 0;
+            min-height: 0;
+
+            > div {
+                display: inline-flex;
+                padding-left: 15px;
+                padding-right: 15px;
+
+                &:first-child {
+                    flex: 2;
+                }
+            }
+        }
+    }
+
+    > .tab-pane.active {
+        /* override bootstrap which sets display to block */
+        display: flex;
+        flex: 1;
+    }
+}
+
+@media screen and (max-width: @screen-xs-max) {
+    #tabcontent {
+        > .tab-pane > .panel > .panel-body {
+            flex-direction: column-reverse;
+            min-height: unset;
+        }
+    }
+}
+
+#tabcontent[data-view-type="tree"] {
+    display: flex;
+    flex: 1;
 }
 
 @media screen and (min-width: @screen-sm-min) {
@@ -352,6 +397,7 @@ html.accesskey {
 
     .tab-domain {
         overflow-x: auto;
+        flex: 0 0 content;
 
         > .nav-tabs {
             display: inline-flex;
@@ -463,6 +509,12 @@ img.icon {
     }
 }
 
+.screen-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
 .filter-box {
     margin: 5px 0;
 }
@@ -476,13 +528,38 @@ img.icon {
 }
 
 .content-box {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
     overflow-y: auto;
 }
 
+.tree-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.attachment-preview {
+    border-color: @panel-default-border;
+    border-style: solid;
+    border-width: 0 0 0 1px;
+    flex: 1;
+    margin-left: 5px;
+    min-width: 20%;
+    overflow: auto;
+
+    > div {
+        flex: 1;
+    }
+}
+
+.wizard-form {
+    width: 100%;
+}
+
 @media screen and (max-width: @screen-sm-max) {
     .attachment-preview:not(:empty) {
-        border-color: @panel-default-border;
-        border-style: solid;
         border-width: 0 0 1px 0;
         margin-bottom: 5px;
     }
@@ -689,6 +766,7 @@ img.icon {
 
 .form {
     width: 100%;
+    height: 100%;
     .form-container, .form-hcontainer, .form-vcontainer {
         display: grid;
         width: 100%;
@@ -1172,6 +1250,7 @@ input.column-boolean {
 }
 
 .scrollbar {
+    flex: 0 0 content;
     overflow: auto;
 
     > div {

sao/src/screen.js

@@ -981,6 +981,8 @@
                         if (this.switch_callback) {
                             this.switch_callback();
                         }
+                        Sao.Tab.set_view_type(
+                            Sao.Tab.tabs.get_current().view_type);
                     });
                 };
                 const set_current_view = () => {

sao/src/tab.js

@@ -129,9 +129,7 @@
             this.main = jQuery('<div/>', {
                 'class': 'panel-body row',
             }).appendTo(this.el);
-            this.content = jQuery('<div/>', {
-                'class': 'col-xs-12',
-            }).appendTo(this.main);
+            this.content = jQuery('<div/>').appendTo(this.main);
 
             if (this.info_bar) {
                 this.el.append(this.info_bar.el);
@@ -361,6 +359,9 @@
         },
         get_url: function() {
         },
+        get current_view_type() {
+            return 'form';
+        },
         compare: function(attributes) {
             return false;
         },
@@ -436,6 +437,7 @@
             'href': '#' + tab.id
         }).on('show.bs.tab', function() {
             Sao.set_url(tab.get_url(), tab.name_long.split(' / ').pop());
+            Sao.Tab.set_view_type(tab.current_view_type);
         })
         .append(jQuery('<button/>', {
             'class': 'close',
@@ -498,6 +500,11 @@
         }
     };
 
+    Sao.Tab.set_view_type = function(type) {
+        var tabcontent = jQuery('#tabcontent');
+        tabcontent.attr('data-view-type', type);
+    };
+
     Sao.Tab.Form = Sao.class_(Sao.Tab, {
         class_: 'tab-form',
         init: function(model_name, attributes) {
@@ -776,8 +783,8 @@
         create_tabcontent: function() {
             Sao.Tab.Form._super.create_tabcontent.call(this);
             this.attachment_preview = jQuery('<div/>', {
-                'class': 'col-xs-12 attachment-preview',
-            }).prependTo(this.main);
+                'class': 'attachment-preview',
+            }).hide().appendTo(this.main);
         },
         compare: function(attributes) {
             if (!attributes) {
@@ -1109,15 +1116,13 @@
             const preview = () => {
                 if (this.attachment_preview.children().length) {
                     this.attachment_preview.empty();
+                    this.attachment_preview.hide();
                     this.attachment_screen = null;
-                    this.attachment_preview.removeClass('col-md-4 col-md-push-8');
-                    this.content.removeClass('col-md-8 col-md-pull-4');
                 } else {
                     this.attachment_preview.append(
                         this._attachment_preview_el());
+                    this.attachment_preview.show();
                     this.refresh_attachment_preview();
-                    this.attachment_preview.addClass('col-md-4 col-md-push-8');
-                    this.content.addClass('col-md-8 col-md-pull-4');
                 }
             };
             var dropdown = this.buttons.attach.parents('.dropdown');
@@ -1612,6 +1617,9 @@
         get_url: function() {
             return this.screen.get_url(this.name);
         },
+        get current_view_type() {
+            return this.screen.current_view.view_type;
+        },
     });
 
     Sao.Tab.Board = Sao.class_(Sao.Tab, {
@@ -1681,9 +1689,7 @@
             wizard.tab = this;
             this.create_tabcontent();
             this.set_name(wizard.name);
-            this.content.remove();
-            this.content = wizard.form;
-            this.main.css('padding-top', 0).append(wizard.form);
+            this.content.append(wizard.form);
         },
         create_toolbar: function() {
             return jQuery('<span/>');

sao/src/view/tree.js

@@ -15,42 +15,6 @@
         });
     }
 
-    function set_treeview_height(el) {
-        var height = '';
-        if (!el.parents('.form').length &&
-            !el.parents('#menu').length) {
-            var vh = '100vh';
-            if (el.parents('.modal-body').length) {
-                vh = el.parents('.modal-body').css('max-height');
-            }
-            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 && 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(' + vh + ' - ' + 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) {
             for (const child of node.childNodes) {
@@ -140,7 +104,9 @@
             this.columns = [];
             this.selection_mode = (screen.attributes.selection_mode ||
                 Sao.common.SELECTION_MULTIPLE);
-            this.el = jQuery('<div/>');
+            this.el = jQuery('<div/>', {
+                'class': 'tree-container',
+            });
             this.scrollbar = jQuery('<div/>')
                 .appendTo(jQuery('<div/>', {
                     'class': 'scrollbar responsive',
@@ -758,8 +724,6 @@
             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();