diff options
| -rw-r--r-- | components/Input.qml | 22 | ||||
| -rw-r--r-- | components/LineEdit.qml | 53 |
2 files changed, 50 insertions, 25 deletions
diff --git a/components/Input.qml b/components/Input.qml index 076fd9bc..a660ca84 100644 --- a/components/Input.qml +++ b/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 } } diff --git a/components/LineEdit.qml b/components/LineEdit.qml index c91073a7..0cd71978 100644 --- a/components/LineEdit.qml +++ b/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 + + onTextUpdated: { + // check to remove placeholder text when there is content + if(item.isEmpty()){ + placeholderLabel.visible = true + } else { + placeholderLabel.visible = false + } + } + + function isEmpty(){ + var val = input.text; + if(val === "") { + return true; + } + else { + return false; + } + } function getColor(error) { - if (error) - return "#FFDDDD" - else - return "#FFFFFF" + // @TODO: replace/remove this (implement as ternary?) + if (error) + return Style.inputBoxBackground + else + return Style.inputBoxBackground } - Rectangle { - visible: showBorder - anchors.fill: parent - anchors.bottomMargin: 1 * scaleRatio - color: "#DBDBDB" - //radius: 4 + 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(); |