Skip to content

Commit

Permalink
Move user settings config to an own section (SAP#1833)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JohannesDoberer
JohannesDoberer authored Jan 29, 2021
1 parent 93f9eff commit 83e6293
Show file tree
Hide file tree
Showing 9 changed files with 199 additions and 269 deletions.
98 changes: 24 additions & 74 deletions core/src/Authorization.html
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,56 @@

{#if !isHidden}
<nav class="fd-menu">
<ul class="fd-menu__list fd-menu__list--no-shadow">
{#if showUserInfo}
<li class="fd-menu__item">
<span
aria-label="Username"
id="username"
class="lui-username fd-has-type-1"
data-testid="luigi-topnav-profile-username"
>{userInfo.name ? userInfo.name : userInfo.email}</span>
<span aria-label="Username" id="username" class="lui-username fd-has-type-1"
data-testid="luigi-topnav-profile-username">{userInfo.name ? userInfo.name : userInfo.email}</span>
</li>
{/if}
{#each profileNav.items as profileItem}
<li
class="fd-menu__item"
on:click="{() => onActionClick(profileItem)}"
data-testid="{getTestId(profileItem)}"
>
<a
class="fd-menu__link"
data-testid="luigi-topnav-profile-item"
href="{getRouteLink(profileItem)}"
on:click|preventDefault="{() => {}}"
>
<li class="fd-menu__item" on:click="{() => onActionClick(profileItem)}" data-testid="{getTestId(profileItem)}">
<a class="fd-menu__link" data-testid="luigi-topnav-profile-item" href="{getRouteLink(profileItem)}"
on:click|preventDefault="{() => {}}">
{#if profileItem.icon}
{#if hasOpenUIicon(profileItem)}
<span
class="fd-top-nav__icon sap-icon--{profileItem.icon}"
></span>
<span class="fd-top-nav__icon sap-icon--{profileItem.icon}"></span>
{:else}
<img
class="fd-top-nav__icon nav-icon"
src="{profileItem.icon}"
alt="{profileItem.altText ? profileItem.altText : ''}"
>
<img class="fd-top-nav__icon nav-icon" src="{profileItem.icon}"
alt="{profileItem.altText ? profileItem.altText : ''}">
{/if}
{/if}
<span
class="fd-menu__title"
>{$getTranslation(profileItem.label)}</span>
<span class="fd-menu__title">{$getTranslation(profileItem.label)}</span>
</a>
</li>
{/each}
{#if hasUserSettings}
<li
class="fd-menu__item"
on:click="{onUserSettingsClick}"
data-testid="{getTestId(profileNav.settings)}"
>
<a
aria-label="User Settings"
class="fd-menu__link"
data-testid="settings-link"
>
<li class="fd-menu__item" on:click="{onUserSettingsClick}" data-testid="{getTestId(profileNav.settings)}">
<a aria-label="User Settings" class="fd-menu__link" data-testid="settings-link">
{#if profileNav.settings.icon}
{#if hasOpenUIicon(profileNav.settings)}
<span
class="fd-top-nav__icon sap-icon--{profileNav.settings.icon}"
></span>
<span class="fd-top-nav__icon sap-icon--{profileNav.settings.icon}"></span>
{:else}
<img
class="fd-top-nav__icon nav-icon"
src="{profileNav.settings.icon}"
alt="{profileNav.settings.altText ? profileNav.settings.altText : ''}"
>
<img class="fd-top-nav__icon nav-icon" src="{profileNav.settings.icon}"
alt="{profileNav.settings.altText ? profileNav.settings.altText : ''}">
{/if}
{/if}
<span
class="fd-menu__title"
>{$getTranslation(profileNav.settings.label)}</span>
<span class="fd-menu__title">{$getTranslation(profileNav.settings.label)}</span>
</a>
</li>
{/if}
{#if isAuthorizationEnabled || isProfileLogoutItem}
{#if isLoggedIn || !isAuthorizationEnabled && isProfileLogoutItem}
<li
class="fd-menu__item"
on:click="{onLogoutClick}"
data-testid="{getTestId(profileNav.logout)}"
>
<li class="fd-menu__item" on:click="{onLogoutClick}" data-testid="{getTestId(profileNav.logout)}">
<a aria-label="Logout" class="fd-menu__link" data-testid="logout-link">
{#if profileNav.logout.icon}
{#if hasOpenUIicon(profileNav.logout)}
<span
class="fd-top-nav__icon sap-icon--{profileNav.logout.icon}"
></span>
<span class="fd-top-nav__icon sap-icon--{profileNav.logout.icon}"></span>
{:else}
<img
class="fd-top-nav__icon nav-icon"
src="{profileNav.logout.icon}"
alt="{profileNav.logout.altText ? profileNav.logout.altText : ''}"
>
<img class="fd-top-nav__icon nav-icon" src="{profileNav.logout.icon}"
alt="{profileNav.logout.altText ? profileNav.logout.altText : ''}">
{/if}
{/if}
<span
class="fd-menu__title"
>{$getTranslation(profileNav.logout.label)}</span>
<span class="fd-menu__title">{$getTranslation(profileNav.logout.label)}</span>
</a>
</li>
{/if}
Expand Down Expand Up @@ -191,22 +145,18 @@
'navigation.profile.logout'
);
//check if the User Settings schema exist
const userSettings = await LuigiConfig.getConfigValueAsync(
'settings.userSettings'
);
const userSettingsConfig = await LuigiConfig.getConfigValueAsync('userSettings');
const userSettings = userSettingsConfig ? userSettingsConfig : await LuigiConfig.getConfigValueAsync('settings.userSettings');
hasUserSettings = Boolean(userSettings);
//check if Settings dropdown is enabled for navigation in Shellbar
const userSettingsProfileMenuEntry = await LuigiConfig.getConfigValueAsync(
'settings.userSettings.userSettingsProfileMenuEntry'
);

const profileNavData = {
items:
(await LuigiConfig.getConfigValueAsync(
'navigation.profile.items'
)) || []
};
if (hasUserSettings) {
const userSettingsProfileMenuEntry = userSettings.userSettingsProfileMenuEntry;
profileNavData['settings'] = {
...TOP_NAV_DEFAULTS.userSettingsProfileMenuEntry,
...userSettingsProfileMenuEntry
Expand Down Expand Up @@ -304,4 +254,4 @@
cursor: default;
font-size: 1.125rem;
}
</style>
</style>
51 changes: 23 additions & 28 deletions core/src/UserSettingsEditor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@

function toggleOptions(event, editable) {
if (editable || editable === undefined) {
console.log('test');
const self = closest(event.target, '.fd-popover__control', 20);
closeAllCombos(self);
const currentState = self.getAttribute('aria-expanded') === 'true';
Expand All @@ -55,17 +54,17 @@
}

function updateEnumButton(key, option) {
document
.querySelectorAll('.enum-buttons-container-' + key + ' button')
.forEach(button => {
const buttonId = button.getAttribute('id');
const optionId = `lui-us-enum_button_${key}_option`;
buttonId === optionId
? button.classList.add('fd-button--emphasized')
: button.classList.remove('fd-button--emphasized');
});
document
.querySelectorAll('.enum-buttons-container-' + key + ' button')
.forEach(button => {
const buttonId = button.getAttribute('id');
const optionId = `lui-us-enum_button_${key}_option`;
buttonId === optionId
? button.classList.add('fd-button--emphasized')
: button.classList.remove('fd-button--emphasized');
});

storedUserSettingData[userSettingGroup[0]][key] = option;
storedUserSettingData[userSettingGroup[0]][key] = option;
}
</script>

Expand Down Expand Up @@ -124,7 +123,7 @@
}

.lui-fd-enum-button {
margin-top: 6px;
margin-top: 6px;
}
</style>
<div class="lui-usersettings-content">
Expand Down Expand Up @@ -189,22 +188,18 @@ <h1 class="lui-title lui-title--h2">
{/if}
{#if schemaItem.type==='enum' && schemaItem.style === 'button'}
<div>
<div class="fd-form-item">
<div
class="fd-segmented-button enum-buttons-container-{key}"
role="group"
aria-label="Group label">
{#each schemaItem.options as option, optionIndex}
<button
class="lui-fd-enum-button fd-button fd-button--compact {storedUserSettingData[userSettingGroup[0]][key] === option ? 'is-selected':'' }"
on:click="{() => updateEnumButton(key,option)}"
id="lui-us-enum_button_{key}_{option}"
data-testid="lui-us-enum_button_{key}_{option}"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
>{$getTranslation(option)}</button>
{/each}
<div class="fd-form-item">
<div class="fd-segmented-button enum-buttons-container-{key}" role="group"
aria-label="Group label">
{#each schemaItem.options as option, optionIndex}
<button
class="lui-fd-enum-button fd-button fd-button--compact {storedUserSettingData[userSettingGroup[0]][key] === option ? 'is-selected':'' }"
on:click="{() => updateEnumButton(key,option)}" id="lui-us-enum_button_{key}_{option}"
data-testid="lui-us-enum_button_{key}_{option}"
disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}">{$getTranslation(option)}</button>
{/each}
</div>
</div>
</div>
</div>
{/if}
{#if schemaItem.type==='boolean'}
Expand All @@ -217,4 +212,4 @@ <h1 class="lui-title lui-title--h2">
</div>
</div>
{/if}
</div>
</div>
5 changes: 4 additions & 1 deletion core/src/utilities/helpers/usersetting-dialog-helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ class UserSettingsHelperClass {

processUserSettingGroups() {
const userSettingGroups = [];
const userSettingsSchema = LuigiConfig.getConfigValue('settings.userSettings.userSettingGroups');
const userSettingGroupsFromConfig = LuigiConfig.getConfigValue('userSettings.userSettingGroups');
const userSettingGroupsFromOldConfig = LuigiConfig.getConfigValue('settings.userSettings.userSettingGroups')
//regarding backwards compatibility
const userSettingsSchema = userSettingGroupsFromConfig ? userSettingGroupsFromConfig : userSettingGroupsFromOldConfig;
if (GenericHelpers.isObject(userSettingsSchema)) {
for (const item in userSettingsSchema) {
let innerObj = {};
Expand Down
2 changes: 1 addition & 1 deletion test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -568,7 +568,7 @@ describe('Fiddle', () => {
let newConfig;
beforeEach(() => {
newConfig = cloneDeep(fiddleConfig);
newConfig.settings.userSettings = {
newConfig.userSettings = {
userSettingGroups: {
userAccount: {
label: 'User Account',
Expand Down
Loading

0 comments on commit 83e6293

Please sign in to comment.