<html><head><style type="text/css">body, p, li { font-family: NokiaPureTextLight; }</style></head><body><div id="fenix-user-content"><div id="fenix-user-content">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Visible = false is instant so it can't be animated. It won't look really nice without animation</p></div><br><div id="fenix-reply-header"><p>On 18.07.2014 12:42 Dmitriy Purgin wrote:<br></p></div><div id="fenix-quoted-body"><div>
so you try to hide a component by setting its height = 0? have you<br>
tried visible = false?<br>
<br>
</div>
<div>
2014-07-18 16:30 GMT+06:00 Marcin M. <<a href="mailto:marmistrzmar@gmail.com">marmistrzmar@gmail.com</a>>:<br>
> I'm want to display some elements only when needed. So I did it like this<br>
> (the components are inside a Column):<br>
><br>
> TextSwitch<br>
> {<br>
> id: switchTextColor<br>
> text: qsTr("Override text color")<br>
> checked: settings.overrideTextColor<br>
> states: State<br>
> {<br>
> name: "checked"; when: switchTextColor.checked == true;<br>
> PropertyChanges { target: textColorButton; height:<br>
> Theme.itemSizeSmall}<br>
> }<br>
> transitions: Transition<br>
> {<br>
> from: "*"; to: "checked"; reversible: true<br>
> NumberAnimation { property: "height"; duration: 200;<br>
> easing.type: Easing.InOutQuad }<br>
> }<br>
> }<br>
><br>
> ColorButton<br>
> {<br>
> id: textColorButton<br>
> height: 0<br>
> }<br>
><br>
> And the ColorButton component is:<br>
> Row<br>
> {<br>
> id: root<br>
> property string color: "transparent"<br>
> width: parent.width<br>
> Rectangle<br>
> {<br>
> id: colorIndicator<br>
> color: root.color<br>
> width: Theme.itemSizeSmall<br>
> height: Theme.itemSizeSmall<br>
> border.color: "black"<br>
> border.width: 5<br>
> }<br>
><br>
> Button<br>
> {<br>
> id: button<br>
> text: "Choose a color"<br>
> onClicked:<br>
> {<br>
> var dialog = pageStack.push("Sailfish.Silica.ColorPickerDialog")<br>
> dialog.accepted.connect(function() { root.color = dialog.color<br>
> })<br>
> }<br>
> }<br>
> }<br>
><br>
> Instead of hiding, the textColorButton is at the top of the Page. If I check<br>
> switchTextColor, then it goes where it should be. If then I uncheck the<br>
> Switch, the component below goes up, but the textColorButton doesn't<br>
> disappear (screenshot)?<br>
><br>
> What am I doing wrong?<br>
><br>
> --<br>
> Marcin<br>
><br>
> _______________________________________________<br>
> SailfishOS.org Devel mailing list<br>
> To unsubscribe, please send a mail to <a href="mailto:marmistrzmar@gmail.com">marmistrzmar@gmail.com</a><br>
</div>
<div>
_______________________________________________<br>
</div>
<div>
SailfishOS.org Devel mailing list<br>
To unsubscribe, please send a mail to <a href="mailto:marmistrzmar@gmail.com">marmistrzmar@gmail.com</a><br>
<br>
</div>
</div><br></div><br><div id="fenix-reply-header"><p>On 18.07.2014 12:42 Dmitriy Purgin wrote:<br></p></div><div id="fenix-quoted-body"><div>
so you try to hide a component by setting its height = 0? have you<br>
tried visible = false?<br>
<br>
</div>
<div>
2014-07-18 16:30 GMT+06:00 Marcin M. <<a href="mailto:marmistrzmar@gmail.com">marmistrzmar@gmail.com</a>>:<br>
> I'm want to display some elements only when needed. So I did it like this<br>
> (the components are inside a Column):<br>
><br>
> TextSwitch<br>
> {<br>
> id: switchTextColor<br>
> text: qsTr("Override text color")<br>
> checked: settings.overrideTextColor<br>
> states: State<br>
> {<br>
> name: "checked"; when: switchTextColor.checked == true;<br>
> PropertyChanges { target: textColorButton; height:<br>
> Theme.itemSizeSmall}<br>
> }<br>
> transitions: Transition<br>
> {<br>
> from: "*"; to: "checked"; reversible: true<br>
> NumberAnimation { property: "height"; duration: 200;<br>
> easing.type: Easing.InOutQuad }<br>
> }<br>
> }<br>
><br>
> ColorButton<br>
> {<br>
> id: textColorButton<br>
> height: 0<br>
> }<br>
><br>
> And the ColorButton component is:<br>
> Row<br>
> {<br>
> id: root<br>
> property string color: "transparent"<br>
> width: parent.width<br>
> Rectangle<br>
> {<br>
> id: colorIndicator<br>
> color: root.color<br>
> width: Theme.itemSizeSmall<br>
> height: Theme.itemSizeSmall<br>
> border.color: "black"<br>
> border.width: 5<br>
> }<br>
><br>
> Button<br>
> {<br>
> id: button<br>
> text: "Choose a color"<br>
> onClicked:<br>
> {<br>
> var dialog = pageStack.push("Sailfish.Silica.ColorPickerDialog")<br>
> dialog.accepted.connect(function() { root.color = dialog.color<br>
> })<br>
> }<br>
> }<br>
> }<br>
><br>
> Instead of hiding, the textColorButton is at the top of the Page. If I check<br>
> switchTextColor, then it goes where it should be. If then I uncheck the<br>
> Switch, the component below goes up, but the textColorButton doesn't<br>
> disappear (screenshot)?<br>
><br>
> What am I doing wrong?<br>
><br>
> --<br>
> Marcin<br>
><br>
> _______________________________________________<br>
> SailfishOS.org Devel mailing list<br>
> To unsubscribe, please send a mail to <a href="mailto:marmistrzmar@gmail.com">marmistrzmar@gmail.com</a><br>
</div>
<div>
_______________________________________________<br>
</div>
<div>
SailfishOS.org Devel mailing list<br>
To unsubscribe, please send a mail to <a href="mailto:marmistrzmar@gmail.com">marmistrzmar@gmail.com</a><br>
<br>
</div>
</div><br></body></html>