Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-wizard): improve progress navigator responsiveness #2590

Merged
merged 17 commits into from
Jan 12, 2021

Conversation

niyap
Copy link
Contributor

@niyap niyap commented Dec 17, 2020

Overview
Wizard's navigation header is now responsive. On small sizes, when the space is not enough for the all ui5-wizard-tab instances to be fully visible, the are stacked in a group. Such a group could be positioned in the beginning or in the end of the wizard's navigation header, depending on the user interaction.
When a tab is stacked, it could be activated from a popover, which is presented on a click over the top most of the grouped tabs. The popover contains a button for each grouped tab. On mobile devices, a dialog is used.
For a disabled step, the button in the popover is also disabled, since it is not possible to activate such step.

Preview

WizardProgressNavigator.mov

FIXES: #2441

@CLAassistant
Copy link

CLAassistant commented Dec 17, 2020

CLA assistant check
All committers have signed the CLA.

@niyap niyap requested a review from MapTo0 December 17, 2020 11:20
Copy link
Member

@MapTo0 MapTo0 left a comment

Choose a reason for hiding this comment

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

the number / icon in the circle in not correctly centered. (check compact as wel)

}
}

_adjustHeaderOverflow() {
Copy link
Member

Choose a reason for hiding this comment

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

add some comments and try to split this a little bit.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

add some comments and try to split this a little bit.

Done

user-select: none;
background: #fff;
font-size: .875rem;
box-shadow: 0 0 0.25rem 0 rgba(0,0,0,0.15), inset 0 -0.0625rem 0 0 #d9d9d9;
Copy link
Member

Choose a reason for hiding this comment

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

use css vars

Copy link
Contributor Author

Choose a reason for hiding this comment

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

use css vars

Done

-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: #fff;
Copy link
Member

Choose a reason for hiding this comment

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

vars?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

vars?

Done

MapTo0
MapTo0 previously approved these changes Jan 8, 2021
@niyap
Copy link
Contributor Author

niyap commented Jan 11, 2021

the number / icon in the circle in not correctly centered. (check compact as wel)
Done

@niyap niyap merged commit 01cd6f9 into SAP:master Jan 12, 2021
ilhan007 pushed a commit that referenced this pull request Jan 13, 2021
* [WIP] ui5-wizard: improve progress navigator responsiveness

* feat(ui5-wizard): responsive behaviour

* ui5-wizard: selection-change fired as expected

* ui5-wizard: minor enhancements

* ui5-wizard: CSS adjustments

* ui5-wizard: CSS adjustments

* [WIP] ui5-wizard: improve progress navigator responsiveness

* feat(ui5-wizard): responsive behaviour

* ui5-wizard: selection-change fired as expected

* ui5-wizard: minor enhancements

* ui5-wizard: CSS adjustments

* css improvements

* ui5-wizard: IE fix and other minor adjustments

* ui5-wizard: attributes names changed

Co-authored-by: Martin Hristov <martin.r.hristov@gmail.com>
ilhan007 added a commit that referenced this pull request Mar 2, 2021
We introduced a small degradation with the following [PR](#2590), using a fixed color, instead of CSS var. Now, the Wizard navigation looks fine in all themes:

FIXES: #2877
ilhan007 added a commit that referenced this pull request Mar 17, 2021
We introduced a small degradation with the following [PR](#2590), using a fixed color, instead of CSS var. Now, the Wizard navigation looks fine in all themes:

FIXES: #2877
ilhan007 added a commit that referenced this pull request Mar 18, 2021
We introduced a small degradation with the following [PR](#2590), using a fixed color, instead of CSS var. Now, the Wizard navigation looks fine in all themes:

FIXES: #2877
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ui5-wizard: responsive behavior
4 participants