demos/declarative/flickr/mobile/GridDelegate.qml
changeset 37 758a864f9613
parent 30 5dc02b23752f
equal deleted inserted replaced
36:ef0373b55136 37:758a864f9613
    37 **
    37 **
    38 ** $QT_END_LICENSE$
    38 ** $QT_END_LICENSE$
    39 **
    39 **
    40 ****************************************************************************/
    40 ****************************************************************************/
    41 
    41 
    42  import Qt 4.7
    42 import Qt 4.7
    43 
    43 
    44  Component {
    44 Item {
    45      id: photoDelegate
    45     id: wrapper; width: GridView.view.cellWidth; height: GridView.view.cellHeight
    46      Item {
       
    47          id: wrapper; width: 79; height: 79
       
    48 
    46 
    49          function photoClicked() {
    47     function photoClicked() {
    50              imageDetails.photoTitle = title;
    48         imageDetails.photoTitle = title;
    51              imageDetails.photoTags = tags;
    49         imageDetails.photoTags = tags;
    52              imageDetails.photoWidth = photoWidth;
    50         imageDetails.photoWidth = photoWidth;
    53              imageDetails.photoHeight = photoHeight;
    51         imageDetails.photoHeight = photoHeight;
    54              imageDetails.photoType = photoType;
    52         imageDetails.photoType = photoType;
    55              imageDetails.photoAuthor = photoAuthor;
    53         imageDetails.photoAuthor = photoAuthor;
    56              imageDetails.photoDate = photoDate;
    54         imageDetails.photoDate = photoDate;
    57              imageDetails.photoUrl = url;
    55         imageDetails.photoUrl = url;
    58              imageDetails.rating = 0;
    56         imageDetails.rating = 0;
    59              scaleMe.state = "Details";
    57         scaleMe.state = "Details";
    60          }
    58     }
    61 
    59 
    62          Item {
    60     Item {
    63              anchors.centerIn: parent
    61         anchors.centerIn: parent
    64              scale: 0.0
    62         scale: 0.0
    65              Behavior on scale { NumberAnimation { easing.type: Easing.InOutQuad} }
    63         Behavior on scale { NumberAnimation { easing.type: Easing.InOutQuad} }
    66              id: scaleMe
    64         id: scaleMe
    67 
    65 
    68              Rectangle { height: 79; width: 79; id: blackRect;  anchors.centerIn: parent; color: "black"; smooth: true }
    66         Item {
    69              Rectangle {
    67             width: 77; height: 77; anchors.centerIn: parent
    70                  id: whiteRect; width: 77; height: 77; anchors.centerIn: parent; color: "#dddddd"; smooth: true
    68             Rectangle {
    71                  Image { id: thumb; source: imagePath; x: 1; y: 1; smooth: true}
    69                 id: whiteRect; width: 77; height: 77; color: "#dddddd"; smooth: true
    72                  Image { source: "images/gloss.png" }
    70                 Image { id: thumb; source: imagePath; x: 1; y: 1; smooth: true }
    73              }
    71                 Image { source: "images/gloss.png" }
       
    72             }
       
    73         }
    74 
    74 
    75              Connections {
    75         Connections {
    76                  target: toolBar
    76             target: toolBar
    77                  onButton2Clicked: if (scaleMe.state == 'Details' ) scaleMe.state = 'Show'
    77             onButton2Clicked: if (scaleMe.state == 'Details' ) scaleMe.state = 'Show'
    78              }
    78         }
    79 
    79 
    80              states: [
    80         states: [
    81                  State {
    81             State {
    82                      name: "Show"; when: thumb.status == Image.Ready
    82                 name: "Show"; when: thumb.status == Image.Ready
    83                      PropertyChanges { target: scaleMe; scale: 1 }
    83                 PropertyChanges { target: scaleMe; scale: 1 }
    84                  },
    84             },
    85                  State {
    85             State {
    86                      name: "Details"
    86                 name: "Details"
    87                      PropertyChanges { target: scaleMe; scale: 1 }
    87                 PropertyChanges { target: scaleMe; scale: 1 }
    88                      ParentChange { target: wrapper; parent: imageDetails.frontContainer }
    88                 ParentChange { target: whiteRect; x: 10; y: 20; parent: imageDetails.frontContainer }
    89                      PropertyChanges { target: wrapper; x: 20; y: 60; z: 1000 }
    89                 PropertyChanges { target: background; state: "DetailedView" }
    90                      PropertyChanges { target: background; state: "DetailedView" }
    90             }
    91                  }
    91         ]
    92              ]
    92         transitions: [
    93              transitions: [
    93             Transition {
    94                  Transition {
    94                 from: "Show"; to: "Details"
    95                      from: "Show"; to: "Details"
    95                 ParentAnimation {
    96                      ParentAnimation {
    96                     via: foreground
    97                          NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
    97                     NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
    98                      }
    98                 }
    99                  },
    99             },
   100                  Transition {
   100             Transition {
   101                      from: "Details"; to: "Show"
   101                 from: "Details"; to: "Show"
   102                      SequentialAnimation {
   102                 ParentAnimation {
   103                          ParentAnimation {
   103                     via: foreground
   104                             NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
   104                     NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
   105                          }
   105                 }
   106                          PropertyAction { targets: wrapper; properties: "z" }
   106             }
   107                      }
   107         ]
   108                  }
   108     }
   109              ]
   109     MouseArea { anchors.fill: wrapper; onClicked: photoClicked() }
   110          }
   110 }
   111          MouseArea { anchors.fill: wrapper; onClicked: { photoClicked() } }
   111 
   112      }
       
   113  }