It might be an option... I'll take a look. But why is the component left
there? If it has height = 0, it should not be displayed.
--
Marcin
2014-07-18 13:16 GMT+02:00 <sfietkonstan...@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: marmistrz...@gmail.com
> À: "Sailfish OS Developers" <devel@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. < marmistrz...@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 marmistrz...@gmail.com
>
> _______________________________________________
>
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to marmistrz...@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. < marmistrz...@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 marmistrz...@gmail.com
>
> _______________________________________________
>
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to marmistrz...@gmail.com
>
>
>
> _______________________________________________
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to
> devel-unsubscr...@lists.sailfishos.org
> _______________________________________________
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to
> devel-unsubscr...@lists.sailfishos.org
_______________________________________________
SailfishOS.org Devel mailing list
To unsubscribe, please send a mail to devel-unsubscr...@lists.sailfishos.org
