Merge pull request #389 from FlyAndNotDown/master

Feat: Text Field UI Widget

Author: FlyAndNotDown

Editor/Qml/ETextField.qml

@@ -0,0 +1,33 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+
+Item {
+    property string placeHolderText: ''
+    property int wrapMode: TextInput.NoWrap
+    property string text: ''
+
+    id: root
+    implicitWidth: textField.implicitWidth
+    implicitHeight: textField.implicitHeight
+
+    TextField {
+        id: textField
+        width: root.width
+        height: root.height
+        implicitWidth: 500
+        text: root.text
+        rightPadding: 10
+        color: ETheme.fontColor
+        placeholderText: root.placeHolderText
+        placeholderTextColor: ETheme.placeHolderFontColor
+        font.pixelSize: ETheme.contentFontSize
+        font.family: ETheme.fontFamily
+        wrapMode: root.wrapMode
+
+        background: Rectangle {
+            radius: 5
+            color: ETheme.primaryBgColor
+        }
+    }
+}

Editor/Qml/ETheme.qml

@@ -4,18 +4,19 @@ import QtQuick
 
 QtObject {
     property color bgColor: Qt.color('#212121')
-    property color primaryBgColor: Qt.color('#2a2a2a')
+    property color primaryBgColor: Qt.color('#3a3939')
     property color primaryColor: Qt.color('#e74c3c')
     property color primaryHoverColor: Qt.color('#ce4d40')
     property color primaryFocusColor: Qt.color('#c0392b')
     property color primaryDisabledColor: Qt.color('#4b4a49')
     property color secondaryColor: Qt.color('#d58845')
     property color secondaryHoverColor: Qt.color('#d58845')
     property color secondaryFocusColor: Qt.color('#9b6a40')
+    property color secondaryBgColor: Qt.color('#8e8e8e')
     property color disabledColor: Qt.color('#676563')
     property color fontColor: Qt.color('#ecf0f1')
+    property color placeHolderFontColor: Qt.color('#c0c3c4')
     property color linkFontColor: Qt.color('#91b9c4')
-    property color secondaryBgColor: Qt.color('#8e8e8e')
 
     property FontLoader normalFont: FontLoader { source: Qt.url('Resource/Font/MiSans-Medium.ttf') }
     property FontLoader boldFont: FontLoader { source: Qt.url('Resource/Font/MiSans-Semibold.ttf') }

Editor/Qml/EWidgetSamples.qml

@@ -313,6 +313,62 @@ Rectangle {
                     filler: ESwitch.Filler.Text
                 }
             }
+
+            RowLayout {
+                Layout.leftMargin: 5
+                Layout.topMargin: 15
+                EText {
+                    text: 'TextInput'
+                    style: EText.Style.Title1
+                }
+            }
+
+            ColumnLayout {
+                Layout.margins: 5
+
+                RowLayout {
+                    ETextField {
+                        Layout.preferredWidth: 300
+                    }
+
+                    EText {
+                        Layout.leftMargin: 5
+                        text: 'Default'
+                    }
+                }
+
+                RowLayout {
+                    ETextField {
+                        Layout.preferredWidth: 300
+                        placeHolderText: 'Hello World'
+                    }
+
+                    EText {
+                        Layout.leftMargin: 5
+                        text: 'With Placeholder'
+                    }
+                }
+
+                RowLayout {
+                    ETextField {
+                        Layout.preferredWidth: 300
+                        wrapMode: TextInput.Wrap
+                        text: 'This is a very very very very very very very very very long words.'
+                    }
+
+                    EText {
+                        Layout.leftMargin: 5
+                        text: 'Wrap'
+                    }
+                }
+
+                RowLayout {
+                    ETextField {
+                        Layout.fillWidth: true
+                        placeHolderText: 'Block Input'
+                    }
+                }
+            }
         }
     }
 }