Integrated other separate panel into singe flippable panel

diff --git a/src/qmlui/FriendsView.qml b/src/qmlui/FriendsView.qml
new file mode 100644 (file)
index 0000000..dc8aae6
--- /dev/null
+++ b/src/qmlui/FriendsView.qml
@@ -0,0 +1,24 @@
+import Qt 4.7
+
+List {
+    model: friendModel
+    delegate: DelegateBase {
+        id: delegate
+        image: imageUrl
+        primaryText: name
+        details: detailsComponent
+
+
+    }
+    Component {
+        id: detailsComponent
+        Item {
+            state: delegate.state
+            height: messageRow.height + addressRow.height + timeRow.height
+            width: parent.width
+            DetailRow { id: messageRow; image: "qrc:/res/images/envelope.png"; text: message }
+            DetailRow { id: addressRow; anchors.top: messageRow.bottom; image: "qrc:/res/images/compass.png"; text: address }
+            DetailRow { id: timeRow; anchors.top: addressRow.bottom; image: "qrc:/res/images/clock.png"; text: time }
+        }
+    }
+}

diff --git a/src/qmlui/List.qml b/src/qmlui/List.qml
index 9f58461..8e91c1d 100644 (file)
--- a/src/qmlui/List.qml
+++ b/src/qmlui/List.qml
@@ -4,91 +4,71 @@ ListView {
     anchors.fill: parent
     anchors.margins: 5
     spacing: 5
-
-    model: friendModel
-//    delegate: friendListDelegate
-    delegate: DelegateBase {
-        id: delegate
-        image: imageUrl
-        primaryText: name
-        details: detailsComponent
-    }
     focus: true
-
-    Component {
-        id: detailsComponent
-        Item {
-            state: delegate.state
-            height: messageRow.height + addressRow.height + timeRow.height
-            width: parent.width
-            DetailRow { id: messageRow; image: "qrc:/res/images/envelope.png"; text: message }
-            DetailRow { id: addressRow; anchors.top: messageRow.bottom; image: "qrc:/res/images/compass.png"; text: address }
-            DetailRow { id: timeRow; anchors.top: addressRow.bottom; image: "qrc:/res/images/clock.png"; text: time }
-        }
     }
 
-    Component {
-        id: friendListDelegate_
+//    Component {
+//        id: friendListDelegate_
 
-        Rectangle {
-            id: listItem
-            width: parent.width
-            height: col.height + 8
-//            color: listItem.ListView.isCurrentItem ? "red" : "lightsteelblue"
-            color: "lightsteelblue"
-            radius: 10
-            border { color: "black"; width: 2 }
-            clip: true
+//        Rectangle {
+//            id: listItem
+//            width: parent.width
+//            height: col.height + 8
+////            color: listItem.ListView.isCurrentItem ? "red" : "lightsteelblue"
+//            color: "lightsteelblue"
+//            radius: 10
+//            border { color: "black"; width: 2 }
+//            clip: true
 
-            MouseArea {
-                anchors.fill: parent
-                onClicked: listItem.state == 'expanded' ? listItem.state = '' : listItem.state = 'expanded'
-            }
+//            MouseArea {
+//                anchors.fill: parent
+//                onClicked: listItem.state == 'expanded' ? listItem.state = '' : listItem.state = 'expanded'
+//            }
 
-            Image {
-                id: image
-                source: imageUrl
-                anchors.top: parent.top
-                anchors.topMargin: 5
-                anchors.left: parent.left
-                anchors.leftMargin: 7
-            }
+//            Image {
+//                id: image
+//                source: imageUrl
+//                anchors.top: parent.top
+//                anchors.topMargin: 5
+//                anchors.left: parent.left
+//                anchors.leftMargin: 7
+//            }
 
-            Column {
-                id: col
-                x: image.x + image.width + 7
-                width: parent.width - x - 7
-                y: 3
-                Text { text: '<b>' + name + '</b> ' }
-                Text {
-                    id: msg;
-                    text: message;
-                    font.pixelSize: 16;
-                    clip: true;
-                    elide: Text.ElideRight
-                    anchors.left: parent.left;
-                    anchors.right: parent.right}
-                }
+//            Column {
+//                id: col
+//                x: image.x + image.width + 7
+//                width: parent.width - x - 7
+//                y: 3
+//                Text { text: '<b>' + name + '</b> ' }
+//                Text {
+//                    id: msg;
+//                    text: message;
+//                    font.pixelSize: 16;
+//                    clip: true;
+//                    elide: Text.ElideRight
+//                    anchors.left: parent.left;
+//                    anchors.right: parent.right}
+//                }
 
-            states: [
-                State {
-                    name: "expanded"
-                    PropertyChanges {
-                        target: msg
-                        wrapMode: Text.Wrap
-                        elide: Text.ElideNone
-                    }
-                }
-            ]
+//            states: [
+//                State {
+//                    name: "expanded"
+//                    PropertyChanges {
+//                        target: msg
+//                        wrapMode: Text.Wrap
+//                        elide: Text.ElideNone
+//                    }
+//                }
+//            ]
+
+//            transitions: [
+//                Transition {
+//                    from: ""
+//                    to: "expanded"
+//                    NumberAnimation { properties: "height"; duration: 100 }
+//                    reversible: true
+//                }
+//            ]
+//        }
+//    }
 
-            transitions: [
-                Transition {
-                    from: ""
-                    to: "expanded"
-                    NumberAnimation { properties: "height"; duration: 100 }
-                    reversible: true
-                }
-            ]
-        }
-    }
-}

diff --git a/src/qmlui/LocationsView.qml b/src/qmlui/LocationsView.qml
new file mode 100644 (file)
index 0000000..f131bc5
--- /dev/null
+++ b/src/qmlui/LocationsView.qml
@@ -0,0 +1,11 @@
+import Qt 4.7
+
+Item {
+    anchors.fill: parent
+    Text {
+        id: name
+        text: "Locations"
+        anchors.centerIn: parent
+        color: "gray"
+    }
+}

diff --git a/src/qmlui/Main.qml b/src/qmlui/Main.qml
index f7e1180..7c3fc5d 100644 (file)
--- a/src/qmlui/Main.qml
+++ b/src/qmlui/Main.qml
@@ -8,7 +8,7 @@ Rectangle {
     color: "black"
     id: root
 
-    Map { id: map; x: 0; y: 0; width: friendPanel.x; height: parent.height }
+    Map { id: map; x: 0; y: 0; width: panel.x; height: parent.height }
 
     Panel {
         id: panel
@@ -16,18 +16,18 @@ Rectangle {
         y: parent.y
         width: (parent.width - profile.width ) / 2
     }
-    PanelContents {
-        id: friendPanel
-        x: profile.x
-        y: parent.y
-        width: (parent.width - profile.width ) / 2
-    }
-    RoutingPanel {
-        id: routingPanel
-        x: profile.x
-        y: parent.y
-        width: (parent.width - profile.width) / 2
-    }
+//    PanelContents {
+//        id: friendPanel
+//        x: profile.x
+//        y: parent.y
+//        width: (parent.width - profile.width ) / 2
+//    }
+//    RoutingPanel {
+//        id: routingPanel
+//        x: profile.x
+//        y: parent.y
+//        width: (parent.width - profile.width) / 2
+//    }
 
     Button {
         id: profile
@@ -35,7 +35,10 @@ Rectangle {
         anchors.right: parent.right
         image: "qrc:/res/user_info.png"
         text: "Profile"
-        onButtonClicked: panel.state == 'opened' ? panel.state = '' : panel.state = 'opened'
+        onButtonClicked: {
+//            panel.state == 'opened' ? panel.state = '' : panel.state = 'opened'
+            panel.setView("profile")
+        }
     }
 
     Button {
@@ -44,7 +47,11 @@ Rectangle {
         anchors.top: profile.bottom
         image: "qrc:/res/friend_list.png"
         text: "Friends"
-        onButtonClicked: friendPanel.state == 'opened' ? friendPanel.state = '' : friendPanel.state = 'opened'
+//        onButtonClicked: friendPanel.state == 'opened' ? friendPanel.state = '' : friendPanel.state = 'opened'
+        onButtonClicked: {
+//            panel.state == 'opened' ? panel.state = '' : panel.state = 'opened'
+            panel.setView("friends")
+        }
     }
 
     Button {
@@ -53,7 +60,10 @@ Rectangle {
         anchors.top: friends.bottom
         image: "qrc:/res/routing.png"
         text: "Routing"
-        onButtonClicked: routingPanel.state == "opened" ? routingPanel.state = "" : routingPanel.state = "opened"
+        onButtonClicked: {
+//            panel.state == 'opened' ? panel.state = '' : panel.state = 'opened'
+            panel.setView("routing")
+        }
     }
 
     Button {
@@ -62,6 +72,10 @@ Rectangle {
         anchors.top: navigate.bottom
         image: "qrc:/res/location_search.png"
         text: "Locations"
+        onButtonClicked: {
+//            panel.state == 'opened' ? panel.state = '' : panel.state = 'opened'
+            panel.setView("locations")
+        }
     }
 
     LoginWidget {

diff --git a/src/qmlui/Panel.qml b/src/qmlui/Panel.qml
index 76f7627..c24cd35 100644 (file)
--- a/src/qmlui/Panel.qml
+++ b/src/qmlui/Panel.qml
@@ -4,26 +4,27 @@ Rectangle {
     id: panel
     height: parent.height
     color: "#222222"
-//    state: "opened"
+    state: "opened"
     clip: true
 
     function setView(view) {
         switch (view) {
             case 'profile':
-                flipable.side == Flickable.Front ? backLoader.source = "List.qml" : frontLoader.source = "List.qml"
+                console.log("flipable.side: " + flipable.side)
+                flipable.side == Flipable.Front ? backLoader.source = "ProfileView.qml" : frontLoader.source = "ProfileView.qml"
                 break
             case 'friends':
-                flipable.side == Flickable.Front ? backLoader.source = "List.qml" : frontLoader.source = "List.qml"
+                flipable.side == Flipable.Front ? backLoader.source = "FriendsView.qml" : frontLoader.source = "FriendsView.qml"
                 break
             case 'locations':
-                flipable.side == Flickable.Front ? backLoader.source = "List.qml" : frontLoader.source = "List.qml"
+                flipable.side == Flipable.Front ? backLoader.source = "LocationsView.qml" : frontLoader.source = "LocationsView.qml"
                 break
             case 'routing':
-                flipable.side == Flickable.Front ? backLoader.source = "List.qml" : frontLoader.source = "List.qml"
+                flipable.side == Flipable.Front ? backLoader.source = "RoutingView.qml" : frontLoader.source = "RoutingView.qml"
                 break
         }
 
-        flipable.state == '' ? flipable.state = 'orthogonal' : flipable.state = ''
+        flipable.flipped = !flipable.flipped
     }
 
     Item {
@@ -35,31 +36,33 @@ Rectangle {
         height: panel.height
         width: panel.width
 
-        Rectangle {
-            id: btn1
-            color: "red"
-            anchors { top: parent.top; left: parent.left }
-            width: parent.width / 2
-            height: 30
-            MouseArea {
-                anchors.fill: parent
-                onClicked: setView("profile")
-            }
-        }
-        Rectangle {
-            id: btn2
-            color: "blue"
-            anchors { top: parent.top; left: btn1.right; right: parent.right }
-            height: btn1.height
-            MouseArea {
-                anchors.fill: parent
-                onClicked: setView("friends")
-            }
-        }
+//        Rectangle {
+//            id: btn1
+//            color: "red"
+//            anchors { top: parent.top; left: parent.left }
+//            width: parent.width / 2
+//            height: 30
+//            MouseArea {
+//                anchors.fill: parent
+//                onClicked: setView("profile")
+//            }
+//        }
+//        Rectangle {
+//            id: btn2
+//            color: "blue"
+//            anchors { top: parent.top; left: btn1.right; right: parent.right }
+//            height: btn1.height
+//            MouseArea {
+//                anchors.fill: parent
+//                onClicked: setView("friends")
+//            }
+//        }
 
         Flipable {
             id: flipable
-            anchors { left: parent.left; right: parent.right; top: btn1.bottom; bottom: parent.bottom }
+//            anchors { left: parent.left; right: parent.right; top: btn1.bottom; bottom: parent.bottom }
+            anchors.fill: parent
+            property bool flipped: false
 
             front: Loader {
                 id: frontLoader
@@ -82,21 +85,12 @@ Rectangle {
             states: State {
                 name: "orthogonal"
                 PropertyChanges { target: rotation; angle: 180 }
-//                when: flipable.flipped
+                when: flipable.flipped
             }
 
             transitions: Transition {
-                NumberAnimation { target: rotation; properties: "angle"; duration: 500 }
+                NumberAnimation { target: rotation; properties: "angle"; duration: 300 }
             }
-
-//            Timer {
-//                running: true
-//                repeat: true
-//                interval: 3000
-//                onTriggered: flipable.state == '' ? flipable.state = 'orthogonal' : flipable.state = ''
-//            }
-
-            onStateChanged: { console.log("flipable state:" + state) }
         }
 
         states: [

diff --git a/src/qmlui/ProfileView.qml b/src/qmlui/ProfileView.qml
new file mode 100644 (file)
index 0000000..7bb2588
--- /dev/null
+++ b/src/qmlui/ProfileView.qml
@@ -0,0 +1,11 @@
+import Qt 4.7
+
+Item {
+    anchors.fill: parent
+    Text {
+        id: name
+        text: "Profile"
+        anchors.centerIn: parent
+        color: "gray"
+    }
+}

diff --git a/src/qmlui/RoutingPanel.qml b/src/qmlui/RoutingPanel.qml
deleted file mode 100644 (file)
index 5770c86..0000000
--- a/src/qmlui/RoutingPanel.qml
+++ /dev/null
@@ -1,89 +0,0 @@
-import Qt 4.7
-
-Item {
-    id: panel
-    height: parent.height
-    Rectangle {
-        anchors.fill: parent
-        color: "black"
-        opacity: 0.3
-    }
-    clip: true
-
-    Item {
-        id: contentsArea
-        state: deviceRotation.orientation
-        anchors.centerIn: parent
-        x: 0
-        y: 0
-        height: panel.height
-        width: panel.width
-
-        Image {
-            id: routeTo
-            fillMode: Image.PreserveAspectFit
-            width: parent.width
-            source: "qrc:/res/images/route_to_cursor.png"
-            anchors.horizontalCenter: parent.horizontalCenter
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    console.log("clicked: Route to cursor")
-                    engine.routeFromTo(map.gpsLocationLatitude, map.gpsLocationLongitude, map.centerLatitude, map.centerLongitude);
-                }
-            }
-        }
-
-        ListView {
-            anchors { left: parent.left; right: parent.right; top: routeTo.bottom; bottom: parent.bottom }
-
-            anchors.margins: 5
-            spacing: 5
-
-            model: routingModel
-            delegate: RoutingDelegate {}
-            focus: true
-            clip: true
-        }
-
-        states: [
-            State {
-                name: "potrait"
-                PropertyChanges {
-                    target: contentsArea
-                    rotation: -90
-                    height: panel.width
-                    width: panel.height
-                }
-            }
-        ]
-
-        transitions: [
-            Transition {
-                from: ""
-                to: "potrait"
-                NumberAnimation { properties: "rotation,heigth,width"; duration: 200 }
-                reversible: true
-            }
-        ]
-    }
-
-    states: [
-        State {
-            name: "opened"
-            PropertyChanges {
-                target: panel
-                x: width
-            }
-        }
-    ]
-
-    transitions: [
-        Transition {
-            from: ""
-            to: "opened"
-            NumberAnimation { properties: "x"; duration: 200 }
-            reversible: true
-        }
-    ]
-}

diff --git a/src/qmlui/RoutingView.qml b/src/qmlui/RoutingView.qml
new file mode 100644 (file)
index 0000000..66c5f70
--- /dev/null
+++ b/src/qmlui/RoutingView.qml
@@ -0,0 +1,91 @@
+import Qt 4.7
+
+//Item {
+//    id: panel
+//    height: parent.height
+//    Rectangle {
+//        anchors.fill: parent
+//        color: "black"
+//        opacity: 0.3
+//    }
+//    clip: true
+
+    Item {
+        id: contentsArea
+//        state: deviceRotation.orientation
+//        anchors.centerIn: parent
+        x: 0
+        y: 0
+        height: panel.height
+        width: panel.width
+//        anchors.fill: parent
+
+        Image {
+            id: routeTo
+            fillMode: Image.PreserveAspectFit
+            width: parent.width
+            source: "qrc:/res/images/route_to_cursor.png"
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    console.log("clicked: Route to cursor")
+                    engine.routeFromTo(map.gpsLocationLatitude, map.gpsLocationLongitude, map.centerLatitude, map.centerLongitude);
+                }
+            }
+        }
+
+        ListView {
+            anchors { left: parent.left; right: parent.right; top: routeTo.bottom; bottom: parent.bottom }
+
+            anchors.margins: 5
+            spacing: 5
+
+            model: routingModel
+            delegate: RoutingDelegate {}
+            focus: true
+            clip: true
+        }
+
+//        states: [
+//            State {
+//                name: "potrait"
+//                PropertyChanges {
+//                    target: contentsArea
+//                    rotation: -90
+//                    height: panel.width
+//                    width: panel.height
+//                }
+//            }
+//        ]
+
+//        transitions: [
+//            Transition {
+//                from: ""
+//                to: "potrait"
+//                NumberAnimation { properties: "rotation,heigth,width"; duration: 200 }
+//                reversible: true
+//            }
+//        ]
+//    }
+
+//    states: [
+//        State {
+//            name: "opened"
+//            PropertyChanges {
+//                target: panel
+//                x: width
+//            }
+//        }
+//    ]
+
+//    transitions: [
+//        Transition {
+//            from: ""
+//            to: "opened"
+//            NumberAnimation { properties: "x"; duration: 200 }
+//            reversible: true
+//        }
+//    ]
+}

diff --git a/src/qmlui/res.qrc b/src/qmlui/res.qrc
index 7662ce8..3d4fe00 100644 (file)
--- a/src/qmlui/res.qrc
+++ b/src/qmlui/res.qrc
@@ -22,10 +22,13 @@
         <file>res/ixonos_logo.png</file>
         <file>Dialog.qml</file>
         <file>LoginWidget.qml</file>
-        <file>RoutingPanel.qml</file>
         <file>RoutingDelegate.qml</file>
         <file>DelegateBase.qml</file>
         <file>DetailRow.qml</file>
         <file>Panel.qml</file>
+        <file>FriendsView.qml</file>
+        <file>ProfileView.qml</file>
+        <file>RoutingView.qml</file>
+        <file>LocationsView.qml</file>
     </qresource>
 </RCC>

diff --git a/src/src.pro b/src/src.pro
index 342356f..1ba5631 100644 (file)
--- a/src/src.pro
+++ b/src/src.pro
@@ -193,11 +193,14 @@ OTHER_FILES += qmlui/Main.qml \
     qmlui/Map.qml \
     qmlui/PanelContents.qml \
     qmlui/List.qml \
-    qmlui/RoutingPanel.qml \
+    qmlui/RoutingView.qml \
     qmlui/RoutingDelegate.qml \
     qmlui/DelegateBase.qml \
     qmlui/DetailRow.qml \
-    qmlui/Panel.qml
+    qmlui/Panel.qml \
+    qmlui/ProfileView.qml \
+    qmlui/FriendsView.qml \
+    qmlui/LocationsView.qml
 
 QT += network \
     webkit  \