Use generic sidebar to display attachment preview

sao/src/sao.less

@@ -311,6 +311,44 @@ html[theme="default"] {
         display: flex;
         flex: 1;
     }
+
+    .sidebar {
+        border-color: @panel-default-border;
+        border-style: solid;
+        border-width: 0 0 0 1px;
+        flex: 1;
+        overflow: unset;
+
+        .sidebar-resizer {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            max-width: 100vw;
+            min-width: 100%;
+            overflow: hidden;
+            resize: inline;
+            transform: scaleX(-1);
+        }
+
+        .sidebar-content {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            transform: scaleX(-1);
+        }
+    }
+}
+
+@media screen and (max-width: @screen-xs-max) {
+    #tabcontent {
+        .sidebar:not(:empty) {
+            flex: 2;
+
+            > .sidebar-resizer {
+                resize: none;
+            }
+        }
+    }
 }
 
 #tabcontent[data-view-type="tree"] {
@@ -319,14 +357,16 @@ html[theme="default"] {
 }
 
 @media screen and (max-width: @screen-sm-max) {
-    .attachment-preview {
-        visibility: collapse;
+    #tabcontent {
+        .sidebar {
+            visibility: collapse;
+        }
     }
     #tabcontent[data-view-type="form"] {
         > .tab-pane > .panel > .panel-body {
-            flex-direction: column-reverse;
+            flex-direction: column;
         }
-        .attachment-preview {
+        .sidebar {
             visibility: unset;
         }
     }
@@ -367,6 +407,12 @@ html[theme="default"] {
     }
 }
 
+.attachment-preview {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
 .list-group-item-variant(selected; @state-selected-bg; @state-selected-text);
 .table-row-variant(selected; @state-selected-bg);
 /* Duplicate bootstrap variant to have precedence over selected */
@@ -594,46 +640,10 @@ img.icon {
     min-height: 0;
 }
 
-.attachment-preview {
-    border-color: @panel-default-border;
-    border-style: solid;
-    border-width: 0 0 0 1px;
-    flex: 1;
-    overflow: unset;
-
-    > div.preview-resizer {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        max-width: 100vw;
-        min-width: 100%;
-        overflow: hidden;
-        resize: inline;
-        transform: scaleX(-1);
-
-        > div.preview-resizer-content {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-            transform: scaleX(-1);
-        }
-    }
-}
-
 .wizard-form {
     width: 100%;
 }
 
-@media screen and (max-width: @screen-xs-max) {
-    .attachment-preview:not(:empty) {
-        flex: 2;
-
-        > div.preview-resizer {
-            resize: none;
-        }
-    }
-}
-
 .list-form {
     overflow-y: auto;
 }

sao/src/tab.js

@@ -789,9 +789,19 @@
         },
         create_tabcontent: function() {
             Sao.Tab.Form._super.create_tabcontent.call(this);
-            this.attachment_preview = jQuery('<div/>', {
-                'class': 'attachment-preview',
+
+            this.sidebar = jQuery('<div/>', {
+                'class': 'sidebar',
             }).hide().appendTo(this.main);
+            this.sidebar_content = jQuery('<div/>', {
+                'class': 'sidebar-content',
+            }).appendTo(jQuery('<div/>', {
+                'class': 'sidebar-resizer',
+            }).appendTo(this.sidebar));
+        },
+        update_sidebar: function() {
+            this.sidebar.toggle(
+                this.sidebar_content.children().length > 0);
         },
         compare: function(attributes) {
             if (!attributes) {
@@ -1121,16 +1131,16 @@
                 });
             };
             const preview = () => {
-                if (this.attachment_preview.children().length) {
-                    this.attachment_preview.empty();
-                    this.attachment_preview.hide();
+                let attachment_preview = this.sidebar_content.find('.attachment-preview');
+                if (attachment_preview.length) {
+                    attachment_preview.remove();
                     this.attachment_screen = null;
                 } else {
-                    this.attachment_preview.append(
+                    this.sidebar_content.prepend(
                         this._attachment_preview_el());
-                    this.attachment_preview.show();
                     this.refresh_attachment_preview();
                 }
+                this.update_sidebar();
             };
             var dropdown = this.buttons.attach.parents('.dropdown');
             if (!evt) {
@@ -1286,14 +1296,11 @@
         },
         _attachment_preview_el: function() {
             var el = jQuery('<div/>', {
-                'class': 'preview-resizer',
+                'class': 'attachment-preview',
             });
-            var content = jQuery('<div/>', {
-                'class': 'preview-resizer-content',
-            }).appendTo(el);
             var buttons = jQuery('<div/>', {
                 'class': 'btn-group center-block',
-            }).appendTo(content);
+            }).appendTo(el);
 
             var but_prev = jQuery('<button/>', {
                 'class': 'btn btn-default btn-sm',
@@ -1345,7 +1352,7 @@
             screen.windows.push(preview);
 
             screen.switch_view().done(function() {
-                content.append(screen.screen_container.el);
+                el.append(screen.screen_container.el);
             });
             return el;
         },

tryton/tryton/gui/window/form.py

@@ -88,6 +88,10 @@ class Form(TabContent):
     def create_tabcontent(self):
         super().create_tabcontent()
 
+        self.sidebar = Gtk.VBox()
+        self.sidebar.show()
+        self.main.pack2(self.sidebar, resize=False, shrink=True)
+
         self.attachment_preview = Gtk.Viewport()
         self.attachment_preview.set_shadow_type(Gtk.ShadowType.NONE)
         self.attachment_preview.show()
@@ -97,7 +101,8 @@ class Form(TabContent):
             Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC)
         scrolledwindow.add(self.attachment_preview)
         scrolledwindow.set_size_request(300, -1)
-        self.main.pack2(scrolledwindow, resize=False, shrink=True)
+        self.sidebar.pack_start(
+            scrolledwindow, expand=True, fill=True, padding=0)
 
     def widget_get(self):
         return self.screen.widget