hide/show right panel

https://trello.com/c/BjPPAZfw/35-ability-to-hide-right-sidebar-as-discussed

LeftPanel.qml

@@ -24,19 +24,40 @@ Rectangle {
     width: 260
     color: "#FFFFFF"
 
-    Image {
-        id: logo
-        anchors.horizontalCenter: parent.horizontalCenter
+    Item {
+        id: logoItem
+        anchors.left: parent.left
+        anchors.right: parent.right
         anchors.top: parent.top
         anchors.topMargin: 31
-        source: "images/moneroLogo.png"
+        height: logo.implicitHeight
+
+        Image {
+            id: logo
+            anchors.horizontalCenter: parent.horizontalCenter
+            source: "images/moneroLogo.png"
+        }
+
+        Image {
+            anchors.right: logo.left
+            anchors.verticalCenter: logo.verticalCenter
+            anchors.verticalCenterOffset: 5
+            anchors.rightMargin: 10
+            source: appWindow.rightPanelExpanded ? "images/expandRightPanel.png" :
+                                                   "images/collapseRightPanel.png"
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: appWindow.rightPanelExpanded = !appWindow.rightPanelExpanded
+        }
     }
 
     Column {
         id: column1
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.top: logo.bottom
+        anchors.top: logoItem.bottom
         anchors.topMargin: 40
         spacing: 6
 

main.qml

@@ -10,6 +10,8 @@ ApplicationWindow {
     property var currentItem
     property bool whatIsEnable: false
     property bool ctrlPressed: false
+    property bool rightPanelExpanded: true
+
     function altKeyReleased() { ctrlPressed = false; }
     function showPageRequest(page) {
         middlePanel.state = page
@@ -79,7 +81,7 @@ ApplicationWindow {
     }
 
     visible: true
-    width: 1269
+    width: rightPanelExpanded ? 1269 : 1269 - 300
     height: 800
     color: "#FFFFFF"
     x: (Screen.width - width) / 2
@@ -123,6 +125,8 @@ ApplicationWindow {
             anchors.right: parent.right
             anchors.top: parent.top
             anchors.bottom: parent.bottom
+            width: appWindow.rightPanelExpanded ? 300 : 0
+            visible: appWindow.rightPanelExpanded
         }
 
         MiddlePanel {

pages/AddressBook.qml

@@ -4,169 +4,169 @@ import "../components"
 Rectangle {
     color: "#F0EEEE"
 
-//    Text {
-//        id: newEntryText
-//        anchors.left: parent.left
-//        anchors.right: parent.right
-//        anchors.top: parent.top
-//        anchors.leftMargin: 17
-//        anchors.topMargin: 17
-
-//        elide: Text.ElideRight
-//        font.family: "Arial"
-//        font.pixelSize: 18
-//        color: "#4A4949"
-//        text: qsTr("Add new entry")
-//    }
-
-//    Label {
-//        id: addressLabel
-//        anchors.left: parent.left
-//        anchors.top: newEntryText.bottom
-//        anchors.leftMargin: 17
-//        anchors.topMargin: 17
-//        text: qsTr("Address")
-//        fontSize: 14
-//        tipText: qsTr("<b>Tip tekst test</b>")
-//    }
-
-//    LineEdit {
-//        id: addressLine
-//        anchors.left: parent.left
-//        anchors.right: parent.right
-//        anchors.top: addressLabel.bottom
-//        anchors.leftMargin: 17
-//        anchors.rightMargin: 17
-//        anchors.topMargin: 5
-//    }
-
-//    Label {
-//        id: paymentIdLabel
-//        anchors.left: parent.left
-//        anchors.top: addressLine.bottom
-//        anchors.leftMargin: 17
-//        anchors.topMargin: 17
-//        text: qsTr("Payment ID <font size='2'>(Optional)</font>")
-//        fontSize: 14
-//        tipText: qsTr("<b>Payment ID</b><br/><br/>A unique user name used in<br/>the address book. It is not a<br/>transfer of information sent<br/>during thevtransfer")
-//        width: 156
-//    }
-
-//    Label {
-//        id: descriptionLabel
-//        anchors.left: paymentIdLabel.right
-//        anchors.top: addressLine.bottom
-//        anchors.leftMargin: 17
-//        anchors.topMargin: 17
-//        text: qsTr("Description <font size='2'>(Local database)</font>")
-//        fontSize: 14
-//        tipText: qsTr("<b>Tip tekst test</b><br/><br/>test line 2")
-//        width: 156
-//    }
-
-//    LineEdit {
-//        id: paymentIdLine
-//        anchors.left: parent.left
-//        anchors.top: paymentIdLabel.bottom
-//        anchors.leftMargin: 17
-//        anchors.topMargin: 5
-//        width: 156
-//    }
-
-//    LineEdit {
-//        id: descriptionLine
-//        anchors.left: paymentIdLine.right
-//        anchors.right: addButton.left
-//        anchors.top: paymentIdLabel.bottom
-//        anchors.leftMargin: 17
-//        anchors.rightMargin: 17
-//        anchors.topMargin: 5
-//    }
-
-//    StandardButton {
-//        id: addButton
-//        anchors.right: parent.right
-//        anchors.top: paymentIdLabel.bottom
-//        anchors.rightMargin: 17
-//        anchors.topMargin: 5
-//        width: 60
-
-//        shadowReleasedColor: "#FF4304"
-//        shadowPressedColor: "#B32D00"
-//        releasedColor: "#FF6C3C"
-//        pressedColor: "#FF4304"
-//        text: qsTr("ADD")
-//    }
-
-//    Rectangle {
-//        anchors.left: parent.left
-//        anchors.right: parent.right
-//        anchors.bottom: parent.bottom
-//        anchors.top: paymentIdLine.bottom
-//        anchors.topMargin: 17
-//        color: "#FFFFFF"
-
-//        Rectangle {
-//            anchors.left: parent.left
-//            anchors.right: parent.right
-//            anchors.top: parent.top
-//            height: 1
-//            color: "#DBDBDB"
-//        }
-
-//        ListModel {
-//            id: columnsModel
-//            ListElement { columnName: "Payment ID"; columnWidth: 148 }
-//            ListElement { columnName: "Description"; columnWidth: 420 }
-//        }
-
-//        TableHeader {
-//            id: header
-//            anchors.left: parent.left
-//            anchors.right: parent.right
-//            anchors.top: parent.top
-//            anchors.topMargin: 17
-//            anchors.leftMargin: 14
-//            anchors.rightMargin: 14
-//            dataModel: columnsModel
-//            onSortRequest: console.log("column: " + column + " desc: " + desc)
-//        }
-
-//        ListModel {
-//            id: testModel
-//            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-//            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-//            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-//            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-//            ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "" }
-//            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-//            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-//            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-//            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-//            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-//            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-//            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-//            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
-//            ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "" }
-//        }
-
-//        Scroll {
-//            id: flickableScroll
-//            anchors.rightMargin: -14
-//            flickable: table
-//            yPos: table.y
-//        }
-
-//        AddressBookTable {
-//            id: table
-//            anchors.left: parent.left
-//            anchors.right: parent.right
-//            anchors.top: header.bottom
-//            anchors.bottom: parent.bottom
-//            anchors.leftMargin: 14
-//            anchors.rightMargin: 14
-//            onContentYChanged: flickableScroll.flickableContentYChanged()
-//            model: testModel
-//        }
-//    }
+    Text {
+        id: newEntryText
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.leftMargin: 17
+        anchors.topMargin: 17
+
+        elide: Text.ElideRight
+        font.family: "Arial"
+        font.pixelSize: 18
+        color: "#4A4949"
+        text: qsTr("Add new entry")
+    }
+
+    Label {
+        id: addressLabel
+        anchors.left: parent.left
+        anchors.top: newEntryText.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 17
+        text: qsTr("Address")
+        fontSize: 14
+        tipText: qsTr("<b>Tip tekst test</b>")
+    }
+
+    LineEdit {
+        id: addressLine
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: addressLabel.bottom
+        anchors.leftMargin: 17
+        anchors.rightMargin: 17
+        anchors.topMargin: 5
+    }
+
+    Label {
+        id: paymentIdLabel
+        anchors.left: parent.left
+        anchors.top: addressLine.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 17
+        text: qsTr("Payment ID <font size='2'>(Optional)</font>")
+        fontSize: 14
+        tipText: qsTr("<b>Payment ID</b><br/><br/>A unique user name used in<br/>the address book. It is not a<br/>transfer of information sent<br/>during thevtransfer")
+        width: 156
+    }
+
+    Label {
+        id: descriptionLabel
+        anchors.left: paymentIdLabel.right
+        anchors.top: addressLine.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 17
+        text: qsTr("Description <font size='2'>(Local database)</font>")
+        fontSize: 14
+        tipText: qsTr("<b>Tip tekst test</b><br/><br/>test line 2")
+        width: 156
+    }
+
+    LineEdit {
+        id: paymentIdLine
+        anchors.left: parent.left
+        anchors.top: paymentIdLabel.bottom
+        anchors.leftMargin: 17
+        anchors.topMargin: 5
+        width: 156
+    }
+
+    LineEdit {
+        id: descriptionLine
+        anchors.left: paymentIdLine.right
+        anchors.right: addButton.left
+        anchors.top: paymentIdLabel.bottom
+        anchors.leftMargin: 17
+        anchors.rightMargin: 17
+        anchors.topMargin: 5
+    }
+
+    StandardButton {
+        id: addButton
+        anchors.right: parent.right
+        anchors.top: paymentIdLabel.bottom
+        anchors.rightMargin: 17
+        anchors.topMargin: 5
+        width: 60
+
+        shadowReleasedColor: "#FF4304"
+        shadowPressedColor: "#B32D00"
+        releasedColor: "#FF6C3C"
+        pressedColor: "#FF4304"
+        text: qsTr("ADD")
+    }
+
+    Rectangle {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.top: paymentIdLine.bottom
+        anchors.topMargin: 17
+        color: "#FFFFFF"
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            height: 1
+            color: "#DBDBDB"
+        }
+
+        ListModel {
+            id: columnsModel
+            ListElement { columnName: "Payment ID"; columnWidth: 148 }
+            ListElement { columnName: "Description"; columnWidth: 420 }
+        }
+
+        TableHeader {
+            id: header
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.topMargin: 17
+            anchors.leftMargin: 14
+            anchors.rightMargin: 14
+            dataModel: columnsModel
+            onSortRequest: console.log("column: " + column + " desc: " + desc)
+        }
+
+        ListModel {
+            id: testModel
+            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
+            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
+            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
+            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
+            ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "" }
+            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
+            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
+            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
+            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
+            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
+            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
+            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
+            ListElement { paymentId: "Malkolm T."; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "Client from Australia" }
+            ListElement { paymentId: ""; address: "faef56b9acf67a7dba75ec01f403497049d7cff111628edfe7b57278554dc798"; description: "" }
+        }
+
+        Scroll {
+            id: flickableScroll
+            anchors.rightMargin: -14
+            flickable: table
+            yPos: table.y
+        }
+
+        AddressBookTable {
+            id: table
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: header.bottom
+            anchors.bottom: parent.bottom
+            anchors.leftMargin: 14
+            anchors.rightMargin: 14
+            onContentYChanged: flickableScroll.flickableContentYChanged()
+            model: testModel
+        }
+    }
 }

qml.qrc

@@ -67,5 +67,7 @@
         <file>images/prevMonth.png</file>
         <file>components/TickDelegate.qml</file>
         <file>components/TitleBar.qml</file>
+        <file>images/collapseRightPanel.png</file>
+        <file>images/expandRightPanel.png</file>
     </qresource>
 </RCC>