hide/show right panel

https://trello.com/c/BjPPAZfw/35-ability-to-hide-right-sidebar-as-discussed
2024-12-12 19:36:32 +02:00 · 2014-07-16 10:24:59 +02:00 · 2014-07-16 10:24:59 +02:00 · ca7472c79a
commit ca7472c79a
parent 0a352f33a7
6 changed files with 182 additions and 155 deletions
--- a/LeftPanel.qml
+++ b/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

--- a/images/collapseRightPanel.png
+++ b/images/collapseRightPanel.png
--- a/images/expandRightPanel.png
+++ b/images/expandRightPanel.png
--- a/main.qml
+++ b/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 {
--- a/pages/AddressBook.qml
+++ b/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
+    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")
-//    }
+        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>")
-//    }
+    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
-//    }
+    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: 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
-//    }
+    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: 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
-//    }
+    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
+    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")
-//    }
+        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.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"
-//        }
+        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 }
-//        }
+        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)
-//        }
+        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: "" }
-//        }
+        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
-//        }
+        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
-//        }
-//    }
+        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
+        }
+    }
 }
--- a/qml.qrc
+++ b/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>