Skip to content

Commit

Permalink
Refactoring Inputs by call with Tomas
Browse files Browse the repository at this point in the history
  • Loading branch information
@iiLubos
iiLubos committed Nov 2, 2023
1 parent c59475e commit 3a29f5d
Show file tree
Hide file tree
Showing 6 changed files with 376 additions and 140 deletions.
140 changes: 140 additions & 0 deletions app/qmlV2/component/MMButtonInput.qml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
/***************************************************************************
* *
* 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. *
* *
***************************************************************************/

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import "../Style.js" as Style

Item {
id: control

property alias text: textField.text
property alias placeholderText: textField.placeholderText
property url iconSource: ""
required property string buttonText
property string warningMsg
property string errorMsg

signal clicked

width: 280 * __dp
height: rect.height + messageItem.height

Item {
id: messageItem

width: parent.width
anchors.left: parent.left
anchors.top: rect.bottom
anchors.topMargin: 6 * __dp
height: msgRow.height

Row {
id: msgRow

spacing: 4 * __dp

MMIcon {
id: msgIcon

source: visible ? Style.errorIcon : ""
color: errorMsg.length > 0 ? Style.negative : Style.warning
visible: errorMsg.length > 0 || warningMsg.length > 0
}
Text {
text: errorMsg.length > 0 ? errorMsg : warningMsg
font: Qt.font(Style.t4)
wrapMode: Text.WordWrap
width: messageItem.width - msgRow.spacing - msgIcon.width
visible: errorMsg.length > 0 || warningMsg.length > 0
}
}
}

Rectangle {
id: rect

height: 40 * __dp
width: parent.width
color: (errorMsg.length > 0 || warningMsg.length > 0) ? Style.errorBgInputColor : Style.white
border.color: errorMsg.length > 0 ? Style.negative : warningMsg.length > 0 ? Style.warning : Style.forest
border.width: enabled ? (textField.activeFocus ? 2*__dp : textField.hovered ? 1*__dp : 0) : 0
radius: parent.height

Row {
id: row

anchors.verticalCenter: parent.verticalCenter
leftPadding: 10 * __dp

MMIcon {
id: leftIcon

source: control.iconSource
color: errorMsg.length > 0 ? Style.negative :
warningMsg.length > 0 ? Style.warning :
control.enabled ? Style.forest : Style.mediumGreen
height: rect.height
}

TextField {
id: textField

y: 2 * __dp
width: control.width - 2 * row.leftPadding
- (leftIcon.visible ? leftIcon.width : 0)
- (button.visible ? button.width : 0)
height: rect.height - 4 * __dp
color: control.enabled ? Style.night : Style.mediumGreen
placeholderTextColor: Style.night_6
font: Qt.font(Style.p5)
hoverEnabled: true
anchors.verticalCenter: parent.verticalCenter
background: Rectangle {
color: Style.transparent
}
}

Button {
id: button

anchors.verticalCenter: parent.verticalCenter

contentItem: Text {
anchors.centerIn: button
font: Qt.font(Style.t5)
text: control.buttonText
leftPadding: 2 * __dp
rightPadding: 2 * __dp
topPadding: 2 * __dp
bottomPadding: 2 * __dp
color: Style.deepOcean
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}

background: Rectangle {
color: button.enabled ? Style.grass : Style.mediumGreen
radius: height / 2
}

onClicked: control.clicked()
}
}
}

// add whole text to clipboard
function textToClipboard() {
textField.selectAll()
textField.copy()
textField.deselect()
}
}
80 changes: 9 additions & 71 deletions app/qmlV2/component/MMInput.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,12 @@ import "../Style.js" as Style
Item {
id: control

enum Type { Normal, Password, Search, Calendar, Scan, CopyButton, SendButton }

property int type: MMInput.Type.Normal
property alias text: textField.text
property alias placeholderText: textField.placeholderText
property url iconSource: ""
property string warningMsg
property string errorMsg

signal sendButtonClicked

width: 280 * __dp
height: rect.height + messageItem.height

Expand Down Expand Up @@ -65,10 +61,8 @@ Item {
height: 40 * __dp
width: parent.width
color: (errorMsg.length > 0 || warningMsg.length > 0) ? Style.errorBgInputColor : Style.white
border.color: (textField.activeFocus || textField.hovered) ? (errorMsg.length > 0 ? Style.negative :
warningMsg.length > 0 ? Style.warning :
Style.forest) : "transparent"
border.width: enabled ? (textField.activeFocus ? 2*__dp : 1*__dp) : 0
border.color: errorMsg.length > 0 ? Style.negative : warningMsg.length > 0 ? Style.warning : Style.forest
border.width: enabled ? (textField.activeFocus ? 2*__dp : textField.hovered ? 1*__dp : 0) : 0
radius: parent.height

Row {
Expand All @@ -80,14 +74,11 @@ Item {
MMIcon {
id: leftIcon

source: control.type === MMInput.Type.Search ? Style.searchIcon :
control.type === MMInput.Type.Calendar ? Style.calendarIcon : ""
source: control.iconSource
color: errorMsg.length > 0 ? Style.negative :
warningMsg.length > 0 ? Style.warning :
control.enabled ? Style.forest : Style.mediumGreen
width: height
height: rect.height
visible: control.type === MMInput.Type.Search || control.type === MMInput.Type.Calendar
}

TextField {
Expand All @@ -96,86 +87,33 @@ Item {
y: 2 * __dp
width: control.width - 2 * row.leftPadding
- (leftIcon.visible ? leftIcon.width : 0)
- (rightIcon.visible ? rightIcon.width : 0)
- (button.visible ? button.width : 0)
- (clearButton.visible ? clearButton.width : 0)
height: rect.height - 4 * __dp
color: control.enabled ? Style.night : Style.mediumGreen
placeholderTextColor: Style.night_6
font: Qt.font(Style.p5)
hoverEnabled: true
anchors.verticalCenter: parent.verticalCenter
echoMode: (control.type === MMInput.Type.Password && !rightIcon.pressed) ? TextInput.Password : TextInput.Normal
background: Rectangle {
color: Style.transparent
}
}

MMIcon {
id: rightIcon
id: clearButton

property bool pressed: false
source: control.type === MMInput.Type.Password ? (pressed ? Style.hideIcon : Style.showIcon) :
control.type === MMInput.Type.Scan ? Style.qrCodeIcon :
(textField.activeFocus && textField.text.length>0) ? Style.xMarkIcon : ""
source: Style.xMarkIcon
color: control.enabled ? Style.forest : Style.mediumGreen
width: visible ? height : 0
height: rect.height
visible: control.type === MMInput.Type.Password ||
control.type === MMInput.Type.Scan ||
((control.type !== MMInput.Type.CopyButton || control.type !== MMInput.Type.SendButton) && textField.activeFocus && textField.text.length>0)
visible: textField.activeFocus && textField.text.length>0

MouseArea {
anchors.fill: parent
onClicked: click()

function click() {
if(control.type === MMInput.Type.Password) {
rightIcon.pressed = !rightIcon.pressed
}
else if(textField.activeFocus && textField.text.length>0) {
textField.text = ""
}
}
}
}

Button {
id: button

visible: control.type === MMInput.Type.CopyButton || control.type === MMInput.Type.SendButton
anchors.verticalCenter: parent.verticalCenter

contentItem: Text {
anchors.centerIn: button
font: Qt.font(Style.t5)
text: control.type === MMInput.Type.CopyButton ? qsTr("Copy") : qsTr("Send")
leftPadding: 2 * __dp
rightPadding: 2 * __dp
topPadding: 2 * __dp
bottomPadding: 2 * __dp
color: Style.deepOcean
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}

background: Rectangle {
color: button.enabled ? Style.grass : Style.mediumGreen
radius: height / 2
}

onClicked: {
if(control.type === MMInput.Type.CopyButton) {
textField.selectAll()
textField.copy()
textField.deselect()
}
else if(control.type === MMInput.Type.SendButton) {
sendButtonClicked()
}
onClicked: textField.text = ""
}
}

}
}
}
Loading

0 comments on commit 3a29f5d

Please sign in to comment.