Commit 75e24b05 authored by Nate Graham's avatar Nate Graham 🔩

Use a more conventional sidebar header apparance in desktop view

Summary:
Discover uses the `Kirigami.GlobalDrawer` for its navigation sidebar. This component is
designed to be used for showing global actions and hiding when not in use, and displays
a big banner image on top. This banner concept is borrowed from Android, which has the
same kind of global drawers full of actions with banners on top. So the concept is
somewhat familiar on mobile. However on the desktop, this "sidebar with banner image on
top" UI is not common and feels out of place, giving Discover an odd default appearance
since the sidebar is permanently visible but doesn't look like other apps' sidebars.

This patch adjusts the sidebar appearance to look and feel more conventional in the
desktop view, keeping the banner version only for the mobile view.

Test Plan:
Desktop view: {F6826154}
Mobile view: {F6826086}
(The extra space under the banner image is a pre-existing bug not introduced with this patch)

Now Discover's sidebar looks quite similar to System Settings' sidebar, which is very
visually appealing: {F6826158}

Reviewers: #vdg, #discover_software_store, apol, ndavis

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

Subscribers: filipf, ndavis, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D21234
parent f2369a2d
......@@ -29,14 +29,15 @@ import "navigation.js" as Navigation
Kirigami.GlobalDrawer {
id: drawer
leftPadding: 0
rightPadding: 0
topPadding: 0
// FIXME: Dirty workaround for 385992
width: Kirigami.Units.gridUnit * 14
property bool wideScreen: false
bannerImageSource: "qrc:/banners/banner.svg"
//make the left and bottom margins for search field the same
topPadding: drawer.wideScreen ? -toploader.height - leftPadding : 0
bottomPadding: 0
bannerImageSource: modal ? "qrc:/banners/banner.svg" : ""
// In desktop view, it's a sidebar, and sidebars get the view BG color
Kirigami.Theme.colorSet: modal ? Kirigami.Theme.Window : Kirigami.Theme.View
......@@ -45,8 +46,7 @@ Kirigami.GlobalDrawer {
onBannerClicked: {
Navigation.openHome();
if (modal)
drawerOpen = false
drawerOpen = false
}
property string currentSearchText
......@@ -66,34 +66,57 @@ Kirigami.GlobalDrawer {
}
topContent: ConditionalLoader {
id: toploader
condition: drawer.wideScreen
condition: !modal
Layout.fillWidth: true
componentFalse: Item {
Layout.minimumHeight: 1
}
componentTrue: SearchField {
id: searchField
componentTrue: Kirigami.AbstractApplicationHeader {
preferredHeight: 40 // Match Kirigami.ToolBarApplicationHeader, which is hardcoded to this
RowLayout {
width: parent.width
anchors.centerIn: parent
ToolButton {
Layout.leftMargin: Kirigami.Units.smallSpacing
icon.name: "go-home"
onPressed: Navigation.openHome()
ToolTip {
text: i18n("Return to the Featured page")
}
}
SearchField {
id: searchField
Layout.fillWidth: true
Layout.rightMargin: Kirigami.Units.smallSpacing
visible: window.leftPage && (window.leftPage.searchFor !== null || window.leftPage.hasOwnProperty("search"))
visible: window.leftPage && (window.leftPage.searchFor !== null || window.leftPage.hasOwnProperty("search"))
page: window.leftPage
page: window.leftPage
onCurrentSearchTextChanged: {
var curr = window.leftPage;
onCurrentSearchTextChanged: {
var curr = window.leftPage;
if (pageStack.depth>1)
pageStack.pop()
if (pageStack.depth>1)
pageStack.pop()
if (currentSearchText === "" && window.currentTopLevel === "" && !window.leftPage.category) {
Navigation.openHome()
} else if (!curr.hasOwnProperty("search")) {
if (currentSearchText) {
Navigation.clearStack()
Navigation.openApplicationList( { search: currentSearchText })
if (currentSearchText === "" && window.currentTopLevel === "" && !window.leftPage.category) {
Navigation.openHome()
} else if (!curr.hasOwnProperty("search")) {
if (currentSearchText) {
Navigation.clearStack()
Navigation.openApplicationList( { search: currentSearchText })
}
} else {
curr.search = currentSearchText;
curr.forceActiveFocus()
}
}
} else {
curr.search = currentSearchText;
curr.forceActiveFocus()
}
}
}
......
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