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.
This commit is contained in:
Joshua Goins
@@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user