Skip to content

Commit

Permalink
Update FD Styles from v0.17 to v0.18 (SAP#2074)
Browse files Browse the repository at this point in the history
  • Loading branch information
UlianaMunich authored Jun 21, 2021
1 parent 4b1b2ff commit e0790cb
Show file tree
Hide file tree
Showing 18 changed files with 594 additions and 111 deletions.
3 changes: 2 additions & 1 deletion core/fundamentalStyleClasses.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,5 +62,6 @@ module.exports = [
//'./node_modules/fundamental-styles/dist/tokenizer.css',
'./node_modules/fundamental-styles/dist/toolbar.css',
//'./node_modules/fundamental-styles/dist/tree.css',
'./node_modules/fundamental-styles/dist/helpers.css'
'./node_modules/fundamental-styles/dist/helpers.css',
'./node_modules/fundamental-styles/dist/user-menu.css'
];
6 changes: 3 additions & 3 deletions core/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 5 additions & 5 deletions core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"esm": "^3.2.25",
"file-loader": "^2.0.0",
"fs-extra": "9.0.0",
"fundamental-styles": "^0.17.0",
"fundamental-styles": "^0.18.0",
"jsdom": "15.0.0",
"jsdom-global": "3.0.2",
"live-server": "^1.2.1",
Expand Down Expand Up @@ -73,22 +73,22 @@
"bundlesize": [
{
"path": "./public/luigi.js",
"maxSize": "460 kB",
"maxSize": "474 kB",
"compression": "none"
},
{
"path": "./public/luigi.css",
"maxSize": "565 kB",
"maxSize": "570 kB",
"compression": "none"
},
{
"path": "./public-ie11/luigi-ie11.js",
"maxSize": "670kB",
"maxSize": "680kB",
"compression": "none"
},
{
"path": "./public-ie11/luigi-ie11.css",
"maxSize": "565 kB",
"maxSize": "571 kB",
"compression": "none"
}
],
Expand Down
176 changes: 119 additions & 57 deletions core/src/Authorization.html
Original file line number Diff line number Diff line change
@@ -1,88 +1,139 @@
{#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
>
</li>
{/if} {#each profileNav.items as profileItem}
<div class="fd-user-menu__body lui-user-menu-fiori">
{#if showUserInfo}
<div class="fd-user-menu__header">
{#if userInfo.picture}
<span
class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--thumbnail fd-user-menu__avatar"
aria-label="Avatar"
data-testid="luigi-topnav-profile-avatar"
style="background-image:url('{userInfo.picture}')"
></span>
{:else}
<span
class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--thumbnail fd-user-menu__avatar"
aria-label="Avatar"
>{userInfo.initials ? userInfo.initials : ''}</span
>
{/if}
</div>
<div class="fd-user-menu__subheader">
{#if userInfo.name}
<div
class="fd-user-menu__user-name"
id="username"
data-testid="luigi-topnav-profile-username"
>
{userInfo.name}
</div>
{/if} {#if userInfo.description}
<div class="fd-user-menu__user-role" data-testid="luigi-topnav-profile-description">
{userInfo.description}
</div>
{/if}
</div>

<ul
class="fd-list fd-list--navigation fd-list--navigation-indication fd-list--no-border"
role="list"
>
{#each profileNav.items as profileItem}
<li
class="fd-menu__item"
tabindex="-1"
role="listitem"
class="fd-list__item fd-list__item--link"
on:click="{() => onActionClick(profileItem)}"
data-testid="{getTestId(profileItem)}"
>
<a
class="fd-menu__link"
tabindex="0"
class="fd-list__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>
<i role="presentation" class="fd-list__icon sap-icon--{profileItem.icon}"></i>
{:else}
<img
class="fd-top-nav__icon nav-icon"
src="{profileItem.icon}"
style="background-image:url('{userInfo.icon}')"
alt="{profileItem.altText ? profileItem.altText : ''}"
/>
{/if} {/if}
<span class="fd-menu__title">{$getTranslation(profileItem.label)}</span>
<span class="fd-list__title">{$getTranslation(profileItem.label)}</span>
</a>
</li>
{/each} {#if hasUserSettings}
<li
class="fd-menu__item"
tabindex="-1"
role="listitem"
class="fd-list__item fd-list__item--link"
on:click="{onUserSettingsClick}"
data-testid="{getTestId(profileNav.settings)}"
>
<a aria-label="User Settings" class="fd-menu__link" data-testid="settings-link">
<a
tabindex="0"
class="fd-list__link"
aria-label="User Settings"
data-testid="settings-link"
>
{#if profileNav.settings.icon} {#if hasOpenUIicon(profileNav.settings)}
<i class="fd-top-nav__icon sap-icon--{profileNav.settings.icon}"></i>
<i
role="presentation"
class="fd-list__icon sap-icon--{profileNav.settings.icon}"
></i>
{:else}
<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>
</a>
</li>
{/if} {#if isAuthorizationEnabled || isProfileLogoutItem} {#if isLoggedIn ||
!isAuthorizationEnabled && isProfileLogoutItem}
<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)}
<i class="fd-top-nav__icon sap-icon--{profileNav.logout.icon}"></i>
{:else}
<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>
{/if}{/if}
<span class="fd-list__title">{$getTranslation(profileNav.settings.label)}</span>
</a>
</li>
{/if} {#if isAuthorizationEnabled && !isLoggedIn}
<li class="fd-menu__item" on:click="{startAuthorization}">
<a aria-label="Login" class="fd-menu__link" data-testid="login-link">
<span class="fd-menu__title">Login</span>
</a>
</li>
{/if} {/if}
{/if}
</ul>
</nav>
{/if}
</div>
<div class="fd-popover__body-footer">
<div class="fd-bar fd-bar--footer">
<div class="fd-bar__right">
<div class="fd-bar__element">
{#if isAuthorizationEnabled || isProfileLogoutItem} {#if isLoggedIn ||
!isAuthorizationEnabled && isProfileLogoutItem}
<div class="fd-bar__element" data-testid="{getTestId(profileNav.logout)}">
<button
class="fd-button fd-button--transparent"
tabindex="0"
on:click="{onLogoutClick}"
data-testid="logout-btn"
>
{$getTranslation(profileNav.logout.label)}
</button>
</div>
{/if} {#if isAuthorizationEnabled && !isLoggedIn}
<button
class="fd-button fd-button--transparent"
tabindex="0"
on:click="{startAuthorization}"
data-testid="login-btn"
>
Login
</button>
<button
class="fd-button fd-button--transparent"
tabindex="0"
on:click="{startAuthorization}"
data-testid="login-btn"
>
Login
</button>
{/if}{/if}
</div>
</div>
</div>
</div>
{/if}
<script>
import { AuthLayerSvc } from './services';
Expand Down Expand Up @@ -115,6 +166,7 @@
let getTranslation = getContext('getTranslation');
let getUnsavedChangesModalPromise = getContext('getUnsavedChangesModalPromise');
let openViewInModal = getContext('openViewInModal');
let initialsOfUser;

onMount(async () => {
if (!LuigiAuth.isAuthorizationEnabled()) {
Expand Down Expand Up @@ -262,10 +314,20 @@
.nav-icon {
height: 2em;
}
.lui-username {
display: block;
padding: 0.75rem 1rem 0.75rem 0.75rem;
cursor: default;
font-size: 1.125rem;

/* fixes for long User Name and role */
.fd-user-menu__user-name,
.fd-user-menu__user-role {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/*Fix a long list popover body*/
.lui-user-menu-fiori {
max-height: calc(100vh - 90px);
overflow-y: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
</style>
Loading

0 comments on commit e0790cb

Please sign in to comment.