diff options
author | Sebastian Kügler <sebas@kde.org> | 2015-12-04 01:38:04 +0100 |
---|---|---|
committer | Sebastian Kügler <sebas@kde.org> | 2015-12-07 18:46:32 +0100 |
commit | bd7af5a511053f1ac35f9b250039aa76f9096e99 (patch) | |
tree | 64eb19af6a590314d6906a1f3a35c362eb4a4abb /qt-mobile/qml/DiveDetails.qml | |
parent | 54da517e9d9326ffe572a3aa75ffe6697ee2ce56 (diff) | |
download | subsurface-bd7af5a511053f1ac35f9b250039aa76f9096e99.tar.gz |
state machine controls edit/view dive details
This is the first part of splitting the dive details into edit/view
modes.
- introduce a state machine to switch between view and edit mode
- factor out the editor into its own component
Both components are almost the same, but we can change them individually
now.
Signed-off-by: Sebastian Kügler <sebas@kde.org>
Diffstat (limited to 'qt-mobile/qml/DiveDetails.qml')
-rw-r--r-- | qt-mobile/qml/DiveDetails.qml | 47 |
1 files changed, 46 insertions, 1 deletions
diff --git a/qt-mobile/qml/DiveDetails.qml b/qt-mobile/qml/DiveDetails.qml index b3356313a..10fe57c01 100644 --- a/qt-mobile/qml/DiveDetails.qml +++ b/qt-mobile/qml/DiveDetails.qml @@ -23,6 +23,18 @@ MobileComponents.Page { property string date property string number + states: [ + State { + name: "view" + PropertyChanges { target: detailsView; opacity: 1 } + PropertyChanges { target: detailsEdit; opacity: 0 } + }, + State { + name: "edit" + PropertyChanges { target: detailsView; opacity: 0 } + PropertyChanges { target: detailsEdit; opacity: 1 } + } + ] onDive_idChanged: { qmlProfile.diveId = dive_id qmlProfile.update() @@ -40,7 +52,36 @@ MobileComponents.Page { width: flick.width height: childrenRect.height + MobileComponents.Units.smallSpacing * 2 + Button { + checkable: true + text: "Edit" + z: 999 + anchors { + top: parent.top + right: parent.right + margins: MobileComponents.Units.gridUnit / 2 + } + onCheckedChanged: { + diveDetailsWindow.state = checked ? "edit" : "view" + } + } + + DiveDetailsEdit { + id: detailsEdit + anchors { + left: parent.left + right: parent.right + top: parent.top + margins: MobileComponents.Units.smallSpacing + } + + Behavior on opacity { + NumberAnimation { duration: MobileComponents.Units.shortDuration } + } + } + ColumnLayout { + id: detailsView anchors { left: parent.left right: parent.right @@ -49,6 +90,10 @@ MobileComponents.Page { } spacing: MobileComponents.Units.smallSpacing + Behavior on opacity { + NumberAnimation { duration: MobileComponents.Units.shortDuration } + } + GridLayout { id: editorDetails @@ -57,7 +102,7 @@ MobileComponents.Page { MobileComponents.Heading { Layout.columnSpan: 2 - text: "Dive " + number + " (" + date + ")" + text: "VIEW Dive " + number + " (" + date + ")" } Item { |