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

[Marcin M.]

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. <marmistrzmar at 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 <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
>> _______________________________________________
>> SailfishOS.org Devel mailing list
>> To unsubscribe, please send a mail to
>> devel-unsubscribe at lists.sailfishos.org
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.sailfishos.org/pipermail/devel/attachments/20140718/785edfac/attachment-0001.html>