kinetic-declarative plasma integration

Marco Martin notmart at gmail.com
Tue May 19 11:18:14 CEST 2009


On Monday 18 May 2009, aaron.kennedy at nokia.com wrote:
> Hi Marco,
>
> On 16/05/09 5:53 AM, "ext Marco Martin" <notmart at gmail.com> wrote:
> > neat, quite straightforward.
> > but i see that ListView has ListView.isCurrentItem GridView
> > GridView.isCurrentItem and so on..
> > i think would be better to have that property consistently named, like
> > ItemView.isCurrentItem so that would be easier moving delegates between
> > different list types? (maybe keeping the ListView.* if there are
> > properties specific of a particular view?)
>
> This is a good idea.  When we next do an API review, we'll investigate more
> sensible grouping of these properties.
>
> > what i've come up is attached, it's a first rough example of a view more
> > or less of the same shape i think we could be interested for the
> > mediacenter gsoc..
> > it shows some problems tough, they could be things that i did wrong or
> > bugs..
> >
> > the highlight covers first item while it's behind the other ones (this
> > happens in the shipped examples too) i guess wrong z value?
>
> Whoops, our bad.  If you sync to 
0add74a9339a9d7dda302aa4f31cbb50bdb69908
> it should be fixed.

yep :D

> > anchors, should be updated automatically? i have the icon with the
> > property anchors.horizontalCenter: parent.horizontalCenter, but when i
> > make it bigger the image is no longer centered: does the horizontal
> > position have to be explicitly updated in the state definition or should
> > be done automatically?
>
> Anchors certainly should be automatically updated.  You're specific problem
> was caused by a silly rounding error.  This, too, should be fixed by commit
> 0add74a9339a9d7dda302aa4f31cbb50bdb69908.

indeed, this is also ok now :)

> > and finally the last :) i enlarge the grid cells with key bindings, this
> > works except for a thing: the active item is in the state "Details", and
> > when it gets back to the normal state the size of the icon is not
> > updated, and i think it should, since the base width is defined from the
> > cell size? (for inactive items works fine)
>
> I'm not sure I understand this problem.  Could you give a bit more
> detail/an example of it not working?

can be found in the example i attached in the previous message (here again 
with some things fixed): with the 1 and 2 keys the list can be zoomed in/out 
(by changing the cell size), what happens is this:
http://www.notmart.org/misc/listbug.ogv
while zooming all the icons are scaled correctly, but when the active item 
changes, the old active item goes with the icon size it had before zooming

> > i'm a bit in a nagging mode but i hope this kind of feedback will be
> > useful ;)
>
> Definitely useful!
>
> Cheers,
>
> Aaron
>
> _______________________________________________
> Plasma-devel mailing list
> Plasma-devel at kde.org
> https://mail.kde.org/mailman/listinfo/plasma-devel


-------------- next part --------------
Rect {
    width: 600; height: 300; color: "black"

    Component {
        id: PetHighlight
        Rect { color: "#555555"
               pen.width: 0
               radius: 5}
    }

    Component {
        id: PetDelegate

        FocusRealm {
            id: wrapper
            width: List.cellWidth; height: List.cellHeight;
            property real detailsOpacity : 0

            VerticalLayout {
                width: parent.width
                y: 10
                Image {
                    id: Pic
                    source: picture
                    width: List.cellWidth/1.2-mainText.height*3-10
                    height: List.cellWidth/1.2-mainText.height*3-10
                    filter: Reflection { }
                    anchors.horizontalCenter: parent.horizontalCenter
                }
                Text { id: mainText
                       color: "white"
                       text: 'Name: ' + name;
                       anchors.horizontalCenter: parent.horizontalCenter }

                Item {
                    id: details
                    opacity: wrapper.detailsOpacity
                    width: parent.width
                    VerticalLayout {
                        width: parent.width
                        Text { text: 'Type: ' + type; color:"white";
                               anchors.horizontalCenter: parent.horizontalCenter }
                        Text { text: 'Age: ' + age; color:"white";
                               anchors.horizontalCenter: parent.horizontalCenter }
                    }
                }
            }
            MouseRegion {
                    id: pageMouse
                    anchors.fill: parent
                    onClicked: { List.currentIndex = index;}
            }
            KeyActions {
                focus: true
                return : "print('you pressed enter on '+name)"
                digit1 : "List.cellWidth = List.cellWidth - 20;List.cellHeight = List.cellHeight - 20";
             //FIXME: the icon size of the active item is not updated correctly
                digit2 : "state='*';List.cellWidth = List.cellWidth + 20;List.cellHeight = List.cellHeight + 20;state='Details'";
            }

            states: [
                State {
                    name: "Details"
                    when: List.currentIndex == index
                    //only in ListView?
                    when: wrapper.ListView.isCurrentItem

                    SetProperty { target: Pic; property: "width"; value: List.cellWidth-mainText.height*3-10}
                    SetProperty { target: Pic; property: "height"; value: List.cellWidth-mainText.height*3-10}
                    SetProperties { target: wrapper; detailsOpacity: 1; }

                }
            ]
            transitions: [
                    Transition {
                        // Make the state changes smooth
                        ParallelAnimation {
                            ColorAnimation { duration: 500 }
                            NumericAnimation {
                                duration: 300; properties: "detailsOpacity,x,yPosition,height,width,cellWidth,cellHeight"
                            }
                        }
                    }
                ]
        }
        
    }

    

    GridView {
        id: List
        width: parent.width;
        height: parent.height
        model: MyListElementsModel;
        delegate: PetDelegate
       // orientation: Horizontal
        highlight: PetHighlight
        focus: true
        flow: "TopToBottom"
    }

    /*PathView {
        id: List
        width: parent.width;
        height: parent.height
        model: MyPetsModel;
        delegate: PetDelegate
       // orientation: Horizontal
        focus: true
        path: Path {
             startX: 120; startY: 100
             PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
             PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
         }
    }*/
    
    ListModel {
        id: MyListElementsModel
        ListElement {
            picture: "content/pics/pancakes.jpg"
            name: "Polly"
            type: "Parrot"
            age: 12
            size: "Small"
        }
        ListElement {
            picture: "content/pics/fruit-salad.jpg"
            name: "Penny"
            type: "Turtle"
            age: 4
            size: "Small"
        }
        ListElement {
            picture: "content/pics/hamburger.jpg"
            name: "Warren"
            type: "Rabbit"
            age: 2
            size: "Small"
        }
        ListElement {
            picture: "content/pics/lemonade.jpg"
            name: "Spot"
            type: "Dog"
            age: 9
            size: "Medium"
        }
        ListElement {
            picture: "content/pics/vegetable-soup.jpg"
            name: "Whiskers"
            type: "Cat"
            age: 2
            size: "Medium"
        }
        ListElement {
            picture: "content/pics/fruit-salad.jpg"
            name: "Joey"
            type: "Kangaroo"
            age: 1
            size: "Medium"
        }
        ListElement {
            picture: "content/pics/pancakes.jpg"
            name: "Kimba"
            type: "Bunny"
            age: 65
            size: "Large"
        }
        ListElement {
            picture: "content/pics/lemonade.jpg"
            name: "Rover"
            type: "Dog"
            age: 5
            size: "Large"
        }
        ListElement {
            picture: "content/pics/hamburger.jpg"
            name: "Tiny"
            type: "Elephant"
            age: 15
            size: "Large"
        }
    }
}


More information about the Plasma-devel mailing list