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

   1 import QtQuick 1.0
   2 import QtWebKit 1.0
   3
   4 Component {
   5     id: listDelegate
   6     Item {
   7         property real detailsOpacity : 0
   8         id: wrapper; width: wrapper.ListView.view.width; height: if(txt.height > 60){txt.height+10}else{60} //50+5+5
   9         function handleLink(link){
  10             if(link.slice(0,3) == 'app'){
  11                 screen.setUser(link.slice(7));
  12             }else if(link.slice(0,4) == 'http'){
  13                 Qt.openUrlExternally(link);
  14             }
  15         }
  16         function addTags(str){
  17             var ret = str.replace(/@[a-zA-Z0-9_]+/g, '<a href="app://$&">$&</a>');//click to jump to user?
  18             var ret2 = ret.replace(/http:\/\/[^ \n\t]+/g, '<a href="$&">$&</a>');//surrounds http links with html link tags
  19             return ret2;
  20         }
  21
  22         // Strip away paranthesis
  23         function userName(str) {
  24             var user = str.replace(/\([\S|\s]*\)/gi, "");
  25             return user.trim();
  26         }
  27
  28         MouseArea {
  29             anchors.fill: parent
  30             onClicked: {
  31                 wrapper.state = 'Details';
  32                 loader.sourceComponent = webViewPage;
  33             }
  34         }
  35
  36         Item {
  37             id: moveMe; height: parent.height
  38             /*      Rectangle {
  39                 id: blackRect
  40                 color: "black"; opacity: wrapper.ListView.index % 2 ? 0.2 : 0.3; height: wrapper.height-2; width: wrapper.width; y: 1
  41             } */
  42             Rectangle {
  43                 id: blackRect
  44                 //x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
  45                 // opacity: wrapper.ListView.index % 2 ? 0.2 : 0.3;
  46                 height: wrapper.height-2; width: wrapper.width; y: 1
  47                 radius: 3
  48                 gradient: Gradient {
  49                     GradientStop {
  50                         position: 0
  51                         color: "#7d7b97"
  52                     }
  53
  54                     GradientStop {
  55                         position: 1
  56                         color: "#313f4d"
  57                     }
  58                 }
  59             }
  60
  61             Item {
  62                 id: image; x: 6; width: 48; height: 48; smooth: true
  63                 //anchors.verticalCenter: parent.verticalCenter
  64
  65                 Loading { x: 1; y: 1; width: 48; height: 48; visible: realImage.status != Image.Ready }
  66
  67                 Image {
  68                     id: realImage;
  69                     source: userImage == "" ? "qOp48.png" : userImage
  70                     x: 1; y: 5;
  71                     width:48; height:48;
  72                     opacity:0 ;
  73                     anchors.topMargin: 5
  74
  75                     onStatusChanged: {
  76                         if(status==Image.Ready)
  77                             image.state="loaded"
  78                         if(status==Image.Error)
  79                             realImage.source="qOp48.png"
  80                     }
  81                 }
  82                 states: State {
  83                     name: "loaded";
  84                     PropertyChanges { target: realImage ; opacity:1 }
  85                 }
  86                 transitions: Transition { NumberAnimation { target: realImage; property: "opacity"; duration: 200 } }
  87
  88             }
  89             Text { id:innerTxt ; text: name; opacity: 0 }
  90             Text { id:txt; y:4; x: 56
  91                 text: '<html><style type="text/css">a:link {color:"#ffffff"}; a:visited {color:"#336633"}</style>'
  92                       + '<a href="app://@'+userName(name)+'"><b>'+userName(name) + '</b></a><br /><b style="font-size:small">' + statusText + "</b></html>";
  93                 textFormat: Qt.RichText
  94                 color: "#cccccc"; style: Text.Raised; styleColor: "black"; wrapMode: Text.WordWrap
  95                 anchors.left: image.right; anchors.right: blackRect.right; anchors.leftMargin: 6; anchors.rightMargin: 6
  96                 onLinkActivated: wrapper.handleLink(link)
  97             }
  98         }
  99
 100         Item {
 101             id: details
 102             x: 0; width: parent.width // - 20
 103             anchors { top: parent.top; topMargin: 0; bottom: parent.bottom; bottomMargin: 0 }
 104             opacity: wrapper.detailsOpacity
 105
 106
 107             Grid {
 108                 columns: 1 //3
 109                 id: pages
 110                 height: parent.height;
 111                 width: parent.width
 112                 Component {
 113                     id: webViewPage
 114
 115                     Rectangle {
 116                         width: pages.width; height: pages.height;
 117                         gradient: Gradient {
 118                             GradientStop {
 119                                 position: 0
 120                                 color: "#7d7b97"
 121                             }
 122
 123                             GradientStop {
 124                                 position: 1
 125                                 color: "#313f4d"
 126                             }
 127                         }
 128
 129                         Loading {
 130                  //x: 1; y: 1;
 131                  anchors.horizontalCenter: parent.horizontalCenter
 132                  anchors.verticalCenter: parent.verticalCenter
 133                  width: 32; height: 32; visible: webView.progress != 1
 134              }
 135
 136                         ParseModel { id: parseModel }
 137                         /*           Grid {
 138                             x: 5; y: 5
 139                             rows: 5; columns: 5; spacing: 10 */
 140
 141                         Repeater { model: parseModel
 142                             Flickable {
 143                                 id: flickable
 144                                 width: pages.width
 145                                 height:  pages.height
 146                                 contentWidth: Math.max(flickable.width,webView.width)
 147                                 contentHeight: Math.max(flickable.height,webView.height)
 148                                 pressDelay: 100
 149
 150                                 WebView {
 151                                     id: webView
 152                                     transformOrigin: Item.TopLeft
 153                                     smooth: false
 154                                     width: pages.width
 155                                     preferredHeight: pages.height
 156                                     contentsScale: 1
 157                                     //width: pages.width
 158                                     //height: pages.height
 159                                     newWindowComponent: webViewPage
 160                                     newWindowParent: pages
 161                                     html: "<div style=\"background-color:white\">"+article+"</div>"
 162                                     onLoadFinished: {
 163                                         // console.log('Loaded');
 164                                         details.state="loaded";
 165                                     }
 166                                 }
 167                             }
 168                         }
 169                     }
 170                 }
 171
 172                 Loader {
 173                     id: loader
 174                 }
 175
 176             }
 177
 178             states: State {
 179                 name: "loaded";
 180                 PropertyChanges { target: details ; opacity:wrapper.detailsOpacity }
 181             }
 182             transitions: Transition { NumberAnimation { target: details; property: "opacity"; duration: 200 } }
 183         }
 184
 185         // A button to close the detailed view, i.e. set the state back to default ('').
 186         TextButton {
 187             //y: 10
 188             anchors { right: wrapper.right; bottom: wrapper.bottom ;rightMargin: 10 }
 189             opacity: wrapper.detailsOpacity
 190             text: "Close"
 191
 192             onClicked: {
 193                 wrapper.state = '';
 194                 details.state = '';
 195                 // timer.start();
 196             }
 197         }
 198
 199         /* } /* ********** */
 200
 201
 202         states: State {
 203             name: "Details"
 204
 205             // PropertyChanges { target: blackRect; color: "#c0c0c0" }
 206             //PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
 207             PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 } // Make details visible
 208             PropertyChanges { target: wrapper; height: wrapper.ListView.view.height } //lstRC.height } // Fill the entire list area with the detailed view
 209
 210             // Move the list so that this item is at the top.
 211             PropertyChanges { target: wrapper.ListView.view; explicit: true; contentY: wrapper.y }
 212
 213             // Disallow flicking while we're in detailed view
 214             PropertyChanges { target: wrapper.ListView.view; interactive: false }
 215         }
 216
 217         transitions: Transition {
 218             // Make the state changes smooth
 219             ParallelAnimation {
 220                 //ColorAnimation { property: "color"; duration: 500 }
 221                 NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
 222             }
 223         }
 224
 225     }
 226 }