chore(@desktop/general): disable enter and return keys for search pop up

chore(StatusSearchPopup.qml): disable enter and return keys
fix(StatusSlider): slider background and handle should not depend on root's height
2021-11-03 19:14:37 +03:00 · 2021-11-03 17:27:05 +03:00 · 2021-11-03 11:29:49 +01:00 · 2021-11-03 11:26:00 +01:00 · 2021-11-03 11:25:49 +01:00 · 2021-11-03 11:25:34 +01:00
7 changed files with 62 additions and 5 deletions
@@ -7,6 +7,7 @@ Rectangle {
    id: statusBaseButton

    enum Size {
+        Tiny,
        Small,
        Large
    }
@@ -33,8 +34,32 @@ Rectangle {

    property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12
    property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12
-    property real defaultTopPadding: size === StatusBaseButton.Size.Large ? 11 : 10
-    property real defaultBottomPadding: size === StatusBaseButton.Size.Large ? 11 : 10
+    property real defaultTopPadding: {
+        switch (size) {
+            case StatusBaseButton.Size.Tiny:
+              return 5
+            case StatusBaseButton.Size.Small:
+              return 10
+              break;
+            case StatusBaseButton.Size.Large:
+            default:
+              return 11
+              break;
+        }
+    }
+    property real defaultBottomPadding: {
+        switch (size) {
+            case StatusBaseButton.Size.Tiny:
+              return 5
+            case StatusBaseButton.Size.Small:
+              return 10
+              break;
+            case StatusBaseButton.Size.Large:
+            default:
+              return 11
+              break;
+        }
+    }


    property real leftPadding: defaultLeftPadding
@@ -62,7 +87,7 @@ Rectangle {
    implicitWidth: sensor.width
    implicitHeight: sensor.height

-    radius: 8
+    radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6

    color: {
        if (statusBaseButton.enabled) {
@@ -72,6 +72,11 @@ Item {
                    if (!errors) {
                        errors = {}
                    }
+                    if (typeof result === "boolean") {
+                        result = {
+                            valid: result
+                        }
+                    }
                    result.errorMessage = validator.errorMessage
                    errors[validator.name] = result
                    statusBaseInput.valid = statusBaseInput.valid && false
@@ -15,8 +15,10 @@ Slider {
    leftPadding: 0

    background: Rectangle {
-        implicitHeight: 4
+        id: bgRect
        implicitWidth: 100
+        implicitHeight: 4
+        height: implicitHeight
        color: {
            if (statusSlider.value === statusSlider.to) {
                return Theme.palette.primaryColor1
@@ -40,7 +42,7 @@ Slider {

    handle: Rectangle {
        x: statusSlider.leftPadding + statusSlider.visualPosition * (statusSlider.availableWidth - width / 2)
-        anchors.verticalCenter: parent.verticalCenter
+        anchors.verticalCenter: bgRect.verticalCenter
        color: Theme.palette.white
        implicitWidth: 28
        implicitHeight: 28
@@ -0,0 +1,15 @@
+import StatusQ.Core.Utils 0.1
+import StatusQ.Controls 0.1
+
+StatusValidator {
+
+    name: "url"
+
+    errorMessage: "Please enter a valid URL"
+
+    validate: function (value) {
+        return Utils.isURL(value);
+    }
+}
+
+
@@ -6,4 +6,5 @@ StatusAsyncValidator 0.1 StatusAsyncValidator.qml
 StatusAsyncEnsValidator 0.1 StatusAsyncEnsValidator.qml
 StatusMinLengthValidator 0.1 StatusMinLengthValidator.qml
 StatusMaxLengthValidator 0.1 StatusMaxLengthValidator.qml
+StatusUrlValidator 0.1 StatusUrlValidator.qml
 StatusValidator 0.1 StatusValidator.qml
@@ -27,6 +27,10 @@ QtObject {
        return isEmail || isDomain || (inputValue.startsWith("@") && inputValue.length > 1)
    }

+    function isURL(text) {
+        return (/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}(\.[a-zA-Z0-9()]{1,6})?\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/.test(text))
+    }
+
    function uuid() {
        return Date.now().toString(36) + Math.random().toString(36).substr(2, 5)
    }
@@ -93,6 +93,11 @@ StatusModal {
                    font.pixelSize: 28
                    font.family: Theme.palette.baseFont.name
                    color: Theme.palette.directColor1
+                    Keys.onPressed: {
+                    if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return)
+                      event.accepted = true
+                    }
+
                }
            }
            StatusMenuSeparator {
Author	SHA1	Message	Date
Anastasiya S	ea6e651b2a	chore(@desktop/general): disable enter and return keys for search pop up	2021-11-03 19:14:37 +03:00
Anastasiya S	0a08bb80c0	chore(StatusSearchPopup.qml): disable enter and return keys	2021-11-03 17:27:05 +03:00
Alexandra Betouni	31cfc8833a	fix(StatusSlider): slider background and handle should not depend on root's height Made slider background and handle to not depend to root's height so that it covers cases where a legend is needed thus all should be clickable for better user experience. Relates to status-im/status-desktop#3984	2021-11-03 11:29:49 +01:00
Pascal Precht	a91558655c	feat(StatusQ.Controls.Validators): introduce `StatusUrlValidator`	2021-11-03 11:26:00 +01:00
Pascal Precht	dee9f43761	feat(StatusBaseButton): introduce `Tiny` size	2021-11-03 11:25:49 +01:00
Pascal Precht	f82cd7f52b	fix(StatusInput): ensure validator messages are rendered when validators return boolean values There's two ways to signal that a validator emits invalidity on a control: 1. Its `validate()` method returns `false` 2. Its `validate()` method returns an object Option 2) allows validators to supply the `errors` object with additional data. Due to latest changes to `errorMessage` handling in validators, those messages would not be rendered anymore if a validator returns simply `false` instead of an object. The reason for that is because the code assumed that only option 2) is gonna happen. This commit ensures that error messages a displayed in both options.	2021-11-03 11:25:34 +01:00