diff --git a/dist/tryton-sao.css b/dist/tryton-sao.css index a8b315d..533f046 100644 --- a/dist/tryton-sao.css +++ b/dist/tryton-sao.css @@ -10235,6 +10235,97 @@ img.icon { .form fieldset.form-group_ .form-vcontainer { vertical-align: middle; } +.form fieldset.form-panel { + background: #fff; + border: 1px solid #d7e3de; + border-radius: 8px; + box-shadow: 0 3px 10px rgba(30, 55, 58, 0.075); + margin: 8px 0; + overflow: visible; + padding: 14px 16px 16px; +} +.form fieldset.form-panel > legend { + align-items: center; + border-bottom: 1px solid #e6eee9; + color: #145369; + display: flex; + font-size: 15px; + font-weight: 700; + gap: 8px; + line-height: 1.35; + margin: 0 0 12px; + padding: 0 0 9px; + width: 100%; +} +.form fieldset.form-panel > legend .form-panel-icon { + height: 18px; + width: 18px; +} +.form fieldset.form-panel > .form-container { + gap: 8px 14px; + height: auto; +} +.form fieldset.form-panel .form-item { + align-items: center; + min-width: 0; + padding: 2px; +} +.form fieldset.form-panel .form-label { + color: #4b5f60; + font-weight: 600; +} +.form fieldset.form-panel-summary { + padding: 12px 16px; +} +.form fieldset.form-panel-summary > legend { + display: none; +} +.form fieldset.form-panel-summary > .form-container, +.form .form-panel-summary-grid { + align-items: center; + gap: 10px 18px; +} +.form fieldset.form-panel-sidebar { + box-shadow: 0 4px 14px rgba(30, 55, 58, 0.08); +} +.form fieldset.form-panel-sidebar > .form-container, +.form .form-panel-sidebar-grid { + gap: 8px 10px; +} +.form fieldset.form-panel-sidebar .form-label { + color: #145369; + font-size: 12px; +} +.form fieldset.form-panel-plain { + background: transparent; + border-color: transparent; + box-shadow: none; + padding: 0; +} +.form fieldset.form-panel-sticky { + position: sticky; + top: 12px; +} +html[data-theme-mode="dark"] .form fieldset.form-panel { + background: #16201f; + border-color: #263937; + box-shadow: none; +} +html[data-theme-mode="dark"] .form fieldset.form-panel > legend { + border-bottom-color: #263937; + color: #8dd7d2; +} +html[data-theme-mode="dark"] .form fieldset.form-panel .form-label { + color: #b7c9c5; +} +html[data-theme-mode="dark"] .form fieldset.form-panel-sidebar .form-label { + color: #8dd7d2; +} +@media screen and (max-width: 767px) { + .form fieldset.form-panel-sticky { + position: static; + } +} .form .xexpand { width: 100%; } @@ -10957,7 +11048,7 @@ body { html[theme="default"] .screen-container > .filter-box, html[theme="default"] .screen-container .content-box > .form, html[theme="default"] .screen-container .content-box > form { - background: linear-gradient(180deg, #fbfcfb 0%, #f6faf8 100%); + background: linear-gradient(180deg, #f4f8f6 0%, #edf4f1 100%); border: 1px solid #dfe8e3; border-radius: 12px; padding: 14px 16px 10px; diff --git a/dist/tryton-sao.js b/dist/tryton-sao.js index 9c2a25f..8c6878a 100644 --- a/dist/tryton-sao.js +++ b/dist/tryton-sao.js @@ -15220,6 +15220,13 @@ function eval_pyson(value){ var group = new Sao.View.Form.Container( Number(node.getAttribute('col') || 4), attributes.col_widths); + if (attributes.panel == 'summary') { + group.el.addClass('form-panel-summary-grid'); + } else if (attributes.panel == 'sidebar') { + group.el.addClass('form-panel-sidebar-grid'); + } else if (attributes.panel == 'card') { + group.el.addClass('form-panel-card-grid'); + } this.view.containers.push(group); this.parse_child(node, group); @@ -15969,8 +15976,31 @@ function eval_pyson(value){ this.el = jQuery('
', { 'class': this.class_ }); + this._apply_panel_attributes(attributes); if (attributes.string) { - this.el.append(jQuery('').text(attributes.string)); + var legend = jQuery(''); + if (attributes.icon) { + legend.append(Sao.common.ICONFACTORY.get_icon_img( + attributes.icon, { + 'class': 'form-panel-icon', + 'aria-hidden': true, + })); + } + legend.append(jQuery('').text(attributes.string)); + this.el.append(legend); + } + }, + _apply_panel_attributes: function(attributes) { + var panel = attributes.panel || null; + if (!panel) { + return; + } + if (['card', 'summary', 'sidebar', 'plain'].indexOf(panel) < 0) { + panel = 'card'; + } + this.el.addClass('form-panel form-panel-' + panel); + if (attributes.sticky == '1' || panel == 'sidebar') { + this.el.addClass('form-panel-sticky'); } }, add: function(widget) { diff --git a/tryton-sao.css b/tryton-sao.css index 122ca81..bd6ecb3 100644 --- a/tryton-sao.css +++ b/tryton-sao.css @@ -10235,6 +10235,97 @@ img.icon { .form fieldset.form-group_ .form-vcontainer { vertical-align: middle; } +.form fieldset.form-panel { + background: #fff; + border: 1px solid #d7e3de; + border-radius: 8px; + box-shadow: 0 3px 10px rgba(30, 55, 58, 0.075); + margin: 8px 0; + overflow: visible; + padding: 14px 16px 16px; +} +.form fieldset.form-panel > legend { + align-items: center; + border-bottom: 1px solid #e6eee9; + color: #145369; + display: flex; + font-size: 15px; + font-weight: 700; + gap: 8px; + line-height: 1.35; + margin: 0 0 12px; + padding: 0 0 9px; + width: 100%; +} +.form fieldset.form-panel > legend .form-panel-icon { + height: 18px; + width: 18px; +} +.form fieldset.form-panel > .form-container { + gap: 8px 14px; + height: auto; +} +.form fieldset.form-panel .form-item { + align-items: center; + min-width: 0; + padding: 2px; +} +.form fieldset.form-panel .form-label { + color: #4b5f60; + font-weight: 600; +} +.form fieldset.form-panel-summary { + padding: 12px 16px; +} +.form fieldset.form-panel-summary > legend { + display: none; +} +.form fieldset.form-panel-summary > .form-container, +.form .form-panel-summary-grid { + align-items: center; + gap: 10px 18px; +} +.form fieldset.form-panel-sidebar { + box-shadow: 0 4px 14px rgba(30, 55, 58, 0.08); +} +.form fieldset.form-panel-sidebar > .form-container, +.form .form-panel-sidebar-grid { + gap: 8px 10px; +} +.form fieldset.form-panel-sidebar .form-label { + color: #145369; + font-size: 12px; +} +.form fieldset.form-panel-plain { + background: transparent; + border-color: transparent; + box-shadow: none; + padding: 0; +} +.form fieldset.form-panel-sticky { + position: sticky; + top: 12px; +} +html[data-theme-mode="dark"] .form fieldset.form-panel { + background: #16201f; + border-color: #263937; + box-shadow: none; +} +html[data-theme-mode="dark"] .form fieldset.form-panel > legend { + border-bottom-color: #263937; + color: #8dd7d2; +} +html[data-theme-mode="dark"] .form fieldset.form-panel .form-label { + color: #b7c9c5; +} +html[data-theme-mode="dark"] .form fieldset.form-panel-sidebar .form-label { + color: #8dd7d2; +} +@media screen and (max-width: 767px) { + .form fieldset.form-panel-sticky { + position: static; + } +} .form .xexpand { width: 100%; } @@ -10957,7 +11048,7 @@ body { html[theme="default"] .screen-container > .filter-box, html[theme="default"] .screen-container .content-box > .form, html[theme="default"] .screen-container .content-box > form { - background: linear-gradient(180deg, #fbfcfb 0%, #f6faf8 100%); + background: linear-gradient(180deg, #f4f8f6 0%, #edf4f1 100%); border: 1px solid #dfe8e3; border-radius: 12px; padding: 14px 16px 10px; diff --git a/tryton-sao.js b/tryton-sao.js index 9c2a25f..8c6878a 100644 --- a/tryton-sao.js +++ b/tryton-sao.js @@ -15220,6 +15220,13 @@ function eval_pyson(value){ var group = new Sao.View.Form.Container( Number(node.getAttribute('col') || 4), attributes.col_widths); + if (attributes.panel == 'summary') { + group.el.addClass('form-panel-summary-grid'); + } else if (attributes.panel == 'sidebar') { + group.el.addClass('form-panel-sidebar-grid'); + } else if (attributes.panel == 'card') { + group.el.addClass('form-panel-card-grid'); + } this.view.containers.push(group); this.parse_child(node, group); @@ -15969,8 +15976,31 @@ function eval_pyson(value){ this.el = jQuery('
', { 'class': this.class_ }); + this._apply_panel_attributes(attributes); if (attributes.string) { - this.el.append(jQuery('').text(attributes.string)); + var legend = jQuery(''); + if (attributes.icon) { + legend.append(Sao.common.ICONFACTORY.get_icon_img( + attributes.icon, { + 'class': 'form-panel-icon', + 'aria-hidden': true, + })); + } + legend.append(jQuery('').text(attributes.string)); + this.el.append(legend); + } + }, + _apply_panel_attributes: function(attributes) { + var panel = attributes.panel || null; + if (!panel) { + return; + } + if (['card', 'summary', 'sidebar', 'plain'].indexOf(panel) < 0) { + panel = 'card'; + } + this.el.addClass('form-panel form-panel-' + panel); + if (attributes.sticky == '1' || panel == 'sidebar') { + this.el.addClass('form-panel-sticky'); } }, add: function(widget) {