From dcde7dc277dc76ada0ad9d5d7ee7dd78d2231558 Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Thu, 6 Nov 2025 13:54:49 +0200 Subject: [PATCH 1/8] feat(ui5-user-settings-account-view): introduce new component --- packages/fiori/README.md | 79 ++++++------- packages/fiori/src/UserSettingsAccountView.ts | 105 ++++++++++++++++++ .../src/UserSettingsAccountViewTemplate.tsx | 45 ++++++++ packages/fiori/src/bundle.esm.ts | 1 + .../fiori/src/i18n/messagebundle.properties | 8 +- .../src/themes/UserSettingsAccountView.css | 77 +++++++++++++ .../fiori/test/pages/UserSettingsDialog.html | 52 ++++----- .../UserSettingsAccountView.mdx | 8 ++ .../fiori/UserSettingsDialog/Basic/main.js | 8 +- .../UserSettingsDialog/Basic/sample.html | 32 ++---- 10 files changed, 317 insertions(+), 98 deletions(-) create mode 100644 packages/fiori/src/UserSettingsAccountView.ts create mode 100644 packages/fiori/src/UserSettingsAccountViewTemplate.tsx create mode 100644 packages/fiori/src/themes/UserSettingsAccountView.css create mode 100644 packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAccountView.mdx diff --git a/packages/fiori/README.md b/packages/fiori/README.md index 0d63b4789b67..103c5ffda35c 100644 --- a/packages/fiori/README.md +++ b/packages/fiori/README.md @@ -7,45 +7,46 @@ such as a common header (ShellBar). ## Provided components -| Web Component | Tag name | Module import | -|-------------------------------------------|--------------------------------|-----------------------------------------------------------------------| -| Barcode Scanner Dialog | `ui5-barcode-scanner-dialog` | `import "@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js";` | -| Dynamic Side Content | `ui5-dynamic-side-content` | `import "@ui5/webcomponents-fiori/dist/DynamicSideContent.js";` | -| Flexible Column Layout | `ui5-flexible-column-layout` | `import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";` | -| Illustrated Message | `ui5-illustrated-message` | `import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";` | -| Media Gallery | `ui5-media-gallery` | `import "@ui5/webcomponents-fiori/dist/MediaGallery.js";` | -| Media Gallery Item | `ui5-media-gallery-item` | comes with `ui5-media-gallery` | -| Notification List | `ui5-notification-list` | `import "@ui5/webcomponents-fiori/dist/NotifcationList.js";` | -| Notification List Item | `ui5-li-notification` | `import "@ui5/webcomponents-fiori/dist/NotifcationListItem.js";` | -| Notification Group List Item | `ui5-li-notification-group` | `import "@ui5/webcomponents-fiori/dist/NotifcationListGroupItem.js";` | -| Notification Action | `ui5-notification-action` | `import "@ui5/webcomponents-fiori/dist/NotificationAction.js";` | -| Page | `ui5-page` | `import "@ui5/webcomponents-fiori/dist/Page.js";` | -| Product Switch | `ui5-product-switch` | `import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";` | -| Product Switch Item | `ui5-product-switch-item` | `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";` | -| Shell Bar | `ui5-shellbar` | `import "@ui5/webcomponents-fiori/dist/ShellBar.js";` | -| Shell Bar Item | `ui5-shellbar-item` | `import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";` | -| Side Navigation | `ui5-side-navigation` | `import "@ui5/webcomponents-fiori/dist/SideNavigation.js";` | -| Side Navigation Item | `ui5-side-navigation-item` | `import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";` | -| Side Navigation Sub Item | `ui5-side-navigation-sub-item` | `import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";` | -| Side Navigation Group | `ui5-side-navigation-group` | `import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";` | -| Timeline | `ui5-timeline` | `import "@ui5/webcomponents-fiori/dist/Timeline.js";` | -| Timeline Item | `ui5-timeline-item` | comes with `ui5-timeline` | -| Timeline Group Item | `ui5-timeline-group-item` | `import "@ui5/webcomponents-fiori/dist/TimelineGroupItem.js";` | -| Upload Collection | `ui5-upload-collection` | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";` | -| Upload Collection Item | `ui5-upload-collection-item` | `import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";` | -| User Menu | `ui5-user-menu` | `import "@ui5/webcomponents-fiori/dist/UserMenu.js";` | -| User Menu Account | `ui5-user-menu-account` | `import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";` | -| User Menu Item | `ui5-user-menu-item` | `import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";` | -| User Menu Item Group | `ui5-user-menu-item-group` | `import "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";` | -| User Settings Dialog | `ui5-user-settings-dialog` | `import "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js";` | -| User Settings Item | `ui5-user-settings-item` | `import "@ui5/webcomponents-fiori/dist/UserSettingsItem.js";` | -| User Settings View | `ui5-user-settings-view` | `import "@ui5/webcomponents-fiori/dist/UserSettingsView.js";` | -| View Settings Dialog | `ui5-view-settings-dialog` | `import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";` | -| View Settings Dialog - Sort Item | `ui5-sort-item` | `import "@ui5/webcomponents-fiori/dist/SortItem.js";` | -| View Settings Dialog - Filter Item | `ui5-filter-item` | `import "@ui5/webcomponents-fiori/dist/FilterItem.js";` | -| View Settings Dialog - Filter Item Option | `ui5-filter-item-option` | `import "@ui5/webcomponents-fiori/dist/FilterItemOption.js";` | -| Wizard | `ui5-wizard` | `import "@ui5/webcomponents-fiori/dist/Wizard.js";` | -| Wizard Step | `ui5-wizard-step` | comes with `ui5-wizard` | +| Web Component | Tag name | Module import | +|-------------------------------------------|----------------------------------|-----------------------------------------------------------------------| +| Barcode Scanner Dialog | `ui5-barcode-scanner-dialog` | `import "@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js";` | +| Dynamic Side Content | `ui5-dynamic-side-content` | `import "@ui5/webcomponents-fiori/dist/DynamicSideContent.js";` | +| Flexible Column Layout | `ui5-flexible-column-layout` | `import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";` | +| Illustrated Message | `ui5-illustrated-message` | `import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";` | +| Media Gallery | `ui5-media-gallery` | `import "@ui5/webcomponents-fiori/dist/MediaGallery.js";` | +| Media Gallery Item | `ui5-media-gallery-item` | comes with `ui5-media-gallery` | +| Notification List | `ui5-notification-list` | `import "@ui5/webcomponents-fiori/dist/NotifcationList.js";` | +| Notification List Item | `ui5-li-notification` | `import "@ui5/webcomponents-fiori/dist/NotifcationListItem.js";` | +| Notification Group List Item | `ui5-li-notification-group` | `import "@ui5/webcomponents-fiori/dist/NotifcationListGroupItem.js";` | +| Notification Action | `ui5-notification-action` | `import "@ui5/webcomponents-fiori/dist/NotificationAction.js";` | +| Page | `ui5-page` | `import "@ui5/webcomponents-fiori/dist/Page.js";` | +| Product Switch | `ui5-product-switch` | `import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";` | +| Product Switch Item | `ui5-product-switch-item` | `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";` | +| Shell Bar | `ui5-shellbar` | `import "@ui5/webcomponents-fiori/dist/ShellBar.js";` | +| Shell Bar Item | `ui5-shellbar-item` | `import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";` | +| Side Navigation | `ui5-side-navigation` | `import "@ui5/webcomponents-fiori/dist/SideNavigation.js";` | +| Side Navigation Item | `ui5-side-navigation-item` | `import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";` | +| Side Navigation Sub Item | `ui5-side-navigation-sub-item` | `import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";` | +| Side Navigation Group | `ui5-side-navigation-group` | `import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";` | +| Timeline | `ui5-timeline` | `import "@ui5/webcomponents-fiori/dist/Timeline.js";` | +| Timeline Item | `ui5-timeline-item` | comes with `ui5-timeline` | +| Timeline Group Item | `ui5-timeline-group-item` | `import "@ui5/webcomponents-fiori/dist/TimelineGroupItem.js";` | +| Upload Collection | `ui5-upload-collection` | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";` | +| Upload Collection Item | `ui5-upload-collection-item` | `import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";` | +| User Menu | `ui5-user-menu` | `import "@ui5/webcomponents-fiori/dist/UserMenu.js";` | +| User Menu Account | `ui5-user-menu-account` | `import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";` | +| User Menu Item | `ui5-user-menu-item` | `import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";` | +| User Menu Item Group | `ui5-user-menu-item-group` | `import "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";` | +| User Settings Dialog | `ui5-user-settings-dialog` | `import "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js";` | +| User Settings Item | `ui5-user-settings-item` | `import "@ui5/webcomponents-fiori/dist/UserSettingsItem.js";` | +| User Settings View | `ui5-user-settings-view` | `import "@ui5/webcomponents-fiori/dist/UserSettingsView.js";` | +| User Settings Account View | `ui5-user-settings-account-view` | `import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js";` | +| View Settings Dialog | `ui5-view-settings-dialog` | `import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";` | +| View Settings Dialog - Sort Item | `ui5-sort-item` | `import "@ui5/webcomponents-fiori/dist/SortItem.js";` | +| View Settings Dialog - Filter Item | `ui5-filter-item` | `import "@ui5/webcomponents-fiori/dist/FilterItem.js";` | +| View Settings Dialog - Filter Item Option | `ui5-filter-item-option` | `import "@ui5/webcomponents-fiori/dist/FilterItemOption.js";` | +| Wizard | `ui5-wizard` | `import "@ui5/webcomponents-fiori/dist/Wizard.js";` | +| Wizard Step | `ui5-wizard-step` | comes with `ui5-wizard` | ## Provided assets diff --git a/packages/fiori/src/UserSettingsAccountView.ts b/packages/fiori/src/UserSettingsAccountView.ts new file mode 100644 index 000000000000..d2d554ea3c7a --- /dev/null +++ b/packages/fiori/src/UserSettingsAccountView.ts @@ -0,0 +1,105 @@ +import UserSettingsView from "./UserSettingsView.js"; +import UserSettingsAccountViewTemplate from "./UserSettingsAccountViewTemplate.js"; +import { + customElement, slot, eventStrict as event, property, +} from "@ui5/webcomponents-base/dist/decorators.js"; +import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; +import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import UserSettingViewCss from "./generated/themes/UserSettingsView.css.js"; +import UserSettingsAccountViewCss from "./generated/themes/UserSettingsAccountView.css.js"; +import type UserMenuAccount from "./UserMenuAccount.js"; + +// Texts +import { + USER_SETTINGS_ACCOUNT_EDIT_AVATAR_TXT, + USER_SETTINGS_ACCOUNT_MANAGE_ACCOUNT_BUTTON_TXT, +} from "./generated/i18n/i18n-defaults.js"; +import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; + +/** + * @class + * ### Overview + * + * The `ui5-user-settings-account-view` represents a view displayed in the `ui5-user-settings-item`. + * + * @constructor + * @extends UI5Element + * @experimental + * @public + * @since 2.17.0 + */ +@customElement({ + tag: "ui5-user-settings-account-view", + renderer: jsxRenderer, + template: UserSettingsAccountViewTemplate, + styles: [UserSettingViewCss, UserSettingsAccountViewCss], +}) +/** + * Fired when the "Edit Accounts" button is selected. + * @public + */ +@event("edit-accounts-click") + +/** + * Fired when the "Manage Account" button is selected. + * @public + */ +@event("manage-account-click") + +class UserSettingsAccountView extends UserSettingsView { + eventDetails!: { + "edit-accounts-click": void; + "manage-account-click": void; + } + /** + * Defines the user accounts + * + * @public + */ + @slot({ + type: HTMLElement, + individualSlots: true, + invalidateOnChildChange: { + properties: true, + slots: false, + }, + }) + account?: Array; + + /** + * Defines if the User Menu shows the Manage Account option. + * + * @default false + * @public + */ + @property({ type: Boolean }) + showManageAccount = false; + + @i18n("@ui5/webcomponents-fiori") + static i18nBundle: I18nBundle; + + _handleEditAvatarClick(e: CustomEvent) { + if (e.type === "click") { + this.fireDecoratorEvent("edit-accounts-click"); + } + } + + _handleManageAccountClick() { + this.fireDecoratorEvent("manage-account-click"); + } + + get _manageAccountButtonText() { + return UserSettingsAccountView.i18nBundle.getText(USER_SETTINGS_ACCOUNT_MANAGE_ACCOUNT_BUTTON_TXT); + } + + get _editAvatarTooltip() { + return UserSettingsAccountView.i18nBundle.getText(USER_SETTINGS_ACCOUNT_EDIT_AVATAR_TXT); + } + + get _account() { + return this?.account?.[0]; + } +} + +UserSettingsAccountView.define(); +export default UserSettingsAccountView; diff --git a/packages/fiori/src/UserSettingsAccountViewTemplate.tsx b/packages/fiori/src/UserSettingsAccountViewTemplate.tsx new file mode 100644 index 000000000000..6cd0815292b6 --- /dev/null +++ b/packages/fiori/src/UserSettingsAccountViewTemplate.tsx @@ -0,0 +1,45 @@ +import type UserSettingsAccountView from "./UserSettingsAccountView.js"; +import Avatar from "@ui5/webcomponents/dist/Avatar.js"; +import personPlaceholder from "@ui5/webcomponents-icons/person-placeholder.js"; +import Tag from "@ui5/webcomponents/dist/Tag.js"; +import Icon from "@ui5/webcomponents/dist/Icon.js"; +import edit from "@ui5/webcomponents-icons/edit.js"; +import Text from "@ui5/webcomponents/dist/Text.js"; +import Button from "@ui5/webcomponents/dist/Button.js"; +import userSettings from "@ui5/webcomponents-icons/user-settings.js"; + +export default function UserSettingsAccountViewTemplate(this: UserSettingsAccountView) { + return ( + + ); +} diff --git a/packages/fiori/src/bundle.esm.ts b/packages/fiori/src/bundle.esm.ts index 65cdeab34fa2..1d4c9bacc443 100644 --- a/packages/fiori/src/bundle.esm.ts +++ b/packages/fiori/src/bundle.esm.ts @@ -50,6 +50,7 @@ import SortItem from "./SortItem.js"; import UserSettingsItem from "./UserSettingsItem.js"; import SettingsDialog from "./UserSettingsDialog.js"; import UserSettingsView from "./UserSettingsView.js"; +import UserSettingsAccountView from "./UserSettingsAccountView.js"; import Timeline from "./Timeline.js"; import TimelineGroupItem from "./TimelineGroupItem.js"; import NavigationLayout from "./NavigationLayout.js"; diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties index bfbdaf2e90a9..bc13f3fa3680 100644 --- a/packages/fiori/src/i18n/messagebundle.properties +++ b/packages/fiori/src/i18n/messagebundle.properties @@ -597,4 +597,10 @@ USER_SETTINGS_LIST_ARIA_ROLE_DESC=User settings Item USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT=Close #XTXT: User settings dialog not result text -USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT=No search results \ No newline at end of file +USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT=No search results + +#XTXT: User settings account view edit avatar text +USER_SETTINGS_ACCOUNT_EDIT_AVATAR_TXT=Edit avatar + +#XTXT: User settings account view manage button +USER_SETTINGS_ACCOUNT_MANAGE_ACCOUNT_BUTTON_TXT=Manage account \ No newline at end of file diff --git a/packages/fiori/src/themes/UserSettingsAccountView.css b/packages/fiori/src/themes/UserSettingsAccountView.css new file mode 100644 index 000000000000..f01b7d6c3c16 --- /dev/null +++ b/packages/fiori/src/themes/UserSettingsAccountView.css @@ -0,0 +1,77 @@ +.ui5-user-settings-account-view { + padding: 1rem; +} + +.ui5-user-settings-account { + display: flex; + align-items: center; + flex-direction: column; + /*padding: 40px 8px 8px 8px;*/ + /*gap: 8px;*/ +} + +.ui5-user-settings-account-avatar { + display: flex; + max-width: 112px; + max-height: 112px; + justify-content: center; + align-items: center; + gap: 10px; +} + +.ui5-user-settings-account-title { + text-align: center; + margin-top: 0.25rem; + font-family: var(--sapFontFamily); + font-size: var(--sapFontLargeSize, 160rem); + color: var(--sapTextColor); + font-style: normal; + font-weight: 700; + line-height: normal; + align-self: stretch; +} + +.ui5-user-settings-account-subtitleText { + text-align: center; + margin-bottom: 0.25rem; + font-family: var(--sapFontFamily); + font-size: var(--sapFontSize, 140rem); + color: var(--sapContent_LabelColor); + overflow: hidden; + text-overflow: ellipsis; + font-style: normal; + font-weight: 400; + line-height: normal; + align-self: stretch; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.ui5-user-settings-account-description { + text-align: center; + margin-bottom: 0.25rem; + font-family: var(--sapFontFamily); + font-size: var(--sapFontSize, 140rem); + color: var(--sapContent_LabelColor); + overflow: hidden; + text-overflow: ellipsis; + font-style: normal; + font-weight: 400; + line-height: normal; + align-self: stretch; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.ui5-user-settings-account-btn { + display: flex; + padding: 6px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: var(--sapButton_BorderCornerRadius); + border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + background: var(--sapButton_Background); +} diff --git a/packages/fiori/test/pages/UserSettingsDialog.html b/packages/fiori/test/pages/UserSettingsDialog.html index 8e2448036cce..e57a0a5bf83d 100644 --- a/packages/fiori/test/pages/UserSettingsDialog.html +++ b/packages/fiori/test/pages/UserSettingsDialog.html @@ -40,30 +40,21 @@ User settings - - Alain Chevalier -
-
- Name: - Alain Chevalier -
-
- Email: - alian.chevalier@sap.com -
-
- Server: - delivery-001.sap.com -
-
- Personalization
- Reset All Personalization - - - Reset your personalization settings for the launchpad (such as theme, language, user activities, and home page content). - - - + + + + + + + Reset your personalization settings for the launchpad (such as theme, language, user activities, and home page content). + + + + @@ -427,12 +418,12 @@ const menuShellBar = document.getElementById("userMenuShellBar"); const settingsDialog = document.getElementById("setting"); const settingsDialogItems = [...document.getElementsByTagName("ui5-user-settings-item")]; + const account = document.getElementById("account"); const mobileSecondPage = document.getElementById("mobile-second-page"); const mobile1Button = document.getElementById("mobile1-button"); const mobile2Button = document.getElementById("mobile2-button"); - const resetAllButton = document.getElementById("reset-all-button"); const additionalDialog = document.getElementById("additionalDialog"); const additionalDialogClosers = [...additionalDialog.querySelectorAll(".dialogCloser")]; const resetAll = document.getElementById("resetAll"); @@ -468,6 +459,14 @@ } }); + account.addEventListener("edit-accounts-click", function () { + console.log("Avatar clicked"); + }); + + account.addEventListener("manage-account-click", function () { + console.log("Manage account clicked"); + }); + direction.addEventListener("ui5-change", function() { document.body.setAttribute("dir", direction.checked ? "rtl" : "ltr"); window["sap-ui-webcomponents-bundle"].applyDirection(); @@ -487,9 +486,6 @@ mobileSecondPage.text = "Android"; }); - resetAllButton.addEventListener("click", function () { - additionalDialog.open = true; - }); additionalDialogClosers.forEach(btn => { btn.addEventListener("click", () => { diff --git a/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAccountView.mdx b/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAccountView.mdx new file mode 100644 index 000000000000..1d6d9f368a14 --- /dev/null +++ b/packages/website/docs/_components_pages/fiori/UserSettingsDialog/UserSettingsAccountView.mdx @@ -0,0 +1,8 @@ +--- +slug: ../UserSettingsAccountView +sidebar_class_name: newComponentBadge +--- + +<%COMPONENT_OVERVIEW%> + +<%COMPONENT_METADATA%> \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js index e01e75d41a00..b63408a57263 100644 --- a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js +++ b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js @@ -1,3 +1,4 @@ +import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsItem.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js"; @@ -38,7 +39,6 @@ const settingsDialogItems = [...document.getElementsByTagName("ui5-user-settings const mobileSecondPage = document.getElementById("mobile-second-page"); const mobile1Button = document.getElementById("mobile1-button"); const mobile2Button = document.getElementById("mobile2-button"); -const resetAllButton = document.getElementById("reset-all-button"); const additionalDialog = document.getElementById("additionalDialog"); const additionalDialogClosers = [...additionalDialog.querySelectorAll(".dialogCloser")]; const resetAll = document.getElementById("resetAll"); @@ -52,7 +52,7 @@ shellbar.addEventListener("ui5-profile-click", (event) => { console.log(" menuShellBar ui5-profile-click") menuShellBar.opener = event.detail.targetRef; - if(menuShellBar.open){ + if (menuShellBar.open) { menuShellBar.open = false; } else { menuShellBar.open = true; @@ -79,10 +79,6 @@ mobile2Button.addEventListener("click", function () { mobileSecondPage.text = "Android"; }); -resetAllButton.addEventListener("click", function () { - additionalDialog.open = true; -}); - additionalDialogClosers.forEach(btn => { btn.addEventListener("click", () => { additionalDialog.open = false; diff --git a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html index 5e42ba84fb94..11b496486c43 100644 --- a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html +++ b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html @@ -38,30 +38,14 @@ - - Alain Chevalier -
-
- Name: - Alain Chevalier -
-
- Email: - alian.chevalier@sap.com -
-
- Server: - delivery-001.sap.com -
-
- Personalization
- Reset All Personalization - - - Reset your personalization settings for the launchpad (such as theme, language, user activities, and home page content). - - - + + + + From 490414af37e267fe1aa42c4aa004dd58164f06a8 Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Tue, 11 Nov 2025 10:38:36 +0200 Subject: [PATCH 2/8] feat(ui5-user-settings-account-view): introduce new component --- packages/fiori/cypress/specs/UserMenu.cy.tsx | 1 - .../cypress/specs/UserSettingsDialog.cy.tsx | 254 +++++++++++++++++- packages/fiori/src/UserSettingsAccountView.ts | 24 +- .../src/UserSettingsAccountViewTemplate.tsx | 6 +- .../src/themes/UserSettingsAccountView.css | 9 +- .../fiori/UserSettingsDialog/Basic/main.js | 14 + .../UserSettingsDialog/Basic/sample.html | 8 + .../patterns/UXCIntegration/Basic/main.css | 11 - .../patterns/UXCIntegration/Basic/main.js | 1 + .../patterns/UXCIntegration/Basic/sample.html | 31 +-- 10 files changed, 307 insertions(+), 52 deletions(-) diff --git a/packages/fiori/cypress/specs/UserMenu.cy.tsx b/packages/fiori/cypress/specs/UserMenu.cy.tsx index 79b245a98a62..b86b44c4aeff 100644 --- a/packages/fiori/cypress/specs/UserMenu.cy.tsx +++ b/packages/fiori/cypress/specs/UserMenu.cy.tsx @@ -116,7 +116,6 @@ describe("Initial rendering", () => { cy.get("@info").should("have.class", "ui5-user-menu-selected-account-additional-info"); }); - it("tests config show-manage-account", () => { cy.mount( <> diff --git a/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx b/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx index b509f9803e2e..d135f665d782 100644 --- a/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx +++ b/packages/fiori/cypress/specs/UserSettingsDialog.cy.tsx @@ -1,8 +1,11 @@ import UserSettingsItem from "../../src/UserSettingsItem.js"; import UserSettingsView from "../../src/UserSettingsView.js"; +import UserSettingsAccountView from "../../src/UserSettingsAccountView.js"; +import UserMenuAccount from "../../src/UserMenuAccount.js"; import UserSettingsDialog from "../../src/UserSettingsDialog.js"; import Button from "@ui5/webcomponents/dist/Button.js"; import Text from "@ui5/webcomponents/dist/Text.js"; +import {USER_SETTINGS_ACCOUNT_MANAGE_ACCOUNT_BUTTON_TXT} from "../../src/generated/i18n/i18n-defaults.js"; describe("Initial rendering", () => { it("tests no config provided", () => { @@ -56,7 +59,7 @@ describe("Initial rendering", () => { cy.get("@settingView").should("exist"); }); - it("tests setting item no config", () => { + it("tests fixed setting item no config", () => { cy.mount( @@ -653,3 +656,252 @@ describe("Responsiveness", () => { cy.get("@navigateBackButton").should("have.attr", "icon", "nav-back"); }); }); + +describe("User account view", () => { + it("tests setting item no config", () => { + cy.mount( + + + + + ); + cy.get("[ui5-user-settings-dialog]").as("settings"); + cy.get("@settings").should("exist"); + cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem"); + cy.get("@settingItem").should("exist"); + cy.get("@settingItem").find("[ui5-user-settings-account-view]").as("settingView"); + cy.get("@settingView").should("exist"); + }); + + it("tests setting text", () => { + cy.mount( + + + + + ); + cy.get("[ui5-user-settings-dialog]").as("settings"); + cy.get("@settings").should("exist"); + cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem"); + cy.get("@settingItem").find("[ui5-user-settings-account-view]").as("settingView"); + cy.get("@settingView").should("exist"); + cy.get("@settingView").should("have.attr", "text", "Setting1"); + cy.get("@settingView").should("have.length", 1); + cy.get("@settingItem").shadow().find("[ui5-tabcontainer]").should("not.exist"); + }); + + it("tests setting account title", () => { + cy.mount( + + + + + + + ); + cy.get("[ui5-user-settings-dialog]").as("settings"); + cy.get("@settings").should("exist"); + cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem"); + cy.get("@settingItem").find("[ui5-user-settings-account-view]").as("settingView"); + cy.get("@settingView").should("exist"); + cy.get("@settingView").shadow().find("[ui5-text]").as("name"); + cy.get("@name").should("have.length", 1); + cy.get("@name").contains("Alain Chevalier"); + cy.get("@name").should("have.class", "ui5-user-settings-account-title"); + }); + + it("tests setting account subtitle", () => { + cy.mount( + + + + + + + ); + cy.get("[ui5-user-settings-dialog]").as("settings"); + cy.get("@settings").should("exist"); + cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem"); + cy.get("@settingItem").find("[ui5-user-settings-account-view]").as("settingView"); + cy.get("@settingView").should("exist"); + cy.get("@settingView").shadow().find("[ui5-text]").as("email"); + cy.get("@email").should("have.length", 1); + cy.get("@email").contains("Alain.Chevalier@sap.com"); + cy.get("@email").should("have.class", "ui5-user-settings-account-subtitleText"); + }); + + it("tests setting account description", () => { + cy.mount( + + + + + + + ); + cy.get("[ui5-user-settings-dialog]").as("settings"); + cy.get("@settings").should("exist"); + cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem"); + cy.get("@settingItem").find("[ui5-user-settings-account-view]").as("settingView"); + cy.get("@settingView").should("exist"); + cy.get("@settingView").shadow().find("[ui5-text]").as("role"); + cy.get("@role").should("have.length", 1); + cy.get("@role").contains("Delivery Manager, SAP SE"); + cy.get("@role").should("have.class", "ui5-user-settings-account-description"); + }); + + it("tests config show-manage-account", () => { + cy.mount( + + + + + + + ); + cy.get("[ui5-user-settings-dialog]").as("settings"); + cy.get("@settings").should("exist"); + cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem"); + cy.get("@settingItem").should("exist"); + cy.get("@settingItem").should("have.attr", "text", "Setting"); + cy.get("@settingItem").find("[ui5-user-settings-account-view]").as("settingView"); + cy.get("@settingView").should("exist"); + cy.get("@settingView").shadow().find("[ui5-button]").contains(USER_SETTINGS_ACCOUNT_MANAGE_ACCOUNT_BUTTON_TXT.defaultText); + cy.get("@settingView").shadow().find("[ui5-button]").should("have.length", 1); + }); + + it("tests avatar default", () => { + cy.mount( + + + + + + + ); + cy.get("[ui5-user-settings-dialog]").as("settings"); + cy.get("@settings").should("exist"); + cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem"); + cy.get("@settingItem").find("[ui5-user-settings-account-view]").as("settingView"); + cy.get("@settingView").shadow().find("[ui5-avatar]").as("avatar"); + cy.get("@avatar").should("exist"); + cy.get("@avatar").should("have.length", 1); + cy.get("@avatar").should("have.attr", "fallback-icon", "person-placeholder"); + cy.get("@avatar").find("[ui5-tag]").should("exist"); + }); + + it("tests avatar initials", () => { + cy.mount( + + + + + + + ); + cy.get("[ui5-user-settings-dialog]").as("settings"); + cy.get("@settings").should("exist"); + cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem"); + cy.get("@settingItem").find("[ui5-user-settings-account-view]").as("settingView"); + cy.get("@settingView").shadow().find("[ui5-avatar]").as("avatar"); + cy.get("@avatar").should("exist"); + cy.get("@avatar").should("have.length", 1); + cy.get("@avatar").should("have.attr", "initials", "AC"); + }); + + it("tests avatar initials", () => { + cy.mount( + + + + + + + ); + cy.get("[ui5-user-settings-dialog]").as("settings"); + cy.get("@settings").should("exist"); + cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem"); + cy.get("@settingItem").find("[ui5-user-settings-account-view]").as("settingView"); + cy.get("@settingView").shadow().find("[ui5-avatar]").as("avatar"); + cy.get("@avatar").should("exist"); + cy.get("@avatar").should("have.length", 1); + cy.get("@avatar").find("img").as("image"); + cy.get("@image").should("have.length", 1); + cy.get("@image").should("have.attr", "src", "./../../test/pages/img/man_avatar_1.png"); + }); + + it("tests edit-avatar-click event", () => { + cy.mount( + + + + + + + ); + cy.get("[ui5-user-settings-dialog]").as("settings"); + cy.get("@settings").should("exist"); + cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem"); + cy.get("@settingItem").find("[ui5-user-settings-account-view]").as("settingView"); + cy.get("@settingView") + .shadow() + .find("[ui5-avatar]") + .as("avatar"); + + cy.get("@settingView") + .then($avatar => { + $avatar.get(0).addEventListener("edit-accounts-click", cy.stub().as("clicked")); + }); + + cy.get("@avatar").click(); + + cy.get("@clicked").should("have.been.calledOnce"); + }); + + it("tests manage-account-click event", () => { + cy.mount( + + + + + + + ); + cy.get("[ui5-user-settings-dialog]").as("settings"); + cy.get("@settings").should("exist"); + cy.get("@settings").find("[ui5-user-settings-item]").as("settingItem"); + cy.get("@settingItem").find("[ui5-user-settings-account-view]").as("settingView"); + cy.get("@settingView") + .shadow() + .find("[ui5-button]") + .eq(0) + .as("manageAccountBtn"); + + cy.get("@settingView").then($settingView => { + $settingView.get(0).addEventListener("manage-account-click", cy.stub().as("clicked")); + }); + + cy.get("@manageAccountBtn").click(); + + cy.get("@clicked").should("have.been.calledOnce"); + }); +}); diff --git a/packages/fiori/src/UserSettingsAccountView.ts b/packages/fiori/src/UserSettingsAccountView.ts index d2d554ea3c7a..ba161d7c432b 100644 --- a/packages/fiori/src/UserSettingsAccountView.ts +++ b/packages/fiori/src/UserSettingsAccountView.ts @@ -16,18 +16,6 @@ import { } from "./generated/i18n/i18n-defaults.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; -/** - * @class - * ### Overview - * - * The `ui5-user-settings-account-view` represents a view displayed in the `ui5-user-settings-item`. - * - * @constructor - * @extends UI5Element - * @experimental - * @public - * @since 2.17.0 - */ @customElement({ tag: "ui5-user-settings-account-view", renderer: jsxRenderer, @@ -46,6 +34,18 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; */ @event("manage-account-click") +/** + * @class + * ### Overview + * + * The `ui5-user-settings-account-view` represents a view displayed in the `ui5-user-settings-item`. + * + * @constructor + * @extends UserSettingsView + * @experimental + * @public + * @since 2.17.0 + */ class UserSettingsAccountView extends UserSettingsView { eventDetails!: { "edit-accounts-click": void; diff --git a/packages/fiori/src/UserSettingsAccountViewTemplate.tsx b/packages/fiori/src/UserSettingsAccountViewTemplate.tsx index 6cd0815292b6..5f3a7f3a2602 100644 --- a/packages/fiori/src/UserSettingsAccountViewTemplate.tsx +++ b/packages/fiori/src/UserSettingsAccountViewTemplate.tsx @@ -1,12 +1,12 @@ import type UserSettingsAccountView from "./UserSettingsAccountView.js"; import Avatar from "@ui5/webcomponents/dist/Avatar.js"; -import personPlaceholder from "@ui5/webcomponents-icons/person-placeholder.js"; import Tag from "@ui5/webcomponents/dist/Tag.js"; import Icon from "@ui5/webcomponents/dist/Icon.js"; -import edit from "@ui5/webcomponents-icons/edit.js"; import Text from "@ui5/webcomponents/dist/Text.js"; import Button from "@ui5/webcomponents/dist/Button.js"; -import userSettings from "@ui5/webcomponents-icons/user-settings.js"; +import personPlaceholder from "@ui5/webcomponents-icons/dist/person-placeholder.js"; +import edit from "@ui5/webcomponents-icons/dist/edit.js"; +import userSettings from "@ui5/webcomponents-icons/dist/user-settings.js"; export default function UserSettingsAccountViewTemplate(this: UserSettingsAccountView) { return ( diff --git a/packages/fiori/src/themes/UserSettingsAccountView.css b/packages/fiori/src/themes/UserSettingsAccountView.css index f01b7d6c3c16..4c9ec0acb270 100644 --- a/packages/fiori/src/themes/UserSettingsAccountView.css +++ b/packages/fiori/src/themes/UserSettingsAccountView.css @@ -6,8 +6,6 @@ display: flex; align-items: center; flex-direction: column; - /*padding: 40px 8px 8px 8px;*/ - /*gap: 8px;*/ } .ui5-user-settings-account-avatar { @@ -67,7 +65,7 @@ .ui5-user-settings-account-btn { display: flex; - padding: 6px; + justify-content: center; align-items: center; gap: 10px; @@ -75,3 +73,8 @@ border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); background: var(--sapButton_Background); } + +.ui5-user-settings-account-btn::part(button) { + padding: 6px; +} + diff --git a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js index b63408a57263..b583c7f25f5f 100644 --- a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js +++ b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js @@ -36,6 +36,8 @@ const shellbar = document.getElementById("shellbar"); const menuShellBar = document.getElementById("userMenuShellBar"); const settingsDialog = document.getElementById("settings"); const settingsDialogItems = [...document.getElementsByTagName("ui5-user-settings-item")]; +const account = document.getElementById("account"); +const resetAllButton = document.getElementById("reset-all-button"); const mobileSecondPage = document.getElementById("mobile-second-page"); const mobile1Button = document.getElementById("mobile1-button"); const mobile2Button = document.getElementById("mobile2-button"); @@ -69,6 +71,18 @@ menuShellBar.addEventListener("item-click", function (event) { } }); +account.addEventListener("edit-accounts-click", function () { + console.log("Avatar clicked"); +}); + +account.addEventListener("manage-account-click", function () { + console.log("Manage account clicked"); +}); + +resetAllButton.addEventListener("click", function () { + additionalDialog.open = true; +}); + mobile1Button.addEventListener("click", function () { mobileSecondPage.selected = true; mobileSecondPage.text = "iOS"; diff --git a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html index 11b496486c43..0b8819423be8 100644 --- a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html +++ b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html @@ -45,6 +45,14 @@ subtitle-text="alian.chevalier@sap.com" description="Delivery Manager, SAP SE"> + Personalization
+ Reset All Personalization + + + Reset your personalization settings for the launchpad (such as theme, language, user activities, and home page content). + + + diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.css b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.css index 23734f85e9b0..c0a0334a6cda 100644 --- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.css +++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.css @@ -55,17 +55,6 @@ margin: 3rem; } -.ua-info-profile{ - align-self: center; -} - -.ua-info-item{ - display: grid; - grid-template-columns: 50px 1fr; - align-items: center; - gap: 16px; -} - .ua-panel{ border-top: 2px solid lightgrey; margin: 1rem; diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js index 23c09ecefe23..ebcbe93f0239 100644 --- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js +++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js @@ -45,6 +45,7 @@ import "@ui5/webcomponents-fiori/dist/UserMenu.js"; import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js"; import "@ui5/webcomponents-fiori/dist/UserMenuItem.js"; +import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsItem.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js"; diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html index e104abcb99bc..d49910d5bc51 100644 --- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html +++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html @@ -268,26 +268,14 @@ - - -
- - - - Alain Chevalier -
- Name: - Alain Chevalier -
-
- Email: - alian.chevalier@sap.com -
-
- Server: - delivery-001.sap.com -
-
+ + + Personalization
Reset All Personalization @@ -295,7 +283,8 @@ Reset your personalization settings for the launchpad (such as theme, language, user activities, and home page content). - + + From f6f1b6101b9a2cf31f681cf134ab144c24b34955 Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Tue, 11 Nov 2025 13:43:43 +0200 Subject: [PATCH 3/8] feat(ui5-user-settings-account-view): introduce new component --- packages/fiori/src/UserSettingsAccountView.ts | 3 +- .../src/UserSettingsAccountViewTemplate.tsx | 49 ++++++++++--------- .../src/themes/UserSettingsAccountView.css | 39 +++------------ .../fiori/test/pages/UserSettingsDialog.html | 2 +- .../test/pages/styles/UserSettingsDialog.css | 2 +- 5 files changed, 36 insertions(+), 59 deletions(-) diff --git a/packages/fiori/src/UserSettingsAccountView.ts b/packages/fiori/src/UserSettingsAccountView.ts index ba161d7c432b..e2f4a439e61c 100644 --- a/packages/fiori/src/UserSettingsAccountView.ts +++ b/packages/fiori/src/UserSettingsAccountView.ts @@ -52,13 +52,12 @@ class UserSettingsAccountView extends UserSettingsView { "manage-account-click": void; } /** - * Defines the user accounts + * Defines the user account * * @public */ @slot({ type: HTMLElement, - individualSlots: true, invalidateOnChildChange: { properties: true, slots: false, diff --git a/packages/fiori/src/UserSettingsAccountViewTemplate.tsx b/packages/fiori/src/UserSettingsAccountViewTemplate.tsx index 5f3a7f3a2602..c1c9f16467d7 100644 --- a/packages/fiori/src/UserSettingsAccountViewTemplate.tsx +++ b/packages/fiori/src/UserSettingsAccountViewTemplate.tsx @@ -11,32 +11,33 @@ import userSettings from "@ui5/webcomponents-icons/dist/user-settings.js"; export default function UserSettingsAccountViewTemplate(this: UserSettingsAccountView) { return (