Overhaul login and news pages, improving the layout and actions

launcher/ui/Pages/LoginPage.qml

@@ -57,6 +57,10 @@ Controls.Control {
             contentItem: ColumnLayout {
                 spacing: 0
 
+                MobileForm.FormCardHeader {
+                    title: i18n("Current Profile")
+                }
+
                 MobileForm.FormButtonDelegate {
                     text: page.profile.name
 
@@ -92,11 +96,15 @@ Controls.Control {
             contentItem: ColumnLayout {
                 spacing: 0
 
+                MobileForm.FormCardHeader {
+                    title: i18n("Login")
+                }
+
                 MobileForm.FormButtonDelegate {
                     text: page.profile.account.name
 
                     leading: Kirigami.Avatar
-                        {
+                    {
                         source: page.profile.account.avatarUrl
                     }
 
@@ -133,7 +141,7 @@ Controls.Control {
 
                 MobileForm.FormTextFieldDelegate {
                     id: usernameField
-                    label: i18n("Username")
+                    label: page.profile.account.isSapphire ? i18n("Username") : i18n("Square Enix ID")
                     text: page.profile.account.name
                     enabled: false
                 }
@@ -143,7 +151,7 @@ Controls.Control {
 
                 MobileForm.FormTextFieldDelegate {
                     id: passwordField
-                    label: i18n("Password")
+                    label: page.profile.account.isSapphire ? i18n("Password") : i18n("Square Enix Password")
                     echoMode: TextInput.Password
                     focus: true
                     onAccepted: otpField.clicked()
@@ -155,13 +163,12 @@ Controls.Control {
 
                 MobileForm.FormTextFieldDelegate {
                     id: otpField
-                    label: i18n("One-time password")
+                    label: i18n("One-time Password")
                     visible: page.profile.account.useOTP
                     onAccepted: loginButton.clicked()
                 }
 
-                MobileForm.FormDelegateSeparator {
+                MobileForm.FormDelegateSeparator {}
-                }
 
                 MobileForm.FormButtonDelegate {
                     id: loginButton
@@ -176,39 +183,16 @@ Controls.Control {
                 }
 
                 MobileForm.FormDelegateSeparator {
+                    visible: forgotPasswordButton.visible
                 }
 
                 MobileForm.FormButtonDelegate {
-                    text: i18n("Settings")
+                    id: forgotPasswordButton
-                    icon.name: "configure"
-                    onClicked: pageStack.pushDialogLayer('qrc:/ui/Settings/SettingsPage.qml')
-                }
 
-                MobileForm.FormDelegateSeparator {
+                    text: i18n("Forgot ID or Password")
-                }
+                    icon.name: "dialog-password"
-
+                    visible: !page.profile.account.isSapphire
-                MobileForm.FormButtonDelegate {
+                    onClicked: applicationWindow().openUrl('https://secure.square-enix.com/account/app/svc/reminder')
-                    text: i18n("Open Official Launcher")
-                    icon.name: "application-x-executable"
-                    onClicked: LauncherCore.openOfficialLauncher(page.profile)
-                }
-
-                MobileForm.FormDelegateSeparator {
-                }
-
-                MobileForm.FormButtonDelegate {
-                    text: i18n("Open System Info")
-                    icon.name: "application-x-executable"
-                    onClicked: LauncherCore.openSystemInfo(page.profile)
-                }
-
-                MobileForm.FormDelegateSeparator {
-                }
-
-                MobileForm.FormButtonDelegate {
-                    text: i18n("Open Config Backup")
-                    icon.name: "application-x-executable"
-                    onClicked: LauncherCore.openConfigBackup(page.profile)
                 }
             }
         }

launcher/ui/Pages/MainPage.qml

@@ -12,25 +12,69 @@ import com.redstrate.astra 1.0
 Kirigami.Page {
     id: page
 
-    globalToolBarStyle: Kirigami.ApplicationHeaderStyle.None
+    padding: 0
+
+    title: i18n("Home")
+
+    actions.contextualActions: Kirigami.Action {
+        text: i18n("Settings")
+        icon.name: "configure"
+        onTriggered: applicationWindow().pushDialogLayer('qrc:/ui/Settings/SettingsPage.qml')
+    }
+
+    actions.right: Kirigami.Action {
+        text: i18n("Server Status")
+        icon.name: "cloudstatus"
+        onTriggered: applicationWindow().openUrl('https://na.finalfantasyxiv.com/lodestone/worldstatus/')
+    }
+
+    actions.main: Kirigami.Action {
+        text: i18n("Tools")
+        icon.name: "tools-symbolic"
+
+        Kirigami.Action {
+            text: i18n("Open Official Launcher")
+            icon.name: "application-x-executable"
+            onTriggered: LauncherCore.openOfficialLauncher(loginPage.profile)
+        }
+
+        Kirigami.Action {
+            text: i18n("Open System Info")
+            icon.name: "application-x-executable"
+            onTriggered: LauncherCore.openSystemInfo(loginPage.profile)
+        }
+
+        Kirigami.Action {
+            text: i18n("Open Config Backup")
+            icon.name: "application-x-executable"
+            onTriggered: LauncherCore.openConfigBackup(loginPage.profile)
+        }
+    }
 
     RowLayout {
-        width: parent.width
+        anchors.fill: parent
-        height: parent.height
 
-        Controls.ScrollView {
+        Loader {
-            id: scrollView
+            active: LauncherCore.showNews
 
             Layout.fillWidth: true
             Layout.fillHeight: true
 
-            NewsPage {
+            sourceComponent: Controls.ScrollView {
-                width: scrollView.width
+                id: scrollView
-                height: scrollView.height
+
+                NewsPage {
+                    width: scrollView.availableWidth
+                    height: scrollView.availableHeight
+                }
             }
         }
+
         LoginPage {
-            Layout.alignment: Qt.AlignTop
+            id: loginPage
+
+            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+            Layout.minimumWidth: LauncherCore.showNews ? Kirigami.Units.gridUnit * 25 : undefined
             Layout.fillWidth: true
         }
     }

launcher/ui/Pages/NewsPage.qml

@@ -7,6 +7,7 @@ import org.kde.kirigami 2.20 as Kirigami
 import QtQuick.Controls 2.15 as Controls
 import QtQuick.Layouts 1.15
 import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import QtGraphicalEffects 1.0
 import com.redstrate.astra 1.0
 
 Controls.Control {
@@ -40,30 +41,40 @@ Controls.Control {
     }
 
     contentItem: ColumnLayout {
-        width: parent.width
+        id: layout
-        MobileForm.FormCard {
+
-            Layout.topMargin: Kirigami.Units.largeSpacing
+        readonly property real maximumWidth: Kirigami.Units.gridUnit * 50
+
+        Image {
+            id: bannerImage
+
+            readonly property real aspectRatio: sourceSize.height / sourceSize.width
+
+            Layout.maximumWidth: layout.maximumWidth
             Layout.fillWidth: true
-            contentItem: ColumnLayout {
+            Layout.preferredHeight: aspectRatio * width
-                spacing: 0
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
 
-                MobileForm.FormCardHeader {
+            source: LauncherCore.headline !== null ? LauncherCore.headline.banners[page.currentBannerIndex].bannerImage : ""
-                    title: i18n("Banner")
-                }
 
-                Image {
+            MouseArea {
-                    Layout.fillWidth: true
+                anchors.fill: parent
 
-                    source: LauncherCore.headline !== null ? LauncherCore.headline.banners[page.currentBannerIndex].bannerImage : ""
+                cursorShape: Qt.PointingHandCursor
 
-                    fillMode: Image.PreserveAspectFit
+                onClicked: applicationWindow().openUrl(LauncherCore.headline.banners[page.currentBannerIndex].link)
+            }
 
-                    MouseArea {
+            layer.enabled: true
-                        anchors.fill: parent
+            layer.effect: OpacityMask {
-
+                maskSource: Item {
-                        cursorShape: Qt.PointingHandCursor
+                    width: bannerImage.width
-
+                    height: bannerImage.height
-                        onClicked: Qt.openUrlExternally(LauncherCore.headline.banners[page.currentBannerIndex].link)
+                    Rectangle {
+                        anchors.centerIn: parent
+                        width: bannerImage.width
+                        height: bannerImage.height
+                        radius: Kirigami.Units.smallSpacing
                     }
                 }
             }
@@ -72,6 +83,10 @@ Controls.Control {
         MobileForm.FormCard {
             Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+
+            maximumWidth: layout.maximumWidth
+
             contentItem: ColumnLayout {
                 spacing: 0
 
@@ -86,7 +101,7 @@ Controls.Control {
                         text: modelData.title
                         description: Qt.formatDate(modelData.date)
 
-                        onClicked: Qt.openUrlExternally(modelData.url)
+                        onClicked: applicationWindow().openUrl(modelData.url)
                     }
                 }
             }
@@ -95,6 +110,10 @@ Controls.Control {
         MobileForm.FormCard {
             Layout.topMargin: Kirigami.Units.largeSpacing
             Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+
+            maximumWidth: layout.maximumWidth
+
             contentItem: ColumnLayout {
                 spacing: 0
 
@@ -109,10 +128,14 @@ Controls.Control {
                         text: modelData.title
                         description: Qt.formatDate(modelData.date)
 
-                        onClicked: Qt.openUrlExternally(modelData.url)
+                        onClicked: applicationWindow().openUrl(modelData.url)
                     }
                 }
             }
         }
+
+        Item {
+            Layout.fillHeight: true
+        }
     }
 }