fix datetime gui (#3316)

fix datetime/calendar GUI
MerginMaps · Apr 16, 2024 · 341bc64 · 341bc64 · inputapp-bot · Apr 16, 2024
1 parent e786b80
commit 341bc64
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 128 deletions.
diff --git a/app/mmstyle.h b/app/mmstyle.h
@@ -272,8 +272,10 @@ class MMStyle: public QObject
 
     // Page
     Q_PROPERTY( double pageMargins READ number20 CONSTANT ) // distance between screen edge and components
+    Q_PROPERTY( double spacing5 READ number5 CONSTANT )
     Q_PROPERTY( double spacing12 READ number12 CONSTANT ) // distance between page header, page content and page footer
     Q_PROPERTY( double spacing20 READ number20 CONSTANT )
+    Q_PROPERTY( double spacing30 READ number30 CONSTANT )
     Q_PROPERTY( double spacing40 READ number40 CONSTANT )
     Q_PROPERTY( double maxPageWidth READ number720 CONSTANT ) // maximum page width (desktop, tablets, landscape)
 
@@ -284,12 +286,14 @@ class MMStyle: public QObject
     Q_PROPERTY( double row40 READ number40 CONSTANT )
     Q_PROPERTY( double row49 READ number49 CONSTANT )
     Q_PROPERTY( double row50 READ number50 CONSTANT )
+    Q_PROPERTY( double row54 READ number54 CONSTANT )
     Q_PROPERTY( double row60 READ number60 CONSTANT )
     Q_PROPERTY( double row63 READ number63 CONSTANT )
     Q_PROPERTY( double row67 READ number67 CONSTANT )
     Q_PROPERTY( double row80 READ number80 CONSTANT )
     Q_PROPERTY( double row114 READ number114 CONSTANT )
     Q_PROPERTY( double radius6 READ number6 CONSTANT )
+    Q_PROPERTY( double radius8 READ number8 CONSTANT )
     Q_PROPERTY( double radius12 READ number12 CONSTANT )
     Q_PROPERTY( double radius16 READ number16 CONSTANT )
     Q_PROPERTY( double radius20 READ number20 CONSTANT )

diff --git a/app/qml/CMakeLists.txt b/app/qml/CMakeLists.txt
@@ -39,6 +39,7 @@ set(MM_QML
     components/MMNotificationView.qml
     components/MMPage.qml
     components/MMPageHeader.qml
+    components/MMPopup.qml
     components/MMPhoto.qml
     components/MMPhotoAttachment.qml
     components/MMPhotoPreview.qml

diff --git a/app/qml/components/MMPopup.qml b/app/qml/components/MMPopup.qml
@@ -0,0 +1,28 @@
+/***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU General Public License as published by  *
+ *   the Free Software Foundation; either version 2 of the License, or     *
+ *   (at your option) any later version.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+import QtQuick
+import QtQuick.Controls
+
+Popup {
+  id: root
+
+  modal: true
+  dim: false
+
+  background: Rectangle {
+    color: __style.polarColor
+    radius: __style.radius20
+
+    layer.enabled: true
+    layer.effect: MMShadow {
+      radius: __style.radius20
+    }
+  }
+}
diff --git a/app/qml/form/components/MMCalendarDrawer.qml b/app/qml/form/components/MMCalendarDrawer.qml
@@ -17,62 +17,51 @@ import "./calendar"
 MMComponents.MMDrawer {
   id: root
 
-  property alias title: title.text
+  property string title
   property alias dateTime: dateTimePicker.dateToSelect
   property alias hasDatePicker: dateTimePicker.hasDatePicker
   property alias hasTimePicker: dateTimePicker.hasTimePicker
   property bool showSeconds: false
 
   signal primaryButtonClicked
 
-  height: mainColumn.height
   dim: true
 
-  drawerContent: Rectangle {
-    id: roundedRect
+  drawerHeader.title: root.title
 
-    anchors.fill: parent
-    color: __style.polarColor
+  drawerContent: Item {
+      width: parent.width
+      height: scrollView.height
 
-    Column {
-      id: mainColumn
+      MMComponents.MMScrollView {
+      id: scrollView
 
       width: parent.width
-      spacing: __style.spacing20
-      topPadding: __style.pageMargins
-      leftPadding: __style.pageMargins
-      rightPadding: __style.pageMargins
-      bottomPadding: __style.pageMargins
-
-      Text {
-        id: title
-
-        anchors.horizontalCenter: parent.horizontalCenter
-        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding - 2 * parent.spacing
-        horizontalAlignment: Text.AlignHCenter
-        wrapMode: Text.WordWrap
-        font: __style.t2
-        color: __style.forestColor
-      }
-
-      MMDateTimePicker {
-        id: dateTimePicker
+      height: root.maxHeightHit ? root.drawerContentAvailableHeight : contentHeight
 
+      Column {
         width: parent.width
-        showSeconds: root.showSeconds
-      }
+        spacing: __style.spacing20
+
+        MMDateTimePicker {
+          id: dateTimePicker
+
+          width: parent.width
+          showSeconds: root.showSeconds
+        }
 
-      MMComponents.MMButton {
-        id: primaryButton
+        MMComponents.MMButton {
+          id: primaryButton
 
-        width: parent.width - 2 * parent.spacing
-        visible: text.length > 0
-        text: qsTr("Confirm")
+          width: parent.width
+          visible: text.length > 0
+          text: qsTr("Confirm")
 
-        onClicked: {
-          dateTimePicker.visible = false
-          primaryButtonClicked()
-          close()
+          onClicked: {
+            dateTimePicker.visible = false
+            primaryButtonClicked()
+            close()
+          }
         }
       }
     }

diff --git a/app/qml/form/components/calendar/MMDateTimePicker.qml b/app/qml/form/components/calendar/MMDateTimePicker.qml
@@ -39,9 +39,9 @@ Item {
   Column {
     id: mainColumn
 
-    width: root.width - 40 * __dp
-    spacing: 20 * __dp
-    topPadding: 10 * __dp
+    width: root.width
+    spacing: __style.spacing20
+    topPadding: __style.margin10
 
     // Mount and Year
     Row {
@@ -56,7 +56,7 @@ Item {
         Row {
           id: monthYearRow
 
-          spacing: 5 * __dp
+          spacing: __style.spacing5
 
           Text {
             text: root.locale.standaloneMonthName( monthGrid.month, Locale.LongFormat )
@@ -90,7 +90,7 @@ Item {
         // Right icons for changing months
         Row {
           x: parent.width - spacing - previousIcon.width - nextIcon.width - 10 * __dp
-          spacing: 30 * __dp
+          spacing: __style.spacing30
 
           MMComponents.MMIcon {
             id: previousIcon

diff --git a/app/qml/form/components/calendar/MMDateTumbler.qml b/app/qml/form/components/calendar/MMDateTumbler.qml
@@ -12,10 +12,10 @@ import QtQuick.Controls
 
 import "../../../components" as MMComponents
 
-Item {
+MMComponents.MMPopup {
   id: root
 
-  width: row.width + 40 * __dp
+  width: row.width + 2 * __style.spacing20
   height: row.height
 
   signal monthIndexChanged(var monthIndex)
@@ -26,59 +26,41 @@ Item {
   readonly property int calendarYearFrom: 1900
   readonly property int calendarYearTo: 2050
 
-  Rectangle {
+  contentItem: Item {
     width: parent.width
     height: parent.height
-    anchors.horizontalCenter: parent.horizontalCenter
 
-    color: __style.polarColor
-    radius: 20 * __dp
+    Rectangle {
+      anchors.centerIn: parent
 
-    layer.enabled: true
-    layer.effect: MMComponents.MMShadow {
-      radius: 20 * __dp
-    }
-
-    MouseArea {
-      anchors.fill: parent
-    }
-  }
+      width: parent.width - 2 * __style.margin12
+      height: __style.row54
+      radius: __style.radius8
 
-  Rectangle {
-    anchors {
-      left: parent.left
-      leftMargin: 12 * __dp
-      right: parent.right
-      rightMargin: 12 * __dp
-      verticalCenter: parent.verticalCenter
+      color: __style.lightGreenColor
     }
 
-    height: 54 * __dp
-    radius: 8 * __dp
+    Row {
+      id: row
 
-    color: __style.lightGreenColor
-  }
-
-  Row {
-    id: row
+      anchors.centerIn: parent
 
-    anchors.horizontalCenter: parent.horizontalCenter
+      MMTumbler {
+        id: monthsTumbler
 
-    MMTumbler {
-      id: monthsTumbler
-
-      model: root.monthList()
-      currentIndex: root.initMonthIndex
-      width: 120 * __dp
-      onCurrentIndexChanged: root.monthIndexChanged(currentIndex)
-    }
+        model: root.monthList()
+        currentIndex: root.initMonthIndex
+        width: 120 * __dp
+        onCurrentIndexChanged: root.monthIndexChanged(currentIndex)
+      }
 
-    MMTumbler {
-      id: yearsTumble
+      MMTumbler {
+        id: yearsTumble
 
-      model: root.yearList()
-      currentIndex: root.initYear - root.calendarYearFrom
-      onCurrentItemChanged: root.yearChanged(parseInt(currentItem.text))
+        model: root.yearList()
+        currentIndex: root.initYear - root.calendarYearFrom
+        onCurrentItemChanged: root.yearChanged(parseInt(currentItem.text))
+      }
     }
   }
 

diff --git a/app/qml/form/components/calendar/MMTimeTumbler.qml b/app/qml/form/components/calendar/MMTimeTumbler.qml
@@ -12,69 +12,54 @@ import QtQuick.Controls
 
 import "../../../components" as MMComponents
 
-Item {
+MMComponents.MMPopup {
   id: root
 
-  width: row.width + 40 * __dp
+  width: row.width + 2 * __style.spacing20
   height: row.height
 
   property alias hours: hoursTumbler.currentIndex
   property alias minutes: minutesTumbler.currentIndex
   property alias seconds: secondsTumbler.currentIndex
   property bool showSeconds: false
 
-  Rectangle {
+  contentItem: Item {
     width: parent.width
     height: parent.height
-    anchors.horizontalCenter: parent.horizontalCenter
 
-    color: __style.polarColor
-    radius: 20 * __dp
+    Rectangle {
+      anchors.centerIn: parent
 
-    layer.enabled: true
-    layer.effect: MMComponents.MMShadow {
-      radius: 20 * __dp
-    }
+      width: parent.width - 2 * __style.margin12
+      height: __style.row54
+      radius: __style.radius8
 
-    MouseArea {
-      anchors.fill: parent
+      color: __style.lightGreenColor
     }
-  }
 
-  Rectangle {
-    anchors {
-      left: parent.left
-      leftMargin: 12 * __dp
-      right: parent.right
-      rightMargin: 12 * __dp
-      verticalCenter: parent.verticalCenter
-    }
+    Row {
+      id: row
 
-    height: 54 * __dp
-    radius: 8 * __dp
+      anchors.centerIn: parent
 
-    color: __style.lightGreenColor
-  }
+      MMTumbler {
+        id: hoursTumbler
 
-  Row {
-    id: row
+        model: 24
+      }
 
-    anchors.horizontalCenter: parent.horizontalCenter
+      MMTumbler {
+        id: minutesTumbler
 
-    MMTumbler {
-      id: hoursTumbler
-      model: 24
-    }
+        model: 60
+      }
 
-    MMTumbler {
-      id: minutesTumbler
-      model: 60
-    }
+      MMTumbler {
+        id: secondsTumbler
 
-    MMTumbler {
-      id: secondsTumbler
-      model: 60
-      visible: root.showSeconds
+        model: 60
+        visible: root.showSeconds
+      }
     }
   }
 }
diff --git a/app/qml/form/components/calendar/MMTumbler.qml b/app/qml/form/components/calendar/MMTumbler.qml
@@ -11,7 +11,7 @@ import QtQuick
 import QtQuick.Controls
 
 Tumbler {
-  id: control
+  id: root
 
   delegate: Text {
     id: text
@@ -20,7 +20,7 @@ Tumbler {
     font: Math.abs(Tumbler.displacement) < 0.4 ? __style.t1 : __style.p4
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter
-    opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
+    opacity: 1.0 - Math.abs(Tumbler.displacement) / (root.visibleItemCount / 2)
     color: Math.abs(Tumbler.displacement) < 0.4 ? __style.forestColor : __style.nightColor
   }
 }