Added input editors: #2923

iiLubos · 2023-11-27T21:55:59Z

MMInputEditor (optional left icon)
MMPasswordEditor (with eye button)

MMSliderEditor See how to use it in EditorsPage.qml

  MMSliderEditor {
    title: "MMSliderEditor"
    from: -100
    to: 100
    parentValue: -100
    suffix: " s"
    width: parent.width
    onEditorValueChanged: function(newValue) { errorMsg = newValue > 0 ? "" : "Set positive value!" }
    hasCheckbox: true
    checkboxChecked: true
  }

  MMInputEditor {
    title: "MMInputEditor"
    parentValue: "Text"
    width: parent.width
    hasCheckbox: true
    checkboxChecked: false
  }

  MMInputEditor {
    title: "MMInputEditor"
    placeholderText: "Placeholder"
    width: parent.width
    warningMsg: text.length > 0 ? "" : "Write something"
  }

  MMPasswordEditor {
    title: "MMPasswordEditor"
    parentValue: "Password"
    regexp: '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,})'
    errorMsg: isPasswordCorrect(text) ? "" : "Password must contain at least 6 characters\nMinimum 1 number, uppercase and lowercase letter and special character"
    width: parent.width
  }

- MMInputEditor (optional left icon) - MMPasswordEditor (with eye button) - MMSliderEditor See how to use it in EditorsPage.qml

tomasMizera · 2023-12-01T17:09:33Z

app/qmlV2/component/MMAbstractEditor.qml

+        border.color: root.hasFocus ? ( errorMsg.length > 0 ? StyleV2.negativeColor : warningMsg.length > 0 ? StyleV2.warningColor : StyleV2.forestColor ) : StyleV2.transparentColor
+        border.width: 2 * __dp
+        color: root.bgColor
+        radius: 12 * __dp


I would expect this radius value to be in __style as it is likely reused in many other places

tomasMizera · 2023-12-01T17:20:11Z

app/qmlV2/component/MMAbstractEditor.qml

+
+        width: parent.width
+        height: parent.height
+        border.color: root.hasFocus ? ( errorMsg.length > 0 ? StyleV2.negativeColor : warningMsg.length > 0 ? StyleV2.warningColor : StyleV2.forestColor ) : StyleV2.transparentColor


In case of more complicated conditions like here, we should write them with proper if/else statements. These are much easier to read, understand and update if needed. See for example: https://doc.qt.io/qt-6/qml-codingconventions.html#javascript-code

Suggested change

border.color: root.hasFocus ? ( errorMsg.length > 0 ? StyleV2.negativeColor : warningMsg.length > 0 ? StyleV2.warningColor : StyleV2.forestColor ) : StyleV2.transparentColor

border.color: {

if (root.hasFocus) {

if (errorMsg.length > 0) {

return __style.negativeColor

}

else if (warningMsg.length > 0) {

return __style.warningColor

}

}

else {

return __style.transparentColor

}

}

tomasMizera · 2023-12-01T17:22:28Z

app/qmlV2/component/MMAbstractEditor.qml

+          Rectangle {
+            color: StyleV2.transparentColor
+            anchors.centerIn: parent
+            width: leftActionContainer.actionAllowed ? parent.width + root.spacing/2 : 0
+            height: parent.height


What is the point of this rectangle?

tomasMizera · 2023-12-01T17:23:11Z

app/qmlV2/component/MMAbstractEditor.qml

+          id: contentContainer
+
+          height: parent.height
+          width: parent.width - (leftActionContainer.actionAllowed ? leftActionContainer.width : 0) - (rightActionContainer.actionAllowed ? rightActionContainer.width : 0) //- 2 * root.spacing - ( leftActionContainer.actionAllowed ? root.spacing : 0 )


Commented out code

Suggested change

width: parent.width - (leftActionContainer.actionAllowed ? leftActionContainer.width : 0) - (rightActionContainer.actionAllowed ? rightActionContainer.width : 0) //- 2 * root.spacing - ( leftActionContainer.actionAllowed ? root.spacing : 0 )

width: parent.width - (leftActionContainer.actionAllowed ? leftActionContainer.width : 0) - (rightActionContainer.actionAllowed ? rightActionContainer.width : 0)

tomasMizera · 2023-12-01T17:24:27Z

app/qmlV2/component/MMAbstractEditor.qml

+        Item {
+          id: leftActionContainer
+
+          property bool actionAllowed: leftActionContainer.children.length > 1 && (leftActionContainer.children[1]?.visible ?? false)


What type of input changes the visibility state?

Suggested change

property bool actionAllowed: leftActionContainer.children.length > 1 && (leftActionContainer.children[1]?.visible ?? false)

property bool actionAllowed: leftActionContainer.children.length > 1 )

tomasMizera · 2023-12-01T17:33:49Z

app/qmlV2/component/MMInputEditor.qml

+import Qt5Compat.GraphicalEffects
+import ".."
+
+//import lc 1.0


Commented out code

tomasMizera · 2023-12-01T17:34:36Z

app/qmlV2/component/MMInputEditor.qml

+  /*required*/ property var parentValue: parent.value ?? ""
+  /*required*/ property bool parentValueIsNull: parent.valueIsNull ?? false
+  /*required*/ property bool isReadOnly: parent.readOnly ?? false


It is Qt6, we can finally start using the required properties! :)) 🍾

Suggested change

/*required*/ property var parentValue: parent.value ?? ""

/*required*/ property bool parentValueIsNull: parent.valueIsNull ?? false

/*required*/ property bool isReadOnly: parent.readOnly ?? false

required property var parentValue: parent.value ?? ""

required property bool parentValueIsNull: parent.valueIsNull ?? false

required property bool isReadOnly: parent.readOnly ?? false

This applies to other files too

tomasMizera · 2023-12-01T17:38:33Z

app/qmlV2/component/MMPasswordEditor.qml

+/***************************************************************************
+ range.qml
+  --------------------------------------
+  Date                 : 2019
+  Copyright            : (C) 2019 by Viktor Sklencar
+  Email                : [email protected]
+ ***************************************************************************
+ *                                                                         *
+ *   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.                                   *
+ *                                                                         *
+ ***************************************************************************/


New file, new header :)

Suggested change

/***************************************************************************

range.qml

--------------------------------------

Date : 2019

Copyright : (C) 2019 by Viktor Sklencar

Email : viktor.sklencar@lutraconsulting.co.uk

***************************************************************************

* *

* 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. *

* *

***************************************************************************/

/ ***************************************************************************

* *

* 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. *

* *

***************************************************************************/

The same applies to all files

tomasMizera · 2023-12-01T17:38:43Z

app/qmlV2/component/MMPasswordEditor.qml

+import Qt5Compat.GraphicalEffects
+import ".."
+
+//import lc 1.0


commented out code

The same applies to all files, please remove code that is commented out

tomasMizera · 2023-12-01T17:41:52Z

app/qmlV2/component/MMPasswordEditor.qml

+  /*required*/ property bool parentValueIsNull: parent.valueIsNull ?? false
+  /*required*/ property bool isReadOnly: parent.readOnly ?? false
+
+  required property string regexp


Validation of password goes through c++, not here. This field will instead receive an error is password is not strong enough

iiLubos · 2023-12-05T11:32:49Z

Done in #2944

Added input editors:

33f68fa

- MMInputEditor (optional left icon) - MMPasswordEditor (with eye button) - MMSliderEditor See how to use it in EditorsPage.qml

iiLubos self-assigned this Nov 27, 2023

Added checkbox to Editors title. And small improvements.

5337c16

iiLubos marked this pull request as ready for review November 29, 2023 08:07

iiLubos requested a review from tomasMizera November 29, 2023 08:07

tomasMizera reviewed Dec 1, 2023

View reviewed changes

iiLubos closed this Dec 5, 2023

PeterPetrik deleted the master_designEditors branch March 20, 2024 14:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added input editors: #2923

Added input editors: #2923

iiLubos commented Nov 27, 2023 •

edited

Loading

tomasMizera Dec 1, 2023

tomasMizera Dec 1, 2023

tomasMizera Dec 1, 2023

tomasMizera Dec 1, 2023

tomasMizera Dec 1, 2023

tomasMizera Dec 1, 2023

tomasMizera Dec 1, 2023

tomasMizera Dec 1, 2023

tomasMizera Dec 1, 2023

tomasMizera Dec 1, 2023

tomasMizera Dec 1, 2023

tomasMizera Dec 1, 2023

tomasMizera Dec 1, 2023

iiLubos commented Dec 5, 2023

-        border.color: root.hasFocus ? ( errorMsg.length > 0 ? StyleV2.negativeColor : warningMsg.length > 0 ? StyleV2.warningColor : StyleV2.forestColor ) : StyleV2.transparentColor
+        border.color: {
+          if (root.hasFocus) {
+            if (errorMsg.length > 0) {
+              return __style.negativeColor
+            }
+            else if (warningMsg.length > 0) {
+              return __style.warningColor
+            }
+          }
+          else {
+            return __style.transparentColor
+          }
+        }

	width: parent.width - (leftActionContainer.actionAllowed ? leftActionContainer.width : 0) - (rightActionContainer.actionAllowed ? rightActionContainer.width : 0) //- 2 * root.spacing - ( leftActionContainer.actionAllowed ? root.spacing : 0 )
	width: parent.width - (leftActionContainer.actionAllowed ? leftActionContainer.width : 0) - (rightActionContainer.actionAllowed ? rightActionContainer.width : 0)

	property bool actionAllowed: leftActionContainer.children.length > 1 && (leftActionContainer.children[1]?.visible ?? false)
	property bool actionAllowed: leftActionContainer.children.length > 1 )

Added input editors: #2923

Added input editors: #2923

Conversation

iiLubos commented Nov 27, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

iiLubos commented Dec 5, 2023

iiLubos commented Nov 27, 2023 •

edited

Loading