Re-do LineEdit/Input - decoupled placeholder text

components/Input.qml

@@ -26,21 +26,21 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import QtQuick.Controls 1.2
-import QtQuick.Controls.Styles 1.2
-import QtQuick 2.2
+import QtQuick.Controls 2.2
+import QtQuick 2.10
+import "." 1.0
 
 TextField {
-    font.family: "Arial"
+    font.family: Style.fontRegular.name
+    font.pixelSize: 22
     horizontalAlignment: TextInput.AlignLeft
     selectByMouse: true
-    style: TextFieldStyle {
-        textColor: "#3F3F3F"
-        placeholderTextColor: "#BABABA"
+    color: "white"
 
-        background: Rectangle {
-            border.width: 0
-            color: "transparent"
-        }
+    background: Rectangle {
+        color: "transparent"
+        border.width: 1
+        border.color: Qt.rgba(1, 1, 1, 0.25)
+        radius: 4
     }
 }

components/LineEdit.qml

@@ -27,10 +27,11 @@
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 import QtQuick 2.0
+import "." 1.0
 
 Item {
     id: item
-    property alias placeholderText: input.placeholderText
+    property alias placeholderText: placeholderLabel.text
     property alias text: input.text
     property alias validator: input.validator
     property alias readOnly : input.readOnly
@@ -43,21 +44,47 @@ Item {
     signal accepted();
     signal textUpdated();
 
-    height: 37 * scaleRatio
+    height: 48 * scaleRatio
 
-    function getColor(error) {
-      if (error)
-        return "#FFDDDD"
-      else
-        return "#FFFFFF"
+    onTextUpdated: {
+        // check to remove placeholder text when there is content
+        if(item.isEmpty()){
+            placeholderLabel.visible = true
+        } else {
+            placeholderLabel.visible = false
+        }
     }
 
-    Rectangle {
-        visible: showBorder
-        anchors.fill: parent
-        anchors.bottomMargin: 1 * scaleRatio
-        color: "#DBDBDB"
-        //radius: 4
+    function isEmpty(){
+        var val = input.text;
+        if(val === "") {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+
+    function getColor(error) {
+        // @TODO: replace/remove this (implement as ternary?)
+        if (error)
+            return Style.inputBoxBackground
+        else
+            return Style.inputBoxBackground
+    }
+
+    Text {
+        id: placeholderLabel
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 10
+        opacity: 0.25
+        font.family: Style.fontRegular.name
+        font.pixelSize: 20 * scaleRatio
+        color: "#FFFFFF"
+        text: ""
+        visible: item.setPlaceholder() ? false : true
+        z: 3
     }
 
     Rectangle {
@@ -70,8 +97,6 @@ Item {
     Input {
         id: input
         anchors.fill: parent
-        anchors.leftMargin: 4 * scaleRatio
-        anchors.rightMargin: 30 * scaleRatio
         font.pixelSize: parent.fontSize
         onEditingFinished: item.editingFinished()
         onAccepted: item.accepted();