monero-project/monero-gui
monero-project/monero-gui
1
0
Fork 0
mirror of https://github.com/monero-project/monero-gui.git synced 2024-11-16 15:58:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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 // 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. // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
import QtQuick.Controls 1.2 import QtQuick.Controls 2.2
import QtQuick.Controls.Styles 1.2 import QtQuick 2.10
import QtQuick 2.2 import "." 1.0
TextField { TextField {
font.family: "Arial" font.family: Style.fontRegular.name
font.pixelSize: 22
horizontalAlignment: TextInput.AlignLeft horizontalAlignment: TextInput.AlignLeft
selectByMouse: true selectByMouse: true
style: TextFieldStyle { color: "white"
textColor: "#3F3F3F"
placeholderTextColor: "#BABABA"
background: Rectangle { background: Rectangle {
border.width: 0 color: "transparent"
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. // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
import QtQuick 2.0 import QtQuick 2.0
import "." 1.0
Item { Item {
id: item id: item
property alias placeholderText: input.placeholderText property alias placeholderText: placeholderLabel.text
property alias text: input.text property alias text: input.text
property alias validator: input.validator property alias validator: input.validator
property alias readOnly : input.readOnly property alias readOnly : input.readOnly
@ -43,21 +44,47 @@ Item {
signal accepted(); signal accepted();
signal textUpdated(); signal textUpdated();
height: 37 * scaleRatio height: 48 * scaleRatio
function getColor(error) { onTextUpdated: {
if (error) // check to remove placeholder text when there is content
return "#FFDDDD" if(item.isEmpty()){
else placeholderLabel.visible = true
return "#FFFFFF" } else {
placeholderLabel.visible = false
}
} }
Rectangle { function isEmpty(){
visible: showBorder var val = input.text;
anchors.fill: parent if(val === "") {
anchors.bottomMargin: 1 * scaleRatio return true;
color: "#DBDBDB" }
//radius: 4 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 { Rectangle {
@ -70,8 +97,6 @@ Item {
Input { Input {
id: input id: input
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: 4 * scaleRatio
anchors.rightMargin: 30 * scaleRatio
font.pixelSize: parent.fontSize font.pixelSize: parent.fontSize
onEditingFinished: item.editingFinished() onEditingFinished: item.editingFinished()
onAccepted: item.accepted(); onAccepted: item.accepted();