diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs index bc39155b341c..14a3baa96af3 100644 --- a/packages/main/src/ResponsivePopover.hbs +++ b/packages/main/src/ResponsivePopover.hbs @@ -9,7 +9,22 @@ @ui5-afterClose="{{_afterDialogClose}}" > {{!-- forward slot header to inner dialog slot header --}} - + {{#if header.length}} + + {{else}} +
+ {{#if headerText}} + {{headerText}} + {{/if}} + + +
+ {{/if}} + {{!-- forward slot footer to inner dialog slot footer --}} diff --git a/packages/main/src/ResponsivePopover.js b/packages/main/src/ResponsivePopover.js index 168f645221d2..9d08299bd267 100644 --- a/packages/main/src/ResponsivePopover.js +++ b/packages/main/src/ResponsivePopover.js @@ -4,6 +4,9 @@ import { getNextZIndex } from "./popup-utils/PopupUtils.js"; import ResponsivePopoverTemplate from "./generated/templates/ResponsivePopoverTemplate.lit.js"; import Popover from "./Popover.js"; import Dialog from "./Dialog.js"; +import Button from "./Button.js"; +import Title from "./Title.js"; +import "@ui5/webcomponents-icons/dist/icons/decline.js"; // Styles import ResponsivePopoverCss from "./generated/themes/ResponsivePopover.css.js"; @@ -82,7 +85,11 @@ class ResponsivePopover extends Popover { } static async onDefine() { - await Dialog.define(); + await Promise.all([ + Button.define(), + Dialog.define(), + Title.define(), + ]); } /** diff --git a/packages/main/src/themes/ResponsivePopover.css b/packages/main/src/themes/ResponsivePopover.css index 603272dd7c07..3066e828164f 100644 --- a/packages/main/src/themes/ResponsivePopover.css +++ b/packages/main/src/themes/ResponsivePopover.css @@ -10,4 +10,23 @@ :host([opened]) { display: inline-block; +} + +.ui5-responsive-popover-header { + height: var(--_ui5-responnsive_popover_header_height); + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 0 0 1rem; + box-shadow: var(--sapContent_HeaderShadow); +} + +:host [dir="rtl"] .ui5-responsive-popover-header { + padding: 0 1rem 0 0; +} + +.ui5-responsive-popover-header-text { + display: flex; + align-items: center; + width: calc(100% - var(--_ui5_button_base_min_width)); } \ No newline at end of file diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 1d30948f056a..247ab937e448 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -56,6 +56,9 @@ --_ui5_tc_item_text_line_height: normal; --_ui5_tc_item_icon_size: 1.5rem; --_ui5_tc_item_add_text_margin_top: 0.625rem; + + /* Responsive Popover */ + --_ui5-responnsive_popover_header_height: 2.75rem; } [data-ui5-compact-size], @@ -176,4 +179,7 @@ /* Radio Button */ --_ui5_radiobutton_min_width: var(--_ui5_radiobutton_min_width_compact); + + /* Responsive Popover */ + --_ui5-responnsive_popover_header_height: 2.5rem; } \ No newline at end of file diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html index 2e6331756b46..2916b570a900 100644 --- a/packages/main/test/pages/ResponsivePopover.html +++ b/packages/main/test/pages/ResponsivePopover.html @@ -45,7 +45,7 @@ - +
Email: