Skip to content

Commit

Permalink
fix(showHideWhen): remove hidden attribute on directives and use classes
Browse files Browse the repository at this point in the history 
Each directive applies a different class so they won’t remove each
other if they’re on the same element. If either class is applied the
element won’t display.

closes #5836
  • Loading branch information
@brandyscarney
brandyscarney committed Apr 15, 2016
1 parent dca6540 commit 5692abe
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 16 deletions.
1 change: 1 addition & 0 deletions ionic/components.core.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"components/modal/modal",
"components/refresher/refresher",
"components/scroll/scroll",
"components/show-hide-when/show-hide-when",
"components/slides/slides",
"components/spinner/spinner",
"components/virtual-scroll/virtual-scroll";
Expand Down
14 changes: 14 additions & 0 deletions ionic/components/show-hide-when/show-hide-when.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
@import "../../globals.core";

// Show / Hide When
// --------------------------------------------------

// Applied by the showWhen directive
.hidden-show-when {
display: none;
}

// Applied by the hideWhen directive
.hidden-hide-when {
display: none;
}
18 changes: 2 additions & 16 deletions ionic/components/show-hide-when/show-hide-when.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export class DisplayWhen {
@Directive({
selector: '[showWhen]',
host: {
'[hidden]': 'hidden'
'[class.hidden-show-when]': '!isMatch'
}
})
export class ShowWhen extends DisplayWhen {
Expand All @@ -104,13 +104,6 @@ export class ShowWhen extends DisplayWhen {
super(showWhen, platform, ngZone);
}

/**
* @private
*/
get hidden(): boolean {
return !this.isMatch;
}

}

/**
Expand Down Expand Up @@ -148,7 +141,7 @@ export class ShowWhen extends DisplayWhen {
@Directive({
selector: '[hideWhen]',
host: {
'[hidden]': 'hidden'
'[class.hidden-hide-when]': 'isMatch'
}
})
export class HideWhen extends DisplayWhen {
Expand All @@ -161,11 +154,4 @@ export class HideWhen extends DisplayWhen {
super(hideWhen, platform, ngZone);
}

/**
* @private
*/
get hidden(): boolean {
return this.isMatch;
}

}
10 changes: 10 additions & 0 deletions ionic/components/show-hide-when/test/basic/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,14 @@
hideWhen="android,ios"
</p>

<p hideWhen="ios" [hidden]="toggle" style="background:magenta; color:white">
hideWhen="ios" [hidden]=toggle
</p>

<p showWhen="android" hideWhen="landscape" style="background:black; color:white">
showWhen="android" hideWhen="landscape"
</p>

<button (click)="toggle = !toggle">Toggle Hide When</button>

</ion-content>

5 comments on commit 5692abe

@SP1966
Copy link

@SP1966 SP1966 commented on 5692abe Apr 21, 2016

Choose a reason for hiding this comment

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

After upgrading from Beta.4 to Beta.5 with no other changes neither showWhen nor hideWhen are working.

showwhen

In the above example you can see that using showWhen to only show appropriate buttons isn't working as both are visible on both platforms in the Chrome.

@brandyscarney
Copy link
Member Author

Choose a reason for hiding this comment

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

@SP1966 Can you try removing node_modules, running npm install again and restarting ionic serve? There may be something going on with the Sass build. If you're still having the issue could you please create a new issue with the html markup for this. Thanks!

@SP1966
Copy link

@SP1966 SP1966 commented on 5692abe Apr 21, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

Brandy,

I did as you asked but now I'm getting the following error when running Ionic Serve:

node_modules/ionic-angular/components.core.scss Error: Import directives may not be used within control directives or mixins. on line 35 of node_modules/ionic-angular/components.core.scss >> @import "fonts/ionicons"; --^

This results in no CSS styles showing up at all.

@brandyscarney
Copy link
Member Author

Choose a reason for hiding this comment

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

@SP1966 Hey, so this error was caused by a dependency of beta.5, we actually just released beta.6 to resolve this error. It doesn't have many differences from beta.5, so you should be able to update to it without issues. Could you please try that? Thank you!

https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#200-beta6-2016-04-21

@SP1966
Copy link

@SP1966 SP1966 commented on 5692abe Apr 21, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

Beta 5/6 does not resolve the showWhen/hideWhen issue for me, I'll go ahead and create a new issue.

I really appreciate all your help!

Please sign in to comment.