OK, I thought it might be that the size of the inner elements is still > 0, so did like that (bolded changes)
Row { id: root property string color: "transparent" width: parent.width Rectangle { id: colorIndicator color: root.color width: Theme.itemSizeSmall *height: parent.height* border.color: "black" border.width: 5 } Button { id: button text: "Choose a color" *height: parent.height* onClicked: { var dialog = pageStack.push("Sailfish.Silica.ColorPickerDialog") dialog.accepted.connect(function() { root.color = dialog.color }) } } } The Rectangle hides and so Button's label does. It doesn't work with the Button. And after enabling and disabling the effect is similar as previously. The button doesn't react if clicked. Seems I'll have go for opacity, still the question is: why are these elements still shown? -- Marcin 2014-07-18 16:15 GMT+02:00 Marcin M. <marmistrz...@gmail.com>: > 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