github/monero-gui
1
Fork 0
mirror of https://github.com/monero-project/monero-gui synced 2024-12-28 00:23:44 +01:00
Code Releases Activity

Re-do LineEdit/Input - decoupled placeholder text

Browse Source
This commit is contained in:
Sander Ferdinand 2017-11-19 21:11:14 +01:00 committed by moneromooo-monero
parent 5360d2c231
commit e7eb3bdfef
2 changed files with 51 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/Input.qml
View File

@ -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
}
}

55
components/LineEdit.qml
View File

@ -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();