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

fix(fxFlexOffset): use parent flow direction for margin property #369

Merged
merged 1 commit into from
Aug 9, 2017

Conversation

ThomasBurleson
Copy link
Contributor

@ThomasBurleson ThomasBurleson commented Aug 7, 2017

fxFlexOffset assigns inline margin-left style; assuming default flow directions == 'row'. If the parent flow direction == 'column', then a margin-top should be used.

Also added a subscription to an optional parent element LayoutDirective; which will trigger the FlexOffsetDirective to update the inline styles to match the current flow direction.

Note: if fxFlexOffset is used without a parent flexbox styling (set via css or directive), then a display:flex; flex-direction:row; will be auto assigned to the fxFlexOffset host element's parent.

Fixes #328.

@ThomasBurleson ThomasBurleson force-pushed the thomas/issue-328 branch 4 times, most recently from 6c8b0f3 to 00cd78a Compare August 7, 2017 23:29
@ThomasBurleson
Copy link
Contributor Author

@crisbeto - would you mind reviewing these?

@ThomasBurleson ThomasBurleson added this to the v2.0.0-beta.9 milestone Aug 8, 2017
Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

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

LGTM, a few nits.

let isBox = _.hasStyle(dom, 'margin-left', '32px');
let hasFlex = _.hasStyle(dom, 'flex', '1 1 1e-09px') || // IE
_.hasStyle(dom, 'flex', '1 1 1e-9px') || // Chrome
_.hasStyle(dom, 'flex', '1 1 0.000000001px') || // Safari
Copy link
Member

Choose a reason for hiding this comment

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

Perhaps this should be rounded down in the implementation for consistency?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

required. will not change.

_.hasStyle(dom, 'flex', '1 1 0px');

expect(isBox).toBeTruthy();
expect(hasFlex).toBeTruthy();
Copy link
Member

Choose a reason for hiding this comment

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

Since hasStyle returns a boolean, you can expect(hasFlex).toBe(true).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fixed.

});


describe('', () => {
Copy link
Member

Choose a reason for hiding this comment

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

This one's missing a title. If the test inside is standalone, they can be moved outside.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done.

* Cleanup
*/
ngOnDestroy() {
super.ngOnDestroy();
Copy link
Member

Choose a reason for hiding this comment

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

AFAIK this isn't necessary as of Angular 2.4.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

will leave as explicit indicator to call overriden, super class method.

@@ -84,7 +103,43 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh
// Protected methods
// *********************************************

/** The flex-direction of this element's host container. Defaults to 'row'. */
protected _layout = 'row';
Copy link
Member

Choose a reason for hiding this comment

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

This one should be strongly typed.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Why? I thought explicit value assignment defines type and negates need to declare it.

Copy link
Member

Choose a reason for hiding this comment

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

I think that this one will be inferred to string which could be anything. Aren't the only possible values row and column?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Now I understand. We do have value validators. I think you found a potential bug since we are not using that here NOR checking for row-reverse or column-reverse.

I will fix.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed with isFlowHorizontal() call on line 162.

@ThomasBurleson ThomasBurleson added pr: lgtm This PR has been approved by the reviewer pr: needs presubmit labels Aug 8, 2017
Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

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

LGTM

`fxFlexOffset` assigns inline `margin-left` style; assuming default flow directions == 'row'. If the parent flow direction == 'column', then a `margin-top` should be used.

Also added a subscription to an optional parent element LayoutDirective; which will trigger the FlexOffsetDirective to update the inline styles to match the current flow direction.

> Note: if `fxFlexOffset` is used **without**  a parent flexbox styling (set via css or directive), then a `display:flex; flex-direction:row;` will be auto assigned to the fxFlexOffset host element's parent.

Fixes #328.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
This pull request was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
cla: yes pr: lgtm This PR has been approved by the reviewer pr: needs presubmit
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Unexpected behaviour: offset is always horizontal
4 participants