Implement a time picker component

- Fixes papyros#148 - Closes papyros#217
danian-hn · Jun 22, 2015 · 34d07bb · 34d07bb
1 parent b382e69
commit 34d07bb
Show file tree

Hide file tree

Showing 7 changed files with 686 additions and 15 deletions.
diff --git a/demo/TimePickerDemo.qml b/demo/TimePickerDemo.qml
@@ -0,0 +1,58 @@
+import QtQuick 2.0
+import Material 0.1
+
+
+Item {
+
+    TimePickerDialog {
+        id: timePicker
+        onTimePicked: {
+            updateLabelForDate(timePicked)
+        }
+        prefer24Hour: twentyFourHourSwitch.checked
+    }
+
+    Column {
+        anchors.centerIn: parent
+        spacing: Units.dp(20)
+
+        Button {
+            text: "Show Time Picker Dialog"
+            anchors.horizontalCenter: parent.horizontalCenter
+            elevation: 1
+            onClicked: {
+                timePicker.show()
+            }
+        }
+
+        Label {
+            id: timeLabel
+            style: "display1"
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
+        Row {
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: Units.dp(16)
+
+            Label {
+                text: "24 hour clock:"
+                style: "dialog"
+            }
+
+            Switch {
+                id: twentyFourHourSwitch
+                checked: false
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        var date = new Date(Date.now())
+        updateLabelForDate(new Date(Date.now()))
+    }
+
+    function updateLabelForDate(date) {
+        timeLabel.text = date.toLocaleTimeString(Qt.locale(), "hh:mm ap")
+    }
+}
diff --git a/demo/demo.qmlproject b/demo/demo.qmlproject
@@ -16,5 +16,5 @@ Project {
         directory: "."
     }
 
-    importPaths: [ "../modules" ]
+    importPaths: [ "../modules"]
 }
diff --git a/demo/main.qml b/demo/main.qml
@@ -24,7 +24,7 @@ ApplicationWindow {
     ]
 
     property var compoundComponents: [
-            "Bottom Sheet", "Dialog", "Forms", "List Items", "Page Stack"
+            "Bottom Sheet", "Dialog", "Forms", "List Items", "Page Stack", "Time Picker"
     ]
 
     property var sections: [ styles, basicComponents, compoundComponents ]

diff --git a/modules/Material/Dialog.qml b/modules/Material/Dialog.qml
@@ -26,7 +26,6 @@ import Material.Extras 0.1
 /*!
    \qmltype Dialog
    \inqmlmodule Material 0.1
-
    \brief Dialogs inform users about critical information, require users to make
    decisions, or encapsulate multiple tasks within a discrete process
  */
@@ -42,12 +41,12 @@ PopupBase {
     width: Math.max(minimumWidth,
                     content.contentWidth + 2 * contentMargins)
 
-    height: Math.min(Units.dp(350),
-                     headerView.height + Units.dp(32) +
+    height: Math.min(parent.height - Units.dp(64),
+                     headerView.height + (contentMargins * 2) +
                      content.contentHeight +
                      content.topMargin +
                      content.bottomMargin +
-                     buttonContainer.height)
+                     (floatingActions ? 0 : buttonContainer.height))
 
     property int contentMargins: Units.dp(16)
 
@@ -58,15 +57,13 @@ PopupBase {
 
     /*!
        \qmlproperty Button negativeButton
-
        The negative button, displayed as the leftmost button on the right of the dialog buttons.
        This is usually used to dismiss the dialog.
      */
     property alias negativeButton: negativeButton
 
     /*!
        \qmlproperty Button primaryButton
-
        The primary button, displayed as the rightmost button in the dialog buttons row. This is
        usually used to accept the dialog's action.
      */
@@ -77,6 +74,7 @@ PopupBase {
     property alias positiveButtonEnabled: positiveButton.enabled
 
     property bool hasActions: true
+    property bool floatingActions: false
 
     default property alias dialogContent: column.data
 
@@ -176,7 +174,7 @@ PopupBase {
 
                 leftMargin: Units.dp(16)
                 rightMargin: Units.dp(16)
-                topMargin: Units.dp(16)
+                topMargin: title == "" && text == "" ? 0 : Units.dp(16)
             }
 
             Label {
@@ -185,7 +183,7 @@ PopupBase {
                 width: parent.width
                 wrapMode: Text.Wrap
                 style: "title"
-                visible: text != ""
+                visible: title != ""
             }
 
             Label {
@@ -213,13 +211,13 @@ PopupBase {
                 left: parent.left
                 right: parent.right
                 top: headerView.bottom
-                topMargin: Units.dp(8)
+                topMargin: title == "" && text == "" ? 0 :Units.dp(8)
                 bottomMargin: Units.dp(-8)
-                bottom: buttonContainer.top
+                bottom: floatingActions ? parent.bottom : buttonContainer.top
             }
 
             interactive: contentHeight + Units.dp(8) > height
-            bottomMargin: hasActions ? 0 : Units.dp(8)
+            bottomMargin: hasActions  || contentMargins == 0 ? 0 : Units.dp(8)
 
             Rectangle {
                 Column {
@@ -258,7 +256,7 @@ PopupBase {
                 height: hasActions ? positiveButton.implicitHeight + Units.dp(8) : 0
                 visible: hasActions
 
-                backgroundColor: "white"
+                backgroundColor: floatingActions ? "transparent" : "white"
                 elevation: content.atYEnd ? 0 : 1
                 fullWidth: true
                 elevationInverted: true
@@ -311,5 +309,4 @@ PopupBase {
             }
         }
     }
-
 }