From bc2e71d3a877a94a737f7219bcf81a125af08a10 Mon Sep 17 00:00:00 2001
From: Nathaniel Graham <pointedstick@zoho.com>
Date: Fri, 29 Dec 2017 07:50:41 -0700
Subject: [PATCH] Improve display of technical app info

Summary:
Improve display of app info in the following ways
- Display the app's caption in bold and apart from the other pieces to make it stand out more
- Group the pieces of info in a recognizable section
- Right-justify all the labels to make everything easier to parse
- Don't display the category with a link color since it's not a link

Test Plan:
Tested in KDE Neon. Before:
{F5577431}

After:
{F5587546}

(Ignore the duplicated categories in the sidebar; that's an unrelated issue tracked by https://bugs.kde.org/show_bug.cgi?id=388313)

Reviewers: apol, #vdg, #discover_software_store

Reviewed By: apol, #discover_software_store

Subscribers: colomar, januz, alexeymin, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D9542
---
 discover/qml/ApplicationPage.qml | 110 +++++++++++++++++++------------
 1 file changed, 68 insertions(+), 42 deletions(-)

diff --git a/discover/qml/ApplicationPage.qml b/discover/qml/ApplicationPage.qml
index f8bade15..4c24978f 100644
--- a/discover/qml/ApplicationPage.qml
+++ b/discover/qml/ApplicationPage.qml
@@ -148,40 +148,58 @@ DiscoverPage {
 
     ColumnLayout {
         spacing: 0
-
-        QQC2.Label {
-            Layout.fillWidth: true
+        Kirigami.Heading {
             text: appInfo.application.comment
-            wrapMode: Text.WordWrap
-            elide: Text.ElideRight
-            maximumLineCount: 1
-        }
-        QQC2.Label {
+            level: 4
             Layout.fillWidth: true
             elide: Text.ElideRight
-            text: appInfo.application.categoryDisplay
-            color: Kirigami.Theme.linkColor
+            bottomPadding: Kirigami.Units.largeSpacing
         }
 
-        Item {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-        }
-        QQC2.Label {
-            Layout.fillWidth: true
-            elide: Text.ElideRight
-            readonly property string version: appInfo.application.isInstalled ? appInfo.application.installedVersion : appInfo.application.availableVersion
-            visible: version.length > 0
-            text: version ? i18n("Version: %1", version) : ""
-        }
-        QQC2.Label {
-            Layout.fillWidth: true
-            elide: Text.ElideRight
-            text: i18n("Size: %1", appInfo.application.sizeDescription)
-        }
-        RowLayout {
-            Layout.fillWidth: true
+        GridLayout {
+            rowSpacing: 0
+            columns: 2
+
+            // Category row
+            QQC2.Label {
+                Layout.alignment: Qt.AlignRight
+                text: i18n("Category:")
+            }
+            QQC2.Label {
+                Layout.fillWidth: true
+                elide: Text.ElideRight
+                text: appInfo.application.categoryDisplay
+            }
+
+            // Version row
+            QQC2.Label {
+                readonly property string version: appInfo.application.isInstalled ? appInfo.application.installedVersion : appInfo.application.availableVersion
+                visible: version.length > 0
+                Layout.alignment: Qt.AlignRight
+                text: i18n("Version:")
+            }
+            QQC2.Label {
+                readonly property string version: appInfo.application.isInstalled ? appInfo.application.installedVersion : appInfo.application.availableVersion
+                visible: version.length > 0
+                Layout.fillWidth: true
+                elide: Text.ElideRight
+                text: version ? version : ""
+            }
+
+            // Size row
+            QQC2.Label {
+                Layout.alignment: Qt.AlignRight
+                text: i18n("Size:")
+            }
+            QQC2.Label {
+                Layout.fillWidth: true
+                elide: Text.ElideRight
+                text: i18n("%1", appInfo.application.sizeDescription)
+            }
+
+            // Source row
             QQC2.Label {
+                Layout.alignment: Qt.AlignRight
                 text: i18n("Source:")
             }
             LinkButton {
@@ -189,20 +207,40 @@ DiscoverPage {
                 horizontalAlignment: Text.AlignLeft
                 enabled: alternativeResourcesView.count > 1
                 text: appInfo.application.displayOrigin
+                elide: Text.ElideRight
                 onClicked: originsOverlay.open()
             }
-        }
-        RowLayout {
+
+            // License row
             QQC2.Label {
+                Layout.alignment: Qt.AlignRight
                 text: i18n("License:")
             }
             LinkButton {
+                elide: Text.ElideRight
                 Layout.fillWidth: true
                 horizontalAlignment: Text.AlignLeft
                 text: appInfo.application.license
 //                         tooltip: i18n("See full license terms")
                 onClicked: Qt.openUrlExternally("https://spdx.org/licenses/" + appInfo.application.license + ".html#licenseText")
             }
+
+            // Homepage row
+            QQC2.Label {
+                readonly property string homepage: application.homepage
+                visible: homepage.length > 0
+                Layout.alignment: Qt.AlignRight
+                text: i18n("Homepage:")
+            }
+            LinkButton {
+                readonly property string homepage: application.homepage
+                visible: homepage.length > 0
+                text: homepage
+                onClicked: Qt.openUrlExternally(application.homepage)
+                elide: Text.ElideRight
+                Layout.fillWidth: true
+                horizontalAlignment: Text.AlignLeft
+            }
         }
 
         ApplicationScreenshots {
@@ -232,18 +270,6 @@ DiscoverPage {
             }
         }
 
-        RowLayout {
-            visible: button.text.length > 0
-            QQC2.Label {
-                text: i18n("Homepage: ")
-            }
-            LinkButton {
-                id: button
-                text: application.homepage
-                onClicked: Qt.openUrlExternally(application.homepage)
-            }
-        }
-
         LinkButton {
             id: addonsButton
             text: i18n("Addons")
-- 
GitLab