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
|
||||||
import org.kde.neochat.settings
|
import org.kde.neochat.settings
|
||||||
|
|
||||||
FormCard.FormCardPage {
|
Kirigami.Page {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
property bool showExisting: false
|
property bool showExisting: false
|
||||||
@@ -23,202 +23,237 @@ FormCard.FormCardPage {
|
|||||||
signal connectionChosen
|
signal connectionChosen
|
||||||
|
|
||||||
title: i18n("Welcome")
|
title: i18n("Welcome")
|
||||||
|
globalToolBarStyle: Kirigami.ApplicationHeaderStyle.None
|
||||||
|
|
||||||
header: QQC2.Control {
|
header: QQC2.Control {
|
||||||
contentItem: Kirigami.InlineMessage {
|
topPadding: 0
|
||||||
id: headerMessage
|
bottomPadding: 0
|
||||||
type: Kirigami.MessageType.Error
|
leftPadding: 0
|
||||||
showCloseButton: true
|
rightPadding: 0
|
||||||
visible: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Kirigami.Icon {
|
contentItem: ColumnLayout {
|
||||||
source: "org.kde.neochat"
|
spacing: 0
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
implicitWidth: Math.round(Kirigami.Units.iconSizes.huge * 1.5)
|
|
||||||
implicitHeight: Math.round(Kirigami.Units.iconSizes.huge * 1.5)
|
|
||||||
}
|
|
||||||
|
|
||||||
Kirigami.Heading {
|
Kirigami.Separator {
|
||||||
id: welcomeMessage
|
Layout.fillWidth: true
|
||||||
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
Repeater {
|
|
||||||
id: loadingAccounts
|
|
||||||
model: Controller.accountsLoading
|
|
||||||
delegate: FormCard.AbstractFormDelegate {
|
|
||||||
id: loadingDelegate
|
|
||||||
|
|
||||||
topPadding: Kirigami.Units.smallSpacing
|
Kirigami.InlineMessage {
|
||||||
bottomPadding: Kirigami.Units.smallSpacing
|
id: headerMessage
|
||||||
|
type: Kirigami.MessageType.Error
|
||||||
|
showCloseButton: true
|
||||||
|
visible: false
|
||||||
|
|
||||||
background: null
|
Layout.fillWidth: true
|
||||||
contentItem: RowLayout {
|
Layout.margins: Kirigami.Units.largeSpacing
|
||||||
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();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FormCard.FormHeader {
|
contentItem: Item {
|
||||||
title: i18nc("@title", "Log in or Create a New Account")
|
ColumnLayout {
|
||||||
}
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
|
||||||
FormCard.FormCard {
|
spacing: 0
|
||||||
Loader {
|
|
||||||
id: module
|
|
||||||
Layout.fillWidth: true
|
|
||||||
sourceComponent: Qt.createComponent('org.kde.neochat.login', root.initialStep)
|
|
||||||
|
|
||||||
Connections {
|
Kirigami.Icon {
|
||||||
id: stepConnections
|
source: "org.kde.neochat"
|
||||||
target: currentStep
|
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 {
|
Kirigami.Heading {
|
||||||
module.source = nextStep + ".qml";
|
id: welcomeMessage
|
||||||
root.currentStepString = nextStep;
|
|
||||||
headerMessage.text = "";
|
text: i18n("NeoChat")
|
||||||
headerMessage.visible = false;
|
|
||||||
if (!module.item.noControls) {
|
Layout.alignment: Qt.AlignHCenter
|
||||||
module.item.forceActiveFocus();
|
Layout.topMargin: Kirigami.Units.largeSpacing
|
||||||
} else {
|
}
|
||||||
continueButton.forceActiveFocus();
|
|
||||||
|
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 {
|
topPadding: Kirigami.Units.smallSpacing
|
||||||
headerMessage.text = message;
|
bottomPadding: Kirigami.Units.smallSpacing
|
||||||
headerMessage.visible = true;
|
|
||||||
headerMessage.type = Kirigami.MessageType.Information;
|
|
||||||
}
|
|
||||||
|
|
||||||
function onClearError(): void {
|
background: null
|
||||||
headerMessage.text = "";
|
contentItem: RowLayout {
|
||||||
headerMessage.visible = false;
|
spacing: 0
|
||||||
}
|
|
||||||
|
|
||||||
function onCloseDialog(): void {
|
QQC2.Label {
|
||||||
root.closeDialog();
|
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 {
|
FormCard.FormHeader {
|
||||||
target: Registration
|
title: i18nc("@title", "Log in or Create a New Account")
|
||||||
function onNextStepChanged() {
|
maximumWidth: Kirigami.Units.gridUnit * 20
|
||||||
if (Registration.nextStep === "m.login.recaptcha") {
|
}
|
||||||
stepConnections.onProcessed("Captcha");
|
|
||||||
|
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") {
|
Connections {
|
||||||
stepConnections.onProcessed("Email");
|
target: LoginHelper
|
||||||
}
|
|
||||||
if (Registration.nextStep === "loading") {
|
function onErrorOccured(message) {
|
||||||
stepConnections.onProcessed("Loading");
|
headerMessage.text = message;
|
||||||
|
headerMessage.visible = message.length > 0;
|
||||||
|
headerMessage.type = Kirigami.MessageType.Error;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
Connections {
|
FormCard.FormDelegateSeparator {
|
||||||
target: LoginHelper
|
below: continueButton
|
||||||
function onErrorOccured(message) {
|
visible: root.currentStep.nextAction
|
||||||
headerMessage.text = message;
|
}
|
||||||
headerMessage.visible = message.length > 0;
|
|
||||||
headerMessage.type = Kirigami.MessageType.Error;
|
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 {
|
FormCard.FormCard {
|
||||||
below: continueButton
|
Layout.topMargin: Kirigami.Units.largeSpacing * 2
|
||||||
}
|
maximumWidth: Kirigami.Units.gridUnit * 20
|
||||||
|
FormCard.FormButtonDelegate {
|
||||||
FormCard.FormButtonDelegate {
|
text: i18nc("@action:button", "Settings")
|
||||||
id: continueButton
|
icon.name: "settings-configure"
|
||||||
text: root.currentStep.nextAction && root.currentStep.nextAction.text ? root.currentStep.nextAction.text : i18nc("@action:button", "Continue")
|
onClicked: NeoChatSettingsView.open()
|
||||||
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")
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user