Change login button color for better feedback on selection

theme/Main.qml

@@ -22,10 +22,11 @@
  *
  ***************************************************************************/
 
- import QtQuick 2.0
- import SddmComponents 2.0
+import QtQuick 2.0
+import SddmComponents 2.0
+import "./components"
 
- Rectangle {
+Rectangle {
 	id: container
 	width: 640
 	height: 480
@@ -73,17 +74,21 @@
 			// Lay out everything within as a column
 			Column {
 				id: mainColumn
+				width: 400
 				anchors.centerIn: parent
-				spacing: 24
+				spacing: 8
 
 				// This colum has our date and time
 				Column {
+					anchors.horizontalCenter: parent.horizontalCenter
 					width: parent.width
 					spacing: 4
 					Clock {
+						anchors.horizontalCenter: parent.horizontalCenter
 						id: clockTime
 						color: "#ebdbb2"
 						timeFont.family: "IBM Plex Sans"
+						dateFont.family: timeFont.family
 					}
 				}
 
@@ -100,12 +105,19 @@
 						font.pixelSize: 13
 					}
 
-					TextBox {
+					SaltTextBox {
 						id: name
-						width: parent.width; height: 30
+						width: parent.width; height: 50
 						text: userModel.lastUser
 						font.family: "IBM Plex Sans"
 						font.pixelSize: 13
+						radius: 8
+						textColor: "#ebdbb2"
+						borderWidth: 4
+						borderColor: "#32302f"
+						focusColor: "#83a598"
+						hoverColor: "#504945"
+						color: "#282828"
 
 						KeyNavigation.backtab: rebootButton; KeyNavigation.tab: password
 
@@ -131,11 +143,18 @@
 						font.pixelSize: 13
 					}
 
-					PasswordBox {
+					SaltPasswordBox {
 						id: password
-						width: parent.width; height: 30
+						width: parent.width; height: 50
 						font.family: "IBM Plex Sans"
 						font.pixelSize: 13
+						radius: 8
+						textColor: "#ebdbb2"
+						borderWidth: 4
+						borderColor: "#32302f"
+						focusColor: "#83a598"
+						hoverColor: "#504945"
+						color: "#282828"
 
 						KeyNavigation.backtab: name; KeyNavigation.tab: session
 
@@ -152,6 +171,7 @@
 				Column {
 					width: parent.width
 					spacing: 4
+					z: 101
 					Text {
 						id: lblSession
 						color: "#ebdbb2"
@@ -162,18 +182,23 @@
 						font.pixelSize: 13
 					}
 
-					ComboBox {
+					SaltComboBox {
 						id: session
-						width: parent.width; height: 30
+						width: parent.width; height: 50
 						font.family: "IBM Plex Sans"
 						font.pixelSize: 13
-
-						arrowIcon: Qt.resolvedUrl("angle-down.png")
+						radius: 8
+						textColor: "#ebdbb2"
+						borderColor: "#32302f"
+						borderWidth: 4
+						focusColor: "#83a598"
+						hoverColor: "#504945"
+						color: "#282828"
 
 						model: sessionModel
 						index: sessionModel.lastIndex
 
-						KeyNavigation.backtab: password; KeyNavigation.tab: layoutBox
+						KeyNavigation.backtab: password; KeyNavigation.tab: loginButton
 					}
 				}
 
@@ -190,28 +215,37 @@
 					}
 				}
 
-				// And this row here has our buttons
+				// This singular Row has our login button
 				Row {
 					spacing: 4
 					anchors.horizontalCenter: parent.horizontalCenter
-					property int btnWidth: Math.max(loginButton.implicitWidth,
-					shutdownButton.implicitWidth,
-					rebootButton.implicitWidth, 80) + 8
-					Button {
+					width: parent.width
+					SaltButton {
 						id: loginButton
 						text: textConstants.login
-						width: parent.btnWidth
+						width: parent.width
 						radius: 8
 
 						onClicked: sddm.login(name.text, password.text, sessionIndex)
 
-						KeyNavigation.backtab: layoutBox; KeyNavigation.tab: shutdownButton
+						KeyNavigation.backtab: session; KeyNavigation.tab: shutdownButton
 						font.family: "IBM Plex Sans"
 						font.pixelSize: 13
 						textColor: "#282828"
+						color: "#458588"
+						disabledColor: "#32302f"
+						activeColor: "#83a598"
+						pressedColor: "#458588"
 					}
+				}
 
-					Button {
+				// And this one has our shutdown/reboot buttons
+				Row {
+					spacing: 4
+					width: parent.width
+					anchors.horizontalCenter: parent.horizontalCenter
+					property int btnWidth: parent.width / 2 - ( spacing / 2 )
+					SaltButton {
 						id: shutdownButton
 						text: textConstants.shutdown
 						width: parent.btnWidth
@@ -222,10 +256,14 @@
 						KeyNavigation.backtab: loginButton; KeyNavigation.tab: rebootButton
 						font.family: "IBM Plex Sans"
 						font.pixelSize: 13
-						textColor: "#282828"
+						textColor: "#ebdbb2"
+						color: "#32302f"
+						disabledColor: "#32302f"
+						activeColor: "#fb4934"
+						pressedColor: "#cc241d"
 					}
 
-					Button {
+					SaltButton {
 						id: rebootButton
 						text: textConstants.reboot
 						width: parent.btnWidth
@@ -236,7 +274,11 @@
 						KeyNavigation.backtab: shutdownButton; KeyNavigation.tab: name
 						font.family: "IBM Plex Sans"
 						font.pixelSize: 13
-						textColor: "#282828"
+						textColor: "#ebdbb2"
+						color: "#32302f"
+						disabledColor: "#32302f"
+						activeColor: "#fb4934"
+						pressedColor: "#cc241d"
 					}
 				}
 			}

theme/components/SaltButton.qml

@@ -0,0 +1,132 @@
+/***************************************************************************
+* Copyright (c) 2013 Abdurrahman AVCI <abdurrahmanavci@gmail.com>
+*
+* Permission is hereby granted, free of charge, to any person
+* obtaining a copy of this software and associated documentation
+* files (the "Software"), to deal in the Software without restriction,
+* including without limitation the rights to use, copy, modify, merge,
+* publish, distribute, sublicense, and/or sell copies of the Software,
+* and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included
+* in all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+* OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+* ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+* OR OTHER DEALINGS IN THE SOFTWARE.
+*
+***************************************************************************/
+
+import QtQuick 2.0
+
+Rectangle {
+    id: container
+    width: 80; height: 30
+
+    property alias borderColor: main.color
+    property alias textColor: textArea.color
+    property alias font: textArea.font
+    property alias text: textArea.text
+    property alias implicitWidth: textArea.implicitWidth
+    property alias implicitHeight: textArea.implicitHeight
+
+    color: "#4682b4"
+    property color disabledColor: "#888888"
+    property color activeColor: "#266294"
+    property color pressedColor: "#064264"
+
+    property bool enabled: true
+    property bool spaceDown: false
+    property bool isFocused: activeFocus || mouseArea.containsMouse
+    property bool isPressed: spaceDown || mouseArea.pressed
+
+    signal pressed()
+    signal released()
+    signal clicked()
+
+    states: [
+        State {
+            name: "disabled"; when: (container.enabled === false)
+            PropertyChanges { target: container; color: disabledColor }
+            PropertyChanges { target: main; color: disabledColor }
+        },
+        State {
+            name: "active"; when: container.enabled && container.isFocused && !container.isPressed
+            PropertyChanges { target: container; color: activeColor }
+            PropertyChanges { target: main; color: activeColor }
+        },
+        State {
+            name: "pressed"; when: container.enabled && container.isPressed
+            PropertyChanges { target: container; color: pressedColor }
+            PropertyChanges { target: main; color: pressedColor }
+        }
+    ]
+
+    transitions: Transition {
+        ColorAnimation { duration: 200 }
+    }
+
+    clip: true
+    smooth: true
+
+    Rectangle {
+        id: main
+        width: parent.width - 2; height: parent.height - 2
+        anchors.centerIn: parent
+	radius: container.radius
+
+        color: parent.color
+
+        visible: container.isFocused
+    }
+
+    Text {
+        id: textArea
+        anchors.centerIn: parent
+        color: "white"
+        text: "Button"
+        font.bold: true
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+
+        cursorShape: Qt.PointingHandCursor
+
+        hoverEnabled: container.enabled
+		enabled: container.enabled
+
+        acceptedButtons: Qt.LeftButton
+
+        onPressed: { container.focus = true; container.pressed() }
+        onClicked: { container.focus = true; container.clicked() }
+        onReleased: { container.focus = true; container.released() }
+    }
+
+    Keys.onPressed: function (event) {
+        if (event.key === Qt.Key_Space) {
+            container.spaceDown = true;
+            container.pressed()
+            event.accepted = true
+        } else if (event.key === Qt.Key_Return) {
+            container.clicked()
+            event.accepted = true
+        }
+    }
+
+    Keys.onReleased: function (event) {
+        if (event.key === Qt.Key_Space) {
+            container.spaceDown = false;
+            container.released()
+            container.clicked()
+            event.accepted = true
+        }
+    }
+}

theme/components/SaltComboBox.qml

@@ -0,0 +1,242 @@
+/***************************************************************************
+* Copyright (c) 2013 Abdurrahman AVCI <abdurrahmanavci@gmail.com>
+*
+* Permission is hereby granted, free of charge, to any person
+* obtaining a copy of this software and associated documentation
+* files (the "Software"), to deal in the Software without restriction,
+* including without limitation the rights to use, copy, modify, merge,
+* publish, distribute, sublicense, and/or sell copies of the Software,
+* and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included
+* in all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+* OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+* ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+* OR OTHER DEALINGS IN THE SOFTWARE.
+*
+***************************************************************************/
+
+import QtQuick 2.0
+
+FocusScope {
+	id: container
+	width: 80; height: 30
+
+	property color color: "white"
+	property color borderColor: "#ababab"
+	property color focusColor: "#266294"
+	property color hoverColor: "#5692c4"
+	property color menuColor: "white"
+	property color textColor: "black"
+
+	property int borderWidth: 1
+	property font font
+	property alias model: listView.model
+	property alias radius: main.radius
+	property int index: 0
+
+	property Component rowDelegate: defaultRowDelegate
+
+	signal valueChanged(int id)
+
+	Component {
+		id: defaultRowDelegate
+		Text {
+			anchors.fill: parent
+			anchors.margins: 3 + container.borderWidth
+			verticalAlignment: Text.AlignVCenter
+			color: container.textColor
+			font: container.font
+
+			text: parent.modelItem.name
+		}
+	}
+
+	onFocusChanged: if (!container.activeFocus) close(false)
+
+	Rectangle {
+		id: main
+
+		anchors.fill: parent
+
+		color: container.color
+		border.color: container.borderColor
+		border.width: container.borderWidth
+
+		states: [
+			State {
+				name: "hover"; when: mouseArea.containsMouse
+				PropertyChanges { target: main; border.width: container.borderWidth; border.color: container.hoverColor }
+			},
+			State {
+				name: "focus"; when: container.activeFocus && !mouseArea.containsMouse
+				PropertyChanges { target: main; border.width: container.borderWidth; border.color: container.focusColor }
+			}
+		]
+
+		transitions: Transition {
+			ColorAnimation { property: "border.color"; duration: 100 }
+		}
+	}
+
+	Loader {
+		id: topRow
+		anchors.fill: parent
+		focus: true
+		clip: true
+
+		sourceComponent: rowDelegate
+		property variant modelItem
+	}
+
+	MouseArea {
+		id: mouseArea
+		anchors.fill: container
+
+		cursorShape: Qt.PointingHandCursor
+
+		hoverEnabled: true
+
+		onEntered: if (main.state == "") main.state = "hover";
+		onExited: if (main.state == "hover") main.state = "";
+		onClicked: { container.focus = true; toggle() }
+		onWheel: {
+			if (wheel.angleDelta.y > 0)
+			listView.decrementCurrentIndex()
+			else
+			listView.incrementCurrentIndex()
+		}
+	}
+
+	Keys.onPressed: function (event) {
+		if (event.key === Qt.Key_Up) {
+			listView.decrementCurrentIndex()
+		} else if (event.key === Qt.Key_Down) {
+			if (event.modifiers !== Qt.AltModifier)
+			listView.incrementCurrentIndex()
+			else
+			toggle()
+		} else if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
+			close(true)
+		} else if (event.key === Qt.Key_Escape) {
+			close(false)
+		}
+	}
+
+	Rectangle {
+		id: dropDown
+		width: container.width; height: 0
+		anchors.top: container.bottom
+		anchors.topMargin: 0
+
+		color: container.menuColor
+
+		clip: true
+
+		Component {
+			id: myDelegate
+
+			Rectangle {
+				width: dropDown.width; height: container.height - 2*container.borderWidth
+				color: "transparent"
+
+				Loader {
+					id: loader
+					anchors.fill: parent
+					sourceComponent: rowDelegate
+
+					property variant modelItem: model
+				}
+
+				property variant modelItem: model
+
+				MouseArea {
+					id: delegateMouseArea
+					anchors.fill: parent
+
+					cursorShape: Qt.PointingHandCursor
+
+					hoverEnabled: true
+					onEntered: listView.currentIndex = index
+					onClicked: close(true)
+				}
+			}
+		}
+
+		ListView {
+			id: listView
+			width: container.width; height: (container.height - 2*container.borderWidth) * count + container.borderWidth
+			delegate: myDelegate
+			highlight: Rectangle {
+				anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined;
+				color: container.hoverColor
+			}
+		}
+
+		Rectangle {
+			anchors.fill: listView
+			anchors.topMargin: -container.borderWidth
+			color: "transparent"
+			clip: false
+			border.color: main.border.color
+			border.width: main.border.width
+		}
+
+		states: [
+			State {
+				name: "visible";
+				PropertyChanges { target: dropDown; height: (container.height - 2*container.borderWidth) * listView.count + container.borderWidth}
+			}
+		]
+
+		transitions: Transition {
+			NumberAnimation { property: "height"; duration: 100 }
+		}
+	}
+
+	function toggle() {
+		if (dropDown.state === "visible")
+		close(false)
+		else
+		open()
+	}
+
+	function open() {
+		dropDown.state = "visible"
+		listView.currentIndex = container.index
+	}
+
+	function close(update) {
+		dropDown.state = ""
+
+		if (update) {
+			container.index = listView.currentIndex
+			topRow.modelItem = listView.currentItem.modelItem
+			valueChanged(listView.currentIndex)
+		}
+	}
+
+	Component.onCompleted: {
+		listView.currentIndex = container.index
+		if (listView.currentItem)
+		topRow.modelItem = listView.currentItem.modelItem
+	}
+
+	onIndexChanged: {
+		listView.currentIndex = container.index
+		if (listView.currentItem)
+		topRow.modelItem = listView.currentItem.modelItem
+	}
+
+	onModelChanged: {
+		listView.currentIndex = container.index
+		if (listView.currentItem)
+		topRow.modelItem = listView.currentItem.modelItem
+	}
+}

theme/components/SaltPasswordBox.qml

@@ -0,0 +1,162 @@
+/***************************************************************************
+* Copyright (c) 2013 Nikita Mikhaylov <nslqqq@gmail.com>
+*
+* Permission is hereby granted, free of charge, to any person
+* obtaining a copy of this software and associated documentation
+* files (the "Software"), to deal in the Software without restriction,
+* including without limitation the rights to use, copy, modify, merge,
+* publish, distribute, sublicense, and/or sell copies of the Software,
+* and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included
+* in all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+* OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+* ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+* OR OTHER DEALINGS IN THE SOFTWARE.
+*
+***************************************************************************/
+
+import QtQuick 2.0
+
+FocusScope {
+    id: container
+    width: 80; height: 30
+
+    property alias borderWidth: txtMain.borderWidth
+    property alias color: txtMain.color
+    property alias borderColor: txtMain.borderColor
+    property alias focusColor: txtMain.focusColor
+    property alias hoverColor: txtMain.hoverColor
+    property alias radius: txtMain.radius
+    property alias font: txtMain.font
+    property alias textColor: txtMain.textColor
+    property alias echoMode: txtMain.echoMode
+    property alias text: txtMain.text
+
+    property alias image: img.source
+    property double imageFadeIn: 300
+    property double imageFadeOut: 200
+
+    property alias tooltipEnabled: tooltip.visible
+    property alias tooltipText: tooltipText.text
+    property alias tooltipFG: tooltipText.color
+    property alias tooltipBG: tooltip.color
+
+    SaltTextBox {
+        id: txtMain
+        width: parent.width; height: parent.height
+        font.pixelSize: 14
+
+        echoMode: TextInput.Password
+
+        focus: true
+    }
+
+    Image {
+        id: img
+        opacity: 0
+        state: keyboard.capsLock ? "activated" : ""
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        fillMode: Image.PreserveAspectFit
+
+        smooth: true
+        height: parent.height * 0.8
+
+        source: "warning.png"
+        sourceSize.width: width
+        sourceSize.height: height
+
+        anchors.rightMargin: 0.3 * width
+
+        states: [
+            State {
+                name: "activated"
+                PropertyChanges { target: img; opacity: 1; }
+            },
+            State {
+                name: ""
+                PropertyChanges { target: img; opacity: 0; }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                to: "activated"
+                NumberAnimation { target: img; property: "opacity"; from: 0; to: 1; duration: imageFadeIn; }
+            },
+
+            Transition {
+                to: ""
+                NumberAnimation { target: img; property: "opacity"; from: 1; to: 0; duration: imageFadeOut; }
+            }
+        ]
+
+        MouseArea {
+            id: hoverArea
+
+            anchors.fill: parent
+            hoverEnabled: true
+            cursorShape: Qt.ArrowCursor
+
+            onEntered: {
+                tooltip.x = mouseX + img.x + 10
+                tooltip.y = mouseY + 10
+            }
+
+            onPositionChanged: {
+                tooltip.x = mouseX + img.x + 10
+                tooltip.y = mouseY + 10
+            }
+        }
+    }
+
+    Rectangle {
+        id: tooltip
+        color: "lightblue"
+        border.color: "black"
+        border.width: 1
+
+        width: 1.1 * tooltipText.implicitWidth
+        height: 1.4 * tooltipText.implicitHeight
+        radius: 2
+        opacity: 0
+
+        state: hoverArea.containsMouse && img.state == "activated" ? "activated" : ""
+
+        states: [
+            State {
+                name: "activated"
+                PropertyChanges { target: tooltip; opacity: 1 }
+            },
+            State {
+                name: ""
+                PropertyChanges { target: tooltip; opacity: 0 }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                to: "activated"
+                NumberAnimation { target: tooltip; property: "opacity"; from: 0; to: 1; duration: imageFadeIn; }
+            },
+
+            Transition {
+                to: ""
+                NumberAnimation { target: tooltip; property: "opacity"; from: 1; to: 0; duration: imageFadeOut; }
+            }
+        ]
+
+        Text {
+            id: tooltipText
+            anchors.centerIn: parent;
+            text: textConstants.capslockWarning
+        }
+    }
+}

theme/components/SaltTextBox.qml

@@ -0,0 +1,92 @@
+/***************************************************************************
+* Copyright (c) 2013 Abdurrahman AVCI <abdurrahmanavci@gmail.com>
+*
+* Permission is hereby granted, free of charge, to any person
+* obtaining a copy of this software and associated documentation
+* files (the "Software"), to deal in the Software without restriction,
+* including without limitation the rights to use, copy, modify, merge,
+* publish, distribute, sublicense, and/or sell copies of the Software,
+* and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included
+* in all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+* OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+* ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+* OR OTHER DEALINGS IN THE SOFTWARE.
+*
+***************************************************************************/
+
+import QtQuick 2.0
+
+FocusScope {
+    id: container
+    width: 80; height: 30
+
+    property color color: "white"
+    property color borderColor: "#ababab"
+    property color focusColor: "#266294"
+    property color hoverColor: "#5692c4"
+    property alias borderWidth: main.border.width
+    property alias radius: main.radius
+    property alias font: txtMain.font
+    property alias textColor: txtMain.color
+    property alias echoMode: txtMain.echoMode
+    property alias text: txtMain.text
+
+    Rectangle {
+        id: main
+
+        anchors.fill: parent
+
+        color: container.color
+        border.color: container.borderColor
+        border.width: 1
+
+        states: [
+            State {
+                name: "hover"; when: mouseArea.containsMouse
+                PropertyChanges { target: main; border.color: container.hoverColor }
+            },
+            State {
+                name: "focus"; when: container.activeFocus && !mouseArea.containsMouse
+                PropertyChanges { target: main; border.color: container.focusColor }
+            }
+        ]
+
+        transitions: Transition {
+            ColorAnimation { duration: 100 }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: container
+
+        cursorShape: Qt.IBeamCursor
+
+        hoverEnabled: true
+
+        onEntered: if (main.state == "") main.state = "hover";
+        onExited: if (main.state == "hover") main.state = "";
+        onClicked: container.focus = true;
+    }
+
+    TextInput {
+        id: txtMain
+        width: parent.width - 16
+        anchors.centerIn: parent
+
+        color: "black"
+
+        clip: true
+        focus: true
+
+        passwordCharacter: "\u25cf"
+    }
+}