update CompDetail

examples/TaoQuickShow/Qml.qrc

@@ -17,5 +17,6 @@
         <file>Qml/Page/Biz/CompCard.qml</file>
         <file>Qml/Page/Biz/TText.qml</file>
         <file>Qml/Page/Biz/CircleText.qml</file>
+        <file>Qml/Page/Biz/CloseBtn.qml</file>
     </qresource>
 </RCC>

examples/TaoQuickShow/Qml/Page/Biz/CloseBtn.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.12
+
+import TaoQuick 1.0
+import "qrc:/TaoQuick"
+TImageBtn {
+    width: 20
+    height: 20
+
+    imageUrl: imgPath + (containsMouse ? "Window/close_white.png" : "Window/close_gray.png")
+}

examples/TaoQuickShow/Qml/Page/Biz/CompDetail.qml

@@ -4,93 +4,54 @@ import TaoQuick 1.0
 import "qrc:/TaoQuick"
 Rectangle {
     id: root
-    width: 200
+    radius: 4
-    height: 80
-    radius: 10
     color: gConfig.themeColor
 
-    property alias name: t.text
     property int count: 0
     property alias icon: img.source
     property var compNames: []
+    property var comps: []
     property bool raised: false
 
-    signal clicked()
     signal closed()
 
-    MouseArea {
+    Image {
-        id: area
+        id: img
-        anchors.fill: parent
+        width: sourceSize.width
-        onClicked: {
+        height: sourceSize.height
-            rise(true);
-            root.clicked()
-        }
-    }
-    Row {
         anchors {
-            verticalCenter: parent.verticalCenter
             left: parent.left
-            leftMargin: 20
+            top: parent.top
+            leftMargin: 4
+            topMargin: 4
         }
-        spacing: 12
+    }
-        Image {
+    ListView {
-            id: img
+        id: listView
-            width: sourceSize.width
+        model: compNames
-            height: sourceSize.height
+        anchors {
+            top: img.bottom
+            bottom: parent.bottom
+            left: parent.left
+            right: parent.right
+            margins: 8
+        }
+        delegate: Item {
+            width: listView.width
+            height: 100
 
         }
-        TText {
-            id: t
-            anchors{
-                verticalCenter: parent.verticalCenter
-            }
-        }
     }
 
-    TTextBtn {
+    CloseBtn {
-        anchors{
+        anchors {
             right: parent.right
             top: parent.top
+            rightMargin: 4
+            topMargin: 4
         }
-        width: 30
-        height: 24
-        text: "X"
         onClicked: {
-            rise(false);
             root.closed();
         }
-        visible: raised
-    }
-
-    ARiseSet {
-        id: ani
-        targetItem: targetParent
-        Component.onCompleted: {
-            setX = root.x;
-            setY = root.y;
-            setW = root.width;
-            setH = root.height;
-            riseW = 400;
-            riseH = 300;
-            riseX = (targetParent.width - riseW ) / 2;
-            riseY = (targetParent.height - riseH ) / 2;
-            let o = root.mapFromItem(targetParent, riseX, riseY)
-            riseX = o.x
-            riseY = o.y
-            console.log("ARiseSet", targetParent.width, targetParent.width, riseX, riseY)
-        }
-    }
-    function rise(value) {
-        if (value) {
-            if (!raised) {
-                raised = true;
-                ani.riseAnimation.start();
-            }
-        } else {
-            if (raised) {
-                raised = false;
-                ani.setAnimation.start()
-            }
-        }
     }
 }

examples/TaoQuickShow/Qml/Page/ContentPage.qml

@@ -13,18 +13,23 @@ Background {
             top: parent.top
             topMargin: 60
         }
-        text: trans.trans("Component List") + trans.transString
+        property string title: gridView.currentIndex === -1 ?
+                                   "Component List" :
+                                   componentsMgr.comps[gridView.currentIndex]["name"]
+        text: trans.trans(title) + trans.transString
     }
     GridView {
         id: gridView
         anchors.centerIn: background
         width: cellWidth *  4
         height: cellHeight * 4
-        model: componentsMgr.comps
-        currentIndex: -1
         cellWidth: 220
         cellHeight: 100
+        model: componentsMgr.comps
+        currentIndex: -1
+        opacity: 1
         visible: opacity > 0
+
         delegate: Item {
             width: 220
             height: 100
@@ -34,25 +39,83 @@ Background {
                 count: modelData.count
                 icon: modelData.icon
                 onClicked: {
-                    gridView.currentIndex = index
+                    showDetail(index)
                 }
             }
         }
     }
+    CompDetail {
+        id: compDetail
+        readonly property int initOpacity: 0
+        readonly property real initScale: 0.5
+        width: 400
+        height: 600
+        anchors.centerIn: parent
 
-//    CompBtn {
+        scale: initScale
-//        anchors.centerIn: parent
+        opacity:  initOpacity
-//        targetParent: background
+        visible: opacity > 0
-//        name: modelData.name
+        comps: gridView.currentIndex=== -1 ? [] : componentsMgr.comps[gridView.currentIndex]["comps"]
-//        count: modelData.count
+        compNames: gridView.currentIndex=== -1 ? [] : componentsMgr.comps[gridView.currentIndex]["compNames"]
-//        icon: modelData.icon
+        count: gridView.currentIndex=== -1 ? "" : componentsMgr.comps[gridView.currentIndex]["count"]
-//        compNames: modelData.compNames
+        icon: gridView.currentIndex=== -1 ? "" : componentsMgr.comps[gridView.currentIndex]["icon"]
-//        visible: gridView.currentIndex === -1 || gridView.currentIndex === index
+        onClosed: {
-//        //                onClicked: {
+            hideDetail()
-//        //                    gridView.currentIndex = index
+        }
-//        //                }
+    }
-//        //                onClosed: {
+    SequentialAnimation {
-//        //                    gridView.currentIndex = -1
+        id: showDetailAni
-//        //                }
+        NumberAnimation {
-//    }
+            target: gridView
+            property : "opacity"
+            to: 0
+            duration: 240
+        }
+        ParallelAnimation {
+            NumberAnimation {
+                target: compDetail
+                property: "opacity"
+                to: 1.0
+                duration: 260
+            }
+            NumberAnimation {
+                target: compDetail
+                property: "scale"
+                to: 1.0
+                duration: 260
+            }
+        }
+    }
+    SequentialAnimation {
+        id: hideDetailAni
+        ParallelAnimation {
+            NumberAnimation {
+                target: compDetail
+                property: "opacity"
+                to: compDetail.initOpacity
+                duration: 260
+            }
+            NumberAnimation {
+                target: compDetail
+                property: "scale"
+                to: compDetail.initScale
+                duration: 260
+            }
+        }
+        NumberAnimation {
+            target: gridView
+            property : "opacity"
+            to: 1
+            duration: 240
+        }
+
+    }
+    function showDetail(index) {
+        gridView.currentIndex = index
+        showDetailAni.start()
+    }
+    function hideDetail() {
+        gridView.currentIndex = -1
+        hideDetailAni.start()
+    }
 }

examples/TaoQuickShow/Qml/Page/TitlePage.qml

@@ -53,10 +53,7 @@ Rectangle {
                 view.showNormal()
             }
         }
-        TImageBtn {
+        CloseBtn {
-            width: 20
-            height: 20
-            imageUrl: imgPath + (containsMouse ? "Window/close_white.png" : "Window/close_gray.png")
             onClicked: {
                 view.close()
             }