Redesign overview app header with improved navigation UI - #20
Merged
Conversation
The header of every abap2UI5 overview app gets a ToolbarSpacer between the four repository buttons (they open an app in this system) and the documentation and GitHub links (they leave it), and the GitHub button drops sap-icon://source-code - reserved for the per-sample source links - for sap-icon://chain-link. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015z7hsoV9crzhp65ou1Cq9v
The header moves from the page's headerContent into a Bar in its customHeader: back button and title on the left, on the right this repository's Regenerate Demo Data button, then - behind a separator - the sample repositories of the family, another separator, documentation and GitHub. The entries become core:Icons - a Button on 1.71 cannot carry a colour, its coloured ButtonType values are 1.73+ - with two states and no more: active in the sap_horizon accent #0064D9, and the one inactive icon, this repository's own entry, in the semantic Neutral grey. A repository that is not on this system stays active: install_display( ) opens a popover on the pressed icon saying what has to be installed, with the link to it, instead of dropping the user on GitHub without a word. The framework's start page entry is gone - the row lists sample repositories - the GitHub icon is sap-icon://globe, and the siblings are named Control Samples and Stack Samples. The overview also gets a back button, which it never had: the family icons navigate into it, so there has to be a way out. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015z7hsoV9crzhp65ou1Cq9v
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Refactored the shared header component across abap2UI5 overview apps to improve user experience and provide better feedback for unavailable repositories. The header now uses a custom Bar with semantic icons instead of buttons, and displays informative popovers for uninstalled sample repositories.
Key Changes
Header Structure: Moved from page header buttons to a custom Bar in
customHeaderwith left and right content areasIcon-based Navigation: Replaced Button controls with
core:Iconelements for repository navigation#0064D9)Install Feedback: Added
install_display()method to show popovers for uninstalled repositoriesINSTALLevent typeRemoved Startup Reference: Eliminated the framework startup page from the shared header
cs_overview-startupconstantcs_url-frameworkconstantColor Constants: Added
cs_colorstructure to define semantic colors for active/inactive statesHeader Separator: New
header_separator()method to visually group related header entries withToolbarSeparatorUpdated Documentation: Revised class and method comments to reflect new header behavior and architecture
Implementation Details
The header now properly distinguishes between:
Icon IDs match class names to enable popover anchoring for install messages
Maintains consistency with copies in
abap2UI5/samplesandabap2UI5/samples-controlsrepositorieshttps://claude.ai/code/session_015z7hsoV9crzhp65ou1Cq9v