Skip to content

Commit

Permalink
[INTERNAL] Demo Kit: Added appearance change feature
Browse files Browse the repository at this point in the history 
There is a new menu in the "More Information" button menu.
It is called "Appearance". It changes the appearance of the Demo Kit
to "Light" (bright theme), "Dark" (dark theme) or "Auto" (depending on
OS settings).
The user's choice is saved in a cookie, if the cookies are enabled.

Additionally, the "More Information" button's icon is changed.
Also there are icons for all of the options in its menu.

Some the block layout tiles (In Home and Documentation pages) are
changed in order to appeal on different appearances.

Those changes are synced with VD and are mentioned in the backlog.

Change-Id: I48aace96dc8a15bad8f3426c5fe38044cd64faae
JIRA: BGSOFUIPIRIN-4946
  • Loading branch information
@plamenivanov91
plamenivanov91 committed Feb 22, 2021
1 parent 927177a commit b917c25
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 34 deletions.
8 changes: 8 additions & 0 deletions src/sap.ui.documentation/src/sap/ui/documentation/messagebundle.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,14 @@ APP_INFORMATION_BTN_LEGAL = Legal
APP_INFORMATION_BTN_PRIVACY = Privacy
#XMIT: The menu item that navigates to the 'TERMS OF USE FOR SAP WEBSITES' page
APP_INFORMATION_BTN_TERMS_OF_USE = Terms of Use
#XMIT: The menu item that navigates to the Appearance options
APP_INFORMATION_BTN_APPEARANCE = Appearance
#XMIT: The menu item that selects the Appearance Light option
APP_INFORMATION_BTN_APPEARANCE_LIGHT = Light
#XMIT: The menu item that selects the Appearance Dark option
APP_INFORMATION_BTN_APPEARANCE_DARK = Dark
#XMIT: The menu item that selects the Appearance Auto option
APP_INFORMATION_BTN_APPEARANCE_AUTO = Auto (Depending on the OS Settings)
#XMIT: The menu item that navigates to the 'SITEMAP' page
APP_INFORMATION_BTN_SITEMAP = Sitemap
#XMIT: The menu item that navigates to the 'Copyright' page
Expand Down
76 changes: 76 additions & 0 deletions src/sap.ui.documentation/src/sap/ui/documentation/sdk/controller/App.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,18 @@ sap.ui.define([
CHANGE_SETTINGS_TEXT = "settings",
CHANGE_COOKIE_PREFERENCES_TEXT = "cookie_preferences",
DEMOKIT_DEFAULT_LANGUAGE = "en",
DEMOKIT_APPEARANCE_KEY_LIGHT = "light",
DEMOKIT_APPEARANCE_KEY_DARK = "dark",
DEMOKIT_APPEARANCE_KEY_AUTO = "auto",
DEMOKIT_APPEARANCE = Object.create(null),
DEMOKIT_CONFIGURATION_LANGUAGE = "language",
DEMOKIT_CONFIGURATION_APPEARANCE = "appearance",
SITEMAP = "sitemap";

DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_LIGHT] = "sap_fiori_3";
DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_DARK] = "sap_fiori_3_dark";
DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_AUTO] = "sap_fiori_3"; // fallback if window.matchMedia is not supported

return BaseController.extend("sap.ui.documentation.sdk.controller.App", {
formatter: globalFormatter,

Expand Down Expand Up @@ -325,6 +334,8 @@ sap.ui.define([
this.cookieSettingsDialogOpen({ showCookieDetails: true });
} else if (sTargetText === CHANGE_VERSION_TEXT) {
this.onChangeVersionButtonPress();
} else if (DEMOKIT_APPEARANCE[sTargetText]) {
this._updateAppearance(sTargetText);
} else if (sTarget === SITEMAP) {
this.onSiteMapPress();
} else if (sTarget) {
Expand Down Expand Up @@ -541,6 +552,63 @@ sap.ui.define([
this.oPicker.close();
},

/**
* Updates the appearance of the Demo Kit depending of the incoming appearance keyword.
* If the keyword is "auto" the appearance will be updated to light or dark depending on the
* user's OS settings.
* @param {string} sKey the appearance keyword
* @private
*/
_updateAppearance: function(sKey) {
if (sKey !== DEMOKIT_APPEARANCE_KEY_AUTO) {
Core.applyTheme(DEMOKIT_APPEARANCE[sKey]);
} else if (window.matchMedia) {
this._toggleLightOrDarkAppearance(window.matchMedia('(prefers-color-scheme: dark)').matches);
this._attachPrefersColorSchemeChangeListener();
} else {
Core.applyTheme(DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_AUTO]);
}

this._sLastKnownAppearanceKey = sKey;

if (this._oConfigUtil.getCookieValue(this._oCookieNames.ALLOW_REQUIRED_COOKIES) === "1") {
this._oConfigUtil.setCookie(DEMOKIT_CONFIGURATION_APPEARANCE, sKey);
}
},

/**
* Toggles the appearance of the Demo Kit to light or dark depending on the incoming argument.
* @param {boolean} bIsDark whether the new appearance should be dark
* @private
*/
_toggleLightOrDarkAppearance: function (bIsDark) {
if (bIsDark) {
// dark mode
Core.applyTheme(DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_DARK]);
} else {
// light mode or unsupported prefers-color-scheme
Core.applyTheme(DEMOKIT_APPEARANCE[DEMOKIT_APPEARANCE_KEY_LIGHT]);
}
},

/**
* Attaches an event listener to the 'change' event of the prefers-color-scheme media.
* Depending on the change and the last known appearance, the appearance of the Demo Kit is changed to light or dark.
* @private
*/
_attachPrefersColorSchemeChangeListener: function() {
var that = this;

if (!this._bAttachedPrefersColorSchemeChangeListener) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
if (that._sLastKnownAppearanceKey === DEMOKIT_APPEARANCE_KEY_AUTO) {
that._toggleLightOrDarkAppearance(e.matches);
}
});
this._bAttachedPrefersColorSchemeChangeListener = true;
}
},

/**
* Creates configuration for the application regarding the URI input.
* @private
Expand All @@ -552,6 +620,10 @@ sap.ui.define([
if (!(oUriParams.has('sap-ui-language') || oUriParams.has('sap-language'))) {
this._aConfiguration.push(DEMOKIT_CONFIGURATION_LANGUAGE);
}

if (!(oUriParams.has('sap-ui-theme') || oUriParams.has('sap-theme'))) {
this._aConfiguration.push(DEMOKIT_CONFIGURATION_APPEARANCE);
}
},

/**
Expand All @@ -562,6 +634,8 @@ sap.ui.define([
this._aConfiguration.forEach(function(sConf){
if (sConf === DEMOKIT_CONFIGURATION_LANGUAGE) {
Core.getConfiguration().setLanguage(DEMOKIT_DEFAULT_LANGUAGE);
} else if (sConf === DEMOKIT_CONFIGURATION_APPEARANCE) {
this._updateAppearance(DEMOKIT_APPEARANCE_KEY_AUTO);
}
}, this);

Expand All @@ -582,6 +656,8 @@ sap.ui.define([
if (sCookieValue !== "") {
if (sConf === DEMOKIT_CONFIGURATION_LANGUAGE) {
this._setSelectedLanguage(sCookieValue);
} else if (sConf === DEMOKIT_CONFIGURATION_APPEARANCE) {
this._updateAppearance(sCookieValue);
}

// If we have available value for the given cookie we remove it from the configuration array.
Expand Down
29 changes: 18 additions & 11 deletions src/sap.ui.documentation/src/sap/ui/documentation/sdk/view/App.view.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@
</layoutData>
</Button>

<MenuButton tooltip="{i18n>APP_INFORMATION_BTN_TOOLTIP}" id="aboutMenuButton" icon="sap-icon://hint" type="Transparent" visible="{=!${appView>/bSearchMode}}">
<MenuButton tooltip="{i18n>APP_INFORMATION_BTN_TOOLTIP}" id="aboutMenuButton" icon="sap-icon://action-settings" type="Transparent" visible="{=!${appView>/bSearchMode}}">
<layoutData>
<OverflowToolbarLayoutData priority="NeverOverflow" />
</layoutData>
Expand All @@ -99,23 +99,30 @@
<MenuItem text="{= ${versionData>/isBetaVersion} ? ${i18n>APP_VERSION_BETA_VERSION} : ${i18n>APP_VERSION_VERSION}} {versionData>/version} {=${versionData>/isDevVersion} ? ${i18n>APP_VERSION_IN_PROGRESS} : ''}" visible="{appView>/bPhoneSize}" />
<MenuItem key="change_version" text="{i18n>APP_CHANGE_VERSION_BTN}" visible="{appView>/bShowVersionSwitchInMenu}" />
<MenuItem key="feedback" text="{i18n>APP_INFORMATION_BTN_FEEDBACK}" visible="{appView>/bPhoneSize}" />
<MenuItem key="about" id="aboutMenuItem" text="{i18n>APP_INFORMATION_BTN_ABOUT}" />
<MenuItem key="legal" text="{i18n>APP_INFORMATION_BTN_LEGAL}" />
<MenuItem key="privacy" text="{i18n>APP_INFORMATION_BTN_PRIVACY}" />
<MenuItem key="terms_of_use" text="{i18n>APP_INFORMATION_BTN_TERMS_OF_USE}" visible="{=!${versionData>/isOpenUI5}}">
<MenuItem icon="sap-icon://hint" key="about" id="aboutMenuItem" text="{i18n>APP_INFORMATION_BTN_ABOUT}" />
<MenuItem icon="sap-icon://compare" key="legal" text="{i18n>APP_INFORMATION_BTN_LEGAL}" />
<MenuItem icon="sap-icon://locked" key="privacy" text="{i18n>APP_INFORMATION_BTN_PRIVACY}" />
<MenuItem icon="sap-icon://document-text" key="terms_of_use" text="{i18n>APP_INFORMATION_BTN_TERMS_OF_USE}" visible="{=!${versionData>/isOpenUI5}}">
<items>
<MenuItem key="terms_of_use" text="{i18n>APP_INFORMATION_BTN_TERMS_OF_USE}" />
<MenuItem key="copyright" text="{i18n>APP_INFORMATION_BTN_COPYRIGHT}" />
<MenuItem key="trademark" text="{i18n>APP_INFORMATION_BTN_TRADEMARK}" />
<MenuItem key="disclaimer" text="{i18n>APP_INFORMATION_BTN_DISCLAIMER}" />
</items>
</MenuItem>
<MenuItem text="{i18n>APP_INFORMATION_BTN_LICENSE}" key="license" visible="{versionData>/isOpenUI5}"/>
<MenuItem text="{i18n>APP_INFORMATION_BTN_TERMS_OF_USE}" key="terms_of_use" visible="{versionData>/isOpenUI5}"/>
<MenuItem text="{i18n>APP_INFORMATION_BTN_SITEMAP}" key="sitemap" visible="{versionData>/isOpenUI5}"/>
<MenuItem text="{i18n>APP_SETTINGS_DIALOG_LANGUAGE}" key="settings"/>
<MenuItem text="{i18n>APP_SETTINGS_DIALOG_COOKIE_PREFERENCES}" key="cookie_preferences"
visible="{= ${versionData>/supportsSWA}}"/>
<MenuItem icon="sap-icon://palette" key="appearance" text="{i18n>APP_INFORMATION_BTN_APPEARANCE}">
<items>
<MenuItem key="light" text="{i18n>APP_INFORMATION_BTN_APPEARANCE_LIGHT}" />
<MenuItem key="dark" text="{i18n>APP_INFORMATION_BTN_APPEARANCE_DARK}" />
<MenuItem key="auto" text="{i18n>APP_INFORMATION_BTN_APPEARANCE_AUTO}" />
</items>
</MenuItem>
<MenuItem icon="sap-icon://permission" text="{i18n>APP_INFORMATION_BTN_LICENSE}" key="license" visible="{versionData>/isOpenUI5}"/>
<MenuItem icon="sap-icon://document-text" text="{i18n>APP_INFORMATION_BTN_TERMS_OF_USE}" key="terms_of_use" visible="{versionData>/isOpenUI5}"/>
<MenuItem icon="sap-icon://tree" text="{i18n>APP_INFORMATION_BTN_SITEMAP}" key="sitemap" visible="{versionData>/isOpenUI5}"/>
<MenuItem icon="sap-icon://hello-world" text="{i18n>APP_SETTINGS_DIALOG_LANGUAGE}" key="settings"/>
<MenuItem icon="sap-icon://customize" text="{i18n>APP_SETTINGS_DIALOG_COOKIE_PREFERENCES}" key="cookie_preferences"
visible="{= ${versionData>/supportsSWA}}"/>
</items>
</Menu>
</menu>
Expand Down
27 changes: 9 additions & 18 deletions src/sap.ui.documentation/src/sap/ui/documentation/sdk/view/TopicDetailInitial.view.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,18 +112,15 @@
<l:BlockLayoutCell
width="2"
class="largeCell"
backgroundColorSet="ColorSet6"
backgroundColorShade="ShadeF">
backgroundColorSet="ColorSet11"
backgroundColorShade="ShadeD">
<l:VerticalLayout width="100%">
<custom:TitleLink
width="100%"
text="{i18n>TOPIC_DETAIL_INIT_BLOCK_3_TITLE}"
href="topic/8b49fc198bf04b2d9800fc37fecbb218"
class="demokitInitialPagesWhiteText"
titleStyle="H1"/>
<Text
text="{i18n>TOPIC_DETAIL_INIT_BLOCK_3_TEXT}"
class="demokitInitialPagesWhiteText"/>
<Text text="{i18n>TOPIC_DETAIL_INIT_BLOCK_3_TEXT}"/>
</l:VerticalLayout>
</l:BlockLayoutCell>
</l:BlockLayoutRow>
Expand All @@ -132,18 +129,15 @@
<l:BlockLayoutCell
width="2"
class="largeCell"
backgroundColorSet="ColorSet6"
backgroundColorShade="ShadeE">
backgroundColorSet="ColorSet11"
backgroundColorShade="ShadeC">
<l:VerticalLayout width="100%">
<custom:TitleLink
width="100%"
text="{i18n>TOPIC_DETAIL_INIT_BLOCK_4_TITLE}"
href="topic/23cfd955f58142389fa7c9097e11559c"
class="demokitInitialPagesWhiteText"
titleStyle="H1"/>
<Text
text="{i18n>TOPIC_DETAIL_INIT_BLOCK_4_TEXT}"
class="demokitInitialPagesWhiteText"/>
<Text text="{i18n>TOPIC_DETAIL_INIT_BLOCK_4_TEXT}"/>
</l:VerticalLayout>
</l:BlockLayoutCell>
<l:BlockLayoutCell
Expand Down Expand Up @@ -212,18 +206,15 @@
</l:BlockLayoutCell>
<l:BlockLayoutCell
class="largeCell"
backgroundColorSet="ColorSet6"
backgroundColorShade="ShadeF">
backgroundColorSet="ColorSet11"
backgroundColorShade="ShadeD">
<l:VerticalLayout width="100%">
<custom:TitleLink
width="100%"
text="{i18n>TOPIC_DETAIL_INIT_BLOCK_9_TITLE}"
href="topic/ec699e0817fb46a0817b0fa276a249f8"
class="demokitInitialPagesWhiteText"
titleStyle="H1"/>
<Text
text="{i18n>TOPIC_DETAIL_INIT_BLOCK_9_TEXT}"
class="demokitInitialPagesWhiteText"/>
<Text text="{i18n>TOPIC_DETAIL_INIT_BLOCK_9_TEXT}"/>
</l:VerticalLayout>
</l:BlockLayoutCell>

Expand Down
8 changes: 3 additions & 5 deletions src/sap.ui.documentation/src/sap/ui/documentation/sdk/view/Welcome.view.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
<l:BlockLayoutRow>
<l:BlockLayoutCell
backgroundColorSet="ColorSet11"
backgroundColorShade="ShadeF">
backgroundColorShade="ShadeA">
<l:Grid
defaultSpan="L6 M12 S12"
hSpacing="0"
Expand All @@ -89,10 +89,8 @@
href="topic/50eadaac8d2e49ee8996dc2b560cb76b"
text="{i18n>WELCOME_BLOCK_2_TITLE}"
titleStyle="H2"
class="demokitInitialPagesWhiteText sapUiSmallMarginBottom"/>
<Text
text="{i18n>WELCOME_BLOCK_2_TEXT}"
class="demokitInitialPagesWhiteText"/>
class="sapUiSmallMarginBottom"/>
<Text text="{i18n>WELCOME_BLOCK_2_TEXT}"/>
</l:VerticalLayout>
<Image
src="./resources/sap/ui/documentation/sdk/images/Fiori_guidelines_image.png"
Expand Down

0 comments on commit b917c25

Please sign in to comment.