Skip to content

Commit

Permalink
[INTERNAL] Fiori 3 theme controls adjustments
Browse files Browse the repository at this point in the history 
Change-Id: I443e247d7653e7a8cb126055d7e8a20479b06e2a
JIRA: BGSOFUIRODOPI-1891
  • Loading branch information
@dimovpetar
dimovpetar committed Dec 20, 2018
1 parent 4b2d199 commit cb93939
Show file tree
Hide file tree
Showing 9 changed files with 116 additions and 63 deletions.
22 changes: 22 additions & 0 deletions src/sap.m/src/sap/m/Dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1521,6 +1521,28 @@ function(
return oEndButton ? oEndButton.getId() : null;
};

Dialog.prototype.setBeginButton = function (oButton) {
var sTheme = Core.getConfiguration().getTheme();

if (oButton && oButton.isA("sap.m.Button") && sTheme.startsWith("sap_fiori_")) {
oButton.setType("Emphasized");
oButton.addStyleClass("sapMDialogBeginButton");
}

return this.setAggregation("beginButton", oButton);
};

Dialog.prototype.setEndButton = function (oButton) {
var sTheme = Core.getConfiguration().getTheme();

if (oButton && oButton.isA("sap.m.Button") && sTheme.startsWith("sap_fiori_")) {
oButton.setType("Transparent");
oButton.addStyleClass("sapMDialogEndButton");
}

return this.setAggregation("endButton", oButton);
};

//get buttons should return the buttons, beginButton and endButton aggregations
Dialog.prototype.getAggregation = function (sAggregationName, oDefaultForCreation, bPassBy) {
var originalResponse = Control.prototype.getAggregation.apply(this, Array.prototype.slice.call(arguments, 0, 2));
Expand Down
9 changes: 5 additions & 4 deletions src/sap.m/src/sap/m/TableSelectDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,7 @@ sap.ui.define([
contentHeight: "2000px",
subHeader: this._oSubHeader,
content: [this._oBusyIndicator, this._oTable],
leftButton: this._getCancelButton(),
endButton: this._getCancelButton(),
initialFocus: ((Device.system.desktop && this._oSearchField) ? this._oSearchField : null)
});
this._dialog = this._oDialog; // for downward compatibility
Expand Down Expand Up @@ -617,11 +617,12 @@ sap.ui.define([
if (bMulti) {
this._oTable.setMode(ListMode.MultiSelect);
this._oTable.setIncludeItemInSelection(true);
this._oDialog.setRightButton(this._getCancelButton());
this._oDialog.setLeftButton(this._getOkButton());
this._oDialog.setEndButton(this._getCancelButton());
this._oDialog.setBeginButton(this._getOkButton());
} else {
this._oTable.setMode(ListMode.SingleSelectMaster);
this._oDialog.setLeftButton(this._getCancelButton());
this._oDialog.setEndButton(this._getCancelButton());
this._oDialog.destroyBeginButton();
}

return this;
Expand Down
16 changes: 11 additions & 5 deletions src/sap.tnt/src/sap/tnt/themes/base/InfoLabel.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@
/* Base theme */
/* ================================= */

@_sap_tnt_InfoLabel_Margin: 0.9375rem;
@_sap_tnt_InfoLabel_NoText_Padding: 0.5625rem;
@_sap_tnt_InfoLabel_NoTextDisplayOnly_Padding: 0.5rem;
@_sap_tnt_InfoLabel_LineHeight: 1.125rem;
@_sap_tnt_InfoLabel_LineHeightDisplayOnly: 1rem;

/* ==========================================================================
Root element
========================================================================== */
Expand All @@ -18,7 +24,7 @@
.sapTntInfoLabelInner {
font-size: @sapMFontSmallSize;
vertical-align: top;
line-height: 1.125rem;
line-height: @_sap_tnt_InfoLabel_LineHeight;
font-weight: 600;
letter-spacing: 0.0125rem;
text-transform: uppercase;
Expand All @@ -42,18 +48,18 @@

.sapTntInfoLabelInner {
font-size: 0.6875rem;
line-height: 1rem;
line-height: @_sap_tnt_InfoLabel_LineHeightDisplayOnly;
}
}

/* ==========================================================================
InfoLabel No Text
========================================================================== */
.sapTntInfoLabel.sapTntInfoLabelNoText {
padding: 0 0.5625rem;
padding: 0 @_sap_tnt_InfoLabel_NoText_Padding;

&.sapTntInfoLabelDisplayOnly{
padding: 0 0.5rem;
padding: 0 @_sap_tnt_InfoLabel_NoTextDisplayOnly_Padding;
}
}

Expand All @@ -66,7 +72,7 @@
}

.sapUiFormEdit .sapTntInfoLabel:not(.sapTntInfoLabelDisplayOnly) {
margin: 0.9375rem 0;
margin: @_sap_tnt_InfoLabel_Margin 0;
}

/* Compact size */
Expand Down
7 changes: 6 additions & 1 deletion src/themelib_sap_fiori_3/src/sap/m/themes/sap_fiori_3/Dialog.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
/* Fiori 3 theme */
/* ============================= */

@_sap_m_Dialog_MarginHeight: 6%;
@_sap_m_Dialog_HeaderShadowColor: darken(@sapUiGroupContentBackground, 8);

.sapMDialog.sapMPopup-CTX > header .sapMHeader-CTX,
Expand Down Expand Up @@ -30,5 +31,9 @@

.sapMDialogResizeHandler::before {
content: attr(data-sap-ui-icon-content);
color: @sapUiButtonEmphasizedBackground;
color: @sapUiButtonLiteTextColor;
}

.sapMDialogBeginButton, .sapMDialogEndButton {
min-width: 4rem;
}
5 changes: 5 additions & 0 deletions src/themelib_sap_fiori_3/src/sap/m/themes/sap_fiori_3/InputBase.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,11 @@
border-color: @sapUiFieldInvalidColor;
}

.sapMInputBaseContentWrapperInformation {
background: @sapUiFieldBackground;
border-color: @sapUiHighlight;
}

.sapMInputBaseReadonlyWrapper,
.sapMInputBaseDisabledWrapper {
background: @sapUiFieldReadOnlyBackground;
Expand Down
8 changes: 0 additions & 8 deletions src/themelib_sap_fiori_3/src/sap/m/themes/sap_fiori_3/Label.less
View file

This file was deleted.

1 change: 0 additions & 1 deletion src/themelib_sap_fiori_3/src/sap/m/themes/sap_fiori_3/library.source.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@

/* note: the following three files are not in alphabetical order and should be imported after InputBase.less */
@import "ComboBoxBase.less";
@import "Label.less";
@import "LightBox.less";
@import "Link.less";
@import "ListBase.less";
Expand Down
83 changes: 48 additions & 35 deletions src/themelib_sap_fiori_3/src/sap/tnt/themes/sap_fiori_3/InfoLabel.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,51 @@
/* Fiori 3 theme */
/* ================================= */

/* ==========================================================================
Variables and mixins
========================================================================== */


@sapTntInfoLabelColorsArray:
@sapTntInfoLabelBackgroundColor1,
@sapTntInfoLabelBackgroundColor2,
@sapTntInfoLabelBackgroundColor3,
@sapTntInfoLabelBackgroundColor4,
@sapTntInfoLabelBackgroundColor5,
@sapTntInfoLabelBackgroundColor6,
@sapTntInfoLabelBackgroundColor7,
@sapTntInfoLabelBackgroundColor8,
@sapTntInfoLabelBackgroundColor9;

.create-classes-for-background-color(backgroundColor, @sapTntInfoLabelColorsArray);

/*Iterate over the InfoLabel ColorsArray and create separate class for each
color named with the passed prefix and the number of the color*/

.create-classes-for-background-color(@prefix, @list) {
.iter(length(@list));
.iter(@i) when (@i > 0) {
.iter(@i - 1);
@value: extract(@list, @i);
.@{prefix}@{i} {
background-color: @value;
.sapTntInfoLabelInner {
color: contrast(@value, @sapUiBaseText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
}
}

}
}
// ==========================================================================
// Variables overriding
// ==========================================================================

@_sap_tnt_InfoLabel_Margin: 0.8125rem;
@_sap_tnt_InfoLabel_NoText_Padding: 0.5rem;
@_sap_tnt_InfoLabel_NoTextDisplayOnly_Padding: 0.4375rem;
@_sap_tnt_InfoLabel_LineHeight: 1rem;
@_sap_tnt_InfoLabel_LineHeightDisplayOnly: 0.875rem;

// ==========================================================================
// Variables and mixins
// ==========================================================================

@_sap_tnt_InfoLabel_ColorsArray:
@_sap_tnt_InfoLabel_BackgroundColor1 @_sap_tnt_InfoLabel_BorderColor1,
@_sap_tnt_InfoLabel_BackgroundColor2 @_sap_tnt_InfoLabel_BorderColor2,
@_sap_tnt_InfoLabel_BackgroundColor3 @_sap_tnt_InfoLabel_BorderColor3,
@_sap_tnt_InfoLabel_BackgroundColor4 @_sap_tnt_InfoLabel_BorderColor4,
@_sap_tnt_InfoLabel_BackgroundColor5 @_sap_tnt_InfoLabel_BorderColor5,
@_sap_tnt_InfoLabel_BackgroundColor6 @_sap_tnt_InfoLabel_BorderColor6,
@_sap_tnt_InfoLabel_BackgroundColor7 @_sap_tnt_InfoLabel_BorderColor7,
@_sap_tnt_InfoLabel_BackgroundColor8 @_sap_tnt_InfoLabel_BorderColor8,
@_sap_tnt_InfoLabel_BackgroundColor9 @_sap_tnt_InfoLabel_BorderColor9;

.create-classes-for-background-and-border-colors(backgroundColor, @_sap_tnt_InfoLabel_ColorsArray);

// Iterate over the InfoLabel ColorsArray and create separate class for each
// color named with the passed prefix and the number of the color
.create-classes-for-background-and-border-colors(@prefix, @list) {
.iter(length(@list));
.iter(@i) when (@i > 0) {
.iter(@i - 1);

@pair: extract(@list, @i);
@backgroundColor: extract(@pair, 1);
@borderColor: extract(@pair, 2);

.@{prefix}@{i} {
border: 1px solid @borderColor;
background-color: @backgroundColor;

.sapTntInfoLabelInner {
color: @sapUiBaseText;
}
}
}
}
28 changes: 19 additions & 9 deletions src/themelib_sap_fiori_3/src/sap/tnt/themes/sap_fiori_3/global.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,22 @@
// Global CSS for 'sap_fiori_3' theme for TNT library
// ===================================================

@sapTntInfoLabelBackgroundColor1: lighten(@sapUiAccent1, 6);
@sapTntInfoLabelBackgroundColor2: lighten(saturate(@sapUiAccent2, 10), 20);
@sapTntInfoLabelBackgroundColor3: @sapUiAccent3;
@sapTntInfoLabelBackgroundColor4: @sapUiAccent4;
@sapTntInfoLabelBackgroundColor5: darken(@sapUiAccent5, 8);
@sapTntInfoLabelBackgroundColor6: darken(@sapUiAccent6, 6);
@sapTntInfoLabelBackgroundColor7: darken(@sapUiAccent7, 5);
@sapTntInfoLabelBackgroundColor8: darken(@sapUiAccent8, 4);
@sapTntInfoLabelBackgroundColor9: desaturate(@sapUiAccent4, 68);
@_sap_tnt_InfoLabel_BackgroundColor1: lighten(@sapUiAccent1, 40);
@_sap_tnt_InfoLabel_BackgroundColor2: lighten(@sapUiAccent2, 24);
@_sap_tnt_InfoLabel_BackgroundColor3: lighten(@sapUiAccent3, 40);
@_sap_tnt_InfoLabel_BackgroundColor4: lighten(@sapUiAccent4, 39);
@_sap_tnt_InfoLabel_BackgroundColor5: lighten(@sapUiAccent5, 29);
@_sap_tnt_InfoLabel_BackgroundColor6: lighten(@sapUiAccent6, 31);
@_sap_tnt_InfoLabel_BackgroundColor7: lighten(@sapUiAccent7, 50);
@_sap_tnt_InfoLabel_BackgroundColor8: lighten(@sapUiAccent8, 52);
@_sap_tnt_InfoLabel_BackgroundColor9: lighten(@sapUiContentForegroundBorderColor, 35);

@_sap_tnt_InfoLabel_BorderColor1: @sapUiAccent1;
@_sap_tnt_InfoLabel_BorderColor2: darken(@sapUiAccent2, 8);
@_sap_tnt_InfoLabel_BorderColor3: @sapUiAccent3;
@_sap_tnt_InfoLabel_BorderColor4: @sapUiAccent4;
@_sap_tnt_InfoLabel_BorderColor5: @sapUiAccent5;
@_sap_tnt_InfoLabel_BorderColor6: darken(@sapUiAccent6, 7);
@_sap_tnt_InfoLabel_BorderColor7: darken(@sapUiAccent7, 4);
@_sap_tnt_InfoLabel_BorderColor8: darken(@sapUiAccent8, 3);
@_sap_tnt_InfoLabel_BorderColor9: darken(@sapUiContentForegroundBorderColor, 4);

2 comments on commit cb93939

@boghyon
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this fixes most of the controls mentioned in #2254
Any plan to apply Emphasized to button in Popover as well?

@dimovpetar
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @boghyon ,
This change is not part of the reported accident.
Once there is update about it, you will be notified.

Regards,
Petar

Please sign in to comment.