mirror of
https://github.com/zoriya/noctalia-shell.git
synced 2026-08-05 05:48:08 +00:00
1050 lines
38 KiB
QML
1050 lines
38 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
import QtQuick.Effects
|
|
import Quickshell
|
|
import Quickshell.Wayland
|
|
import Quickshell.Services.Pam
|
|
import Quickshell.Services.UPower
|
|
import Quickshell.Io
|
|
import Quickshell.Widgets
|
|
import qs.Commons
|
|
import qs.Services
|
|
import qs.Widgets
|
|
import qs.Modules.Audio
|
|
|
|
Loader {
|
|
id: lockScreen
|
|
active: false
|
|
|
|
Timer {
|
|
id: unloadAfterUnlockTimer
|
|
interval: 250
|
|
repeat: false
|
|
onTriggered: lockScreen.active = false
|
|
}
|
|
|
|
function scheduleUnloadAfterUnlock() {
|
|
unloadAfterUnlockTimer.start()
|
|
}
|
|
|
|
sourceComponent: Component {
|
|
Item {
|
|
id: lockContainer
|
|
|
|
LockContext {
|
|
id: lockContext
|
|
onUnlocked: {
|
|
lockSession.locked = false
|
|
lockScreen.scheduleUnloadAfterUnlock()
|
|
lockContext.currentText = ""
|
|
}
|
|
onFailed: {
|
|
lockContext.currentText = ""
|
|
}
|
|
}
|
|
|
|
WlSessionLock {
|
|
id: lockSession
|
|
locked: lockScreen.active
|
|
|
|
WlSessionLockSurface {
|
|
readonly property real scaling: ScalingService.dynamicScale(screen)
|
|
|
|
Item {
|
|
id: batteryIndicator
|
|
property var battery: UPower.displayDevice
|
|
property bool isReady: battery && battery.ready && battery.isLaptopBattery && battery.isPresent
|
|
property real percent: isReady ? (battery.percentage * 100) : 0
|
|
property bool charging: isReady ? battery.state === UPowerDeviceState.Charging : false
|
|
property bool batteryVisible: isReady && percent > 0
|
|
}
|
|
|
|
Item {
|
|
id: keyboardLayout
|
|
property string currentLayout: (typeof KeyboardLayoutService !== 'undefined' && KeyboardLayoutService.currentLayout) ? KeyboardLayoutService.currentLayout : "Unknown"
|
|
}
|
|
|
|
Image {
|
|
id: lockBgImage
|
|
anchors.fill: parent
|
|
fillMode: Image.PreserveAspectCrop
|
|
source: screen ? WallpaperService.getWallpaper(screen.name) : ""
|
|
cache: true
|
|
smooth: true
|
|
mipmap: false
|
|
}
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
gradient: Gradient {
|
|
GradientStop {
|
|
position: 0.0
|
|
color: Qt.alpha(Color.mShadow, 0.8)
|
|
}
|
|
GradientStop {
|
|
position: 0.3
|
|
color: Qt.alpha(Color.mShadow, 0.4)
|
|
}
|
|
GradientStop {
|
|
position: 0.7
|
|
color: Qt.alpha(Color.mShadow, 0.5)
|
|
}
|
|
GradientStop {
|
|
position: 1.0
|
|
color: Qt.alpha(Color.mShadow, 0.9)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Screen corners for lock screen
|
|
Item {
|
|
anchors.fill: parent
|
|
visible: Settings.data.general.showScreenCorners
|
|
|
|
property color cornerColor: Settings.data.general.forceBlackScreenCorners ? Qt.rgba(0, 0, 0, 1) : Qt.alpha(Color.mSurface, Settings.data.bar.backgroundOpacity)
|
|
property real cornerRadius: Style.screenRadius * scaling
|
|
property real cornerSize: Style.screenRadius * scaling
|
|
|
|
// Top-left concave corner
|
|
Canvas {
|
|
anchors.top: parent.top
|
|
anchors.left: parent.left
|
|
width: parent.cornerSize
|
|
height: parent.cornerSize
|
|
antialiasing: true
|
|
renderTarget: Canvas.FramebufferObject
|
|
smooth: false
|
|
|
|
onPaint: {
|
|
const ctx = getContext("2d")
|
|
if (!ctx)
|
|
return
|
|
|
|
ctx.reset()
|
|
ctx.clearRect(0, 0, width, height)
|
|
|
|
ctx.fillStyle = parent.cornerColor
|
|
ctx.fillRect(0, 0, width, height)
|
|
|
|
ctx.globalCompositeOperation = "destination-out"
|
|
ctx.fillStyle = "#ffffff"
|
|
ctx.beginPath()
|
|
ctx.arc(width, height, parent.cornerRadius, 0, 2 * Math.PI)
|
|
ctx.fill()
|
|
}
|
|
|
|
onWidthChanged: if (available)
|
|
requestPaint()
|
|
onHeightChanged: if (available)
|
|
requestPaint()
|
|
}
|
|
|
|
// Top-right concave corner
|
|
Canvas {
|
|
anchors.top: parent.top
|
|
anchors.right: parent.right
|
|
width: parent.cornerSize
|
|
height: parent.cornerSize
|
|
antialiasing: true
|
|
renderTarget: Canvas.FramebufferObject
|
|
smooth: true
|
|
|
|
onPaint: {
|
|
const ctx = getContext("2d")
|
|
if (!ctx)
|
|
return
|
|
|
|
ctx.reset()
|
|
ctx.clearRect(0, 0, width, height)
|
|
|
|
ctx.fillStyle = parent.cornerColor
|
|
ctx.fillRect(0, 0, width, height)
|
|
|
|
ctx.globalCompositeOperation = "destination-out"
|
|
ctx.fillStyle = "#ffffff"
|
|
ctx.beginPath()
|
|
ctx.arc(0, height, parent.cornerRadius, 0, 2 * Math.PI)
|
|
ctx.fill()
|
|
}
|
|
|
|
onWidthChanged: if (available)
|
|
requestPaint()
|
|
onHeightChanged: if (available)
|
|
requestPaint()
|
|
}
|
|
|
|
// Bottom-left concave corner
|
|
Canvas {
|
|
anchors.bottom: parent.bottom
|
|
anchors.left: parent.left
|
|
width: parent.cornerSize
|
|
height: parent.cornerSize
|
|
antialiasing: true
|
|
renderTarget: Canvas.FramebufferObject
|
|
smooth: true
|
|
|
|
onPaint: {
|
|
const ctx = getContext("2d")
|
|
if (!ctx)
|
|
return
|
|
|
|
ctx.reset()
|
|
ctx.clearRect(0, 0, width, height)
|
|
|
|
ctx.fillStyle = parent.cornerColor
|
|
ctx.fillRect(0, 0, width, height)
|
|
|
|
ctx.globalCompositeOperation = "destination-out"
|
|
ctx.fillStyle = "#ffffff"
|
|
ctx.beginPath()
|
|
ctx.arc(width, 0, parent.cornerRadius, 0, 2 * Math.PI)
|
|
ctx.fill()
|
|
}
|
|
|
|
onWidthChanged: if (available)
|
|
requestPaint()
|
|
onHeightChanged: if (available)
|
|
requestPaint()
|
|
}
|
|
|
|
// Bottom-right concave corner
|
|
Canvas {
|
|
anchors.bottom: parent.bottom
|
|
anchors.right: parent.right
|
|
width: parent.cornerSize
|
|
height: parent.cornerSize
|
|
antialiasing: true
|
|
renderTarget: Canvas.FramebufferObject
|
|
smooth: true
|
|
|
|
onPaint: {
|
|
const ctx = getContext("2d")
|
|
if (!ctx)
|
|
return
|
|
|
|
ctx.reset()
|
|
ctx.clearRect(0, 0, width, height)
|
|
|
|
ctx.fillStyle = parent.cornerColor
|
|
ctx.fillRect(0, 0, width, height)
|
|
|
|
ctx.globalCompositeOperation = "destination-out"
|
|
ctx.fillStyle = "#ffffff"
|
|
ctx.beginPath()
|
|
ctx.arc(0, 0, parent.cornerRadius, 0, 2 * Math.PI)
|
|
ctx.fill()
|
|
}
|
|
|
|
onWidthChanged: if (available)
|
|
requestPaint()
|
|
onHeightChanged: if (available)
|
|
requestPaint()
|
|
}
|
|
}
|
|
|
|
Item {
|
|
anchors.fill: parent
|
|
|
|
// Time, Date, and User Profile Container
|
|
Rectangle {
|
|
width: Math.max(500 * scaling, contentRow.implicitWidth + 24 * scaling)
|
|
height: 120 * scaling
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.top: parent.top
|
|
anchors.topMargin: 100 * scaling
|
|
radius: 32 * scaling
|
|
color: Color.mSurface
|
|
border.color: Qt.alpha(Color.mOutline, 0.2)
|
|
border.width: 1
|
|
|
|
RowLayout {
|
|
id: contentRow
|
|
anchors.fill: parent
|
|
anchors.margins: 12 * scaling
|
|
spacing: 8 * scaling
|
|
|
|
// Left side: Avatar
|
|
Rectangle {
|
|
Layout.preferredWidth: 70 * scaling
|
|
Layout.preferredHeight: 70 * scaling
|
|
Layout.alignment: Qt.AlignVCenter
|
|
radius: width * 0.5
|
|
color: Color.transparent
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
radius: parent.radius
|
|
color: Color.transparent
|
|
border.color: Qt.alpha(Color.mPrimary, 0.8)
|
|
border.width: 2
|
|
|
|
SequentialAnimation on border.color {
|
|
loops: Animation.Infinite
|
|
ColorAnimation {
|
|
to: Qt.alpha(Color.mPrimary, 1.0)
|
|
duration: 2000
|
|
easing.type: Easing.InOutQuad
|
|
}
|
|
ColorAnimation {
|
|
to: Qt.alpha(Color.mPrimary, 0.8)
|
|
duration: 2000
|
|
easing.type: Easing.InOutQuad
|
|
}
|
|
}
|
|
}
|
|
|
|
NImageCircled {
|
|
anchors.centerIn: parent
|
|
width: 66 * scaling
|
|
height: 66 * scaling
|
|
imagePath: Settings.data.general.avatarImage
|
|
fallbackIcon: "person"
|
|
|
|
SequentialAnimation on scale {
|
|
loops: Animation.Infinite
|
|
NumberAnimation {
|
|
to: 1.02
|
|
duration: 4000
|
|
easing.type: Easing.InOutQuad
|
|
}
|
|
NumberAnimation {
|
|
to: 1.0
|
|
duration: 4000
|
|
easing.type: Easing.InOutQuad
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Spacer to center the text section
|
|
Item {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
// Center: User Info Column (left-aligned text)
|
|
ColumnLayout {
|
|
Layout.alignment: Qt.AlignVCenter
|
|
spacing: 2 * scaling
|
|
|
|
// Welcome back + Username on one line
|
|
NText {
|
|
text: I18n.tr("lock-screen.welcome-back") + " " + Quickshell.env("USER") + "!"
|
|
pointSize: Style.fontSizeXXXL * scaling
|
|
font.weight: Font.Medium
|
|
color: Color.mOnSurface
|
|
horizontalAlignment: Text.AlignLeft
|
|
}
|
|
|
|
// Date below
|
|
NText {
|
|
text: Qt.locale().toString(Time.date, "dddd, MMMM d")
|
|
pointSize: Style.fontSizeXXL * scaling
|
|
font.weight: Font.Medium
|
|
color: Color.mOnSurfaceVariant
|
|
horizontalAlignment: Text.AlignLeft
|
|
}
|
|
}
|
|
|
|
// Spacer to push cool time to the right
|
|
Item {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
// Right side: Cool Time (from Calendar)
|
|
Item {
|
|
Layout.preferredWidth: 70 * scaling
|
|
Layout.preferredHeight: 70 * scaling
|
|
Layout.alignment: Qt.AlignVCenter
|
|
|
|
// Seconds circular progress
|
|
Canvas {
|
|
id: secondsProgress
|
|
anchors.fill: parent
|
|
|
|
property real progress: Time.date.getSeconds() / 60
|
|
onProgressChanged: requestPaint()
|
|
|
|
Connections {
|
|
target: Time
|
|
function onDateChanged() {
|
|
const total = Time.date.getSeconds() * 1000 + Time.date.getMilliseconds()
|
|
secondsProgress.progress = total / 60000
|
|
}
|
|
}
|
|
|
|
onPaint: {
|
|
var ctx = getContext("2d")
|
|
var centerX = width / 2
|
|
var centerY = height / 2
|
|
var radius = Math.min(width, height) / 2 - 3 * scaling
|
|
|
|
ctx.reset()
|
|
|
|
// Background circle
|
|
ctx.beginPath()
|
|
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
|
|
ctx.lineWidth = 2.5 * scaling
|
|
ctx.strokeStyle = Qt.alpha(Color.mOnSurface, 0.15)
|
|
ctx.stroke()
|
|
|
|
// Progress arc
|
|
ctx.beginPath()
|
|
ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progress * 2 * Math.PI)
|
|
ctx.lineWidth = 2.5 * scaling
|
|
ctx.strokeStyle = Color.mPrimary
|
|
ctx.lineCap = "round"
|
|
ctx.stroke()
|
|
}
|
|
}
|
|
|
|
// Digital clock
|
|
ColumnLayout {
|
|
anchors.centerIn: parent
|
|
spacing: 0
|
|
|
|
NText {
|
|
text: {
|
|
var t = Settings.data.location.use12hourFormat ? Qt.locale().toString(new Date(), "hh AP") : Qt.locale().toString(new Date(), "HH")
|
|
return t
|
|
}
|
|
pointSize: Style.fontSizeL * scaling
|
|
font.weight: Style.fontWeightBold
|
|
color: Color.mOnSurface
|
|
horizontalAlignment: Text.AlignHCenter
|
|
Layout.alignment: Qt.AlignHCenter
|
|
}
|
|
|
|
NText {
|
|
text: Qt.formatTime(Time.date, "mm")
|
|
pointSize: Style.fontSizeL * scaling
|
|
font.weight: Style.fontWeightBold
|
|
color: Color.mOnSurfaceVariant
|
|
horizontalAlignment: Text.AlignHCenter
|
|
Layout.alignment: Qt.AlignHCenter
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Error notification
|
|
Rectangle {
|
|
width: 450 * scaling
|
|
height: 60 * scaling
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.bottom: parent.bottom
|
|
anchors.bottomMargin: 300 * scaling
|
|
radius: 30 * scaling
|
|
color: Color.mError
|
|
border.color: Color.mError
|
|
border.width: 1
|
|
visible: lockContext.showFailure && lockContext.errorMessage
|
|
opacity: visible ? 1.0 : 0.0
|
|
|
|
RowLayout {
|
|
anchors.centerIn: parent
|
|
spacing: 10 * scaling
|
|
|
|
NIcon {
|
|
icon: "alert-circle"
|
|
pointSize: Style.fontSizeL * scaling
|
|
color: Color.mOnError
|
|
}
|
|
|
|
NText {
|
|
text: lockContext.errorMessage || "Authentication failed"
|
|
color: Color.mOnError
|
|
pointSize: Style.fontSizeL * scaling
|
|
font.weight: Font.Medium
|
|
horizontalAlignment: Text.AlignHCenter
|
|
}
|
|
}
|
|
|
|
Behavior on opacity {
|
|
NumberAnimation {
|
|
duration: 300
|
|
easing.type: Easing.OutCubic
|
|
}
|
|
}
|
|
}
|
|
|
|
// Bottom container with weather, password input and controls
|
|
Rectangle {
|
|
width: 750 * scaling
|
|
height: 220 * scaling
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.bottom: parent.bottom
|
|
anchors.bottomMargin: 100 * scaling
|
|
radius: 32 * scaling
|
|
color: Color.mSurface
|
|
border.color: Qt.alpha(Color.mOutline, 0.2)
|
|
border.width: 1
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 14 * scaling
|
|
spacing: 14 * scaling
|
|
|
|
// Weather section
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 65 * scaling
|
|
spacing: 18 * scaling
|
|
visible: LocationService.coordinatesReady && LocationService.data.weather !== null
|
|
|
|
// Media widget with visualizer
|
|
Rectangle {
|
|
Layout.preferredWidth: 220 * scaling
|
|
Layout.preferredHeight: 50 * scaling
|
|
radius: 25 * scaling
|
|
color: Color.transparent
|
|
clip: true
|
|
visible: MediaService.currentPlayer && MediaService.canPlay
|
|
|
|
Loader {
|
|
anchors.fill: parent
|
|
anchors.margins: 4 * scaling
|
|
active: Settings.data.audio.visualizerType === "linear"
|
|
z: 0
|
|
sourceComponent: LinearSpectrum {
|
|
anchors.fill: parent
|
|
values: CavaService.values
|
|
fillColor: Color.mPrimary
|
|
opacity: 0.4
|
|
}
|
|
}
|
|
|
|
Loader {
|
|
anchors.fill: parent
|
|
anchors.margins: 4 * scaling
|
|
active: Settings.data.audio.visualizerType === "mirrored"
|
|
z: 0
|
|
sourceComponent: MirroredSpectrum {
|
|
anchors.fill: parent
|
|
values: CavaService.values
|
|
fillColor: Color.mPrimary
|
|
opacity: 0.4
|
|
}
|
|
}
|
|
|
|
Loader {
|
|
anchors.fill: parent
|
|
anchors.margins: 4 * scaling
|
|
active: Settings.data.audio.visualizerType === "wave"
|
|
z: 0
|
|
sourceComponent: WaveSpectrum {
|
|
anchors.fill: parent
|
|
values: CavaService.values
|
|
fillColor: Color.mPrimary
|
|
opacity: 0.4
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 8 * scaling
|
|
spacing: 8 * scaling
|
|
z: 1
|
|
|
|
Rectangle {
|
|
Layout.preferredWidth: 34 * scaling
|
|
Layout.preferredHeight: 34 * scaling
|
|
radius: width * 0.5
|
|
color: Color.transparent
|
|
clip: true
|
|
|
|
NImageCircled {
|
|
anchors.fill: parent
|
|
anchors.margins: 2 * scaling
|
|
imagePath: MediaService.trackArtUrl
|
|
fallbackIcon: "disc"
|
|
fallbackIconSize: Style.fontSizeM * scaling
|
|
borderColor: Color.mOutline
|
|
borderWidth: Math.max(1, Style.borderS * scaling)
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 2 * scaling
|
|
|
|
NText {
|
|
text: MediaService.trackTitle || "No media"
|
|
pointSize: Style.fontSizeM * scaling
|
|
font.weight: Style.fontWeightMedium
|
|
color: Color.mOnSurface
|
|
Layout.fillWidth: true
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
NText {
|
|
text: MediaService.trackArtist || ""
|
|
pointSize: Style.fontSizeM * scaling
|
|
color: Color.mOnSurfaceVariant
|
|
Layout.fillWidth: true
|
|
elide: Text.ElideRight
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
Layout.preferredWidth: 1
|
|
Layout.fillHeight: true
|
|
Layout.rightMargin: 4 * scaling
|
|
color: Qt.alpha(Color.mOutline, 0.3)
|
|
visible: MediaService.currentPlayer && MediaService.canPlay
|
|
}
|
|
|
|
Item {
|
|
Layout.preferredWidth: Style.marginM * scaling
|
|
visible: !(MediaService.currentPlayer && MediaService.canPlay)
|
|
}
|
|
|
|
// Current weather
|
|
RowLayout {
|
|
Layout.preferredWidth: 180 * scaling
|
|
spacing: 8 * scaling
|
|
|
|
NIcon {
|
|
Layout.alignment: Qt.AlignVCenter
|
|
icon: LocationService.weatherSymbolFromCode(LocationService.data.weather.current_weather.weathercode)
|
|
pointSize: Style.fontSizeXXXL * scaling
|
|
color: Color.mPrimary
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 2 * scaling
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 12 * scaling
|
|
|
|
NText {
|
|
text: Math.round(LocationService.data.weather.current_weather.temperature) + "°"
|
|
pointSize: Style.fontSizeXL * scaling
|
|
font.weight: Style.fontWeightBold
|
|
color: Color.mOnSurface
|
|
}
|
|
|
|
NText {
|
|
text: LocationService.data.weather.current_weather.windspeed + " km/h"
|
|
pointSize: Style.fontSizeM * scaling
|
|
color: Color.mOnSurfaceVariant
|
|
font.weight: Font.Normal
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 8 * scaling
|
|
|
|
NText {
|
|
text: Settings.data.location.name.split(",")[0]
|
|
pointSize: Style.fontSizeM * scaling
|
|
color: Color.mOnSurfaceVariant
|
|
}
|
|
|
|
NText {
|
|
text: (LocationService.data.weather.current && LocationService.data.weather.current.relativehumidity_2m) ? LocationService.data.weather.current.relativehumidity_2m + "% humidity" : ""
|
|
pointSize: Style.fontSizeM * scaling
|
|
color: Color.mOnSurfaceVariant
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 3-day forecast
|
|
RowLayout {
|
|
Layout.preferredWidth: 260 * scaling
|
|
Layout.rightMargin: 8 * scaling
|
|
spacing: 4 * scaling
|
|
|
|
Repeater {
|
|
model: 3
|
|
delegate: ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 3 * scaling
|
|
|
|
NText {
|
|
text: Qt.locale().toString(new Date(LocationService.data.weather.daily.time[index].replace(/-/g, "/")), "ddd")
|
|
pointSize: Style.fontSizeM * scaling
|
|
color: Color.mOnSurfaceVariant
|
|
horizontalAlignment: Text.AlignHCenter
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
NIcon {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
icon: LocationService.weatherSymbolFromCode(LocationService.data.weather.daily.weathercode[index])
|
|
pointSize: Style.fontSizeXL * scaling
|
|
color: Color.mOnSurfaceVariant
|
|
}
|
|
|
|
NText {
|
|
text: Math.round(LocationService.data.weather.daily.temperature_2m_max[index]) + "°/" + Math.round(LocationService.data.weather.daily.temperature_2m_min[index]) + "°"
|
|
pointSize: Style.fontSizeM * scaling
|
|
font.weight: Style.fontWeightMedium
|
|
color: Color.mOnSurfaceVariant
|
|
horizontalAlignment: Text.AlignHCenter
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Battery and Keyboard Layout
|
|
ColumnLayout {
|
|
Layout.preferredWidth: 60 * scaling
|
|
spacing: 4 * scaling
|
|
|
|
RowLayout {
|
|
Layout.preferredWidth: 60 * scaling
|
|
Layout.preferredHeight: 22 * scaling
|
|
spacing: 4 * scaling
|
|
visible: UPower.displayDevice && UPower.displayDevice.ready && UPower.displayDevice.isPresent
|
|
|
|
NIcon {
|
|
icon: BatteryService.getIcon(Math.round(UPower.displayDevice.percentage * 100), UPower.displayDevice.state === UPowerDeviceState.Charging, true)
|
|
pointSize: Style.fontSizeM * scaling
|
|
color: UPower.displayDevice.state === UPowerDeviceState.Charging ? Color.mPrimary : Color.mOnSurfaceVariant
|
|
}
|
|
|
|
NText {
|
|
text: Math.round(UPower.displayDevice.percentage * 100) + "%"
|
|
color: Color.mOnSurfaceVariant
|
|
pointSize: Style.fontSizeM * scaling
|
|
font.weight: Font.Medium
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.preferredWidth: 60 * scaling
|
|
Layout.preferredHeight: 22 * scaling
|
|
spacing: 4 * scaling
|
|
|
|
NIcon {
|
|
icon: "keyboard"
|
|
pointSize: Style.fontSizeM * scaling
|
|
color: Color.mOnSurfaceVariant
|
|
}
|
|
|
|
NText {
|
|
text: keyboardLayout.currentLayout
|
|
color: Color.mOnSurfaceVariant
|
|
pointSize: Style.fontSizeM * scaling
|
|
font.weight: Font.Medium
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Password input
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 0
|
|
|
|
Item {
|
|
Layout.preferredWidth: Style.marginM * scaling
|
|
}
|
|
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 48 * scaling
|
|
radius: 24 * scaling
|
|
color: Color.mSurface
|
|
border.color: passwordInput.activeFocus ? Color.mPrimary : Qt.alpha(Color.mOutline, 0.3)
|
|
border.width: passwordInput.activeFocus ? 2 : 1
|
|
|
|
Row {
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 18 * scaling
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: 14 * scaling
|
|
|
|
NIcon {
|
|
icon: "lock"
|
|
pointSize: Style.fontSizeL * scaling
|
|
color: passwordInput.activeFocus ? Color.mPrimary : Color.mOnSurfaceVariant
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
|
|
// Hidden input that receives actual text
|
|
TextInput {
|
|
id: passwordInput
|
|
width: 0
|
|
height: 0
|
|
visible: false
|
|
enabled: !lockContext.unlockInProgress
|
|
font.pointSize: Style.fontSizeM * scaling
|
|
color: Color.mPrimary
|
|
echoMode: TextInput.Password
|
|
passwordCharacter: "•"
|
|
passwordMaskDelay: 0
|
|
text: lockContext.currentText
|
|
onTextChanged: lockContext.currentText = text
|
|
|
|
Keys.onPressed: function (event) {
|
|
if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
|
|
lockContext.tryUnlock()
|
|
}
|
|
}
|
|
|
|
Component.onCompleted: forceActiveFocus()
|
|
}
|
|
|
|
Row {
|
|
spacing: 0
|
|
|
|
Rectangle {
|
|
width: 2 * scaling
|
|
height: 20 * scaling
|
|
color: Color.mPrimary
|
|
visible: passwordInput.activeFocus && passwordInput.text.length === 0
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
SequentialAnimation on opacity {
|
|
loops: Animation.Infinite
|
|
running: passwordInput.activeFocus && passwordInput.text.length === 0
|
|
NumberAnimation {
|
|
to: 0
|
|
duration: 530
|
|
}
|
|
NumberAnimation {
|
|
to: 1
|
|
duration: 530
|
|
}
|
|
}
|
|
}
|
|
|
|
Row {
|
|
spacing: 6 * scaling
|
|
visible: passwordInput.text.length > 0
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
Repeater {
|
|
model: passwordInput.text.length
|
|
|
|
NIcon {
|
|
icon: "circle-filled"
|
|
pointSize: Style.fontSizeS * scaling
|
|
color: Color.mPrimary
|
|
opacity: 1.0
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
width: 2 * scaling
|
|
height: 20 * scaling
|
|
color: Color.mPrimary
|
|
visible: passwordInput.activeFocus && passwordInput.text.length > 0
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
SequentialAnimation on opacity {
|
|
loops: Animation.Infinite
|
|
running: passwordInput.activeFocus && passwordInput.text.length > 0
|
|
NumberAnimation {
|
|
to: 0
|
|
duration: 530
|
|
}
|
|
NumberAnimation {
|
|
to: 1
|
|
duration: 530
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 8 * scaling
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: 36 * scaling
|
|
height: 36 * scaling
|
|
radius: width * 0.5
|
|
color: submitButtonArea.containsMouse ? Color.mPrimary : Qt.alpha(Color.mPrimary, 0.8)
|
|
border.color: Color.mPrimary
|
|
border.width: 1
|
|
enabled: !lockContext.unlockInProgress
|
|
|
|
NIcon {
|
|
anchors.centerIn: parent
|
|
icon: "arrow-forward"
|
|
pointSize: Style.fontSizeM * scaling
|
|
color: Color.mOnPrimary
|
|
}
|
|
|
|
MouseArea {
|
|
id: submitButtonArea
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onClicked: lockContext.tryUnlock()
|
|
}
|
|
}
|
|
|
|
Behavior on border.color {
|
|
ColorAnimation {
|
|
duration: 200
|
|
easing.type: Easing.OutCubic
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
Layout.preferredWidth: Style.marginM * scaling
|
|
}
|
|
}
|
|
|
|
// System control buttons
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 48 * scaling
|
|
spacing: 10 * scaling
|
|
|
|
Item {
|
|
Layout.preferredWidth: Style.marginM * scaling
|
|
}
|
|
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 48 * scaling
|
|
radius: 24 * scaling
|
|
color: logoutButtonArea.containsMouse ? Color.mTertiary : "transparent"
|
|
|
|
RowLayout {
|
|
anchors.centerIn: parent
|
|
spacing: 6 * scaling
|
|
|
|
NIcon {
|
|
icon: "logout"
|
|
pointSize: Style.fontSizeL * scaling
|
|
color: logoutButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurfaceVariant
|
|
}
|
|
|
|
NText {
|
|
text: I18n.tr("session-menu.logout")
|
|
color: logoutButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurfaceVariant
|
|
pointSize: Style.fontSizeM * scaling
|
|
font.weight: Font.Medium
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
id: logoutButtonArea
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onClicked: CompositorService.logout()
|
|
}
|
|
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 200
|
|
easing.type: Easing.OutCubic
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 48 * scaling
|
|
radius: 24 * scaling
|
|
color: rebootButtonArea.containsMouse ? Color.mTertiary : "transparent"
|
|
|
|
RowLayout {
|
|
anchors.centerIn: parent
|
|
spacing: 6 * scaling
|
|
|
|
NIcon {
|
|
icon: "reboot"
|
|
pointSize: Style.fontSizeL * scaling
|
|
color: rebootButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurfaceVariant
|
|
}
|
|
|
|
NText {
|
|
text: I18n.tr("session-menu.reboot")
|
|
color: rebootButtonArea.containsMouse ? Color.mOnTertiary : Color.mOnSurfaceVariant
|
|
pointSize: Style.fontSizeM * scaling
|
|
font.weight: Font.Medium
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
id: rebootButtonArea
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onClicked: CompositorService.reboot()
|
|
}
|
|
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 200
|
|
easing.type: Easing.OutCubic
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 48 * scaling
|
|
radius: 24 * scaling
|
|
color: shutdownButtonArea.containsMouse ? Color.mError : "transparent"
|
|
border.color: shutdownButtonArea.containsMouse ? Color.mError : Color.transparent
|
|
border.width: 1
|
|
|
|
RowLayout {
|
|
anchors.centerIn: parent
|
|
spacing: 6 * scaling
|
|
|
|
NIcon {
|
|
icon: "shutdown"
|
|
pointSize: Style.fontSizeL * scaling
|
|
color: shutdownButtonArea.containsMouse ? Color.mOnError : Color.mOnSurfaceVariant
|
|
}
|
|
|
|
NText {
|
|
text: I18n.tr("session-menu.shutdown")
|
|
color: shutdownButtonArea.containsMouse ? Color.mOnError : Color.mOnSurfaceVariant
|
|
pointSize: Style.fontSizeM * scaling
|
|
font.weight: Font.Medium
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
id: shutdownButtonArea
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onClicked: CompositorService.shutdown()
|
|
}
|
|
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 200
|
|
easing.type: Easing.OutCubic
|
|
}
|
|
}
|
|
|
|
Behavior on border.color {
|
|
ColorAnimation {
|
|
duration: 200
|
|
easing.type: Easing.OutCubic
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
Layout.preferredWidth: Style.marginM * scaling
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|