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

[Shape] Fix 3D flip starting zoom, fix nested shapes, ignore child elements with class 'active' #464

Merged
merged 11 commits into from
Feb 25, 2019

Conversation

lubber-de
Copy link
Member

@lubber-de lubber-de commented Feb 7, 2019

Description

This PR fixes the following issues:

  • Whenever a shape had child elements which also had the active class set (either from another element like menu or a nested shape but not the "own" active side), the whole animation was messed up (see screenshots/testcase)

  • Therefore nested shape elements were not working

  • The Flip animations always started with an hard increased size to gain the 3d-Cube effect. But it still looked misleading instead of a smooth transition. Reason for this was, how shape dealt with translateZ. The fix also reduced the amount of needed code 🙂

Testcase

Fixed

http://jsfiddle.net/qtL0dkr3/

Broken

http://jsfiddle.net/mpkjave0/1/

Screenshot

Nested shapes

Before After
shape_nested_bad shape_good

Flip Animation

Before After
shape_3d_bad shape_3d_good

Closes

Semantic-Org/Semantic-UI#4704
Semantic-Org/Semantic-UI#4699
Semantic-Org/Semantic-UI#5127

y0hami
y0hami previously approved these changes Feb 10, 2019
Copy link
Member

@y0hami y0hami left a comment

Choose a reason for hiding this comment

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

LGTM

@lubber-de lubber-de added the state/on-hold Issues and pull requests which are on hold for any reason label Feb 12, 2019
@lubber-de
Copy link
Member Author

🤔 Not completely satisfied with the transition between different sizes.
I am going to fix this also when the next shapebox differs in size with the current shapebox. Looks too ugly (even if probably rarely used)
Don't merge yet. I am on my way 🙂

@lubber-de lubber-de removed the state/on-hold Issues and pull requests which are on hold for any reason label Feb 12, 2019
@lubber-de
Copy link
Member Author

Fixed the transition if shape sides differ in size.
Now it looks as smooth as it should have been before 😄 I also updated the jsfiddle to http://jsfiddle.net/qtL0dkr3/
@hammy2899 @prudho @ColinFrick Please review again.

Before After
shape_nested_good shape_good

Copy link
Member

@y0hami y0hami left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link
Member

@ColinFrick ColinFrick left a comment

Choose a reason for hiding this comment

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

LGTM

@y0hami y0hami merged commit f5f3f2c into fomantic:develop Feb 25, 2019
@y0hami y0hami removed state/awaiting-reviews Pull requests which are waiting for reviews labels Feb 25, 2019
@lubber-de lubber-de modified the milestones: 2.7.x, 2.7.3 Feb 28, 2019
@y0hami y0hami mentioned this pull request Apr 1, 2019
@lubber-de lubber-de deleted the fix/4707/shape_active_side branch April 2, 2019 09:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lang/javascript Anything involving JavaScript tag/sui-issue Taken from an existing Issue/PR of SUI type/bug Any issue which is a bug or PR which fixes a bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants