Skip to content

Commit

Permalink
update fundamental library in luigi core (SAP#1267)
Browse files Browse the repository at this point in the history
  • Loading branch information
@marynaKhromova
marynaKhromova committed Apr 23, 2020
1 parent 0cdf71a commit 7127a6a
Show file tree
Hide file tree
Showing 29 changed files with 447 additions and 346 deletions.
41 changes: 23 additions & 18 deletions core/fundamentalStyleClasses.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
module.exports = [
'./node_modules/fundamental-styles/dist/root.css',
'./node_modules/fundamental-styles/dist/fonts.css',
'./node_modules/fundamental-styles/dist/variables.css',
'./node_modules/fundamental-styles/dist/icon.css',
'./node_modules/fundamental-styles/dist/layout.css',
'./node_modules/fundamental-styles/dist/alert.css',
'./node_modules/fundamental-styles/dist/action-bar.css',
// './node_modules/fundamental-styles/dist/alert.css',
//'./node_modules/fundamental-styles/dist/asset-upload.css',
//'./node_modules/fundamental-styles/dist/badge.css',
'./node_modules/fundamental-styles/dist/popover.css',
//'./node_modules/fundamental-styles/dist/busy-indicator.css',
'./node_modules/fundamental-styles/dist/bar.css',
//'./node_modules/fundamental-styles/dist/breadcrumb.css',
'./node_modules/fundamental-styles/dist/busy-indicator.css',
'./node_modules/fundamental-styles/dist/button.css',
//'./node_modules/fundamental-styles/dist/button-group.css',
//'./node_modules/fundamental-styles/dist/button-split.css',
//'./node_modules/fundamental-styles/dist/breadcrumb.css',
//'./node_modules/fundamental-styles/dist/calendar.css',
// './node_modules/fundamental-styles/dist/checkbox.css',
// './node_modules/fundamental-styles/dist/radio.css',
'./node_modules/fundamental-styles/dist/counter.css',
//'./node_modules/fundamental-styles/dist/dropdown.css',
'./node_modules/fundamental-styles/dist/dialog.css',
//'./node_modules/fundamental-styles/dist/fieldset.css',
//'./node_modules/fundamental-styles/dist/form-group.css',
//'./node_modules/fundamental-styles/dist/form-input-message-group.css',
//'./node_modules/fundamental-styles/dist/form-item.css',
//'./node_modules/fundamental-styles/dist/form-label.css',
//'./node_modules/fundamental-styles/dist/form-message.css',
Expand All @@ -28,36 +27,42 @@ module.exports = [
//'./node_modules/fundamental-styles/dist/image.css',
//'./node_modules/fundamental-styles/dist/inline-help.css',
//'./node_modules/fundamental-styles/dist/input.css',
// './node_modules/fundamental-styles/dist/textarea.css',
//'./node_modules/fundamental-styles/dist/input-group.css',
//'./node_modules/fundamental-styles/dist/label.css',
//'./node_modules/fundamental-styles/dist/layout-grid.css',
'./node_modules/fundamental-styles/dist/link.css',
//'./node_modules/fundamental-styles/dist/list.css',
//'./node_modules/fundamental-styles/dist/list-group.css',
//'./node_modules/fundamental-styles/dist/localization-editor.css',
'./node_modules/fundamental-styles/dist/menu.css',
'./node_modules/fundamental-styles/dist/modal.css',
//'./node_modules/fundamental-styles/dist/multi-input.css',
//'./node_modules/fundamental-styles/dist/message-box.css',
'./node_modules/fundamental-styles/dist/message-strip.css',
//'./node_modules/fundamental-styles/dist/nav.css',
//'./node_modules/fundamental-styles/dist/notification.css',
//'./node_modules/fundamental-styles/dist/object-status.css',
'./node_modules/fundamental-styles/dist/page.css',
//'./node_modules/fundamental-styles/dist/pagination.css',
//'./node_modules/fundamental-styles/dist/panel.css',
//'./node_modules/fundamental-styles/dist/tile.css',
//'./node_modules/fundamental-styles/dist/product-tile.css',
'./node_modules/fundamental-styles/dist/popover.css',
'./node_modules/fundamental-styles/dist/product-switch.css',
//'./node_modules/fundamental-styles/dist/product-tile.css',
// './node_modules/fundamental-styles/dist/radio.css',
//'./node_modules/fundamental-styles/dist/section.css',
//'./node_modules/fundamental-styles/dist/segmented-button.css',
// './node_modules/fundamental-styles/dist/select.css',
'./node_modules/fundamental-styles/dist/shellbar.css',
'./node_modules/fundamental-styles/dist/side-nav.css',
'./node_modules/fundamental-styles/dist/spinner.css',
// './node_modules/fundamental-styles/dist/spinner.css',
// './node_modules/fundamental-styles/dist/status-label.css',
// './node_modules/fundamental-styles/dist/switch.css',
//'./node_modules/fundamental-styles/dist/table.css',
//'./node_modules/fundamental-styles/dist/tree.css',
'./node_modules/fundamental-styles/dist/tabs.css',
// './node_modules/fundamental-styles/dist/textarea.css',
//'./node_modules/fundamental-styles/dist/tile.css',
//'./node_modules/fundamental-styles/dist/time.css',
// './node_modules/fundamental-styles/dist/toggle.css',
//'./node_modules/fundamental-styles/dist/token.css',
//'./node_modules/fundamental-styles/dist/input-group.css',
'./node_modules/fundamental-styles/dist/shellbar.css',
//'./node_modules/fundamental-styles/dist/tokenizer.css',
//'./node_modules/fundamental-styles/dist/tree.css',
'./node_modules/fundamental-styles/dist/helpers.css'
//'./node_modules/fundamental-styles/dist/info-label.css'
];
17 changes: 7 additions & 10 deletions core/package-lock.json
View file

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

3 changes: 2 additions & 1 deletion core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"@babel/polyfill": "^7.6.0",
"@babel/preset-env": "^7.6.2",
"@babel/register": "^7.6.2",
"@sap-theming/theming-base-content": "^11.1.18",
"@webcomponents/webcomponentsjs": "^2.3.0",
"acorn": "^6.4.1",
"axios": ">=0.18.1",
Expand All @@ -21,7 +22,7 @@
"core-js": "^3.2.1",
"css-loader": "^3.0.0",
"file-loader": "^2.0.0",
"fundamental-styles": "^0.6.0",
"fundamental-styles": "^0.8.1",
"jsdom": "15.0.0",
"jsdom-global": "3.0.2",
"lodash": ">=4.17.13",
Expand Down
19 changes: 12 additions & 7 deletions core/src/Alerts.html
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
<div class="fd-shell__overlay fd-overlay fd-overlay--alert" aria-hidden="false">
<div
class="fd-shell__overlay fd-overlay fd-overlay--message-strip"
aria-hidden="false"
>
{#each alertQueue as al}
<div
class="fd-alert fd-alert--{alertTypeMap[al.settings.type]} fd-alert--dismissible"
class="fd-message-strip fd-message-strip--{alertTypeMap[al.settings.type]} fd-message-strip--dismissible"
role="alert"
id="j2ALl423"
data-testid="luigi-alert"
>
<p
class="fd-message-strip__text"
>{@html al.dataSanitized ? al.settings.text: ''}</p>
<button
class="fd-button fd-button--light fd-button--compact fd-alert__close"
class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close"
on:click="{() => dispatch('alertDismiss',{id: al.settings.id})}"
aria-label="Close"
aria-controls="j2ALl423"
data-testid="luigi-alert-dismiss"
></button>
<p class="fd-alert__text">{@html al.dataSanitized ? al.settings.text: ''}</p>
</div>
{/each}
</div>
Expand Down Expand Up @@ -103,15 +108,15 @@
</script>

<style type="text/scss">
.fd-overlay--alert {
.fd-overlay--message-strip {
position: absolute;
z-index: 1100;
flex-direction: column;
.fd-alert:not(:first-child) {
.fd-message-strip:not(:first-child) {
margin-top: 8px;
}
}
.fd-alert__text {
.fd-message-strip__text {
:global(a) {
display: inline-block;
line-height: 1.42857;
Expand Down
129 changes: 89 additions & 40 deletions core/src/App.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,15 @@
aria-hidden="false"
aria-label="Loading"
>
<div class="fd-spinner">
<div class="fd-spinner__body"></div>
<div
class="fd-busy-indicator--m"
aria-hidden="false"
aria-label="Loading"
data-testid="luigi-loading-spinner"
>
<div class="fd-busy-indicator--circle-0"></div>
<div class="fd-busy-indicator--circle-1"></div>
<div class="fd-busy-indicator--circle-2"></div>
</div>
</div>
{/if}
Expand Down Expand Up @@ -1118,14 +1125,9 @@
</script>

<style type="text/scss">
/*Mixins*/
@import 'styles/fonts';
@import 'styles/mixins';

$topNavHeight: 44px;
$topNavHeightTab: 44px;
$leftNavWidth: 15rem;
$leftNavWidthCollapsed: 2.75rem;
$desktopMinWidth: 600px;
@import 'styles/variables';

:global(html) {
box-sizing: border-box;
Expand Down Expand Up @@ -1156,12 +1158,14 @@
:global([luigi-app-loading-indicator]) {
z-index: 10;
background-color: var(--fd-background-color);
padding-top: 30vh;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
:global([luigi-app-loading-indicator].hidden) {
visibility: hidden;
Expand Down Expand Up @@ -1351,6 +1355,15 @@
left: $leftNavWidthCollapsed;
}
}

:global(.fd-dialog) {
&__content {
&:not(.fd-dialog__content--mobile) {
max-width: 90%;
min-width: 90%;
}
}
}
}

:global(html.luigi-app-in-custom-container) {
Expand Down Expand Up @@ -1394,46 +1407,82 @@
}

//Fixing issues for fundamental styles

//Add padding for shellbar buttons
:global(.fd-shellbar__button) {
padding-left: 12px;
padding-right: 12px;
padding-left: 0.5625rem !important;
padding-right: 0.5625rem !important;
}

//Overwrites with SAP variables
:global(.fd-menu__link) {
text-decoration: none; //Remove underline from links in fd-menu
border-radius: 0; //Remove border radius from links inside fd-menu
}

:global(.fd-shellbar) {
border-bottom: #354a5f;
border-bottom: 1px solid var(--sapShell_BorderColor, #354a5f);
//Make border radius for links inside fd-menu only for the first and last elements
@mixin luigi-menu__link--border($position) {
:global(.fd-menu__link) {
border-#{$position}-left-radius: 0.25rem;
border-#{$position}-left-radius: var(
--sapElement_BorderCornerRadius,
0.25rem
);
border-#{$position}-right-radius: 0.25rem;
border-#{$position}-right-radius: var(
--sapElement_BorderCornerRadius,
0.25rem
);
}
}
:global(.fd-menu) {
:global(.fd-menu__list) {
&:first-child {
:global(.fd-menu__item) {
&:first-child {
@include luigi-menu__link--border('top');
}
}
}

:global(.fd-menu__item) {
background-color: var(--sapBackgroundColor, #fff);
color: var(--sapLinkColor, #51555a);

&.is-hover,
&:hover,
&.is-selected:hover {
color: #0854a0;
color: var(--sapLink_Hover_Color, #0854a0);
background-color: #ebf5fe;
background-color: var(--sapButton_Hover_Background, #ebf5fe);
&:last-child {
:global(.fd-menu__item) {
&:last-child {
@include luigi-menu__link--border('bottom');
}
}
}
}
}

//Add z-index for dialogs
:global(.fd-dialog) {
z-index: 1000;
}

&.is-selected {
color: #32363a;
color: var(--sapList_TextColor, #32363a);
background: #e5f0fa;
background: var(--sapList_SelectionBackgroundColor, #e5f0fa);
:global(.fd-dialog__content--mobile) {
//Remove border-radius from mobile fullscreen dialog
border-radius: 0;

:global(.fd-dialog__header.fd-bar),
:global(.fd-dialog__footer.fd-bar) {
border-radius: 0;
}

//Recalculate height for mobile devices
height: calc(var(--vh, 1vh) * 100});
max-height: calc(var(--vh, 1vh) * 100});
-webkit-overflow-scrolling: touch;
}

:global(.fd-modal__content) {
background-color: #fff;
background-color: var(--sapGroup_ContentBackground, #fff);
box-shadow: var(
--sapContent_Shadow3,
0 0 0 0.0625rem rgba(0, 0, 0, 0.42),
0 1.25rem 5rem 0 rgba(0, 0, 0, 0.3)
);
//Recalculate height for mobile devices
:global(.fd-product-switch__body) {
max-height: calc(var(--vh, 1vh) * 100 - 76px);
}

//Overwrites with SAP variables

:global(.fd-shellbar) {
border-bottom: #354a5f;
border-bottom: 1px solid var(--sapShell_BorderColor, #354a5f);
}
</style>

0 comments on commit 7127a6a

Please sign in to comment.