diff options
Diffstat (limited to 'raveos-calamares-module/raveusers/ui/raveusers.qml')
| -rw-r--r-- | raveos-calamares-module/raveusers/ui/raveusers.qml | 126 |
1 files changed, 72 insertions, 54 deletions
diff --git a/raveos-calamares-module/raveusers/ui/raveusers.qml b/raveos-calamares-module/raveusers/ui/raveusers.qml index 25e090f..030f3f4 100644 --- a/raveos-calamares-module/raveusers/ui/raveusers.qml +++ b/raveos-calamares-module/raveusers/ui/raveusers.qml @@ -5,18 +5,16 @@ import "." as RaveUsersModule Rectangle { id: root - color: "#2B2B2B" - radius: 14 + color: "#1a1b1d" - readonly property color cCardBg: "#20232a" - readonly property color cCardBorder: "#333947" - readonly property color cInputBg: "#303030" - readonly property color cInputBorder: "#303030" - readonly property color cAccentGreen: "#3d7839" - readonly property color cTextWhite: "#ffffff" - readonly property color cTextMuted: "#8b93a3" - readonly property color cTextFaint: "#5b6270" - readonly property color cErrorRed: "#ff6b6b" + readonly property color cCardBorder: "#34363a" + readonly property color cInputBg: "#232427" + readonly property color cInputBorder: "#44464b" + readonly property color cAccentGreen: "#62a052" + readonly property color cTextWhite: "#e8e8e6" + readonly property color cTextMuted: "#b7b9bd" + readonly property color cTextFaint: "#9a9ca1" + readonly property color cErrorRed: "#d9a441" property bool showUserPassword: false property bool showRootPassword: false @@ -29,20 +27,64 @@ Rectangle { RaveUsersModule.Translations.setLanguage(systemLocale) } + component RegiJelolo: CheckBox { + id: jelolo + + indicator: Rectangle { + implicitWidth: 20 + implicitHeight: 20 + x: jelolo.leftPadding + y: parent.height / 2 - height / 2 + color: jelolo.checked ? cAccentGreen : cInputBg + border.color: jelolo.checked ? cAccentGreen : cInputBorder + border.width: 1 + + Canvas { + anchors.fill: parent + visible: jelolo.checked + onVisibleChanged: if (visible) requestPaint() + onPaint: { + var c = getContext("2d") + c.reset() + c.strokeStyle = "#1a1b1d" + c.lineWidth = 2.5 + c.beginPath() + c.moveTo(5, 10) + c.lineTo(9, 14) + c.lineTo(15, 6) + c.stroke() + } + } + } + + contentItem: Text { + text: jelolo.text + color: cTextWhite + font.pixelSize: 14 + verticalAlignment: Text.AlignVCenter + leftPadding: jelolo.indicator.width + 12 + } + } + ColumnLayout { anchors.fill: parent anchors.margins: 40 spacing: 0 - Item { + Flickable { + id: gorgeto Layout.fillWidth: true Layout.fillHeight: true + contentHeight: tartalom.implicitHeight + 20 + clip: true + boundsBehavior: Flickable.StopAtBounds + ScrollBar.vertical: ScrollBar {} ColumnLayout { - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 10 - width: Math.min(parent.width - 40, 540) + id: tartalom + x: (gorgeto.width - width) / 2 + y: 10 + width: Math.min(gorgeto.width - 40, 540) spacing: 16 Image { @@ -81,7 +123,7 @@ Rectangle { Text { text: RaveUsersModule.Translations.usernameLabel - color: "#c7ccd6" + color: cTextMuted font.pixelSize: 14 font.weight: Font.Medium } @@ -95,10 +137,9 @@ Rectangle { text: backend.username placeholderText: "raveuser" color: cTextWhite - placeholderTextColor: "#5b6270" + placeholderTextColor: cTextFaint font.pixelSize: 15 background: Rectangle { - radius: 7 color: cInputBg border.color: usernameField.activeFocus ? cAccentGreen : cInputBorder border.width: usernameField.activeFocus ? 1.5 : 1 @@ -120,7 +161,7 @@ Rectangle { Text { text: RaveUsersModule.Translations.hostnameLabel - color: "#c7ccd6" + color: cTextMuted font.pixelSize: 14 font.weight: Font.Medium } @@ -134,10 +175,9 @@ Rectangle { text: backend.hostname placeholderText: "raveos-pc" color: cTextWhite - placeholderTextColor: "#5b6270" + placeholderTextColor: cTextFaint font.pixelSize: 15 background: Rectangle { - radius: 7 color: cInputBg border.color: hostnameField.activeFocus ? cAccentGreen : cInputBorder border.width: hostnameField.activeFocus ? 1.5 : 1 @@ -159,7 +199,7 @@ Rectangle { Text { text: RaveUsersModule.Translations.passwordLabel - color: "#c7ccd6" + color: cTextMuted font.pixelSize: 14 font.weight: Font.Medium } @@ -202,41 +242,19 @@ Rectangle { opacity: 0.6 } - CheckBox { - id: reuseRootCheck + RegiJelolo { + Layout.fillWidth: true + text: RaveUsersModule.Translations.autoLoginLabel + checked: backend.autoLogin + onToggled: backend.setAutoLogin(checked) + } + + RegiJelolo { Layout.fillWidth: true visible: backend.rootReuseVisible text: RaveUsersModule.Translations.reuseRootLabel checked: backend.reuseRootPassword onToggled: backend.setReuseRootPassword(checked) - - indicator: Rectangle { - implicitWidth: 20 - implicitHeight: 20 - x: reuseRootCheck.leftPadding - y: parent.height / 2 - height / 2 - radius: 4 - color: reuseRootCheck.checked ? cAccentGreen : cInputBg - border.color: reuseRootCheck.checked ? cAccentGreen : cInputBorder - border.width: 1 - - Text { - anchors.centerIn: parent - text: "\u2713" - font.pixelSize: 14 - font.bold: true - color: "#0f1713" - visible: reuseRootCheck.checked - } - } - - contentItem: Text { - text: reuseRootCheck.text - color: "#d7dbe2" - font.pixelSize: 14 - verticalAlignment: Text.AlignVCenter - leftPadding: reuseRootCheck.indicator.width + 12 - } } ColumnLayout { @@ -246,7 +264,7 @@ Rectangle { Text { text: RaveUsersModule.Translations.rootPasswordLabel - color: "#c7ccd6" + color: cTextMuted font.pixelSize: 14 font.weight: Font.Medium Layout.topMargin: 4 |