fix(ui5-dynamic-page): apply theme styles

SAP · Dec 18, 2023 · a7db358 · a7db358
1 parent f379b8e
commit a7db358
Show file tree

Hide file tree

Showing 28 changed files with 176 additions and 55 deletions.
diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs
@@ -9,12 +9,7 @@
       {{/if}}
 
       {{#if actionsInTitle}}
-      <ui5-dynamic-page-header-actions
-        ?snapped="{{headerSnapped}}"
-        ?pinned="{{headerPinned}}"
-        @ui5-expand-button-click={{onExpandClick}}
-        @ui5-pin-button-click={{onPinClick}}
-      ></ui5-dynamic-page-header-actions>
+        {{> header-actions}}
       {{/if}}
 
     </div>
@@ -24,12 +19,7 @@
     {{/if}}
 
     {{#unless actionsInTitle}}
-      <ui5-dynamic-page-header-actions
-          ?snapped="{{headerSnapped}}"
-          ?pinned="{{headerPinned}}"
-          @ui5-expand-button-click={{onExpandClick}}
-          @ui5-pin-button-click={{onPinClick}}
-        ></ui5-dynamic-page-header-actions>
+      {{> header-actions}}
     {{/unless}}
 
     <div class="{{classes.content}}">
@@ -45,4 +35,12 @@
     <div class="{{classes.footer}}">
       <slot name="footer"></slot>
     </div>
-</div>
+</div>
+{{#*inline "header-actions"}}
+    <ui5-dynamic-page-header-actions
+      ?snapped="{{headerSnapped}}"
+      ?pinned="{{headerPinned}}"
+      @ui5-expand-button-click={{onExpandClick}}
+      @ui5-pin-button-click={{onPinClick}}
+  ></ui5-dynamic-page-header-actions>
+  {{/inline}}
diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs
@@ -7,7 +7,6 @@
     @focusin={{_onfocusin}}
     @keydown="{{_onkeydown}}">
   </span>
-
   <div class="{{classes.topArea}}">
     {{#if hasBreadcrumb}}
       <div class="{{classes.breadcrumbs}}">

diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css
@@ -4,13 +4,10 @@
     z-index: 1;
 }
 
-.ui5-dynamic-page-content {
-    padding: 0 0 0 var(--_ui5_dynamic_page_title_content_padding_left);
-}
-
 :host {
     display: block;
     height: 100%;
+    background-color: var(--ui5_dynamic_page_background);
 }
 
 .ui5-dynamic-page-root {
@@ -69,10 +66,9 @@
 
 ::slotted([slot="footer"]) {
     /* TODO css vars? */
-    border: 1px solid;
     border-radius: 0.25rem;
-    background-color: #fff;
-    box-sizing: border-box;
+    background-color: var(--_ui5_dynamic_page_header_background_color);
+    box-sizing: content-box;
     width: auto;
     margin: 0 0.5rem 0.5rem 0.5rem;
 }
@@ -105,27 +101,54 @@
 
 /* Responsive paddings */
 
-:host([media-range="S"]) .ui5-dynamic-page-fit-content,
-:host([media-range="S"]) ::slotted([slot="titleArea"]),
-:host([media-range="S"]) ::slotted([slot="headerArea"]) {
-    padding: 0 1rem;
+:host([media-range="S"]) .ui5-dynamic-page-content,
+:host([media-range="S"]) .ui5-dynamic-page-fit-content {
+    padding: var(--_ui5_dynamic_page_content_padding_S);
+}
+
+:host([media-range="S"]) ::slotted([slot="titleArea"]) {
+    padding: var(--_ui5_dynamic_page_title_padding_S);
 }
 
 :host([media-range="S"]) ::slotted([slot="headerArea"]) {
-    padding-top: 0.5rem;
+    padding: var(--_ui5_dynamic_page_header_padding_S);
+}
+
+:host([media-range="M"]) .ui5-dynamic-page-content,
+:host([media-range="M"]) .ui5-dynamic-page-fit-content {
+    padding: var(--_ui5_dynamic_page_content_padding_M);
+}
+
+:host([media-range="M"]) ::slotted([slot="titleArea"]) {
+    padding: var(--_ui5_dynamic_page_title_padding_M);
+}
+
+:host([media-range="M"]) ::slotted([slot="headerArea"]) {
+    padding: var(--_ui5_dynamic_page_header_padding_M);
+}
+
+:host([media-range="L"]) .ui5-dynamic-page-content,
+:host([media-range="L"]) .ui5-dynamic-page-fit-content {
+    padding: var(--_ui5_dynamic_page_content_padding_L);
+}
+
+:host([media-range="L"]) ::slotted([slot="titleArea"]) {
+    padding: var(--_ui5_dynamic_page_title_padding_L);
 }
 
-:host([media-range="M"]) .ui5-dynamic-page-fit-content,
-:host([media-range="M"]) ::slotted([slot="titleArea"]),
-:host([media-range="M"]) ::slotted([slot="headerArea"]),
-:host([media-range="L"]) .ui5-dynamic-page-fit-content,
-:host([media-range="L"]) ::slotted([slot="titleArea"]),
 :host([media-range="L"]) ::slotted([slot="headerArea"]) {
-    padding: 0 2rem;
+    padding: var(--_ui5_dynamic_page_header_padding_L);
+}
+
+:host([media-range="XL"]) .ui5-dynamic-page-content,
+:host([media-range="XL"]) .ui5-dynamic-page-fit-content {
+    padding: var(--_ui5_dynamic_page_content_padding_XL);
+}
+
+:host([media-range="XL"]) ::slotted([slot="titleArea"]) {
+    padding: var(--_ui5_dynamic_page_title_padding_XL);
 }
 
-:host([media-range="XL"]) .ui5-dynamic-page-fit-content,
-:host([media-range="XL"]) ::slotted([slot="titleArea"]),
 :host([media-range="XL"]) ::slotted([slot="headerArea"]) {
-    padding: 0 3rem;
+    padding: var(--_ui5_dynamic_page_header_padding_XL);
 }
diff --git a/packages/fiori/src/themes/DynamicPageHeader.css b/packages/fiori/src/themes/DynamicPageHeader.css
@@ -1,6 +1,7 @@
 :host {
-    background: #fff;
+    background-color: var(--_ui5_dynamic_page_header_background_color);
     display: block;
+    box-shadow: var(--_ui5_dynamic_page_header-boxshadow);
 }
 
 .ui5-dynamic-page-header-root {

diff --git a/packages/fiori/src/themes/DynamicPageHeaderActions.css b/packages/fiori/src/themes/DynamicPageHeaderActions.css
@@ -11,7 +11,7 @@
 		height: 1.5rem;
 		background-color: var(--sapObjectHeader_Background);
 		border: 1px solid var(--sapButton_BorderColor);
-		box-shadow: var(--sapContent_Shadow0);
+		box-shadow: var(--_ui5_dynamic_page_header-actions-boxshadow);
 	}
 
 	.ui5-dynamic-page-header-actions--wrapper {
@@ -32,12 +32,12 @@
 
 		&:before {
 			right: 50%;
-			background: linear-gradient(to right, transparent, var(--sapObjectHeader_BorderColor));
+			/*background: linear-gradient(to right, transparent, var(--sapObjectHeader_BorderColor));*/
 		}
 
 		&::after {
 			left: 50%;
-			background: linear-gradient(to left, transparent, var(--sapObjectHeader_BorderColor));
+			/*background: linear-gradient(to left, transparent, var(--sapObjectHeader_BorderColor));*/
 		}
 	}
 }
diff --git a/packages/fiori/src/themes/DynamicPageTitle.css b/packages/fiori/src/themes/DynamicPageTitle.css
@@ -2,11 +2,12 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    background-color: var(--sapObjectHeader_Background);
+    background-color: var(--_ui5_dynamic_page_header_background_color);
     min-height: var(--_ui5_dynamic_page_title_min_height);
     word-wrap: break-word;
     padding-top: var(--_ui5_dynamic_page_title_padding_top);
     padding-bottom: var(--_ui5_dynamic_page_title_padding_bottom);
+    border-bottom: var(--_ui5_dynamic_page_title_border);
 }
 
 :host .ui5-dynamic-page-title-root {
@@ -17,8 +18,9 @@
 }
 
 :host(:hover) {
-    background-color: var(--sapObjectHeader_Hover_Background);
+    background-color: var(--_ui5_dynamic_page_title_hover_background);
     cursor: pointer;
+    border-bottom: var(--_ui5_dynamic_page_title_hover_border);
 }
 
 :host([snapped]) {
@@ -38,6 +40,7 @@
     font-family: var(--sapObjectHeader_Title_FontFamily);
     color: var(--sapObjectHeader_Title_TextColor);
     padding: var(--_ui5_dynamic_page_title_heading_padding_top) 0 0 0;
+    margin: var(--_ui5_dynamic_page_title_heading_margin);
 }
 
 ::slotted([ui5-title][slot="expandedHeading"]),
@@ -61,7 +64,7 @@
 
 /* actions */
 ::slotted([ui5-toolbar][slot="actions"]) {
-    /* padding: 0 0 0 1rem; */
+    padding: 0 0 0 1rem;
 }
 
 .ui5-dynamic-page-title--wrapper {
@@ -85,6 +88,7 @@
     min-width: 3rem;
     flex-grow: 1;
     display: flex;
+    align-items: center;
 }
 
 .ui5-dynamic-page-title--actions ::slotted([slot="actions"]) {
@@ -102,13 +106,19 @@
         width: 0.0625rem;
         vertical-align: middle;
         background: var(--sapToolbar_SeparatorColor);
-        margin: 0 0.5rem;
+        margin: 0 0.5rem 0 0.25rem;
     }
 }
 
 ::slotted([slot="navigationActions"]) {
     border: none;
     flex: 0 1;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+::slotted([slot="breadcrumbs"]) {
+    margin-bottom: -0.5rem;
 }
 
 .ui5-dynamic-page-title--top-area {

diff --git a/packages/fiori/src/themes/base/DynamicPage-parameters.css b/packages/fiori/src/themes/base/DynamicPage-parameters.css
@@ -1,4 +1,18 @@
 :root {
-    --_ui5_dynamic_page_title_content_padding_left: 1rem; 
-    --_ui5_dynamic_page_footer_spacer: 4rem; 
+    --_ui5_dynamic_page_footer_spacer: 4rem;
+
+    --_ui5_dynamic_page_title_padding_S: 0.5rem 1rem;
+    --_ui5_dynamic_page_title_padding_M: 0.5rem 2rem;
+    --_ui5_dynamic_page_title_padding_L: 0.5rem 2rem;
+    --_ui5_dynamic_page_title_padding_XL: 0.5rem 3rem;
+    --_ui5_dynamic_page_header_padding_S: 0.5rem 1rem 0;
+    --_ui5_dynamic_page_header_padding_M: 1rem 2rem;
+    --_ui5_dynamic_page_header_padding_L: 1rem 3rem;
+    --_ui5_dynamic_page_header_padding_XL: 1rem 3rem;
+    --_ui5_dynamic_page_content_padding_S: 2rem 1rem 0;
+    --_ui5_dynamic_page_content_padding_M: 2rem 2rem 0;
+    --_ui5_dynamic_page_content_padding_L: 1rem 2rem 0;
+    --_ui5_dynamic_page_content_padding_XL: 1rem 3rem 0;
+
+    --ui5_dynamic_page_background:  var(--sapBackgroundColor);
 }
diff --git a/packages/fiori/src/themes/base/DynamicPageHeader-parameters.css b/packages/fiori/src/themes/base/DynamicPageHeader-parameters.css
@@ -1,4 +1,8 @@
 :root {
 	--_ui5_dynamic_page_header_padding_top: 1rem;
     --_ui5_dynamic_page_header_padding_bottom: 1rem;
+
+    --_ui5_dynamic_page_header_background_color: var(--sapObjectHeader_Background);
+    --_ui5_dynamic_page_header-actions-boxshadow: var(--sapContent_Shadow0);
+    --_ui5_dynamic_page_header-boxshadow: var(--sapContent_HeaderShadow);
 }
diff --git a/packages/fiori/src/themes/base/DynamicPageTitle-parameters.css b/packages/fiori/src/themes/base/DynamicPageTitle-parameters.css
@@ -1,12 +1,17 @@
 :root {
 	--_ui5_dynamic_page_title_padding_top: 0.5rem;
     --_ui5_dynamic_page_title_padding_bottom: 0.5rem;
-    --_ui5_dynamic_page_title_min_height: 3rem;
+    --_ui5_dynamic_page_title_min_height: 4rem;
 
     --_ui5_dynamic_page_title_breadcrumbs_padding_top: 0.5rem;
     --_ui5_dynamic_page_title_breadcrumbs_padding_bottom: 0.25rem;
 
     --_ui5_dynamic_page_title_heading_padding_top: 0.3125rem;
 
     --_ui5_dynamic_page_title_subheading_margin_top: 0.25rem;
+
+    --_ui5_dynamic_page_title_content_padding_left: 1rem;
+
+    --_ui5_dynamic_page_title_hover_background: var(--sapObjectHeader_Hover_Background);
+
 }
diff --git a/packages/fiori/src/themes/sap_belize/DynamicPage-parameters.css b/packages/fiori/src/themes/sap_belize/DynamicPage-parameters.css
@@ -0,0 +1,16 @@
+:root {
+    /* paddings */
+    --_ui5_dynamic_page_title_padding_S: 0.5rem 0rem 0.5rem 1rem;
+    --_ui5_dynamic_page_title_padding_M: 0.5rem 1rem 0.5rem 2rem;
+    --_ui5_dynamic_page_title_padding_L: 0.5rem 2rem 0.5rem 3rem;
+    --_ui5_dynamic_page_title_padding_XL: 0.5rem 2rem 0.5rem 3rem;
+    --_ui5_dynamic_page_header_padding_S: 0.5rem 1rem 1rem 1rem;
+    --_ui5_dynamic_page_header_padding_M: 1rem 2rem;
+    --_ui5_dynamic_page_header_padding_L: 1rem 3rem;
+    --_ui5_dynamic_page_header_padding_XL: 1rem 3rem;
+    --_ui5_dynamic_page_content_padding_S: 2rem 1rem 0 1rem;
+    --_ui5_dynamic_page_content_padding_M: 2rem 2rem 0 2rem;
+    --_ui5_dynamic_page_content_padding_L: 1rem 3rem 0 3rem;
+    --_ui5_dynamic_page_content_padding_XL: 1rem 3rem 0 3rem;
+
+}
diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
@@ -1,5 +1,5 @@
 @import "../base/sizes-parameters.css";
-@import "../base/DynamicPage-parameters.css";
+@import "./DynamicPage-parameters.css";
 @import "../base/DynamicPageTitle-parameters.css";
 @import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";

diff --git a/packages/fiori/src/themes/sap_belize_hcb/DynamicPageTitle-parameters.css b/packages/fiori/src/themes/sap_belize_hcb/DynamicPageTitle-parameters.css
@@ -0,0 +1,6 @@
+@import "../base/DynamicPageTitle-parameters.css";
+
+:root {
+    --_ui5_dynamic_page_title_border: 0.0625rem solid transparent;
+    --_ui5_dynamic_page_title_hover_border: 0.0625rem solid var(--sapObjectHeader_BorderColor);
+}
diff --git a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -1,6 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
-@import "../base/DynamicPageTitle-parameters.css";
+@import "./DynamicPageTitle-parameters.css";
 @import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";

diff --git a/packages/fiori/src/themes/sap_belize_hcw/DynamicPageTitle-parameters.css b/packages/fiori/src/themes/sap_belize_hcw/DynamicPageTitle-parameters.css
@@ -0,0 +1,6 @@
+@import "../base/DynamicPageTitle-parameters.css";
+
+:root {
+    --_ui5_dynamic_page_title_border: 0.0625rem solid transparent;
+    --_ui5_dynamic_page_title_hover_border: 0.0625rem solid var(--sapObjectHeader_BorderColor);
+}
diff --git a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -1,6 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
-@import "../base/DynamicPageTitle-parameters.css";
+@import "./DynamicPageTitle-parameters.css";
 @import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3/DynamicPageTitle-parameters.css b/packages/fiori/src/themes/sap_fiori_3/DynamicPageTitle-parameters.css
@@ -0,0 +1,3 @@
+:root {
+    --_ui5_dynamic_page_title_min_height: 3rem;
+}
diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
@@ -1,6 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
-@import "../base/DynamicPageTitle-parameters.css";
+@import "./DynamicPageTitle-parameters.css";
 @import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/DynamicPageTitle-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcb/DynamicPageTitle-parameters.css
@@ -0,0 +1,6 @@
+@import "../sap_fiori_3/DynamicPageTitle-parameters.css";
+
+:root {
+    --_ui5_dynamic_page_title_border: 0.0625rem solid transparent;
+    --_ui5_dynamic_page_title_hover_border: 0.0625rem solid var(--sapObjectHeader_BorderColor);
+}
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -1,6 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "../base/DynamicPage-parameters.css";
-@import "../base/DynamicPageTitle-parameters.css";
+@import "./DynamicPageTitle-parameters.css";
 @import "../base/DynamicPageHeader-parameters.css";
 @import "../base/Bar-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";

diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/DynamicPageTitle-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcw/DynamicPageTitle-parameters.css
@@ -0,0 +1,6 @@
+@import "../sap_fiori_3/DynamicPageTitle-parameters.css";
+
+:root {
+    --_ui5_dynamic_page_title_border: 0.0625rem solid transparent;
+    --_ui5_dynamic_page_title_hover_border: 0.0625rem solid var(--sapObjectHeader_BorderColor);
+}