Inputs based on MMAbstractEditor: Input, Password and Slider

app/mmstyle.h

@@ -105,6 +105,9 @@ class MMStyle: public QObject
     Q_PROPERTY( double toolbarHeight READ toolbarHeight CONSTANT )
     Q_PROPERTY( double menuDrawerHeight READ menuDrawerHeight CONSTANT )
 
+    // Other
+    Q_PROPERTY( double inputRadius READ inputRadius CONSTANT )
+
   public:
     explicit MMStyle( qreal dp )
       : mDp( dp )
@@ -114,7 +117,7 @@ class MMStyle: public QObject
     QFont t1() {return fontFactory( 18, true );}
     QFont t2() {return fontFactory( 16, true );}
     QFont t3() {return fontFactory( 14, true );}
-    QFont t4() {return fontFactory( 18, true );}
+    QFont t4() {return fontFactory( 12, true );}
     QFont t5() {return fontFactory( 10, true );}
 
     QFont p1() {return fontFactory( 32, false );}
@@ -182,6 +185,8 @@ class MMStyle: public QObject
     double toolbarHeight() {return 89 * mDp;}
     double menuDrawerHeight() {return 67 * mDp;}
 
+    double inputRadius() {return 12 * mDp;}
+
   signals:
     void styleChanged();
 

app/qml/inputs/MMAbstractEditor.qml

@@ -0,0 +1,192 @@
+/***************************************************************************
+ *                                                                         *
+ *   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
+import QtQml.Models
+import QtQuick.Layouts
+
+import "../components"
+
+Item {
+  id: root
+
+  signal contentClicked()
+  signal leftActionClicked()
+  signal rightActionClicked()
+
+  property alias title: titleItem.text
+  property alias leftAction: leftActionContainer.children
+  property alias content: contentContainer.children
+  property alias rightAction: rightActionContainer.children
+  property string warningMsg
+  property string errorMsg
+  property bool hasFocus: false
+  property color bgColor: __style.whiteColor
+  property bool hasCheckbox: false
+  property bool checkboxChecked: false
+
+  readonly property real spacing: 15 * __dp
+
+  width: parent.width
+  height: mainColumn.height
+
+  Column {
+    id: mainColumn
+
+    spacing: 6 * __dp
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Row {
+      id: titleRow
+
+      spacing: 4 * __dp
+      width: parent.width
+      visible: titleItem.text.length > 0
+
+      MMCheckBox {
+        id: checkbox
+
+        small: true
+        visible: root.hasCheckbox
+        checked: root.checkboxChecked
+      }
+      Text {
+        id: titleItem
+
+        width: parent.width - checkbox.width - titleRow.spacing
+
+        font: __style.p6
+        wrapMode: Text.WordWrap
+      }
+    }
+
+    Item {
+      height: 50 * __dp
+      anchors.left: parent.left
+      anchors.right: parent.right
+
+      Rectangle {
+        id: background
+
+        width: parent.width
+        height: parent.height
+
+        border.width: 2 * __dp
+        color: root.bgColor
+        radius: __style.inputRadius
+        border.color: {
+          if (root.hasFocus) {
+            if (errorMsg.length > 0) {
+              return __style.negativeColor
+            }
+            else if (warningMsg.length > 0) {
+              return __style.warningColor
+            }
+            return __style.forestColor
+          }
+          return __style.transparentColor
+        }
+      }
+
+      Row {
+        height: parent.height
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: root.spacing
+        anchors.rightMargin: root.spacing
+
+        Item {
+          id: leftActionContainer
+
+          property bool actionAllowed: leftActionContainer.children.length > 1
+
+          height: parent.height
+          width: actionAllowed ? height/2 : 0
+
+          Item {
+            width: leftActionContainer.actionAllowed ? parent.width + root.spacing/2 : 0
+            height: parent.height
+            anchors.centerIn: parent
+
+            MouseArea {
+              anchors.fill: parent
+              onReleased: root.leftActionClicked()
+            }
+          }
+        }
+
+        Item {
+          id: contentContainer
+
+          height: parent.height
+          width: parent.width - (leftActionContainer.actionAllowed ? leftActionContainer.width : 0) - (rightActionContainer.actionAllowed ? rightActionContainer.width : 0)
+
+          MouseArea {
+            anchors.fill: parent
+
+            onClicked: {
+              root.contentClicked()
+            }
+          }
+        }
+
+        Item {
+          id: rightActionContainer
+
+          property bool actionAllowed: rightActionContainer.children.length > 1
+
+          height: parent.height
+          width: actionAllowed ? height/2 : 0
+
+          Item {
+            width: rightActionContainer.actionAllowed ? parent.width + root.spacing/2 : 0
+            height: parent.height
+            anchors.centerIn: parent
+
+            MouseArea {
+              anchors.fill: parent
+              onReleased: root.rightActionClicked()
+            }
+          }
+        }
+      }
+    }
+
+    Item {
+      id: messageItem
+
+      width: parent.width
+      height: msgRow.height
+
+      Row {
+        id: msgRow
+
+        spacing: 4 * __dp
+
+        MMIcon {
+          id: msgIcon
+
+          source: visible ? __style.errorIcon : ""
+          color: errorMsg.length > 0 ? __style.negativeColor : __style.warningColor
+          visible: errorMsg.length > 0 || warningMsg.length > 0
+        }
+        Text {
+          width: messageItem.width - msgRow.spacing - msgIcon.width
+
+          text: root.errorMsg.length > 0 ? root.errorMsg : root.warningMsg
+          font: __style.t4
+          wrapMode: Text.WordWrap
+          visible: root.errorMsg.length > 0 || root.warningMsg.length > 0
+        }
+      }
+    }
+  }
+}

app/qml/components/MMCheckBox.qml → app/qml/inputs/MMCheckBox.qml

@@ -10,21 +10,32 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Controls.Basic
+import "../components"
 
 CheckBox {
   id: control
 
-  checked: true
+  property bool small: false
+
+  width: (control.small ? 16 : 24) * __dp
+  height: width
 
   indicator: Rectangle {
-    implicitWidth: 24
-    implicitHeight: 24
-    x: control.leftPadding
-    y: parent.height / 2 - height / 2
-    radius: 5
-    color: enabled ? ( control.checked ? __style.grassColor: __style.whiteColor ) : __style.whiteColor
-    border.color: enabled ? ( control.checked ? __style.grassColor: __style.forestColor ) : __style.mediumGreenColor
-    border.width: control.hovered ? 2.5 : 2
+    width: control.width
+    height: control.height
+    y: control.height / 2 - height / 2
+    radius: 5 * __dp
+    color: (enabled && control.checked) ? __style.grassColor: __style.whiteColor
+    border.color: {
+      if(enabled) {
+        if(checked) {
+          return __style.grassColor
+        }
+        return __style.forestColor
+      }
+      return __style.mediumGreenColor
+    }
+    border.width: (control.hovered ? 2.5 : 2) * __dp
 
     MMIcon {
       id: icon
@@ -33,6 +44,7 @@ CheckBox {
       source: __style.checkmarkIcon
       color: control.enabled ? __style.forestColor : __style.mediumGreenColor
       visible: control.checked
+      scale: control.width / (24 * __dp)
     }
   }
 
@@ -41,6 +53,6 @@ CheckBox {
     font: __style.p5
     color: icon.color
     verticalAlignment: Text.AlignVCenter
-    leftPadding: control.indicator.width + control.spacing
+    leftPadding: control.indicator.width
   }
 }

app/qml/inputs/MMInputEditor.qml

@@ -0,0 +1,58 @@
+/***************************************************************************
+ *                                                                         *
+ *   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
+import QtQuick.Controls.Basic
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import "../components"
+
+MMAbstractEditor {
+  id: root
+
+  property var parentValue: parent.value ?? ""
+  property bool parentValueIsNull: parent.valueIsNull ?? false
+  property bool isReadOnly: parent.readOnly ?? false
+
+  property alias placeholderText: textField.placeholderText
+  readonly property alias text: textField.text
+
+  signal editorValueChanged( var newValue, var isNull )
+
+  hasFocus: textField.activeFocus
+
+  content: TextField {
+    id: textField
+
+    anchors.fill: parent
+
+    text: root.parentValue
+    color: root.enabled ? __style.nightColor : __style.mediumGreenColor
+    placeholderTextColor: __style.nightAlphaColor
+    font: __style.p5
+    hoverEnabled: true
+
+    background: Rectangle {
+      color: __style.transparentColor
+    }
+  }
+
+  rightAction: MMIcon {
+    id: rightIcon
+
+    height: parent.height
+
+    source: __style.xMarkIcon
+    color: root.enabled ? __style.forestColor : __style.mediumGreenColor
+    visible: textField.activeFocus && textField.text.length>0
+  }
+
+  onRightActionClicked: textField.text = ""
+}

app/qml/inputs/MMPasswordEditor.qml

@@ -0,0 +1,60 @@
+/***************************************************************************
+ *                                                                         *
+ *   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
+import QtQuick.Controls.Basic
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import "../components"
+
+MMAbstractEditor {
+  id: root
+
+  property var parentValue: parent.value
+  property bool parentValueIsNull: parent.valueIsNull ?? false
+  property bool isReadOnly: parent.readOnly ?? false
+
+  property alias placeholderText: textField.placeholderText
+  readonly property alias text: textField.text
+
+  signal editorValueChanged( var newValue, var isNull )
+
+  hasFocus: textField.activeFocus
+
+  content: TextField {
+    id: textField
+
+    anchors.fill: parent
+    anchors.verticalCenter: parent.verticalCenter
+
+    text: root.parentValue
+    color: root.enabled ? __style.nightColor : __style.mediumGreenColor
+    placeholderTextColor: __style.nightAlphaColor
+    font: __style.p5
+    hoverEnabled: true
+    echoMode: eyeButton.pressed ? TextInput.Normal : TextInput.Password
+    background: Rectangle {
+      color: __style.transparentColor
+    }
+  }
+
+  rightAction: MMIcon {
+    id: eyeButton
+
+    property bool pressed: false
+
+    height: parent.height
+
+    source: pressed ? __style.hideIcon : __style.showIcon
+    color: root.enabled ? __style.forestColor : __style.mediumGreenColor
+  }
+
+  onRightActionClicked: eyeButton.pressed = !eyeButton.pressed
+}