Commit 34d4f0d9 authored by Carl Schwan's avatar Carl Schwan 🚴 Committed by Nate Graham
Browse files

Improve layout of ApplicationPage

* Add a max width to the description text
* Use the application comment as title for the description
* Replace application comment with author in title
* Increase height of screenshots + add a bit more padding around it
* Make a few things bolder
* Use ScrollView for the screenshot listview and make it use correct spacing
* Use Card for reviews
parent 45b963eb
This diff is collapsed.
......@@ -22,8 +22,6 @@ ListView {
focus: overlay.visible
orientation: Qt.Horizontal
Layout.preferredHeight: Kirigami.Units.gridUnit * 10
Keys.onLeftPressed: if (leftAction.visible) leftAction.trigger()
Keys.onRightPressed: if (rightAction.visible) rightAction.trigger()
......@@ -140,28 +138,6 @@ ListView {
clip: true
Shadow {
parent: root
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
}
edge: Qt.LeftEdge
width: Math.max(0, Math.min(root.width/5, root.contentX))
}
Shadow {
parent: root
anchors {
right: parent.right
top: parent.top
bottom: parent.bottom
}
edge: Qt.RightEdge
width: Math.max(0, Math.min(root.contentWidth - root.contentX - root.width)/5)
}
RoundButton {
anchors {
left: parent.left
......
......@@ -10,7 +10,7 @@ import QtQuick.Controls 2.1
import org.kde.discover 2.0
import org.kde.kirigami 2.14 as Kirigami
RowLayout {
Kirigami.AbstractCard {
id: item
visible: model.shouldShow
property bool compact: false
......@@ -18,55 +18,34 @@ RowLayout {
signal markUseful(bool useful)
// Spacers to indent nested comments/replies
Repeater {
model: depth
delegate: Item {
Layout.fillHeight: true
Layout.minimumWidth: Kirigami.Units.largeSpacing
Layout.maximumWidth: Kirigami.Units.largeSpacing
}
}
Rectangle {
id: reviewBox
color: "transparent"
border.color: Qt.tint(Kirigami.Theme.textColor, Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.85))
border.width: 1
radius: Kirigami.Units.largeSpacing
Layout.fillWidth: true
implicitHeight: reviewLayout.implicitHeight + (Kirigami.Units.largeSpacing * 2)
Layout.leftMargin: depth * Kirigami.Units.largeSpacing
contentItem: Item {
implicitHeight: mainContent.implicitHeight
implicitWidth: mainContent.implicitWidth
ColumnLayout {
id: reviewLayout
anchors.fill: parent
spacing: 0
id: mainContent
anchors {
left: parent.left
top: parent.top
right: parent.right
}
// Header with stars and date of review
RowLayout {
Layout.fillWidth: true
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
Rating {
id: rating
Layout.fillWidth: true
Layout.bottomMargin: Kirigami.Units.largeSpacing
rating: model.rating
starSize: content.font.pointSize
starSize: Kirigami.Units.gridUnit
}
Label {
text: packageVersion ? i18n("Version: %1", packageVersion) : i18n("Version: unknown")
elide: Text.ElideRight
opacity: 0.6
}
Label {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
text: date.toLocaleDateString(Qt.locale(), Locale.LongFormat)
elide: Text.ElideRight
text: date.toLocaleDateString(Qt.locale(), "MMMM yyyy")
opacity: 0.6
}
}
......@@ -77,7 +56,6 @@ RowLayout {
Layout.fillWidth: true
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
elide: Text.ElideRight
readonly property string author: reviewer ? reviewer : i18n("unknown reviewer")
......@@ -95,83 +73,68 @@ RowLayout {
wrapMode: Text.Wrap
}
// Gray bar at the bottom + its content layout
Rectangle {
color: Kirigami.Theme.backgroundColor
Label {
Layout.fillWidth: true
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
text: packageVersion ? i18n("Version: %1", packageVersion) : i18n("Version: unknown")
elide: Text.ElideRight
opacity: 0.6
}
}
}
footer: Loader {
active: !item.compact
sourceComponent: RowLayout {
id: rateTheReviewLayout
visible: !item.compact
Label {
Layout.leftMargin: Kirigami.Units.largeSpacing
visible: usefulnessTotal !== 0
text: i18n("Votes: %1 out of %2", usefulnessFavorable, usefulnessTotal)
}
Label {
Layout.fillWidth: true
// To make the background color rect touch the outline of the box
Layout.leftMargin: reviewBox.border.width
Layout.rightMargin: reviewBox.border.width
implicitHeight: rateTheReviewLayout.implicitHeight
radius: Kirigami.Units.largeSpacing
visible: !item.compact
// This fills in the rounded top corners, because you can't have a
// rectangle with only a few corners rounded
Rectangle {
color: Kirigami.Theme.backgroundColor
border.color: Qt.tint(Kirigami.Theme.textColor, Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.85))
anchors.left: parent.left
anchors.leftMargin: -1
anchors.right: parent.right
anchors.rightMargin: -1
anchors.top: parent.top
anchors.topMargin: -1
z: -1
height: reviewBox.radius
Layout.leftMargin: usefulnessTotal === 0 ? Kirigami.Units.largeSpacing : 0
horizontalAlignment: Text.AlignRight
text: i18n("Was this review useful?")
elide: Text.ElideLeft
}
// Useful/Not Useful buttons
Button {
id: yesButton
Layout.maximumWidth: Kirigami.Units.gridUnit * 3
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
Layout.alignment: Qt.AlignVCenter
text: i18nc("Keep this string as short as humanly possible", "Yes")
checkable: true
checked: usefulChoice === ReviewsModel.Yes
onClicked: {
noButton.checked = false
item.markUseful(true)
}
}
Button {
id: noButton
Layout.maximumWidth: Kirigami.Units.gridUnit * 3
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.alignment: Qt.AlignVCenter
text: i18nc("Keep this string as short as humanly possible", "No")
RowLayout {
id: rateTheReviewLayout
anchors.fill: parent
anchors.leftMargin: Kirigami.Units.largeSpacing
anchors.rightMargin: Kirigami.Units.smallSpacing
Label {
visible: usefulnessTotal !== 0
text: i18n("Votes: %1 out of %2", usefulnessFavorable, usefulnessTotal)
}
Label {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
text: i18n("Was this review useful?")
elide: Text.ElideLeft
}
// Useful/Not Useful buttons
Button {
id: yesButton
Layout.maximumWidth: Kirigami.Units.gridUnit * 3
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
Layout.alignment: Qt.AlignVCenter
text: i18nc("Keep this string as short as humanly possible", "Yes")
checkable: true
checked: usefulChoice === ReviewsModel.Yes
onClicked: {
noButton.checked = false
item.markUseful(true)
}
}
Button {
id: noButton
Layout.maximumWidth: Kirigami.Units.gridUnit * 3
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
Layout.alignment: Qt.AlignVCenter
text: i18nc("Keep this string as short as humanly possible", "No")
checkable: true
checked: usefulChoice === ReviewsModel.No
onClicked: {
yesButton.checked = false
item.markUseful(false)
}
}
checkable: true
checked: usefulChoice === ReviewsModel.No
onClicked: {
yesButton.checked = false
item.markUseful(false)
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment