Skip to content

Commit

Permalink
[INTERNAL] Demo Kit: Redesigned application header
Browse files Browse the repository at this point in the history 
The Demo Kit has undergone modernization to align with the latest design
guidelines. The redesigned header is now responsive, adapting seamlessly
to different screen sizes and enhancing the overall user experience
with improved intuitiveness.

Changes Made:

- Replaced the old view setup with sap.tnt.ToolPage, utilizing its
extensive functionalities, including side navigation and subheader.
- By default, the search field is now open on large screens.
- Refined the behavior of the search field for enhanced usability.
- The application logo now adapts dynamically based on the selected theme.
- Added a new 'Tools' subitem menu in the subheader, offering
convenient external links.
- Eliminated unnecessary submenuitems from the Menu Button in the toolbar.
- Adjusted the version info ObjectStatus in the toolbar for better alignment.
- Resolved issues with the theme picker, ensuring theme event
dispatching remains in sync with the applied theme.
- Conducted code cleanup, removing unused functionalities for
improved codebase cleanliness.
- Removed the old 'Get Feedback' button from 'Settings' in the toolbar and
all related functionalities.

Jira: BGSOFUIPIRIN-6119
Change-Id: I615a7f361859e2f11fd79fe52bedbbdb8db02a11
  • Loading branch information
@kgogov
kgogov committed Sep 7, 2023
1 parent db2e26e commit dee0c9c
Show file tree
Hide file tree
Showing 22 changed files with 2,373 additions and 2,026 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,9 @@ yarn-debug.log*
.yarn-integrity

# Ignore documentation artifacts
src/testsuite/src/main/webapp/documentation-config.js
src/testsuite/src/main/webapp/docs/
src/testsuite/src/main/webapp/documentation-config.js
src/testsuite/src/main/webapp/searchindex.json
src/sap.ui.documentation/src/sap/ui/documentation/sdk/model/data/guide/

# Ignore default target directory for the npm package 'ui5-schemas'
Expand Down
54 changes: 32 additions & 22 deletions src/sap.ui.documentation/src/sap/ui/documentation/Search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,21 @@
* ${copyright}
*/
sap.ui.define([
'sap/ui/core/Control',
'sap/m/Button',
'sap/m/library',
'sap/ui/core/Core',
'sap/m/SearchField'
"sap/ui/core/Core",
"sap/ui/core/Control",
"sap/ui/Device",
"sap/ui/thirdparty/jquery",
"sap/m/library",
"sap/m/Button",
"sap/m/SearchField"
], function(
Control,
Button,
mobileLibrary,
Core,
SearchField
Core,
Control,
Device,
jQuery,
mobileLibrary,
Button,
SearchField
) {
"use strict";
/**
Expand Down Expand Up @@ -121,12 +125,16 @@ sap.ui.define([
}
};

Search.prototype.onsapescape = function() {
// close global search when esc key is pressed.
if (this.getIsOpen()) {
this._toggleOpen(false);
}
};
// Close the global search when escape key is pressed
// This is relevant only for devices less than 1024px
Search.prototype.onsapescape = function(oEvent) {
var viewportWidth = jQuery(window).width(),
bDesktopSize = viewportWidth >= Device.media._predefinedRangeSets[Device.media.RANGESETS.SAP_STANDARD_EXTENDED].points[1];

if (this.getIsOpen() && !bDesktopSize) {
this._toggleOpen(false);
}
};

Search.prototype.getValue = function() {
return this._lazyLoadSearchField().getValue();
Expand Down Expand Up @@ -191,12 +199,12 @@ sap.ui.define([
if (!this.getAggregation("_openingButton")) {
var oBtn = new Button(this.getId() + "-openingBtn", {
icon: "sap-icon://search",
type: mobileLibrary.ButtonType.Transparent,
type: mobileLibrary.ButtonType.Default,
press: function() {
this._toggleOpen(true);
}.bind(this)
});
oBtn.addStyleClass("sdkHeaderSearchButton"); //TODO
}).addStyleClass("sapUiDemokitSearchOpeningButton sapMBarChild");

this.setAggregation("_openingButton", oBtn, bSuppressInvalidate);
}
return this.getAggregation("_openingButton");
Expand All @@ -206,15 +214,16 @@ sap.ui.define([
if (!this.getAggregation("_closingButton")) {
var oBtn = new Button(this.getId() + "-closingBtn", {
text: Core.getLibraryResourceBundle("sap.ui.documentation").getText("APP_SEARCH_FIELD_CLOSE"),
type: mobileLibrary.ButtonType.Transparent,
type: mobileLibrary.ButtonType.Default,
press: function() {

this._minimizeSearchField().then(function() {
this._toggleOpen(false);
this.setValue("");
}.bind(this));

}.bind(this)
});
}).addStyleClass("sapMBarChild");

this.setAggregation("_closingButton", oBtn, bSuppressInvalidate);
}
return this.getAggregation("_closingButton");
Expand All @@ -223,6 +232,7 @@ sap.ui.define([
Search.prototype._lazyLoadSearchField = function(bSuppressInvalidate) {
if (!this.getAggregation("_searchField")) {
var oSrch = new SearchField(this.getId() + "-searchField", {
placeholder: Core.getLibraryResourceBundle("sap.ui.documentation").getText("APP_HEADER_SEARCH_FIELD_PLACEHOLDER"),
showSearchButton: true,
search: function(oEvent) {
var oParameters = oEvent.getParameters();
Expand Down
33 changes: 28 additions & 5 deletions src/sap.ui.documentation/src/sap/ui/documentation/messagebundle.properties
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
#This is the resource bundle for the SAPUI5 sap.ui.documentation library
#__ldi.translation.uuid=bd0f032b-bee0-4495-94e5-e85f737e2045

#XHED: Application header title text
APP_HEADER_TITLE = UI5 Demo Kit
#XALT: Application header logo alt text
APP_HEADER_LOGO_ALT = UI5 Logo
#XTXT: Application header search field placeholder text
APP_HEADER_SEARCH_FIELD_PLACEHOLDER = Search Anything
#XMIT: The menu item that navigates to the home page
APP_TABHEADER_ITEM_HOME = Home
#XMIT: The menu item that navigates to the 'Documentation' page
Expand All @@ -13,6 +19,14 @@ APP_TABHEADER_ITEM_SAMPLES = Samples
APP_TABHEADER_ITEM_DEMO_APPS = Demo Apps
#XMIT: The menu item that navigates to the 'Tools' page
APP_TABHEADER_ITEM_TOOLS = Tools
#XMIT: The submenu item that navigates to the 'Fiori Tools' page
APP_TABHEADER_SUBITEM_FIORI_TOOLS = Fiori Tools
#XMIT: The submenu item that navigates to the 'Icon Explorer' page
APP_TABHEADER_SUBITEM_ICON_EXPLORER = Icon Explorer
#XMIT: The submenu item that navigates to the 'UI5 Inspector' page
APP_TABHEADER_SUBITEM_UI5_INSPECTOR = UI5 Inspector
#XMIT: The submenu item that navigates to the 'UI5 Tooling' page
APP_TABHEADER_SUBITEM_UI5_TOOLING = UI5 Tooling
#XBUT: The button that allows to change the current version
APP_CHANGE_VERSION_BTN = Change version
#XTXT: Text for beta version
Expand All @@ -22,9 +36,9 @@ APP_VERSION_VERSION = Version
#XTXT: Text for version that is not for productive use
APP_VERSION_NOT_PRODUCTIVE = \u2013 not for productive use!
#XTXT: Text for version which is in development progress
APP_VERSION_IN_PROGRESS = - development in progress!
#XTOL: Tooltip for the button that opens the 'Give Feedback' dialog
APP_FEEDBACK_BTN_TOOLTIP = Give Feedback
APP_VERSION_IN_PROGRESS = (in development)
#XTOL: Tooltip for the button that opens the 'Feedback' dialog
APP_FEEDBACK_BTN_TOOLTIP = Feedback
#XTOL: Tooltip for the button that opens the 'News' dialog
APP_NEWS_BTN_TOOLTIP = News
#XBUT: The button that dismisses all news from the news popover marking them old
Expand All @@ -35,8 +49,10 @@ APP_NEWS_SHOW_ALL_BTN = Show all news
APP_NEWS_NO_NEW_TEXT = No news
#XBUT: Text for button that closes
APP_SEARCH_FIELD_CLOSE = Close
#XTOL: Tooltip for the 'More Information' button that opens an additional menu
APP_INFORMATION_BTN_TOOLTIP = More Information
#XTOL: Tooltip for the 'Settings' button that opens an additional menu
APP_INFORMATION_BTN_TOOLTIP = Settings
#XTOL: Tooltip for the 'Legal' button that opens an additional menu
APP_LEGAL_BTN_TOOLTIP = Legal Information
#XMIT: The menu item that opens the 'Give Feedback' dialog
APP_INFORMATION_BTN_FEEDBACK = Feedback
#XMIT: The menu item that opens the 'About' dialog
Expand Down Expand Up @@ -72,6 +88,13 @@ APP_INFORMATION_BTN_LICENSE = License
#XTXT: The information note about cookies that were used in the application
APP_COOKIES_TEXT = We use cookies to improve your experience on our site. By continuing to use this website, you consent to use our cookies.

#XMIT: The menu item that opens the 'News' dialog
APP_INFORMATION_BTN_NEWS = News
#XMIT: The menu item that opens the 'Setting' submenu
APP_INFORMATION_BTN_SETTINGS = Settings
#XMIT: The menu item that opens the 'Polices' submenu
APP_INFORMATION_BTN_POLICIES = Policies

#XHED: New news Group title
NEWS_NEW_GROUP_TITLE = New
#XHED: Read/Old news Group title
Expand Down
18 changes: 15 additions & 3 deletions src/sap.ui.documentation/src/sap/ui/documentation/messagebundle_en.properties
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@

APP_HEADER_TITLE=UI5 Demo Kit
APP_HEADER_LOGO_ALT=UI5 Logo
APP_HEADER_SEARCH_FIELD_PLACEHOLDER=Search Anything
APP_TABHEADER_ITEM_HOME=Home
APP_TABHEADER_ITEM_DOCUMENTATION=Documentation
APP_TABHEADER_ITEM_API_REFERENCE=API Reference
APP_TABHEADER_ITEM_SAMPLES=Samples
APP_TABHEADER_ITEM_DEMO_APPS=Demo Apps
APP_TABHEADER_ITEM_TOOLS=Tools
APP_TABHEADER_SUBITEM_FIORI_TOOLS=Fiori Tools
APP_TABHEADER_SUBITEM_ICON_EXPLORER=Icon Explorer
APP_TABHEADER_SUBITEM_UI5_INSPECTOR=UI5 Inspector
APP_TABHEADER_SUBITEM_UI5_TOOLING=UI5 Tooling
APP_CHANGE_VERSION_BTN=Change Version
APP_VERSION_BETA_VERSION=Beta version
APP_VERSION_VERSION=Version
APP_VERSION_NOT_PRODUCTIVE=\u2013 not for productive use\!
APP_VERSION_IN_PROGRESS=- development in progress.
APP_FEEDBACK_BTN_TOOLTIP=Give Feedback
APP_VERSION_IN_PROGRESS=(in development)
APP_FEEDBACK_BTN_TOOLTIP=Feedback
APP_NEWS_BTN_TOOLTIP=News
APP_NEWS_DISMISS_ALL_BTN=Dismiss All News Items
APP_NEWS_SHOW_ALL_BTN=Show All News
APP_NEWS_NO_NEW_TEXT=No News
APP_SEARCH_FIELD_CLOSE=Close
APP_INFORMATION_BTN_TOOLTIP=More Information
APP_INFORMATION_BTN_TOOLTIP=Settings
APP_LEGAL_BTN_TOOLTIP=Legal Information
APP_INFORMATION_BTN_FEEDBACK=Feedback
APP_INFORMATION_BTN_ABOUT=About
APP_INFORMATION_BTN_LEGAL=Legal
Expand All @@ -35,6 +43,10 @@ APP_INFORMATION_BTN_DISCLAIMER=Disclaimer
APP_INFORMATION_BTN_LICENSE=License
APP_COOKIES_TEXT=We use cookies to improve your experience on our site. By continuing to use this website, you consent to use our cookies.

APP_INFORMATION_BTN_NEWS=News
APP_INFORMATION_BTN_SETTINGS=Settings
APP_INFORMATION_BTN_POLICIES=Policies

NEWS_NEW_GROUP_TITLE=New
NEWS_READ_GROUP_TITLE=Read
NEWS_BTN_MARK_AS_READ=Mark All as Read
Expand Down
18 changes: 15 additions & 3 deletions src/sap.ui.documentation/src/sap/ui/documentation/messagebundle_en_GB.properties
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@

APP_HEADER_TITLE=UI5 Demo Kit
APP_HEADER_LOGO_ALT=UI5 Logo
APP_HEADER_SEARCH_FIELD_PLACEHOLDER=Search Anything
APP_TABHEADER_ITEM_HOME=Home
APP_TABHEADER_ITEM_DOCUMENTATION=Documentation
APP_TABHEADER_ITEM_API_REFERENCE=API Reference
APP_TABHEADER_ITEM_SAMPLES=Samples
APP_TABHEADER_ITEM_DEMO_APPS=Demo Apps
APP_TABHEADER_ITEM_TOOLS=Tools
APP_TABHEADER_SUBITEM_FIORI_TOOLS=Fiori Tools
APP_TABHEADER_SUBITEM_ICON_EXPLORER=Icon Explorer
APP_TABHEADER_SUBITEM_UI5_INSPECTOR=UI5 Inspector
APP_TABHEADER_SUBITEM_UI5_TOOLING=UI5 Tooling
APP_CHANGE_VERSION_BTN=Change Version
APP_VERSION_BETA_VERSION=Beta Version
APP_VERSION_VERSION=Version
APP_VERSION_NOT_PRODUCTIVE=\u2013 not for productive use\!
APP_VERSION_IN_PROGRESS=- development in progress.
APP_FEEDBACK_BTN_TOOLTIP=Give Feedback
APP_VERSION_IN_PROGRESS=(in development)
APP_FEEDBACK_BTN_TOOLTIP=Feedback
APP_NEWS_BTN_TOOLTIP=News
APP_NEWS_DISMISS_ALL_BTN=Dismiss All News Items
APP_NEWS_SHOW_ALL_BTN=Show All News
APP_NEWS_NO_NEW_TEXT=No News
APP_SEARCH_FIELD_CLOSE=Close
APP_INFORMATION_BTN_TOOLTIP=More Information
APP_INFORMATION_BTN_TOOLTIP=Settings
APP_LEGAL_BTN_TOOLTIP=Legal Information
APP_INFORMATION_BTN_FEEDBACK=Feedback
APP_INFORMATION_BTN_ABOUT=About
APP_INFORMATION_BTN_LEGAL=Legal
Expand All @@ -35,6 +43,10 @@ APP_INFORMATION_BTN_DISCLAIMER=Disclaimer
APP_INFORMATION_BTN_LICENSE=Licence
APP_COOKIES_TEXT=We use cookies to improve your experience on our site. By continuing to use this website, you consent to the use of our cookies.

APP_INFORMATION_BTN_NEWS=News
APP_INFORMATION_BTN_SETTINGS=Settings
APP_INFORMATION_BTN_POLICIES=Policies

NEWS_NEW_GROUP_TITLE=New
NEWS_READ_GROUP_TITLE=Read
NEWS_BTN_MARK_AS_READ=Mark All as Read
Expand Down
24 changes: 0 additions & 24 deletions src/sap.ui.documentation/src/sap/ui/documentation/sdk/Component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,6 @@ sap.ui.define([


// MODELS

loadVersionInfo: function () {
return new Promise(function (resolve, reject) {
jQuery.ajax({
Expand All @@ -145,29 +144,6 @@ sap.ui.define([
});
},

loadMessagesInfo: function () {
var oComponent = this;

if (this.oMessagesInfo) {
return this.oMessagesInfo;
}

return new Promise(function (resolve, reject) {
jQuery.ajax({
async: true,
url : sap.ui.require.toUrl('sap/ui/documentation/sdk/model/messagesData.json'),
dataType : 'json',
success : function(oResponse) {
resolve(oResponse);
oComponent.oMessagesInfo = oResponse;
},
error : function (err) {
reject(err);
}
});
});
},

_bindVersionModel : function (oVersionInfo) {
var oVersion,
bSnapshot,
Expand Down
Loading

0 comments on commit dee0c9c

Please sign in to comment.