diff --git a/packages/fiori/README.md b/packages/fiori/README.md index 0d63b4789b67..4ebb5385c0f8 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 Account View | `ui5-user-settings-account-view` | `import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.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` | ## Provided assets 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 new file mode 100644 index 000000000000..48335de9aee0 --- /dev/null +++ b/packages/fiori/src/UserSettingsAccountView.ts @@ -0,0 +1,104 @@ +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"; + +@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 + * ### 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; + "manage-account-click": void; + } + /** + * Defines the user account. + * + * @public + */ + @slot({ + type: HTMLElement, + 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..c1c9f16467d7 --- /dev/null +++ b/packages/fiori/src/UserSettingsAccountViewTemplate.tsx @@ -0,0 +1,46 @@ +import type UserSettingsAccountView from "./UserSettingsAccountView.js"; +import Avatar from "@ui5/webcomponents/dist/Avatar.js"; +import Tag from "@ui5/webcomponents/dist/Tag.js"; +import Icon from "@ui5/webcomponents/dist/Icon.js"; +import Text from "@ui5/webcomponents/dist/Text.js"; +import Button from "@ui5/webcomponents/dist/Button.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/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 f3451a24603e..64c246821d07 100644 --- a/packages/fiori/src/i18n/messagebundle.properties +++ b/packages/fiori/src/i18n/messagebundle.properties @@ -600,4 +600,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..727e07154753 --- /dev/null +++ b/packages/fiori/src/themes/UserSettingsAccountView.css @@ -0,0 +1,57 @@ +.ui5-user-settings-account { + display: flex; + align-items: center; + flex-direction: column; +} + +.ui5-user-settings-account-avatar { + display: flex; + max-width: 7rem; + max-height: 7rem; + justify-content: center; + align-items: center; + gap: 0.625rem; +} + +.ui5-user-settings-account-title { + text-align: center; + margin-top: 0.25rem; + font-family: var(--sapFontFamily); + font-size: var(--sapFontLargeSize); + color: var(--sapTextColor); +} + +.ui5-user-settings-account-subtitleText { + text-align: center; + margin-bottom: 0.25rem; + font-family: var(--sapFontFamily); + font-size: var(--sapFontSize); + color: var(--sapContent_LabelColor); + overflow: hidden; + text-overflow: ellipsis; +} + +.ui5-user-settings-account-description { + text-align: center; + margin-bottom: 0.25rem; + font-family: var(--sapFontFamily); + font-size: var(--sapFontSize); + color: var(--sapContent_LabelColor); + overflow: hidden; + text-overflow: ellipsis; +} + +.ui5-user-settings-account-btn { + display: flex; + justify-content: center; + align-items: center; + gap: 0.625rem; + border-radius: var(--sapButton_BorderCornerRadius); + border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + background: var(--sapButton_Background); +} + +.ui5-user-settings-account-btn::part(button) { + padding: 0.375rem; +} + diff --git a/packages/fiori/test/pages/UserSettingsDialog.html b/packages/fiori/test/pages/UserSettingsDialog.html index 8e2448036cce..07b21676955a 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). + + + + @@ -400,26 +391,6 @@ - - Clicking on reset will delete your personalization settings for the launchpad (e.g. theme, language, user activities, and home page content) and for apps using the launchpad personalization features (e.g. filter settings, table columns). - Clicking on reset will delete your personalization settslotings for the launchpad (e.g. theme, language, user activities, and home page content) and for apps using the launchpad personalization features (e.g. filter settings, table columns). - This action is irreversible. - Further changes in the dialog will not be applied. - Are you sure you want to proceed with the reset? - - - - - - - - Text Direction