[SailfishDevel] How to properly hide and show UI elements?

[sfietkonstantin at free.fr]

Add an opacity change from 1 to 0 inside your animation ?
Or add a SequentialAnimation with a PropertyChanges to set visible at false at end of animation. Don't forget to disable "reversible" property, and write the reverse animation too.

----- Mail original -----
De: marmistrzmar at gmail.com
À: "Sailfish OS Developers" <devel at lists.sailfishos.org>
Envoyé: Vendredi 18 Juillet 2014 13:09:37
Objet: Re: [SailfishDevel] How to properly hide and show UI elements?






Visible = false is instant so it can't be animated. It won't look really nice without animation 



On 18.07.2014 12:42 Dmitriy Purgin wrote: 


so you try to hide a component by setting its height = 0? have you 
tried visible = false? 


2014-07-18 16:30 GMT+06:00 Marcin M. < marmistrzmar at gmail.com >: 
> I'm want to display some elements only when needed. So I did it like this 
> (the components are inside a Column): 
> 
> TextSwitch 
> { 
> id: switchTextColor 
> text: qsTr("Override text color") 
> checked: settings.overrideTextColor 
> states: State 
> { 
> name: "checked"; when: switchTextColor.checked == true; 
> PropertyChanges { target: textColorButton; height: 
> Theme.itemSizeSmall} 
> } 
> transitions: Transition 
> { 
> from: "*"; to: "checked"; reversible: true 
> NumberAnimation { property: "height"; duration: 200; 
> easing.type: Easing.InOutQuad } 
> } 
> } 
> 
> ColorButton 
> { 
> id: textColorButton 
> height: 0 
> } 
> 
> And the ColorButton component is: 
> Row 
> { 
> id: root 
> property string color: "transparent" 
> width: parent.width 
> Rectangle 
> { 
> id: colorIndicator 
> color: root.color 
> width: Theme.itemSizeSmall 
> height: Theme.itemSizeSmall 
> border.color: "black" 
> border.width: 5 
> } 
> 
> Button 
> { 
> id: button 
> text: "Choose a color" 
> onClicked: 
> { 
> var dialog = pageStack.push("Sailfish.Silica.ColorPickerDialog") 
> dialog.accepted.connect(function() { root.color = dialog.color 
> }) 
> } 
> } 
> } 
> 
> Instead of hiding, the textColorButton is at the top of the Page. If I check 
> switchTextColor, then it goes where it should be. If then I uncheck the 
> Switch, the component below goes up, but the textColorButton doesn't 
> disappear (screenshot)? 
> 
> What am I doing wrong? 
> 
> -- 
> Marcin 
> 
> _______________________________________________ 
> SailfishOS.org Devel mailing list 
> To unsubscribe, please send a mail to marmistrzmar at gmail.com 

_______________________________________________ 

SailfishOS.org Devel mailing list 
To unsubscribe, please send a mail to marmistrzmar at gmail.com 






On 18.07.2014 12:42 Dmitriy Purgin wrote: 


so you try to hide a component by setting its height = 0? have you 
tried visible = false? 


2014-07-18 16:30 GMT+06:00 Marcin M. < marmistrzmar at gmail.com >: 
> I'm want to display some elements only when needed. So I did it like this 
> (the components are inside a Column): 
> 
> TextSwitch 
> { 
> id: switchTextColor 
> text: qsTr("Override text color") 
> checked: settings.overrideTextColor 
> states: State 
> { 
> name: "checked"; when: switchTextColor.checked == true; 
> PropertyChanges { target: textColorButton; height: 
> Theme.itemSizeSmall} 
> } 
> transitions: Transition 
> { 
> from: "*"; to: "checked"; reversible: true 
> NumberAnimation { property: "height"; duration: 200; 
> easing.type: Easing.InOutQuad } 
> } 
> } 
> 
> ColorButton 
> { 
> id: textColorButton 
> height: 0 
> } 
> 
> And the ColorButton component is: 
> Row 
> { 
> id: root 
> property string color: "transparent" 
> width: parent.width 
> Rectangle 
> { 
> id: colorIndicator 
> color: root.color 
> width: Theme.itemSizeSmall 
> height: Theme.itemSizeSmall 
> border.color: "black" 
> border.width: 5 
> } 
> 
> Button 
> { 
> id: button 
> text: "Choose a color" 
> onClicked: 
> { 
> var dialog = pageStack.push("Sailfish.Silica.ColorPickerDialog") 
> dialog.accepted.connect(function() { root.color = dialog.color 
> }) 
> } 
> } 
> } 
> 
> Instead of hiding, the textColorButton is at the top of the Page. If I check 
> switchTextColor, then it goes where it should be. If then I uncheck the 
> Switch, the component below goes up, but the textColorButton doesn't 
> disappear (screenshot)? 
> 
> What am I doing wrong? 
> 
> -- 
> Marcin 
> 
> _______________________________________________ 
> SailfishOS.org Devel mailing list 
> To unsubscribe, please send a mail to marmistrzmar at gmail.com 

_______________________________________________ 

SailfishOS.org Devel mailing list 
To unsubscribe, please send a mail to marmistrzmar at gmail.com 



_______________________________________________
SailfishOS.org Devel mailing list
To unsubscribe, please send a mail to devel-unsubscribe at lists.sailfishos.org