git.maemo.org Git - qwp/blob - qwp/content/RcDelegate.qml

   1 import QtQuick 1.0
   2 import QtWebKit 1.0
   3
   4
   5 Component { id: rcDelegate
   6     Item {
   7         id: delegateItem
   8         property real detailsOpacity : 0
   9         property real minSize : 18
  10         width: parent.width;
  11         height: 120
  12         Rectangle {
  13             id: background
  14             x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
  15             // color: "#c0c0c0"
  16             //            border.color: "#606060"
  17             radius: 3
  18             //opacity: delegateItem.detailsOpacity
  19             gradient: Gradient {
  20                 GradientStop {
  21                     position: 0
  22                     color: "#7d7b97"
  23                 }
  24
  25                 GradientStop {
  26                     position: 1
  27                     color: "#313f4d"
  28                 }
  29             }
  30         }
  31         MouseArea {
  32             anchors.fill: parent
  33             onClicked: {
  34                 delegateItem.state = 'Details';
  35                 timer.stop();
  36                 loader.sourceComponent = webViewPage;
  37             }
  38         }
  39
  40         Row {
  41             id: topLayout
  42             //anchors.verticalCenter: parent.verticalCenter
  43             spacing: 5
  44             width: parent.width-10
  45             height:  parent.height-4
  46             x: 5
  47             Column {
  48                 ///anchors.verticalCenter: parent.verticalCenter
  49                 ///anchors.margins: 5
  50                 width: parent.width
  51                 height:  parent.height
  52                 //width: 2*parent.width/3
  53                 Text {
  54                     anchors.margins: 5
  55                     id: innerTxt
  56                     width: delegateItem.width;
  57                     text: title
  58                     color: "white"
  59                     font.pixelSize: delegateItem.minSize+2
  60                     font.bold: true
  61                     wrapMode: Text.WrapAtWordBoundaryOrAnywhere
  62                     // opacity: delegateItem.detailsOpacity
  63                 }
  64                 Row {
  65                     spacing: 5
  66                     Column {
  67                         Text { text: comment
  68                             width: delegateItem.width;
  69                             color: "White"
  70                             font.pixelSize: delegateItem.minSize
  71                             wrapMode: Text.WrapAtWordBoundaryOrAnywhere
  72                             // opacity: delegateItem.detailsOpacity
  73                         }
  74                     }
  75                 }
  76                 Row {
  77                     spacing: 5
  78                     width: parent.width
  79                     ///anchors.bottom: parent.bottom
  80                     Column {
  81                         width: parent.width/2-2
  82                         Text {
  83                             text: user
  84                             color: "white"
  85                             //font.bold: true
  86                             font.pixelSize: delegateItem.minSize
  87                             anchors.left: parent.left
  88                         }
  89                     }
  90                     Column {
  91                         width: parent.width/2-2
  92                         Text { text: timestamp
  93                             color: "White"
  94                             font.pixelSize: delegateItem.minSize
  95                             anchors.right: parent.right
  96                             //opacity: delegateItem.detailsOpacity
  97                         }
  98                     }
  99                 }
 100             }
 101         }
 102
 103         Item {
 104             id: details
 105             x: 0; width: parent.width //- 20
 106             anchors { top: topLayout.top; topMargin: 0; bottom: parent.bottom; bottomMargin: 0 }
 107             // anchors.margins: 10
 108             opacity: delegateItem.detailsOpacity
 109             //opacity: webView.progress == 1.0 ? 0.0 : 1.0
 110
 111
 112             Grid {
 113                 columns: 1 //3
 114                 id: pages
 115                 height: parent.height; width: parent.width
 116
 117                 Component {
 118                     id: webViewPage
 119                     //Content.ParseModel { id: parseModel }
 120
 121                     Rectangle {
 122                         //width: webView.width
 123                         //height: webView.height
 124                         //border.color: "gray"
 125                         //color: "red"
 126                         /*
 127                         Content.ParseModel { id: parseModel }
 128                         WebView {
 129                             id: webView
 130                             width: details.width
 131                             height: details.height-60
 132                             newWindowComponent: webViewPage
 133                             newWindowParent: pages
 134                             //url: "http://en.wikipedia.org/w/index.php?title=" + innerTxt.text
 135                             //url: "http://fr.wikipedia.org/w/api.php?action=parse&page="+innerTxt.text
 136                                              +"&format=xml"
 137
 138                             function getArticle(title) {
 139                                 parseModel.reload();
 140
 141                                 var article = parseModel.get(0).article;
 142                                 console.debug("=>>>>innerText"+title);
 143                                 return article;
 144                             }
 145                             html: getArticle(innerTxt.text)
 146                         }  */
 147                         ParseModel { id: parseModel }
 148
 149                         ListView {
 150                             id: lstTest
 151                             anchors.fill: parent
 152                             model: parseModel
 153
 154                             delegate:
 155                                 //Text { text: article }
 156                                 Rectangle {
 157                                 color: "green"
 158                                 width: details.width
 159                                 height: details.height
 160 /*
 161                                 Flickable {
 162                                              id: flickable
 163                                              width: parent.width
 164                                              height:  parent.height
 165                                              contentWidth: Math.max(flickable.width,webView.width)
 166                                              contentHeight: Math.max(flickable.height,webView.height)
 167                                              pressDelay: 100
 168 */
 169                                 WebView {
 170                                     id: webView
 171
 172                                     transformOrigin: Item.TopLeft
 173
 174                             //        smooth: false // We don't want smooth scaling, since we only scale during (fast) transitions
 175                              //       focus: true
 176
 177
 178                                     width: parent.width
 179                                     height: parent.height
 180                                     newWindowComponent: webViewPage
 181                                     newWindowParent: pages
 182                                     //color:"white"
 183                                     html: "<div style=\"background-color:white\">"+article+"</div>" }
 184                             }
 185                         }
 186                        // }
 187                     }
 188                 }
 189                 /*              Flickable {
 190                     id: flickable
 191                     width: parent.width
 192                     height:  parent.height
 193                     contentWidth: Math.max(flickable.width,webView.width)
 194                     contentHeight: Math.max(flickable.height,webView.height)
 195                     pressDelay: 100 */
 196
 197                 Loader {
 198                     id: loader
 199                 }
 200                 // }
 201
 202                 // Loader { sourceComponent: webViewPage }
 203             }
 204         }
 205
 206         // A button to close the detailed view, i.e. set the state back to default ('').
 207         TextButton {
 208             //y: 10
 209             anchors { right: background.right; bottom: background.bottom ;rightMargin: 10 }
 210             opacity: delegateItem.detailsOpacity
 211             text: "Close"
 212
 213             onClicked: {
 214                 delegateItem.state = '';
 215                 timer.start();
 216             }
 217         }
 218
 219         // Animate adding and removing of items:
 220
 221         ListView.onAdd: SequentialAnimation {
 222             PropertyAction { target: delegateItem; property: "height"; value: 0 }
 223             NumberAnimation { target: delegateItem; property: "height"; to: 120; duration: 250; easing.type: Easing.InOutQuad }
 224         }
 225
 226         ListView.onRemove: SequentialAnimation {
 227             PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: true }
 228             NumberAnimation { target: delegateItem; property: "height"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
 229
 230             // Make sure delayRemove is set back to false so that the item can be destroyed
 231             PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false }
 232         }
 233
 234         states: State {
 235             name: "Details"
 236
 237             PropertyChanges { target: background; color: "#c0c0c0" }
 238             //PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
 239             PropertyChanges { target: delegateItem; detailsOpacity: 1; x: 0 } // Make details visible
 240             PropertyChanges { target: delegateItem; height: lstRC.height } // Fill the entire list area with the detailed view
 241
 242             // Move the list so that this item is at the top.
 243             PropertyChanges { target: delegateItem.ListView.view; explicit: true; contentY: delegateItem.y }
 244
 245             // Disallow flicking while we're in detailed view
 246             PropertyChanges { target: delegateItem.ListView.view; interactive: false }
 247         }
 248
 249         transitions: Transition {
 250             // Make the state changes smooth
 251             ParallelAnimation {
 252                 ColorAnimation { property: "color"; duration: 500 }
 253                 NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
 254             }
 255         }
 256
 257     }
 258 }