@openui5/sap.tnt 1.136.1 → 1.138.0

package/src/sap/tnt/messagebundle_zh_CN.properties

@@ -14,6 +14,14 @@ NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_MENUBAR=\u5BFC\u822A\u5217\u8868\u83DC\u53
 
 NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_TREE=\u5BFC\u822A\u5217\u8868\u6811
 
+SIDE_NAVIGATION_FLEXIBLE_LIST_LABEL=\u4E3B\u5BFC\u822A\u83DC\u5355
+
+SIDE_NAVIGATION_FIXED_LIST_LABEL=\u9875\u811A\u5BFC\u822A\u83DC\u5355
+
 NAVIGATION_LIST_DIALOG_TITLE=\u5BFC\u822A
 
 NAVIGATION_LIST_NAVIGATION_OVERFLOW=\u66F4\u591A\u9879\u76EE
+
+NAVIGATION_LIST_OVERFLOW_ITEM_LABEL=\u663E\u793A\u5176\u4F59\u5BFC\u822A\u9879\u76EE
+
+NAVIGATION_LIST_EXTERNAL_LINK_DESCRIPTION=\u5728\u65B0\u7A97\u53E3\u4E2D\u6253\u5F00\u94FE\u63A5

package/src/sap/tnt/messagebundle_zh_TW.properties

@@ -14,6 +14,14 @@ NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_MENUBAR=\u700F\u89BD\u6E05\u55AE\u529F\u80
 
 NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_TREE=\u700F\u89BD\u6E05\u55AE\u6A39\u72C0\u7D50\u69CB
 
+SIDE_NAVIGATION_FLEXIBLE_LIST_LABEL=\u4E3B\u8981\u700F\u89BD\u529F\u80FD\u8868
+
+SIDE_NAVIGATION_FIXED_LIST_LABEL=\u9801\u5C3E\u700F\u89BD\u529F\u80FD\u8868
+
 NAVIGATION_LIST_DIALOG_TITLE=\u700F\u89BD
 
 NAVIGATION_LIST_NAVIGATION_OVERFLOW=\u5176\u4ED6\u9805\u76EE
+
+NAVIGATION_LIST_OVERFLOW_ITEM_LABEL=\u986F\u793A\u5269\u9918\u700F\u89BD\u9805\u76EE
+
+NAVIGATION_LIST_EXTERNAL_LINK_DESCRIPTION=\u5728\u65B0\u8996\u7A97\u4E2D\u958B\u555F\u9023\u7D50

package/src/sap/tnt/themes/base/NavigationList.less

@@ -20,6 +20,7 @@
 @_sap_tnt_NavigationList_ItemBottomMarginInOverflowPopup: 0.1875rem;
 @_sap_tnt_NavigationList_ItemTransition: none;
 @_sap_tnt_NavigationList_ItemTextFontFamily: var(--sapFontFamily);
+@_sap_tnt_NavigationList_ParentItemTextFontFamily: var(--sapFontSemiboldDuplexFamily);
 @_sap_tnt_NavigationList_NoIconsGroupPadding: 1rem;
 @_sap_tnt_NavigationList_NoIconsNestedItemPadding: 1rem;
 @_sap_tnt_NavigationList_ItemFocusBorderOffset: 1px;
@@ -101,7 +102,7 @@
 	flex-direction: column-reverse;
 }
 
-.sapUiIcon > .sapUiIconTitle {
+.sapTntNLI .sapUiIcon > .sapUiIconTitle {
 	padding-inline-end: @_sap_tnt_NavigationList_PaddingInlineEnd;
 	padding-block: @_sap_tnt_NavigationList_ArrowPadding;
 	top: -@_sap_tnt_NavigationList_ArrowPadding;
@@ -140,10 +141,10 @@
 
 	&.sapTntNLIDisabled {
 		cursor: default;
-		opacity: @sapUiContentDisabledOpacity;
 
 		span {
 			cursor: default;
+			opacity: @sapUiContentDisabledOpacity;
 		}
 	}
 
@@ -304,7 +305,7 @@
 }
 
 .sapTntNL .sapTntNLIExpandIcon,
-.sapUiMnuItmSbMnu.sapTntNLIExpandIcon,
+.sapMMenuItemSubMenu.sapTntNLIExpandIcon,
 .sapTntNLIExternalLinkIcon {
 	min-width: @_sap_tnt_NavigationList_ExpandIconWidth;
 	margin-right: @_sap_tnt_NavigationList_ExpandIconMarginRight;
@@ -338,7 +339,7 @@
 }
 
 .sapTntNLIFirstLevel .sapTntNLIText {
-	font-weight: @_sap_tnt_NavigationList_GroupTextWeight;
+	font-family: @_sap_tnt_NavigationList_ParentItemTextFontFamily;
 }
 
 .sapTntNLCollapsed {
@@ -594,32 +595,28 @@ html[dir=rtl] .sapTntNLISelected:not(.sapTntNLIDisabled) {
 	}
 }
 
-.sapTntNLMenu.sapUiMnu {
-
-	&:not(.sapUiSubmenu) {
+.sapTntNLMenu.sapMMenu {
+	&:not(.sapMSubmenu) .sapMMenuList {
 		padding: @_sap_tnt_NavigationList_PopupPadding;
 	}
 
-	.sapUiMnuItmSbMnu:empty {
+	.sapMMenuItemSubMenu:empty {
 		min-width: initial;
 		padding-inline-end: initial;
 	}
 
 	// parent menu
-	&:not(.sapUiSubmenu) .sapUiMnuLst .sapUiMnuItm  {
-		font-weight: @_sap_tnt_NavigationList_GroupTextWeight;
-
-		.sapUiMnuItmIco {
-			position: relative !important;
-			width: auto;
+	&:not(.sapMSubmenu) .sapMMenuList .sapMMenuItem  {
+		font-family: @_sap_tnt_NavigationList_ParentItemTextFontFamily;
 
+		.sapMMenuItemIcon {
 			.sapUiIcon {
 				color: @_sap_tnt_NavigationList_IconColor;
 				display: block;
 			}
 		}
 
-		.sapUiMnuItmSbMnu {
+		.sapMMenuItemSubMenu {
 			position: static; // default one
 			display: flex;
 			align-items: center;
@@ -642,12 +639,8 @@ html[dir=rtl] .sapTntNLISelected:not(.sapTntNLIDisabled) {
 			}
 		}
 
-		.sapUiMnuItmR {
-			display: none;
-		}
-
-		&.sapUiMnuItmSubMnuOpen,
-		&.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov {
+		&.sapMMenuItemSubMenuOpen,
+		&.sapMMenuItemSubMenuOpen:hover {
 			border-bottom: none;
 			background-color: @sapUiListHoverBackground;
 
@@ -661,8 +654,8 @@ html[dir=rtl] .sapTntNLISelected:not(.sapTntNLIDisabled) {
 		}
 	}
 
-	.sapUiMnuLst {
-		li.sapUiMnuItm {
+	.sapMMenuList {
+		li.sapMMenuItem {
 			display: flex;
 			align-items: center;
 			height: @_sap_tnt_NavigationList_ItemHeight;
@@ -671,11 +664,7 @@ html[dir=rtl] .sapTntNLISelected:not(.sapTntNLIDisabled) {
 			transition: @_sap_tnt_NavigationList_ItemTransition;
 			font-size: @sapMFontMediumSize;
 
-			.sapUiMnuItmL {
-				display: none;
-			}
-
-			.sapUiMnuItmTxt {
+			.sapMMenuItemText {
 				display: flex;
 				align-items: center;
 				margin: 0 !important;
@@ -688,8 +677,6 @@ html[dir=rtl] .sapTntNLISelected:not(.sapTntNLIDisabled) {
 				outline: @sapUiContentFocusStyle @sapUiContentFocusWidth @sapUiContentFocusColor;
 			}
 
-			outline-offset: 0;
-
 			&:not(:last-child) {
 				margin-bottom: @_sap_tnt_NavigationList_ItemBottomMarginInOverflowPopup;
 				border: @_sap_tnt_NavigationList_ItemBorderStyleColor;
@@ -703,30 +690,45 @@ html[dir=rtl] .sapTntNLISelected:not(.sapTntNLIDisabled) {
 			.sapTntNLIExternalLinkIcon {
 				margin-right: 0;
 			}
+
+			.sapMMenuItemIcon {
+				color: @_sap_tnt_NavigationList_IconColor;
+			}
+
+			.sapTntNLIExpandIcon {
+				color: @_sap_tnt_NavigationList_ExpandIconColor;
+			}
+
+			.sapMMenuItemText {
+				color: @sapUiListTextColor;
+			}
+
+			&.sapMMenuItemDisabled {
+				.sapMMenuItemIcon,
+				.sapMMenuItemText,
+				.sapTntNLIExpandIcon,
+				.sapTntNLIExternalLinkIcon {
+					opacity: @sapUiContentDisabledOpacity;
+				}
+			}
 		}
 	}
 
-	.sapUiMnuItmIco {
+	.sapMMenuItemIcon {
 		min-width: 1rem;
 		max-width: 1rem;
 		padding-inline-end: 0.5rem;
 	}
 }
 
-.sapTntNLMenu.sapUiMnu.sapUiSubmenu {
+.sapTntNLMenu.sapMMenu.sapMSubmenu {
 	padding: 0.5rem;
 
-	.sapUiMnuLst .sapUiMnuItm {
+	.sapMMenuList .sapMMenuItem {
 		padding-inline: 1rem;
 
-		.sapUiMnuItmIco {
-			position: relative !important;
-			width: auto;
-
-			.sapUiIcon {
-				color: @_sap_tnt_NavigationList_IconColor;
-				display: block;
-			}
+		.sapMMenuItemIcon {
+			display: none;
 		}
 
 		.sapTntNLIExtLinkOverflowIcon {
@@ -735,18 +737,15 @@ html[dir=rtl] .sapTntNLISelected:not(.sapTntNLIDisabled) {
 			font-size: 0.875rem;
 			pointer-events: all;
 			outline: none;
-			-webkit-user-select: none;  /* Chrome all / Safari all */
-			-moz-user-select: none;     /* Firefox all */
-			user-select: none;
 		}
 	}
 }
 
-.sapTntNLPopup .sapTntNLISecondLevel .sapMText{
+.sapTntNLPopup .sapTntNLISecondLevel .sapMText {
 	padding-left: 0;
 }
 
-.sapUiMnuItmExternalLink a{
+.sapTntNavMenuItemExternalLink a {
 	min-width: 100%;
 	height: 100%;
 	text-decoration: none;
@@ -762,7 +761,7 @@ html[dir=rtl] .sapTntNLISelected:not(.sapTntNLIDisabled) {
 /* Compact size */
 .sapUiSizeCompact {
 
-	.sapUiIcon > .sapUiIconTitle {
+	.sapTntNLI .sapUiIcon > .sapUiIconTitle {
 		padding-block: @_sap_tnt_NavigationList_ArrowPaddingCompact;
 		top: -@_sap_tnt_NavigationList_ArrowPaddingCompact;
 	}
@@ -771,11 +770,15 @@ html[dir=rtl] .sapTntNLISelected:not(.sapTntNLIDisabled) {
 		min-height: @_sap_tnt_NavigationList_ItemHeightCompact + @_sap_tnt_NavigationList_ItemBottomMargin;
 	}
 
-	.sapTntNLMenu.sapUiMnu li.sapUiMnuItm,
+	.sapTntNLMenu.sapMMenu li.sapMMenuItem,
 	.sapTntNLI {
 		height: @_sap_tnt_NavigationList_ItemHeightCompact;
 	}
 
+	.sapTntNLMenu.sapMMenu .sapUiIcon {
+		line-height: @_sap_tnt_NavigationList_ItemHeightCompact;
+	}
+
 	.sapTntNLPopup .sapTntNLISecondLevel .sapMText {
 		padding: 0 0.5rem;
 	}

package/src/sap/tnt/themes/base/fonts/SAP-icons-TNT.json

@@ -267,6 +267,14 @@
 	"build-code": "0xe10F",
 	"business-application-studio": "0xe110",
 	"clone-from-git": "0xe111",
-	"business-accelerator": "0xe112"
+	"business-accelerator": "0xe112",
+	"add-project": "0xe115",
+	"add-issue": "0xe116",
+	"service-estimator": "0xe114",
+	"ai-feature-estimator": "0xe113",
+	"refine-test-data": "0xe11A",
+	"navigate-source-code": "0xe119",
+	"clean-up": "0xe118",
+	"sap-fiori-tools": "0xe117"
  }
 }

package/src/sap/tnt/themes/sap_hcb/base_NavigationList.less

@@ -18,7 +18,10 @@
 @_sap_tnt_NavigationList_LastItemBorderStyleColor: none;
 @_sap_tnt_NavigationList_ItemBorderRadius: 0;
 @_sap_tnt_NavigationList_ItemBottomMargin: 0;
+@_sap_tnt_NavigationList_ItemBottomMarginInOverflowPopup: 0.25rem;
 @_sap_tnt_NavigationList_ItemBottomMarginCompact: 0;
+@_sap_tnt_NavigationList_ExpandIconWidth: 2rem;
+@_sap_tnt_NavigationList_ExpandIconFontSize: 0.875rem;
 @_sap_tnt_NavigationList_ItemTransition: none;
 @_sap_tnt_NavigationList_NoIconsGroupPadding: 1rem;
 @_sap_tnt_NavigationList_NoIconsNestedItemPadding: 1rem;
@@ -39,6 +42,7 @@
 @_sap_tnt_NavigationList_Padding: 0;
 @_sap_tnt_NavigationList_PaddingCompact: 0;
 @_sap_tnt_NavigationList_PopupPadding: 0;
+@_sap_tnt_NavigationList_ArrowPaddingCompact: 0.3125rem;
 @_sap_tnt_NavigationList_ParentPopupBorderRadius: @sapUiPopoverBorderCornerRadius;
 @_sap_tnt_NavigationList_PopupItemPadding: 0 1rem;
 @_sap_tnt_NavigationList_PopupIconWidth: 1rem;
@@ -474,38 +478,29 @@
 	}
 }
 
-.sapTntNLMenu.sapUiMnu {
-	box-shadow: @_sap_tnt_NavigationList_PopupBoxShadow;
+.sapTntNLMenu.sapMMenu {
 
-	&:not(.sapUiSubmenu) {
+	&:not(.sapMSubmenu) {
 		padding: @_sap_tnt_NavigationList_PopupPadding;
-		border-radius: @_sap_tnt_NavigationList_ParentPopupBorderRadius;
-	}
-
-	&.sapUiSubmenu {
-		padding: 0.5rem;
 	}
 
-	.sapUiMnuItmSbMnu:empty {
+	.sapMMenuItemSubMenu:empty {
 		min-width: initial;
 		padding-inline-end: initial;
 	}
 
 	// parent menu
-	&:not(.sapUiSubmenu) .sapUiMnuLst .sapUiMnuItm  {
+	&:not(.sapMSubmenu) .sapMMenuList .sapMMenuItem  {
 		font-weight: @_sap_tnt_NavigationList_GroupTextWeight;
 
-		.sapUiMnuItmIco {
-			position: relative !important;
-			width: auto;
-
+		.sapMMenuItemIcon {
 			.sapUiIcon {
 				color: @_sap_tnt_NavigationList_IconColor;
 				display: block;
 			}
 		}
 
-		.sapUiMnuItmSbMnu {
+		.sapMMenuItemSubMenu {
 			position: static; // default one
 			display: flex;
 			align-items: center;
@@ -514,7 +509,7 @@
 			height: 100%;
 			padding-inline-start: 0.5rem;
 			padding-inline-end: 0;
-			min-width: inherit;
+			min-width: @_sap_tnt_NavigationList_ExpandIconWidth;
 			min-height: inherit;
 
 			&:empty {
@@ -523,17 +518,13 @@
 
 			.sapUiIconMirrorInRTL::after {
 				content: "\e1ed";
-				font-size: 0.75rem;
+				font-size: @_sap_tnt_NavigationList_ExpandIconFontSize;
 				color: @_sap_tnt_NavigationList_IconColor;
 			}
 		}
 
-		.sapUiMnuItmR {
-			display: none;
-		}
-
-		&.sapUiMnuItmSubMnuOpen,
-		&.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov {
+		&.sapMMenuItemSubMenuOpen,
+		&.sapMMenuItemSubMenuOpen:hover {
 			border-bottom: none;
 			background-color: @sapUiListHoverBackground;
 
@@ -547,21 +538,17 @@
 		}
 	}
 
-	.sapUiMnuLst {
-		li.sapUiMnuItm {
+	.sapMMenuList {
+		li.sapMMenuItem {
 			display: flex;
 			align-items: center;
 			height: @_sap_tnt_NavigationList_ItemHeight;
-			padding-inline: 0.5rem;
+			padding-inline: 1rem 0.375rem;
 			border-radius: @_sap_tnt_NavigationList_ItemBorderRadius;
 			transition: @_sap_tnt_NavigationList_ItemTransition;
 			font-size: @sapMFontMediumSize;
 
-			.sapUiMnuItmL {
-				display: none;
-			}
-
-			.sapUiMnuItmTxt {
+			.sapMMenuItemText {
 				display: flex;
 				align-items: center;
 				margin: 0 !important;
@@ -574,54 +561,54 @@
 				outline: @sapUiContentFocusStyle @sapUiContentFocusWidth @sapUiContentFocusColor;
 			}
 
-			outline-offset: 0;
-
 			&:not(:last-child) {
-				margin-bottom: 0.1875rem;
+				margin-bottom: @_sap_tnt_NavigationList_ItemBottomMarginInOverflowPopup;
 				border: @_sap_tnt_NavigationList_ItemBorderStyleColor;
 				border-width: @_sap_tnt_NavigationList_ItemBorderWidth;
 			}
+
+			.sapTntNLIExpandIcon {
+				margin: 0;
+			}
+
+			.sapTntNLIExternalLinkIcon {
+				margin-right: 0;
+			}
 		}
 	}
 
-	.sapUiMnuItmIco {
+	.sapMMenuItemIcon {
 		min-width: 1rem;
 		max-width: 1rem;
 		padding-inline-end: 0.5rem;
 	}
-
 }
 
-.sapTntNLMenu.sapUiMnu.sapUiSubmenu {
-	.sapUiMnuLst {
-		.sapUiMnuItm {
-			.sapUiMnuItmIco {
-				position: relative !important;
-				width: auto;
-				.sapUiIcon {
-					color: @_sap_tnt_NavigationList_IconColor;
-					display: block;
-				}
-			}
-			.sapTntNLIExtLinkOverflowIcon {
-				color: @_sap_tnt_NavigationList_ExpandIconColor;
-				padding-left: 0.5rem;
-				font-size: 0.875rem;
-				pointer-events: all;
-				outline: none;
-				-webkit-user-select: none;  /* Chrome all / Safari all */
-				-moz-user-select: none;     /* Firefox all */
-				user-select: none;
-			}
+.sapTntNLMenu.sapMMenu.sapMSubmenu {
+	padding: 0.5rem;
+
+	.sapMMenuList .sapMMenuItem {
+		padding-inline: 1rem;
+
+		.sapMMenuItemIcon {
+			display: none;
+		}
+
+		.sapTntNLIExtLinkOverflowIcon {
+			color: @_sap_tnt_NavigationList_ExpandIconColor;
+			padding-left: 0.5rem;
+			font-size: 0.875rem;
+			pointer-events: all;
+			outline: none;
 		}
 	}
 }
 
-.sapTntNLPopup .sapTntNLISecondLevel .sapMText{
+.sapTntNLPopup .sapTntNLISecondLevel .sapMText {
 	padding-left: 0;
 }
 
-.sapUiMnuItmExternalLink a{
+.sapTntNavMenuItemExternalLink a {
 	min-width: 100%;
 	height: 100%;
 	text-decoration: none;
@@ -632,24 +619,21 @@
 	align-items: center;
 	box-sizing: border-box;
 	color: @_sap_tnt_NavigationList_ExpandIconColor;
-
-	.sapTntNLIExternalLinkIcon::before {
-		margin-left: 0.8rem;
-	}
 }
 
 /* Compact size */
 .sapUiSizeCompact {
 
-	.sapTntNL {
-		padding: @_sap_tnt_NavigationList_PaddingCompact;
+	.sapUiIcon > .sapUiIconTitle {
+		padding-block: @_sap_tnt_NavigationList_ArrowPaddingCompact;
+		top: -@_sap_tnt_NavigationList_ArrowPaddingCompact;
 	}
 
 	.sapTntNL.sapTntNLCollapsed li:not(.sapTntNLSeparator) {
-		min-height: @_sap_tnt_NavigationList_ItemHeightCompact + @_sap_tnt_NavigationList_ItemBottomMarginCompact;
+		min-height: @_sap_tnt_NavigationList_ItemHeightCompact + @_sap_tnt_NavigationList_ItemBottomMargin;
 	}
 
-	.sapTntNLMenu.sapUiMnu li.sapUiMnuItm,
+	.sapTntNLMenu.sapMMenu li.sapMMenuItem,
 	.sapTntNLI {
 		height: @_sap_tnt_NavigationList_ItemHeightCompact;
 	}
@@ -666,10 +650,6 @@
 		padding: 0.5rem 0;
 	}
 
-	.sapTntNL img.sapTntNLIIcon {
-	  padding: 0.5rem 0.4375rem;
-	}
-
 	.sapTntNLPopup span.sapTntNLIIcon {
 		width: 0.5rem;
 		min-width: 0.5rem;
@@ -679,21 +659,6 @@
 		padding-left: 0;
 	}
 
-	// NavigationList with icons
-	.sapTntNL:not(.sapTntNLNoIcons) {
-
-		span.sapTntNLIIcon {
-			width: @_sap_tnt_NavigationList_GroupIconWidth;
-		}
-	}
-
-	.sapTntNL:not(.sapTntNLPopup) {
-		.sapTntNLI,
-		.sapTntNLSeparator {
-			margin-bottom: @_sap_tnt_NavigationList_ItemBottomMarginCompact;
-		}
-	}
-
 	.sapTntNLCollapsed {
 		.sapTntNLI:not(.sapTntNLIDisabled):not(.sapTntNLIActive):not(.sapTntNLINoHoverEffect) {
 			[tabindex]:hover,
@@ -702,4 +667,4 @@
 			}
 		}
 	}
-}
+}