diff --git a/app/qmlV2/component/MMButtonInput.qml b/app/qmlV2/component/MMButtonInput.qml index 4f2a58868..a0a22e46b 100644 --- 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 index ee97b9245..25570693f 100644 --- 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 index 7ce2bd121..5d1eb0aeb 100644 --- a/app/qmlV2/component/MMPasswordInput.qml +++ b/app/qmlV2/component/MMPasswordInput.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 required property string regexp @@ -22,40 +23,16 @@ Item { 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 index 7f220707c..0d60b0a96 100644 --- 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 index bf41fcf5a..ba17f2693 100644 --- 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") }