Commit ccc4c2e6 authored by Nate Graham's avatar Nate Graham
Browse files

Implement VDG mockup for "Get involved" section and better tiles

Now the "Donate" and "Report bug" buttons are in their own new "Get
Involved" section, which can be extended in the future once we add
support for the contributor URL.

Also, the buttons have a new VDG-provided visual styling.
parent dfc7414d
Pipeline #163746 passed with stage
in 1 minute and 38 seconds
......@@ -445,107 +445,79 @@ DiscoverPage {
}
// External resources
Flow {
id: buttonLayout
readonly property int widestButton: Math.max(helpButton.implicitWidth,
homepageButton.implicitWidth,
donateButton.implicitWidth,
addonsButton.implicitWidth,
bugButton.implicitWidth)
readonly property int visibleButtons: (helpButton.visible ? 1 : 0) +
(homepageButton.visible ? 1: 0) +
(donateButton.visible ? 1 : 0) +
(addonsButton.visible ? 1 : 0) +
(bugButton.visible ? 1 : 0)
// This centers the Flow in the page, no matter how many items have
// flowed onto other rows
Layout.maximumWidth: widestButton * Math.min(visibleButtons, Math.floor(textualContentLayout.width / widestButton))
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
RowLayout {
id: externalResourcesLayout
readonly property int visibleButtons: (helpButton.visible ? 1 : 0)
+ (homepageButton.visible ? 1: 0)
+ (addonsButton.visible ? 1 : 0)
readonly property int buttonWidth: Math.round(textualContentLayout.width / visibleButtons)
readonly property int tallestButtonHeight: Math.max(helpButton.implicitHeight,
homepageButton.implicitHeight,
addonsButton.implicitHeight)
Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing
visible: visibleButtons > 0
spacing: 0 // Need to save horizontal space
ToolButton {
ApplicationResourceButton {
id: helpButton
width: buttonLayout.widestButton
Layout.fillWidth: true
Layout.maximumWidth: externalResourcesLayout.buttonWidth
Layout.minimumHeight: externalResourcesLayout.tallestButtonHeight
visible: application.helpURL != ""
display: ToolButton.TextUnderIcon
text: i18n("Documentation")
icon.name: "documentation"
onClicked: Qt.openUrlExternally(application.helpURL);
ToolTip {
text: application.helpURL
}
buttonIcon: "documentation"
title: i18n("Documentation")
subtitle: i18n("Read the project's official documentation")
tooltipText: application.helpURL
onClicked: Qt.openUrlExternally(application.helpURL);
}
ToolButton {
ApplicationResourceButton {
id: homepageButton
width: buttonLayout.widestButton
visible: application.homepage != ""
display: ToolButton.TextUnderIcon
text: i18n("Website")
icon.name: "internet-services"
onClicked: Qt.openUrlExternally(application.homepage);
ToolTip {
text: application.homepage
}
}
Layout.fillWidth: true
Layout.maximumWidth: externalResourcesLayout.buttonWidth
Layout.minimumHeight: externalResourcesLayout.tallestButtonHeight
ToolButton {
id: donateButton
width: buttonLayout.widestButton
visible: application.donationURL != ""
display: ToolButton.TextUnderIcon
text: i18n("Donate")
icon.name: "help-donate"
onClicked: Qt.openUrlExternally(application.donationURL);
visible: application.homepage != ""
ToolTip {
text: application.donationURL
}
buttonIcon: "internet-services"
title: i18n("Website")
subtitle: i18n("Visit the project's website")
tooltipText: application.homepage
onClicked: Qt.openUrlExternally(application.homepage);
}
ToolButton {
ApplicationResourceButton {
id: addonsButton
width: buttonLayout.widestButton
visible: addonsView.containsAddons
display: ToolButton.TextUnderIcon
text: i18n("Addons")
icon.name: "extension-symbolic"
onClicked: if (addonsView.addonsCount === 0) {
Navigation.openExtends(application.appstreamId, appInfo.application.name)
} else {
addonsView.sheetOpen = true
}
ToolTip {
text: i18n("Install or remove add-ons for %1", appInfo.application.name)
}
}
Layout.fillWidth: true
Layout.maximumWidth: externalResourcesLayout.buttonWidth
Layout.minimumHeight: externalResourcesLayout.tallestButtonHeight
ToolButton {
id: bugButton
width: buttonLayout.widestButton
visible: application.bugURL != ""
display: ToolButton.TextUnderIcon
text: i18n("Report Bug")
icon.name: "tools-report-bug"
onClicked: Qt.openUrlExternally(application.bugURL);
visible: addonsView.containsAddons
buttonIcon: "extension-symbolic"
title: i18n("Addons")
subtitle: i18n("Install or remove additional functionality")
ToolTip {
text: application.bugURL
onClicked: {
if (addonsView.addonsCount === 0) {
Navigation.openExtends(application.appstreamId, appInfo.application.name)
} else {
addonsView.sheetOpen = true
}
}
}
}
Kirigami.Separator {
Layout.fillWidth: true
visible: buttonLayout.visible
}
Kirigami.Heading {
......@@ -628,6 +600,67 @@ DiscoverPage {
}
}
// "Get Involved" section
Kirigami.Separator {
Layout.fillWidth: true
visible: getInvolvedLayout.visible
}
Kirigami.Heading {
text: i18n("Get Involved")
level: 2
font.weight: Font.DemiBold
visible: getInvolvedLayout.visible
}
RowLayout {
id: getInvolvedLayout
readonly property int visibleButtons: (donateButton.visible ? 1 : 0)
+ (bugButton.visible ? 1: 0)
readonly property int buttonWidth: Math.round(textualContentLayout.width / visibleButtons)
readonly property int tallestButtonHeight: Math.max(donateButton.implicitHeight,
bugButton.implicitHeight)
Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing
visible: visibleButtons > 0
ApplicationResourceButton {
id: donateButton
Layout.fillWidth: true
Layout.maximumWidth: getInvolvedLayout.buttonWidth
Layout.minimumHeight: getInvolvedLayout.tallestButtonHeight
visible: application.donationURL != ""
buttonIcon: "help-donate"
title: i18n("Donate")
subtitle: i18n("Support and thank the developers by donating to their project")
tooltipText: application.donationURL
onClicked: Qt.openUrlExternally(application.donationURL);
}
ApplicationResourceButton {
id: bugButton
Layout.fillWidth: true
Layout.maximumWidth: getInvolvedLayout.buttonWidth
Layout.minimumHeight: getInvolvedLayout.tallestButtonHeight
visible: application.bugURL != ""
buttonIcon: "tools-report-bug"
title: i18n("Report Bug")
subtitle: i18n("Log an issue you found to help get it fixed")
tooltipText: application.bugURL
onClicked: Qt.openUrlExternally(application.bugURL);
}
}
Repeater {
model: application.objects
delegate: Loader {
......
/*
* SPDX-FileCopyrightText: 2022 Nate Graham <nate@kde.org>
*
* SPDX-License-Identifier: LGPL-2.0-or-later
*/
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15 as QQC2
import org.kde.kirigami 2.19 as Kirigami
QQC2.Button {
id: root
required property string buttonIcon
required property string title
required property string subtitle
property string tooltipText
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
leftPadding: Kirigami.Units.largeSpacing
rightPadding: Kirigami.Units.largeSpacing
topPadding: Kirigami.Units.largeSpacing
bottomPadding: Kirigami.Units.largeSpacing
contentItem: ColumnLayout {
spacing: 0
// Icon
Kirigami.Icon {
Layout.preferredWidth: Kirigami.Units.iconSizes.medium
Layout.preferredHeight: Kirigami.Units.iconSizes.medium
Layout.bottomMargin: Kirigami.Units.largeSpacing
Layout.alignment: Qt.AlignLeft
source: root.buttonIcon
}
// Title
Kirigami.Heading {
Layout.fillWidth: true
level: 4
text: root.title
elide: Text.ElideRight
wrapMode: Text.Wrap
}
// Subtitle
QQC2.Label {
Layout.fillWidth: true
visible: root.subtitle
text: root.subtitle
elide: Text.ElideRight
wrapMode: Text.Wrap
opacity: 0.6
}
}
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
QQC2.ToolTip.timeout: Kirigami.Units.veryLongDuration
QQC2.ToolTip.visible: root.tooltipText ? (Kirigami.Settings.isMobile ? pressed : hovered) : false
QQC2.ToolTip.text: root.tooltipText ? root.tooltipText : ""
}
......@@ -4,6 +4,7 @@
<file>qml/TopLevelPageData.qml</file>
<file>qml/ApplicationsListPage.qml</file>
<file>qml/ApplicationPage.qml</file>
<file>qml/ApplicationResourceButton.qml</file>
<file>qml/ReviewsPage.qml</file>
<file>qml/AddonsView.qml</file>
<file>qml/ApplicationDelegate.qml</file>
......
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