Commit f41f25e8 authored by Nate Graham's avatar Nate Graham 🔩
Browse files

Polish the reviews UI and presentation

Summary: Implement mockups provided by VDG to improve visual appeal of reviews UI. Layout is a bit cramped due to https://bugs.kde.org/show_bug.cgi?id=415677.

Test Plan:
{F7849164}

{F7849165}

{F7849166}

Reviewers: #vdg, apol, #discover_software_store

Reviewed By: apol, #discover_software_store

Subscribers: ndavis, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D25889
parent 6578a447
......@@ -30,80 +30,160 @@ RowLayout {
property bool separator: true
signal markUseful(bool useful)
function usefulnessToString(favorable, total)
{
return total===0
? i18n("<em>Tell us about this review!</em>")
: i18n("<em>%1 out of %2 people found this review useful</em>", favorable, total)
}
// Spacers to indent nested comments/replies
Repeater {
model: depth
delegate: Rectangle {
delegate: Item {
Layout.fillHeight: true
Layout.minimumWidth: Kirigami.Units.largeSpacing
Layout.maximumWidth: Kirigami.Units.largeSpacing
color: Qt.tint(Kirigami.Theme.textColor, Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.8))
Rectangle {
anchors {
top: parent.top
bottom: parent.bottom
left: parent.left
}
width: 1
color: Kirigami.Theme.backgroundColor
}
}
}
ColumnLayout
{
RowLayout {
Layout.fillWidth: true
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)
ColumnLayout {
id: reviewLayout
anchors.fill: parent
spacing: 0
// 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
rating: model.rating
starSize: content.font.pointSize
}
Label {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
text: date.toLocaleDateString(Qt.locale(), "MMMM d yyyy")
elide: Text.ElideRight
opacity: 0.6
}
}
// Review title and author
Label {
id: content
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")
text: summary ? i18n("<b>%1</b> by %2", summary, author) : i18n("Comment by %1", author)
}
Rating {
id: rating
rating: model.rating
starSize: content.font.pointSize
// Review text
Label {
Layout.fillWidth: true
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
text: display
maximumLineCount: item.compact ? 3 : undefined
wrapMode: Text.Wrap
}
}
Label {
Layout.fillWidth: true
text: display
maximumLineCount: item.compact ? 3 : undefined
wrapMode: Text.Wrap
}
Label {
visible: !item.compact
text: item.usefulnessToString(usefulnessFavorable, usefulnessTotal)
}
Label {
visible: !item.compact
Layout.alignment: Qt.AlignRight
text: {
switch(usefulChoice) {
case ReviewsModel.Yes:
i18n("<em>Useful? <a href='true'><b>Yes</b></a>/<a href='false'>No</a></em>")
break;
case ReviewsModel.No:
i18n("<em>Useful? <a href='true'>Yes</a>/<a href='false'><b>No</b></a></em>")
break;
default:
i18n("<em>Useful? <a href='true'>Yes</a>/<a href='false'>No</a></em>")
break;
// Gray bar at the bottom + its content layout
Rectangle {
color: Kirigami.Theme.backgroundColor
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
}
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
// Change this to "Was this review useful?" once Kirigami fixes
// https://bugs.kde.org/show_bug.cgi?id=415677
text: i18n("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)
}
}
}
}
onLinkActivated: item.markUseful(link=='true')
}
Kirigami.Separator {
visible: item.separator
Layout.fillWidth: true
}
}
}
......@@ -26,6 +26,7 @@ import org.kde.kirigami 2.0 as Kirigami
Kirigami.OverlaySheet {
id: page
property alias model: reviewsView.model
readonly property QtObject reviewsBackend: resource.backend.reviewsBackend
readonly property var resource: model.resource
......@@ -73,6 +74,8 @@ Kirigami.OverlaySheet {
anchors {
left: parent.left
right: parent.right
topMargin: Kirigami.Units.largeSpacing
bottomMargin: Kirigami.Units.largeSpacing
}
separator: index != ListView.view.count-1
onMarkUseful: page.model.markUseful(index, useful)
......
Markdown is supported
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