@sapui5/sap.ushell 1.117.2 → 1.119.0

package/src/main/js/sap/ushell/themes/base/WorkPage.less

@@ -1,28 +1,57 @@
-.cepWorkPage  {
+.workPage {
   width: 100%;
   padding-bottom: 2rem;
 
-  &.sapCepEditMode {
+  &.workPageEditMode {
     margin-top: 2rem;
     margin-bottom: 4rem;
 
-    .sapCepWorkPageTitle {
+    .workPageTitle {
       padding-top: 0;
     }
   }
 
-  .sapCepWorkPageTitle {
-    padding-top: 2rem;
+  .workPageTitle {
+    padding-top: 1rem;
     box-sizing: border-box;
-    padding-bottom: 1rem;
   }
 }
 
-.sapCepWorkPageTitle {
-  margin-left: 2.35rem;
-  margin-right: 2.35rem;
+[data-wp-breakpoint="lt-lp-4"],
+[data-wp-breakpoint="lt-sp-4"],
+[data-wp-breakpoint="st-lp-4"],
+[data-wp-breakpoint="st-sp-4"] {
+  .workPageTitle {
+    margin-left: 2.375rem;
+    margin-right: 2.375rem;
+  }
+}
+[data-wp-breakpoint="lt-lp-3"],
+[data-wp-breakpoint="lt-sp-3"],
+[data-wp-breakpoint="st-lp-3"],
+[data-wp-breakpoint="st-sp-3"],
+[data-wp-breakpoint="lt-lp-2"],
+[data-wp-breakpoint="lt-sp-2"],
+[data-wp-breakpoint="st-lp-2"],
+[data-wp-breakpoint="st-sp-2"] {
+  .workPageTitle {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+}
+
+[data-wp-breakpoint="lt-lp-1"],
+[data-wp-breakpoint="lt-sp-1"],
+[data-wp-breakpoint="st-lp-1"],
+[data-wp-breakpoint="st-sp-1"] {
+  .workPageTitle {
+    margin-left: 1.75rem;
+    margin-right: 1.75rem;
+  }
+}
 
-  [data-cep-breakpoint="st-sp-1"] & {
+[data-wp-breakpoint="st-sp-0"] {
+  .workPageTitle {
     margin-left: 0.5rem;
     margin-right: 0.5rem;
   }

package/src/main/js/sap/ushell/themes/base/WorkPageButton.less

@@ -1,4 +1,4 @@
-.sapCepAddButton {
+.workPageButton {
   border: none;
   background: transparent;
   outline: none;
@@ -12,28 +12,28 @@
   justify-content: center;
 
   &:hover {
-    .sapCepAddButtonInner {
+    .workPageButtonInner {
       background: @sapUiButtonNeutralHoverBackground;
       outline-color: @sapUiButtonNeutralHoverBorderColor;
     }
 
-    .sapCepAddButtonIcon {
+    .workPageButtonIcon {
       color: @sapUiButtonNeutralHoverTextColor;
     }
   }
 
   &:focus {
-    .sapCepAddButtonInner {
+    .workPageButtonInner {
       background: @sapUiButtonNeutralActiveBackground;
       outline: 0.125rem solid @sapUiButtonNeutralActiveBorderColor;
     }
 
-    .sapCepAddButtonIcon {
+    .workPageButtonIcon {
       color: @sapUiButtonNeutralActiveTextColor;
     }
   }
 
-  .sapCepAddButtonInner {
+  .workPageButtonInner {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -45,7 +45,7 @@
     cursor: pointer;
   }
 
-  .sapCepAddButtonIcon {
+  .workPageButtonIcon {
     cursor: pointer;
     text-align: center;
     display: inline-block;

package/src/main/js/sap/ushell/themes/base/WorkPageCell.less

@@ -1,4 +1,4 @@
-.sapCepWorkPageCell {
+.workPageCell {
   flex: 0;
   display: flex;
   flex-direction: column;
@@ -7,31 +7,32 @@
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 
-  [data-cep-breakpoint="st-sp-1"] &,
-  [data-cep-breakpoint="st-lp-1"] &,
-  [data-cep-breakpoint="lt-sp-1"] {
+  [data-wp-breakpoint="st-sp-0"] &,
+  [data-wp-breakpoint="st-sp-1"] &,
+  [data-wp-breakpoint="st-lp-1"] &,
+  [data-wp-breakpoint="lt-sp-1"] & {
     margin-left: 0;
     margin-right: 0;
   }
 
-  &.sapCepWorkPageCellEmpty {
+  &.workPageCellEmpty {
     background-color: transparent;
     flex: 1;
   }
 
-  & + .sapCepWorkPageCell {
+  &+.workPageCell {
     margin-top: 1rem;
   }
 
-  .sapCepEditMode .sapCepWidget {
+  .workPageEditMode .workpageCellWidget {
     pointer-events: none;
   }
 
-  .sapCepWidget {
+  .workpageCellWidget {
     flex: 1 1 auto;
   }
 
-  .sapCepWidgetToolbar {
+  .workpageCellWidgetToolbar {
     position: relative;
     justify-content: flex-end;
     gap: 0.25rem;
@@ -39,7 +40,7 @@
     z-index: 1;
   }
 
-  .sapCepWorkPageGridContainer {
+  .workPageGridContainer {
     z-index: 0;
   }
 
@@ -51,65 +52,66 @@
     }
   }
 
-  .sapCepWorkPageCellControlButtons {
+  .workPageCellControlButtons {
     opacity: 0;
   }
 
-  .sapCepOverflowToolbarCell {
+  .workPageCellOverflowToolbar {
     border-radius: 1rem 1rem 0 0;
     padding-right: 1rem;
   }
 
-  &.sapCepWorkPageCellCardMode {
-    .sapCepOverflowToolbarCell {
+  &.workPageCellCardMode {
+    .workPageCellOverflowToolbar {
       background: transparent;
       border-bottom: none;
     }
   }
 }
 
-.sapCepWorkPageCell.sapCepWorkPageCellTileMode {
+.workPageCell.workPageCellTileMode {
   box-shadow: @sapUiContentShadow0;
 
-  .sapCepWorkPageGridContainer {
+  .workPageGridContainer {
     padding-top: 1rem;
     padding-bottom: 1rem;
   }
 }
 
-.sapCepWorkPageCell.sapCepWorkPageCellTileMode {
-  .sapCepWorkPageGridContainer {
+.workPageCell.workPageCellTileMode {
+  .workPageGridContainer {
     padding-left: 0.25rem;
     padding-right: 0.25rem;
   }
 }
 
-[data-cep-breakpoint="lt-lp-1"],
-[data-cep-breakpoint="st-lp-1"],
-[data-cep-breakpoint="lt-lp-2"],
-[data-cep-breakpoint="st-lp-2"],
-[data-cep-breakpoint="lt-lp-3"],
-[data-cep-breakpoint="st-lp-3"],
-[data-cep-breakpoint="lt-lp-4"],
-[data-cep-breakpoint="st-lp-4"] {
-  .sapCepWorkPageCell.sapCepWorkPageCellTileMode {
-    .sapCepWorkPageGridContainer {
+[data-wp-breakpoint="lt-lp-1"],
+[data-wp-breakpoint="st-lp-1"],
+[data-wp-breakpoint="lt-lp-2"],
+[data-wp-breakpoint="st-lp-2"],
+[data-wp-breakpoint="lt-lp-3"],
+[data-wp-breakpoint="st-lp-3"],
+[data-wp-breakpoint="lt-lp-4"],
+[data-wp-breakpoint="st-lp-4"] {
+  .workPageCell.workPageCellTileMode {
+    .workPageGridContainer {
       padding-left: 1rem;
       padding-right: 1rem;
     }
   }
 }
 
-[data-cep-breakpoint="lt-sp-1"],
-[data-cep-breakpoint="st-sp-1"],
-[data-cep-breakpoint="lt-sp-2"],
-[data-cep-breakpoint="st-sp-2"],
-[data-cep-breakpoint="lt-sp-3"],
-[data-cep-breakpoint="st-sp-3"],
-[data-cep-breakpoint="lt-sp-4"],
-[data-cep-breakpoint="st-sp-4"] {
-  .sapCepWorkPageCell.sapCepWorkPageCellTileMode {
-    .sapCepWorkPageGridContainer {
+[data-wp-breakpoint="lt-sp-1"],
+[data-wp-breakpoint="st-sp-1"],
+[data-wp-breakpoint="st-sp-0"],
+[data-wp-breakpoint="lt-sp-2"],
+[data-wp-breakpoint="st-sp-2"],
+[data-wp-breakpoint="lt-sp-3"],
+[data-wp-breakpoint="st-sp-3"],
+[data-wp-breakpoint="lt-sp-4"],
+[data-wp-breakpoint="st-sp-4"] {
+  .workPageCell.workPageCellTileMode {
+    .workPageGridContainer {
       padding-left: 0.5rem;
       padding-right: 0.5rem;
     }
@@ -117,24 +119,25 @@
 }
 
 /* EDIT MODE */
-.sapCepEditMode {
+.workPageEditMode {
 
-  .sapCepWorkPageCell {
-    &.sapCepWorkPageCellEmpty {
+  .workPageCell {
+    &.workPageCellEmpty {
       background-color: @sapUiShellContainerBackground;
       min-height: 14rem;
     }
 
-    &.sapCepWorkPageCellTileMode {
+    &.workPageCellTileMode {
+
       &:hover,
-      &.sapCepWorkPageCellFocused {
+      &.workPageCellFocused {
         box-shadow: @sapUiContentShadow2;
       }
     }
 
     &:hover,
-    &.sapCepWorkPageCellFocused {
-      .sapCepWorkPageCellControlButtons {
+    &.workPageCellFocused {
+      .workPageCellControlButtons {
         opacity: 1;
       }
     }

package/src/main/js/sap/ushell/themes/base/WorkPageColumn.less

@@ -1,4 +1,4 @@
-.sapCepWorkPageColumn {
+.workPageColumn {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -8,19 +8,20 @@
   box-sizing: border-box;
   padding-top: 1rem;
   padding-bottom: 1rem;
-  min-width: 21rem;
+  min-width: 0;
 
-  [data-cep-breakpoint="st-sp-1"] & {
+  [data-wp-breakpoint="st-sp-1"] &,
+  [data-wp-breakpoint="st-sp-0"] & {
     min-width: 100%;
   }
 
-  .sapCepWorkPageColumnDeleteButton {
+  .workPageColumnDeleteButton {
     position: absolute;
     right: 1.5rem;
     top: 1.25rem;
   }
 
-  .sapCepColumnToolbar {
+  .workPageColumnToolbar {
     margin-top: 0.5rem;
     display: flex;
     gap: 0 0.5rem;
@@ -29,73 +30,10 @@
     flex-wrap: wrap;
   }
 
-  &.sapCepWorkPageColumnEmpty .sapCepAddWidgetButton {
+  &.workPageColumnEmpty .workPageAddWidgetButton {
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto;
   }
-
-  &.sapCepColumnWidth4 {
-    flex: 4;
-  }
-  &.sapCepColumnWidth6 {
-    flex: 6;
-  }
-  &.sapCepColumnWidth8 {
-    flex: 8;
-  }
-  &.sapCepColumnWidth10 {
-    flex: 10;
-  }
-  &.sapCepColumnWidth12 {
-    flex: 12;
-  }
-  &.sapCepColumnWidth14 {
-    flex: 14;
-  }
-  &.sapCepColumnWidth16 {
-    flex: 16;
-  }
-  &.sapCepColumnWidth18 {
-    flex: 18;
-  }
-  &.sapCepColumnWidth20 {
-    flex: 20;
-  }
-  &.sapCepColumnWidth24 {
-    flex: 24;
-  }
-}
-
-[data-cep-breakpoint="st-sp-1"],
-[data-cep-breakpoint="st-lp-1"],
-[data-cep-breakpoint="lt-sp-1"],
-[data-cep-breakpoint="lt-lp-1"],
-[data-cep-breakpoint="st-sp-2"],
-[data-cep-breakpoint="st-lp-2"],
-[data-cep-breakpoint="lt-sp-2"],
-[data-cep-breakpoint="lt-lp-2"],
-[data-cep-breakpoint="st-sp-3"],
-[data-cep-breakpoint="st-lp-3"],
-[data-cep-breakpoint="lt-sp-3"],
-[data-cep-breakpoint="lt-lp-3"] {
-    // No resized columns for 3 columns at these breakpoints
-  .sapCepWorkPageColumn[data-count="3"] {
-    flex: 1;
-  }
-}
-
-[data-cep-breakpoint="st-sp-1"],
-[data-cep-breakpoint="st-lp-1"],
-[data-cep-breakpoint="lt-sp-1"],
-[data-cep-breakpoint="lt-lp-1"],
-[data-cep-breakpoint="st-sp-2"],
-[data-cep-breakpoint="st-lp-2"],
-[data-cep-breakpoint="lt-sp-2"],
-[data-cep-breakpoint="lt-lp-2"] {
-  // No resized columns for 2 columns at these breakpoints
-  .sapCepWorkPageColumn[data-count="2"] {
-    flex: 1;
-  }
 }

package/src/main/js/sap/ushell/themes/base/WorkPageColumnResizer.less

@@ -1,4 +1,4 @@
-.sapCepDivider {
+.workPageDivider {
   position: absolute;
   transform: translateX(-50%);
   top: 0;
@@ -11,7 +11,7 @@
     cursor: col-resize;
   }
 
-  .sapCepDividerInner {
+  .workPageDividerInner {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -21,15 +21,15 @@
   }
 }
 
-html[dir=rtl] .sapCepDivider {
+html[dir=rtl] .workPageDivider {
   transform: translateX(50%);
 
-  .sapCepDividerInner {
+  .workPageDividerInner {
     transform: translateX(2px);
   }
 }
 
-.sapCepDividerButton {
+.workPageDividerButton {
   position: absolute;
   left: 0;
   top: 0;
@@ -39,74 +39,79 @@ html[dir=rtl] .sapCepDivider {
   transform: translateX(-50%);
   z-index: 1;
 
-  &.sapCepColumnButtonRight {
+  &.workPageColumnButtonRight {
     left: auto;
     right: 0;
     transform: translateX(calc(~"0.5rem + 6.5px"));
   }
 
-  &.sapCepColumnButtonLeft {
+  &.workPageColumnButtonLeft {
     transform: translateX(calc(~"-0.5rem - 6.5px"));
   }
 }
 
 
-html[dir=rtl] .sapCepDividerButton {
-  &.sapCepColumnButtonRight {
+html[dir=rtl] .workPageDividerButton {
+  &.workPageColumnButtonRight {
     left: auto;
     right: 0;
     transform: translateX(calc(~"-0.5rem - 6.5px"));
   }
 
-  &.sapCepColumnButtonLeft {
+  &.workPageColumnButtonLeft {
     transform: translateX(calc(~"0.5rem + 6.5px"));
   }
 }
 
-[data-cep-breakpoint="lt-lp-1"],
-[data-cep-breakpoint="st-lp-1"],
-[data-cep-breakpoint="lt-sp-1"],
-[data-cep-breakpoint="st-sp-1"] {
+[data-wp-breakpoint="lt-lp-1"],
+[data-wp-breakpoint="st-lp-1"],
+[data-wp-breakpoint="lt-sp-1"],
+[data-wp-breakpoint="st-sp-1"],
+[data-wp-breakpoint="st-sp-0"] {
+
   // max. 1 column -> no divider
-  .sapCepDivider {
+  .workPageDivider {
     display: none;
   }
 }
 
-[data-cep-breakpoint="lt-lp-2"],
-[data-cep-breakpoint="st-lp-2"],
-[data-cep-breakpoint="lt-sp-2"],
-[data-cep-breakpoint="st-sp-2"] {
+[data-wp-breakpoint="lt-lp-2"],
+[data-wp-breakpoint="st-lp-2"],
+[data-wp-breakpoint="lt-sp-2"],
+[data-wp-breakpoint="st-sp-2"] {
+
   // max. 2 columns -> no resizing possible for >= 3 columns
-  .sapCepWorkPageColumn[data-count="4"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-count="5"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-count="6"] .sapCepDivider {
+  .workPageColumn[data-count="4"] .workPageDivider,
+  .workPageColumn[data-count="5"] .workPageDivider,
+  .workPageColumn[data-count="6"] .workPageDivider {
     pointer-events: none;
 
     &:hover {
       cursor: default;
     }
   }
+
   // max. 2 columns -> no divider for 3rd columns
-  .sapCepWorkPageColumn[data-index="3"][data-count="3"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="3"][data-count="4"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="3"][data-count="5"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="3"][data-count="6"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="5"][data-count="5"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="5"][data-count="6"] .sapCepDivider {
+  .workPageColumn[data-index="3"][data-count="3"] .workPageDivider,
+  .workPageColumn[data-index="3"][data-count="4"] .workPageDivider,
+  .workPageColumn[data-index="3"][data-count="5"] .workPageDivider,
+  .workPageColumn[data-index="3"][data-count="6"] .workPageDivider,
+  .workPageColumn[data-index="5"][data-count="5"] .workPageDivider,
+  .workPageColumn[data-index="5"][data-count="6"] .workPageDivider {
     display: none;
   }
 }
 
 
-[data-cep-breakpoint="lt-lp-3"],
-[data-cep-breakpoint="st-lp-3"],
-[data-cep-breakpoint="lt-sp-3"],
-[data-cep-breakpoint="st-sp-3"] {
+[data-wp-breakpoint="lt-lp-3"],
+[data-wp-breakpoint="st-lp-3"],
+[data-wp-breakpoint="lt-sp-3"],
+[data-wp-breakpoint="st-sp-3"] {
+
   // max. 3 columns -> no resizing possible for >= 4 columns
-  .sapCepWorkPageColumn[data-count="4"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-count="5"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-count="6"] .sapCepDivider {
+  .workPageColumn[data-count="4"] .workPageDivider,
+  .workPageColumn[data-count="5"] .workPageDivider,
+  .workPageColumn[data-count="6"] .workPageDivider {
     pointer-events: none;
 
     &:hover {
@@ -115,9 +120,9 @@ html[dir=rtl] .sapCepDividerButton {
   }
 
   // max. 3 columns -> no divider for 4th column
-  .sapCepWorkPageColumn[data-index="4"][data-count="4"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="4"][data-count="5"] .sapCepDivider,
-  .sapCepWorkPageColumn[data-index="4"][data-count="6"] .sapCepDivider {
+  .workPageColumn[data-index="4"][data-count="4"] .workPageDivider,
+  .workPageColumn[data-index="4"][data-count="5"] .workPageDivider,
+  .workPageColumn[data-index="4"][data-count="6"] .workPageDivider {
     display: none;
   }
 }