Commit ec6991ae authored by Nathaniel Graham's avatar Nathaniel Graham

Improve header and screenshots

Summary:
Taking inspiration from @abetts [[ https://www.youtube.com/watch?v=QfiHLfrob2A&feature=youtu.behttps://www.youtube.com/watch?v=QfiHLfrob2A&feature=youtu.be | popular idea for some tweaks ]], I implemented a few changes to the Application page:
- Increased size of app icon, name, and caption
- Removed blue line separating header and screenshots/description, since it was controversial and kind of pointless and inconsistent when the metadata section didn't have a text header
- Displayed screenshot thumbnails with the aspect ratio of the full-sized image, so they look better and nothing is cut off in the thumbnail
- Gave screenshot thumbnails a drop shadow and more padding between them

Errata:
- The screenshots lost their hover effect as a side effect of the way the QML DropShadow effect had to be implemented. I tried many ways of adding it, and this was the way that caused the last amount of damage. Definitely open to suggestions.

Test Plan:
Tested in KDE Neon:

Pitivi, before:
{F5666174}

Pitivi, after:
{F5666175}

Audacity, before:
{F5666176}

Audacity, after:
{F5666177}

Clementine, before:
{F5666178}

Clementine, after:
{F5666179}

Mobile view Kdenlive, before:
{F5666198}

Mobile view Kdenlive, after:
{F5666199}

Mobile view Endless Sky, before:
{F5666201}

Mobile view Endless Sky, after:
{F5666202}

Mobile View gedit, before:
{F5666209}

Mobile View gedit, after:
{F5666210}

Reviewers: apol, abetts, andreaska, colomar, #discover_software_store, #vdg

Reviewed By: apol, abetts, #discover_software_store, #vdg

Subscribers: plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D10002
parent cebb2ce4
......@@ -144,23 +144,23 @@ DiscoverPage {
spacing: 0
RowLayout {
Kirigami.Icon {
Layout.preferredHeight: 64
Layout.preferredWidth: 64
Layout.preferredHeight: 80
Layout.preferredWidth: 80
source: appInfo.application.icon
anchors.margins: 20
}
ColumnLayout {
spacing: 0
Kirigami.Heading {
level: 3
level: 1
text: appInfo.application.name
maximumLineCount: 1
elide: Text.ElideRight
Layout.fillWidth: true
horizontalAlignment: Text.AlignBottom
Layout.alignment: Text.AlignBottom
}
Kirigami.Heading {
level: 5
level: 4
text: appInfo.application.comment
maximumLineCount: 1
elide: Text.ElideRight
......@@ -168,25 +168,16 @@ DiscoverPage {
Layout.alignment: Qt.AlignTop
}
}
}
Rectangle {
color: Kirigami.Theme.linkColor
Layout.fillWidth: true
height: 1
anchors.bottomMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing
}
ApplicationScreenshots {
Layout.topMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
resource: appInfo.application
page: appInfo
Layout.bottomMargin: Kirigami.Units.largeSpacing
}
Item {
Layout.fillWidth: true
height: 5
}
QQC2.Label {
Layout.fillWidth: true
horizontalAlignment: Text.AlignJustify
......@@ -230,14 +221,11 @@ DiscoverPage {
// Details/metadata
Rectangle {
Layout.topMargin: Kirigami.Units.smallSpacing
color: Kirigami.Theme.linkColor
Layout.fillWidth: true
height: 1
anchors.bottomMargin: Kirigami.Units.largeSpacing
}
Item {
Layout.fillWidth: true
height: 5
Layout.bottomMargin: Kirigami.Units.smallSpacing
}
GridLayout {
rowSpacing: 0
......
......@@ -22,6 +22,7 @@ import QtQuick 2.1
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1
import QtQuick.Controls 2.1 as QQC2
import QtGraphicalEffects 1.0
import org.kde.discover 2.0
import org.kde.kirigami 2.0 as Kirigami
......@@ -29,9 +30,8 @@ Flow {
id: root
property alias resource: screenshotsModel.application
spacing: Kirigami.Units.smallSpacing
spacing: Kirigami.Units.largeSpacing
readonly property real side: Kirigami.Units.gridUnit * 8
property QtObject page
visible: screenshotsModel.count>0
......@@ -104,30 +104,44 @@ Flow {
id: screenshotsModel
}
delegate: Image {
source: small_image_url
height: root.side
width: root.side
fillMode: Image.PreserveAspectCrop
smooth: true
opacity: mouse.containsMouse? 0.5 : 1
delegate: Item {
readonly property url imageSource: large_image_url
Behavior on opacity { NumberAnimation { easing.type: Easing.OutQuad; duration: 200 } }
BusyIndicator {
visible: running
running: parent.status == Image.Loading
anchors.centerIn: parent
height: thumbnail.height
width: thumbnail.width
DropShadow {
source: thumbnail
anchors.fill: thumbnail
verticalOffset: 3
horizontalOffset: 0
radius: 12.0
samples: 25
color: "#232627" // Shade Black from standard Breeze colors
cached: true
}
Image {
id: thumbnail
source: small_image_url
height: Kirigami.Units.gridUnit * 7
fillMode: Image.PreserveAspectFit
smooth: true
opacity: mouse.containsMouse? 0.5 : 1
Behavior on opacity { NumberAnimation { easing.type: Easing.OutQuad; duration: 200 } }
BusyIndicator {
visible: running
running: parent.status == Image.Loading
anchors.centerIn: thumbnail
}
MouseArea {
id: mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
root.currentIndex = index
overlay.open()
MouseArea {
id: mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
root.currentIndex = index
overlay.open()
}
}
}
}
......
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