From f574c12adcb729e37c5fb493e86e9087e5f2c533 Mon Sep 17 00:00:00 2001 From: Joshua Goins Date: Sun, 1 Sep 2024 08:54:37 -0400 Subject: [PATCH] WelcomePage: Redesign to center the contents, other misc improvements We now remove the header from the page, and replace it with a separator (it still lives with an InlineMessage for error handling.) The contents of this page are now centered, and the maximum width of the buttons are reduced. Along with that are two smaller misc improvements. One is that the duplicate separator underneath "Register" is now gone. Another is that the full settings page may now be opened from here, allowing users to access more than proxy settings. --- src/login/WelcomePage.qml | 371 +++++++++++++++++++++----------------- 1 file changed, 203 insertions(+), 168 deletions(-) diff --git a/src/login/WelcomePage.qml b/src/login/WelcomePage.qml index 838c0f07b..4cb989ccb 100644 --- a/src/login/WelcomePage.qml +++ b/src/login/WelcomePage.qml @@ -11,7 +11,7 @@ import org.kde.kirigamiaddons.formcard as FormCard import org.kde.neochat import org.kde.neochat.settings -FormCard.FormCardPage { +Kirigami.Page { id: root property bool showExisting: false @@ -23,202 +23,237 @@ FormCard.FormCardPage { signal connectionChosen title: i18n("Welcome") + globalToolBarStyle: Kirigami.ApplicationHeaderStyle.None header: QQC2.Control { - contentItem: Kirigami.InlineMessage { - id: headerMessage - type: Kirigami.MessageType.Error - showCloseButton: true - visible: false - } - } + topPadding: 0 + bottomPadding: 0 + leftPadding: 0 + rightPadding: 0 - Kirigami.Icon { - source: "org.kde.neochat" - Layout.alignment: Qt.AlignHCenter - implicitWidth: Math.round(Kirigami.Units.iconSizes.huge * 1.5) - implicitHeight: Math.round(Kirigami.Units.iconSizes.huge * 1.5) - } + contentItem: ColumnLayout { + spacing: 0 - Kirigami.Heading { - id: welcomeMessage - - text: i18n("Welcome to NeoChat") - - Layout.alignment: Qt.AlignHCenter - Layout.topMargin: Kirigami.Units.largeSpacing - } - - FormCard.FormHeader { - id: existingAccountsHeader - title: i18nc("@title", "Continue with an existing account") - visible: (loadedAccounts.count > 0 || loadingAccounts.count > 0) && root._showExisting - } - - FormCard.FormCard { - visible: existingAccountsHeader.visible - Repeater { - id: loadedAccounts - model: AccountRegistry - delegate: FormCard.FormButtonDelegate { - text: model.userId - onClicked: { - Controller.activeConnection = model.connection; - root.connectionChosen(); - } + Kirigami.Separator { + Layout.fillWidth: true } - } - Repeater { - id: loadingAccounts - model: Controller.accountsLoading - delegate: FormCard.AbstractFormDelegate { - id: loadingDelegate - topPadding: Kirigami.Units.smallSpacing - bottomPadding: Kirigami.Units.smallSpacing + Kirigami.InlineMessage { + id: headerMessage + type: Kirigami.MessageType.Error + showCloseButton: true + visible: false - background: null - contentItem: RowLayout { - spacing: 0 - - QQC2.Label { - Layout.fillWidth: true - text: i18nc("As in 'this account is still loading'", "%1 (loading)", modelData) - elide: Text.ElideRight - wrapMode: Text.Wrap - maximumLineCount: 2 - color: Kirigami.Theme.disabledTextColor - Accessible.ignored: true // base class sets this text on root already - } - - QQC2.ToolButton { - text: i18nc("@action:button", "Log out of this account") - icon.name: "edit-delete-remove" - onClicked: Controller.removeConnection(modelData) - display: QQC2.Button.IconOnly - QQC2.ToolTip.text: text - QQC2.ToolTip.visible: hovered - QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay - enabled: true - Layout.preferredHeight: Kirigami.Units.gridUnit * 2 - } - - FormCard.FormArrow { - Layout.leftMargin: Kirigami.Units.smallSpacing - Layout.alignment: Qt.AlignRight | Qt.AlignVCenter - direction: Qt.RightArrow - visible: root.background.visible - } - } - } - onCountChanged: { - if (loadingAccounts.count === 0 && loadedAccounts.count === 1 && showExisting) { - Controller.activeConnection = AccountRegistry.data(AccountRegistry.index(0, 0), 257); - root.connectionChosen(); - } + Layout.fillWidth: true + Layout.margins: Kirigami.Units.largeSpacing } } } - FormCard.FormHeader { - title: i18nc("@title", "Log in or Create a New Account") - } + contentItem: Item { + ColumnLayout { + anchors { + left: parent.left + right: parent.right + verticalCenter: parent.verticalCenter + } - FormCard.FormCard { - Loader { - id: module - Layout.fillWidth: true - sourceComponent: Qt.createComponent('org.kde.neochat.login', root.initialStep) + spacing: 0 - Connections { - id: stepConnections - target: currentStep + Kirigami.Icon { + source: "org.kde.neochat" + Layout.alignment: Qt.AlignHCenter + implicitWidth: Math.round(Kirigami.Units.iconSizes.huge * 1.5) + implicitHeight: Math.round(Kirigami.Units.iconSizes.huge * 1.5) + } - function onProcessed(nextStep: string): void { - module.source = nextStep + ".qml"; - root.currentStepString = nextStep; - headerMessage.text = ""; - headerMessage.visible = false; - if (!module.item.noControls) { - module.item.forceActiveFocus(); - } else { - continueButton.forceActiveFocus(); + Kirigami.Heading { + id: welcomeMessage + + text: i18n("NeoChat") + + Layout.alignment: Qt.AlignHCenter + Layout.topMargin: Kirigami.Units.largeSpacing + } + + FormCard.FormHeader { + id: existingAccountsHeader + title: i18nc("@title", "Continue with an existing account") + visible: (loadedAccounts.count > 0 || loadingAccounts.count > 0) && root._showExisting + maximumWidth: Kirigami.Units.gridUnit * 20 + } + + FormCard.FormCard { + visible: existingAccountsHeader.visible + maximumWidth: Kirigami.Units.gridUnit * 20 + Repeater { + id: loadedAccounts + model: AccountRegistry + delegate: FormCard.FormButtonDelegate { + text: model.userId + onClicked: { + Controller.activeConnection = model.connection; + root.connectionChosen(); + } } } + Repeater { + id: loadingAccounts + model: Controller.accountsLoading + delegate: FormCard.AbstractFormDelegate { + id: loadingDelegate - function onShowMessage(message: string): void { - headerMessage.text = message; - headerMessage.visible = true; - headerMessage.type = Kirigami.MessageType.Information; - } + topPadding: Kirigami.Units.smallSpacing + bottomPadding: Kirigami.Units.smallSpacing - function onClearError(): void { - headerMessage.text = ""; - headerMessage.visible = false; - } + background: null + contentItem: RowLayout { + spacing: 0 - function onCloseDialog(): void { - root.closeDialog(); + QQC2.Label { + Layout.fillWidth: true + text: i18nc("As in 'this account is still loading'", "%1 (loading)", modelData) + elide: Text.ElideRight + wrapMode: Text.Wrap + maximumLineCount: 2 + color: Kirigami.Theme.disabledTextColor + Accessible.ignored: true // base class sets this text on root already + } + + QQC2.ToolButton { + text: i18nc("@action:button", "Log out of this account") + icon.name: "edit-delete-remove" + onClicked: Controller.removeConnection(modelData) + display: QQC2.Button.IconOnly + QQC2.ToolTip.text: text + QQC2.ToolTip.visible: hovered + QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay + enabled: true + Layout.preferredHeight: Kirigami.Units.gridUnit * 2 + } + + FormCard.FormArrow { + Layout.leftMargin: Kirigami.Units.smallSpacing + Layout.alignment: Qt.AlignRight | Qt.AlignVCenter + direction: Qt.RightArrow + visible: root.background.visible + } + } + } + onCountChanged: { + if (loadingAccounts.count === 0 && loadedAccounts.count === 1 && showExisting) { + Controller.activeConnection = AccountRegistry.data(AccountRegistry.index(0, 0), 257); + root.connectionChosen(); + } + } } } - Connections { - target: Registration - function onNextStepChanged() { - if (Registration.nextStep === "m.login.recaptcha") { - stepConnections.onProcessed("Captcha"); + FormCard.FormHeader { + title: i18nc("@title", "Log in or Create a New Account") + maximumWidth: Kirigami.Units.gridUnit * 20 + } + + FormCard.FormCard { + maximumWidth: Kirigami.Units.gridUnit * 20 + Loader { + id: module + Layout.fillWidth: true + sourceComponent: Qt.createComponent('org.kde.neochat.login', root.initialStep) + + Connections { + id: stepConnections + target: currentStep + + function onProcessed(nextStep: string): void { + module.source = nextStep + ".qml"; + root.currentStepString = nextStep; + headerMessage.text = ""; + headerMessage.visible = false; + if (!module.item.noControls) { + module.item.forceActiveFocus(); + } else { + continueButton.forceActiveFocus(); + } + } + + function onShowMessage(message: string): void { + headerMessage.text = message; + headerMessage.visible = true; + headerMessage.type = Kirigami.MessageType.Information; + } + + function onClearError(): void { + headerMessage.text = ""; + headerMessage.visible = false; + } + + function onCloseDialog(): void { + root.closeDialog(); + } } - if (Registration.nextStep === "m.login.terms") { - stepConnections.onProcessed("Terms"); + + Connections { + target: Registration + + function onNextStepChanged() { + if (Registration.nextStep === "m.login.recaptcha") { + stepConnections.onProcessed("Captcha"); + } + if (Registration.nextStep === "m.login.terms") { + stepConnections.onProcessed("Terms"); + } + if (Registration.nextStep === "m.login.email.identity") { + stepConnections.onProcessed("Email"); + } + if (Registration.nextStep === "loading") { + stepConnections.onProcessed("Loading"); + } + } } - if (Registration.nextStep === "m.login.email.identity") { - stepConnections.onProcessed("Email"); - } - if (Registration.nextStep === "loading") { - stepConnections.onProcessed("Loading"); + Connections { + target: LoginHelper + + function onErrorOccured(message) { + headerMessage.text = message; + headerMessage.visible = message.length > 0; + headerMessage.type = Kirigami.MessageType.Error; + } } } - } - Connections { - target: LoginHelper - function onErrorOccured(message) { - headerMessage.text = message; - headerMessage.visible = message.length > 0; - headerMessage.type = Kirigami.MessageType.Error; + + FormCard.FormDelegateSeparator { + below: continueButton + visible: root.currentStep.nextAction + } + + FormCard.FormButtonDelegate { + id: continueButton + text: root.currentStep.nextAction && root.currentStep.nextAction.text ? root.currentStep.nextAction.text : i18nc("@action:button", "Continue") + visible: root.currentStep.nextAction + onClicked: root.currentStep.nextAction.trigger() + icon.name: "arrow-right" + enabled: root.currentStep.nextAction ? root.currentStep.nextAction.enabled : false + } + + FormCard.FormButtonDelegate { + text: i18nc("@action:button", "Go back") + visible: root.currentStep.previousAction + onClicked: root.currentStep.previousAction.trigger() + icon.name: "arrow-left" + enabled: root.currentStep.previousAction ? root.currentStep.previousAction.enabled : false } } - } - FormCard.FormDelegateSeparator { - below: continueButton - } - - FormCard.FormButtonDelegate { - id: continueButton - text: root.currentStep.nextAction && root.currentStep.nextAction.text ? root.currentStep.nextAction.text : i18nc("@action:button", "Continue") - visible: root.currentStep.nextAction - onClicked: root.currentStep.nextAction.trigger() - icon.name: "arrow-right" - enabled: root.currentStep.nextAction ? root.currentStep.nextAction.enabled : false - } - - FormCard.FormButtonDelegate { - text: i18nc("@action:button", "Go back") - visible: root.currentStep.previousAction - onClicked: root.currentStep.previousAction.trigger() - icon.name: "arrow-left" - enabled: root.currentStep.previousAction ? root.currentStep.previousAction.enabled : false - } - } - - FormCard.FormCard { - Layout.topMargin: Kirigami.Units.largeSpacing - FormCard.FormButtonDelegate { - text: i18nc("@action:button", "Open proxy settings") - icon.name: "settings-configure" - onClicked: pageStack.pushDialogLayer(Qt.createComponent("org.kde.neochat.settings", "NetworkProxyPage"), {}, { - title: i18nc("@title:window", "Proxy Settings") - }); + FormCard.FormCard { + Layout.topMargin: Kirigami.Units.largeSpacing * 2 + maximumWidth: Kirigami.Units.gridUnit * 20 + FormCard.FormButtonDelegate { + text: i18nc("@action:button", "Settings") + icon.name: "settings-configure" + onClicked: NeoChatSettingsView.open() + } + } } }