Added title for Inputs. Updated Switch design. (#2921)

MerginMaps · Nov 28, 2023 · 09aa8f2 · 09aa8f2 · inputapp-bot · Nov 28, 2023
1 parent b80b90e
commit 09aa8f2
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 95 deletions.
diff --git a/app/qmlV2/component/MMButtonInput.qml b/app/qmlV2/component/MMButtonInput.qml
@@ -12,9 +12,10 @@ import QtQuick.Controls
 import QtQuick.Controls.Basic
 import ".."
 
-Item {
+Column {
   id: control
 
+  property alias title: titleItem.text
   property alias text: textField.text
   property alias placeholderText: textField.placeholderText
   property url iconSource: ""
@@ -24,38 +25,16 @@ Item {
 
   signal clicked
 
+  spacing: 6 * __dp
   width: 280 * __dp
-  height: rect.height + messageItem.height
 
-  Item {
-    id: messageItem
+  Text {
+    id: titleItem
 
     width: parent.width
-    anchors.left: parent.left
-    anchors.top: rect.bottom
-    anchors.topMargin: 6 * __dp
-    height: msgRow.height
-
-    Row {
-      id: msgRow
-
-      spacing: 4 * __dp
-
-      MMIcon {
-        id: msgIcon
-
-        source: visible ? StyleV2.errorIcon : ""
-        color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor
-        visible: errorMsg.length > 0 || warningMsg.length > 0
-      }
-      Text {
-        text: errorMsg.length > 0 ? errorMsg : warningMsg
-        font: StyleV2.t4
-        wrapMode: Text.WordWrap
-        width: messageItem.width - msgRow.spacing - msgIcon.width
-        visible: errorMsg.length > 0 || warningMsg.length > 0
-      }
-    }
+    font: StyleV2.p6
+    wrapMode: Text.WordWrap
+    visible: text.length > 0
   }
 
   Rectangle {
@@ -131,6 +110,34 @@ Item {
     }
   }
 
+  Item {
+    id: messageItem
+
+    width: parent.width
+    height: msgRow.height
+
+    Row {
+      id: msgRow
+
+      spacing: 4 * __dp
+
+      MMIcon {
+        id: msgIcon
+
+        source: visible ? StyleV2.errorIcon : ""
+        color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor
+        visible: errorMsg.length > 0 || warningMsg.length > 0
+      }
+      Text {
+        text: errorMsg.length > 0 ? errorMsg : warningMsg
+        font: StyleV2.t4
+        wrapMode: Text.WordWrap
+        width: messageItem.width - msgRow.spacing - msgIcon.width
+        visible: errorMsg.length > 0 || warningMsg.length > 0
+      }
+    }
+  }
+
   // add whole text to clipboard
   function textToClipboard() {
     textField.selectAll()

diff --git a/app/qmlV2/component/MMInput.qml b/app/qmlV2/component/MMInput.qml
@@ -12,47 +12,26 @@ import QtQuick.Controls
 import QtQuick.Controls.Basic
 import ".."
 
-Item {
+Column {
   id: control
 
+  property alias title: titleItem.text
   property alias text: textField.text
   property alias placeholderText: textField.placeholderText
   property url iconSource: ""
   property string warningMsg
   property string errorMsg
 
+  spacing: 6 * __dp
   width: 280 * __dp
-  height: rect.height + messageItem.height
 
-  Item {
-    id: messageItem
+  Text {
+    id: titleItem
 
     width: parent.width
-    anchors.left: parent.left
-    anchors.top: rect.bottom
-    anchors.topMargin: 6 * __dp
-    height: msgRow.height
-
-    Row {
-      id: msgRow
-
-      spacing: 4 * __dp
-
-      MMIcon {
-        id: msgIcon
-
-        source: visible ? StyleV2.errorIcon : ""
-        color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor
-        visible: errorMsg.length > 0 || warningMsg.length > 0
-      }
-      Text {
-        text: errorMsg.length > 0 ? errorMsg : warningMsg
-        font: StyleV2.t4
-        wrapMode: Text.WordWrap
-        width: messageItem.width - msgRow.spacing - msgIcon.width
-        visible: errorMsg.length > 0 || warningMsg.length > 0
-      }
-    }
+    font: StyleV2.p6
+    wrapMode: Text.WordWrap
+    visible: text.length > 0
   }
 
   Rectangle {
@@ -116,4 +95,32 @@ Item {
       }
     }
   }
+
+  Item {
+    id: messageItem
+
+    width: parent.width
+    height: msgRow.height
+
+    Row {
+      id: msgRow
+
+      spacing: 4 * __dp
+
+      MMIcon {
+        id: msgIcon
+
+        source: visible ? StyleV2.errorIcon : ""
+        color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor
+        visible: errorMsg.length > 0 || warningMsg.length > 0
+      }
+      Text {
+        text: errorMsg.length > 0 ? errorMsg : warningMsg
+        font: StyleV2.t4
+        wrapMode: Text.WordWrap
+        width: messageItem.width - msgRow.spacing - msgIcon.width
+        visible: errorMsg.length > 0 || warningMsg.length > 0
+      }
+    }
+  }
 }
diff --git a/app/qmlV2/component/MMPasswordInput.qml b/app/qmlV2/component/MMPasswordInput.qml
@@ -12,50 +12,27 @@ import QtQuick.Controls
 import QtQuick.Controls.Basic
 import ".."
 
-Item {
+Column {
   id: control
 
+  property alias title: titleItem.text
   property alias text: textField.text
   property alias placeholderText: textField.placeholderText
   required property string regexp
   property url iconSource: ""
   property string warningMsg
   property string errorMsg
 
+  spacing: 6 * __dp
   width: 280 * __dp
-  height: rect.height + messageItem.height
 
-  Item {
-    id: messageItem
+  Text {
+    id: titleItem
 
     width: parent.width
-    anchors.left: parent.left
-    anchors.top: rect.bottom
-    anchors.topMargin: 6 * __dp
-    height: msgRow.height
-
-    Row {
-      id: msgRow
-
-      spacing: 4 * __dp
-
-      MMIcon {
-        id: msgIcon
-
-        source: visible ? StyleV2.errorIcon : ""
-        color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor
-        visible: msg.visible
-      }
-      Text {
-        id: msg
-
-        text: errorMsg.length > 0 ? errorMsg : warningMsg
-        font: StyleV2.t4
-        wrapMode: Text.WordWrap
-        width: messageItem.width - msgRow.spacing - msgIcon.width
-        visible: (errorMsg.length > 0 || warningMsg.length > 0) && !isPasswordCorrect(textField.text)
-      }
-    }
+    font: StyleV2.p6
+    wrapMode: Text.WordWrap
+    visible: text.length > 0
   }
 
   Rectangle {
@@ -120,6 +97,36 @@ Item {
     }
   }
 
+  Item {
+    id: messageItem
+
+    width: parent.width
+    height: msgRow.height
+
+    Row {
+      id: msgRow
+
+      spacing: 4 * __dp
+
+      MMIcon {
+        id: msgIcon
+
+        source: visible ? StyleV2.errorIcon : ""
+        color: errorMsg.length > 0 ? StyleV2.negativeColor : StyleV2.warningColor
+        visible: msg.visible
+      }
+      Text {
+        id: msg
+
+        text: errorMsg.length > 0 ? errorMsg : warningMsg
+        font: StyleV2.t4
+        wrapMode: Text.WordWrap
+        width: messageItem.width - msgRow.spacing - msgIcon.width
+        visible: (errorMsg.length > 0 || warningMsg.length > 0) && !isPasswordCorrect(textField.text)
+      }
+    }
+  }
+
   function isPasswordCorrect(pwd) {
     let pwdRegexp = new RegExp(control.regexp)
     return pwdRegexp.test(pwd)

diff --git a/app/qmlV2/component/MMSwitch.qml b/app/qmlV2/component/MMSwitch.qml
@@ -39,9 +39,7 @@ Switch {
       width: 20
       height: width
       radius: width / 2
-      color: control.down ? StyleV2.mediumGreenColor : StyleV2.whiteColor
-      border.color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor
-      border.width: 6
+      color: control.enabled ? StyleV2.forestColor : StyleV2.mediumGreenColor
       anchors.verticalCenter: parent.verticalCenter
     }
   }

diff --git a/gallery/qml/pages/InputsPage.qml b/gallery/qml/pages/InputsPage.qml
@@ -35,22 +35,22 @@ ScrollView {
         spacing: 10
         anchors.fill: parent
         MMInput {
+          title: "Title"
           placeholderText: "Place holder"
         }
         MMInput {
+          title: "Title"
           text: "Disabled"
           enabled: false
         }
         Column {
-          TextInput { text: "iconSource: StyleV2.searchIcon" }
           MMInput {
+            title: "Search ..."
             placeholderText: "Search"
             iconSource: StyleV2.searchIcon
           }
         }
         Column {
-          TextInput { text: "iconSource: StyleV2.calendarIcon" }
-          TextInput { text: "warningMsg: ..." }
           MMInput {
             text: "Calendar"
             iconSource: StyleV2.calendarIcon
@@ -76,6 +76,7 @@ ScrollView {
         spacing: 10
         anchors.fill: parent
         MMPasswordInput {
+          title: "Username password"
           text: "Password"
           regexp: '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,})'
           errorMsg: "Password must contain at least 6 characters\nMinimum 1 number, uppercase and lowercase letter and special character"
@@ -104,6 +105,7 @@ ScrollView {
         spacing: 10
         anchors.fill: parent
         MMButtonInput {
+          title: "Title"
           text: "Copy text to clipboard"
           buttonText: "Copy"
           onClicked: { textToClipboard(); console.log("Text in clipboard") }