sddm-theme/theme/Main.qml

/***************************************************************************
 * 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
import SddmComponents 2.0
import "./components"

Rectangle {
	id: container
	width: 640
	height: 480
	color: "#282828"

	LayoutMirroring.enabled: Qt.locale().textDirection == Qt.RightToLeft
	LayoutMirroring.childrenInherit: true

	property int sessionIndex: session.index

	TextConstants { id: textConstants }

	Connections {
		target: sddm
		function onLoginSucceeded() {
			errorMessage.color = "#83a598"
			errorMessage.text = textConstants.loginSucceeded
		}
		function onLoginFailed() {
			password.text = ""
			errorMessage.color = "#fb4934"
			errorMessage.text = textConstants.loginFailed
		}
		function onInformationMessage(message) {
			errorMessage.color = "#fb4934"
			errorMessage.text = message
		}
	}

	// Background
	Rectangle {
		anchors.fill: parent
		color: "transparent"
		//visible: primaryScreen

		// Within that bg, we have a login box with everything in it
		Rectangle {
			id: rectangle
			anchors.centerIn: parent
			width: Math.max(600, mainColumn.implicitWidth + 50)
			height: Math.max(800, mainColumn.implicitHeight + 50)
			color: "#cc32302f"
			radius: 8

			// Lay out everything within as a column
			Column {
				id: mainColumn
				width: 400
				anchors.centerIn: parent
				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
					}
				}

				// This column contains the UN field
				Column {
					width: parent.width
					spacing: 4
					Text {
						id: lblName
						color: "#ebdbb2"
						width: parent.width
						text: textConstants.userName
						font.family: "IBM Plex Sans"
						font.pixelSize: 13
					}

					TextBox {
						id: name
						width: parent.width; height: 50
						text: userModel.lastUser
						font.family: "IBM Plex Sans"
						font.pixelSize: 13
						radius: 8
						textColor: "#ebdbb2"
						borderColor: "#32302f"
						focusColor: "#83a598"
						hoverColor: "#504945"
						color: "#282828"

						KeyNavigation.backtab: rebootButton; KeyNavigation.tab: password

						Keys.onPressed: function (event) {
							if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
								sddm.login(name.text, password.text, sessionIndex)
								event.accepted = true
							}
						}
					}
				}

				// This one, the password field
				Column {
					width: parent.width
					spacing: 4
					Text {
						id: lblPassword
						color: "#ebdbb2"
						width: parent.width
						text: textConstants.password
						font.family: "IBM Plex Sans"
						font.pixelSize: 13
					}

					PasswordBox {
						id: password
						width: parent.width; height: 50
						font.family: "IBM Plex Sans"
						font.pixelSize: 13
						radius: 8
						textColor: "#ebdbb2"
						borderColor: "#32302f"
						focusColor: "#83a598"
						hoverColor: "#504945"
						color: "#282828"

						KeyNavigation.backtab: name; KeyNavigation.tab: session

						Keys.onPressed: function (event) {
							if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
								sddm.login(name.text, password.text, sessionIndex)
								event.accepted = true
							}
						}
					}
				}

				// This one, the session selector
				Column {
					width: parent.width
					spacing: 4
					z: 101
					Text {
						id: lblSession
						color: "#ebdbb2"
						width: parent.width
						text: textConstants.session
						wrapMode: TextEdit.WordWrap
						font.family: "IBM Plex Sans"
						font.pixelSize: 13
					}

					SaltComboBox {
						id: session
						width: parent.width; height: 50
						font.family: "IBM Plex Sans"
						font.pixelSize: 13
						radius: 8
						textColor: "#ebdbb2"
						borderColor: "#32302f"
						focusColor: "#83a598"
						hoverColor: "#504945"
						color: "#282828"

						model: sessionModel
						index: sessionModel.lastIndex

						KeyNavigation.backtab: password; KeyNavigation.tab: layoutBox
					}
				}

				// This here's an error message/whatever prompt
				Column {
					width: parent.width
					Text {
						id: errorMessage
						color: "#ebdbb2"
						anchors.horizontalCenter: parent.horizontalCenter
						text: textConstants.prompt
						font.family: "IBM Plex Sans"
						font.pixelSize: 13
					}
				}

				// This singular Row has our login button
				Row {
					spacing: 4
					anchors.horizontalCenter: parent.horizontalCenter
					width: parent.width
					Button {
						id: loginButton
						text: textConstants.login
						width: parent.width
						radius: 8

						onClicked: sddm.login(name.text, password.text, sessionIndex)

						KeyNavigation.backtab: layoutBox; KeyNavigation.tab: shutdownButton
						font.family: "IBM Plex Sans"
						font.pixelSize: 13
						textColor: "#282828"
						color: "#83a598"
						disabledColor: "#32302f"
						activeColor: "#83a598"
						pressedColor: "#458588"
					}
				}

				// 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 )
					Button {
						id: shutdownButton
						text: textConstants.shutdown
						width: parent.btnWidth
						radius: 8

						onClicked: sddm.powerOff()

						KeyNavigation.backtab: loginButton; KeyNavigation.tab: rebootButton
						font.family: "IBM Plex Sans"
						font.pixelSize: 13
						textColor: "#ebdbb2"
						color: "#32302f"
						disabledColor: "#32302f"
						activeColor: "#fb4934"
						pressedColor: "#cc241d"
					}

					Button {
						id: rebootButton
						text: textConstants.reboot
						width: parent.btnWidth
						radius: 8

						onClicked: sddm.reboot()

						KeyNavigation.backtab: shutdownButton; KeyNavigation.tab: name
						font.family: "IBM Plex Sans"
						font.pixelSize: 13
						textColor: "#ebdbb2"
						color: "#32302f"
						disabledColor: "#32302f"
						activeColor: "#fb4934"
						pressedColor: "#cc241d"
					}
				}
			}
		}
	}

	Component.onCompleted: {
		if (name.text == "")
		name.focus = true
		else
		password.focus = true
	}
 }