diff --git a/sao/src/sao.less b/sao/src/sao.less index 3c06f8df3f..b8d08d2e17 100644 --- a/sao/src/sao.less +++ b/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; } diff --git a/sao/src/tab.js b/sao/src/tab.js index 27b593f409..fa1fa6aa69 100644 --- a/sao/src/tab.js +++ b/sao/src/tab.js @@ -789,9 +789,19 @@ }, create_tabcontent: function() { Sao.Tab.Form._super.create_tabcontent.call(this); - this.attachment_preview = jQuery('
', { - 'class': 'attachment-preview', + + this.sidebar = jQuery('', { + 'class': 'sidebar', }).hide().appendTo(this.main); + this.sidebar_content = jQuery('', { + 'class': 'sidebar-content', + }).appendTo(jQuery('', { + '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('', { - 'class': 'preview-resizer', + 'class': 'attachment-preview', }); - var content = jQuery('', { - 'class': 'preview-resizer-content', - }).appendTo(el); var buttons = jQuery('', { 'class': 'btn-group center-block', - }).appendTo(content); + }).appendTo(el); var but_prev = jQuery('', { '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; }, diff --git a/tryton/tryton/gui/window/form.py b/tryton/tryton/gui/window/form.py index 2d9441ddc4..36e11a163a 100644 --- a/tryton/tryton/gui/window/form.py +++ b/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