Disable that visibility hint

Turns out it actually breaks shit

salt-gruvbox/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
@@ -55,10 +56,24 @@
 		}
 	}
 
+	Background {
+		anchors.fill: parent
+		source: Qt.resolvedUrl(config.background)
+		fillMode: Image.PreserveAspectCrop
+		onStatusChanged: {
+			var defaultBackground = Qt.resolvedUrl(config.defaultBackground)
+			if (status == Image.Error && source != defaultBackground) {
+				source = defaultBackground
+			}
+		}
+	}
+
 	// Background
 	Rectangle {
 		anchors.fill: parent
-		color: "transparent"
+		color: "#00000000"
+		//color: "#e6000000"
+		// ^ This matches hyprlock but it looks kinda bad :<
 		//visible: primaryScreen
 
 		// Within that bg, we have a login box with everything in it
@@ -73,17 +88,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
 					}
 				}
 
@@ -96,14 +115,23 @@
 						color: "#ebdbb2"
 						width: parent.width
 						text: textConstants.userName
-						font.pixelSize: 12
+						font.family: "IBM Plex Sans"
+						font.pixelSize: 14
 					}
 
-					TextBox {
+					SaltTextBox {
 						id: name
-						width: parent.width; height: 30
+						width: parent.width; height: 50
 						text: userModel.lastUser
+						font.family: "IBM Plex Sans"
 						font.pixelSize: 14
+						radius: 8
+						textColor: "#ebdbb2"
+						borderWidth: 4
+						borderColor: "#32302f"
+						focusColor: "#83a598"
+						hoverColor: "#504945"
+						color: "#282828"
 
 						KeyNavigation.backtab: rebootButton; KeyNavigation.tab: password
 
@@ -119,19 +147,28 @@
 				// This one, the password field
 				Column {
 					width: parent.width
-					spacing : 4
+					spacing: 4
 					Text {
 						id: lblPassword
 						color: "#ebdbb2"
 						width: parent.width
 						text: textConstants.password
-						font.pixelSize: 12
+						font.family: "IBM Plex Sans"
+						font.pixelSize: 14
 					}
 
-					PasswordBox {
+					SaltPasswordBox {
 						id: password
-						width: parent.width; height: 30
+						width: parent.width; height: 50
+						font.family: "IBM Plex Sans"
 						font.pixelSize: 14
+						radius: 8
+						textColor: "#ebdbb2"
+						borderWidth: 4
+						borderColor: "#32302f"
+						focusColor: "#83a598"
+						hoverColor: "#504945"
+						color: "#282828"
 
 						KeyNavigation.backtab: name; KeyNavigation.tab: session
 
@@ -144,69 +181,42 @@
 					}
 				}
 
-				Row {
+				// This one, the session selector
+				Column {
+					width: parent.width
 					spacing: 4
-					width: parent.width / 2
-					z: 100
-
-					Column {
-						z: 100
-						width: parent.width * 1.3
-						spacing : 4
-						anchors.bottom: parent.bottom
-
-						Text {
-							id: lblSession
-							color: "#ebdbb2"
-							width: parent.width
-							text: textConstants.session
-							wrapMode: TextEdit.WordWrap
-							font.pixelSize: 12
-						}
-
-						ComboBox {
-							id: session
-							width: parent.width; height: 30
-							font.pixelSize: 14
-
-							arrowIcon: Qt.resolvedUrl("angle-down.png")
-
-							model: sessionModel
-							index: sessionModel.lastIndex
-
-							KeyNavigation.backtab: password; KeyNavigation.tab: layoutBox
-						}
+					z: 101
+					Text {
+						id: lblSession
+						color: "#ebdbb2"
+						width: parent.width
+						text: textConstants.session
+						wrapMode: TextEdit.WordWrap
+						font.family: "IBM Plex Sans"
+						font.pixelSize: 14
 					}
 
-					Column {
-						z: 101
-						width: parent.width * 0.7
-						spacing : 4
-						anchors.bottom: parent.bottom
+					SaltComboBox {
+						id: session
+						width: parent.width; height: 50
+						font.family: "IBM Plex Sans"
+						font.pixelSize: 14
+						radius: 8
+						textColor: "#ebdbb2"
+						borderColor: "#32302f"
+						borderWidth: 4
+						focusColor: "#83a598"
+						hoverColor: "#504945"
+						color: "#282828"
 
-						visible: keyboard.enabled && keyboard.layouts.length > 0
+						model: sessionModel
+						index: sessionModel.lastIndex
 
-						Text {
-							id: lblLayout
-							color: "#ebdbb2"
-							width: parent.width
-							text: textConstants.layout
-							wrapMode: TextEdit.WordWrap
-							font.pixelSize: 12
-						}
-
-						LayoutBox {
-							id: layoutBox
-							width: parent.width; height: 30
-							font.pixelSize: 14
-
-							arrowIcon: Qt.resolvedUrl("angle-down.png")
-
-							KeyNavigation.backtab: session; KeyNavigation.tab: loginButton
-						}
+						KeyNavigation.backtab: password; KeyNavigation.tab: loginButton
 					}
 				}
 
+				// This here's an error message/whatever prompt
 				Column {
 					width: parent.width
 					Text {
@@ -214,28 +224,42 @@
 						color: "#ebdbb2"
 						anchors.horizontalCenter: parent.horizontalCenter
 						text: textConstants.prompt
-						font.pixelSize: 10
+						font.family: "IBM Plex Sans"
+						font.pixelSize: 14
 					}
 				}
 
+				// 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: 14
+						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
@@ -244,9 +268,16 @@
 						onClicked: sddm.powerOff()
 
 						KeyNavigation.backtab: loginButton; KeyNavigation.tab: rebootButton
+						font.family: "IBM Plex Sans"
+						font.pixelSize: 14
+						textColor: "#ebdbb2"
+						color: "#32302f"
+						disabledColor: "#32302f"
+						activeColor: "#fb4934"
+						pressedColor: "#cc241d"
 					}
 
-					Button {
+					SaltButton {
 						id: rebootButton
 						text: textConstants.reboot
 						width: parent.btnWidth
@@ -255,6 +286,13 @@
 						onClicked: sddm.reboot()
 
 						KeyNavigation.backtab: shutdownButton; KeyNavigation.tab: name
+						font.family: "IBM Plex Sans"
+						font.pixelSize: 14
+						textColor: "#ebdbb2"
+						color: "#32302f"
+						disabledColor: "#32302f"
+						activeColor: "#fb4934"
+						pressedColor: "#cc241d"
 					}
 				}
 			}

salt-gruvbox/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
+        }
+    }
+}

salt-gruvbox/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
+	}
+}

salt-gruvbox/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
+		}
+	}
+}

salt-gruvbox/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"
+    }
+}

test.sh

@@ -1,2 +1,2 @@
 #! /bin/sh
-sddm-greeter --test-mode --theme theme/
+sddm-greeter --test-mode --theme salt-gruvbox/