Fix some interaction issues on compact mode

4 files changed, 83 insertions, 78 deletions

diff --git a/discover/qml/ApplicationsListPage.qml b/discover/qml/ApplicationsListPage.qml
index 6151007..2451ece 100644
--- a/discover/qml/ApplicationsListPage.qml
+++ b/discover/qml/ApplicationsListPage.qml
@@ -43,7 +43,6 @@ Item {
     property Component extendedToolBar: null
     property var icon: category ? category.icon : "go-home"
     property string title: category ? category.name : ""
-    clip: true
     
     onSearchChanged: appsModel.sortOrder = Qt.AscendingOrder
     
diff --git a/discover/qml/CategoryDisplay.qml b/discover/qml/CategoryDisplay.qml
index e228bbb..ad3b0be 100644
--- a/discover/qml/CategoryDisplay.qml
+++ b/discover/qml/CategoryDisplay.qml
@@ -53,8 +53,8 @@ Item
         GridView {
             id: grid
             anchors.fill: parent
-            cellWidth: 100
-            cellHeight: 60
+            cellWidth: app.isCompact ? width : 100
+            cellHeight: app.isCompact ? 30 : 60
 
             model: CategoryModel {
                 id: categoryModel
diff --git a/discover/qml/Main.qml b/discover/qml/Main.qml
index cb35716..af4b8f4 100644
--- a/discover/qml/Main.qml
+++ b/discover/qml/Main.qml
@@ -48,13 +48,9 @@ Rectangle
     SystemPalette { id: palette }
     color: palette.base
 
-    function clearSearch() { toolbar.search.text="" }
-    Timer {
-        id: searchTimer
-        running: false
-        repeat: false
-        interval: 200
-        onTriggered: { stackView.currentItem.searchFor(toolbar.search.text) }
+    function clearSearch() {
+        if (toolbar.search)
+            toolbar.search.text=""
     }
 
     Component {
diff --git a/discover/qml/MuonToolbar.qml b/discover/qml/MuonToolbar.qml
index 6105da5..802f43e 100644
--- a/discover/qml/MuonToolbar.qml
+++ b/discover/qml/MuonToolbar.qml
@@ -25,94 +25,104 @@ import QtQuick.Layouts 1.1
 ToolBar
 {
     id: root
-    Layout.preferredHeight: backAction.height+2
+    Layout.preferredHeight: layout.Layout.preferredHeight.height+2
     Layout.fillWidth: true
-    property Item search: searchWidget
+    property Item search: app.isCompact ? compactSearch : null
 
     ExclusiveGroup {
         id: appTabs
     }
+    Timer {
+        id: searchTimer
+        running: false
+        repeat: false
+        interval: 200
+        onTriggered: { stackView.currentItem.searchFor(root.search.text) }
+    }
 
-    RowLayout {
-        id: layout
-        spacing: 1
-        anchors.fill: parent
+    ColumnLayout {
+        RowLayout {
+            id: layout
+            spacing: 1
+            anchors.fill: parent
 
-        ToolButton {
-            id: backAction
-            objectName: "back"
-            action: Action {
-                shortcut: "Alt+Up"
-                iconName: "go-previous"
-                enabled: window.navigationEnabled && stackView.depth>1
-                tooltip: i18n("Back")
-                onTriggered: { stackView.pop() }
+            ToolButton {
+                id: backAction
+                objectName: "back"
+                visible: !app.isCompact
+                action: Action {
+                    shortcut: "Alt+Up"
+                    iconName: "go-previous"
+                    enabled: window.navigationEnabled && stackView.depth>1
+                    tooltip: i18n("Back")
+                    onTriggered: { stackView.pop() }
+                }
             }
-        }
 
-        ConditionalLoader {
-            condition: app.isCompact
-            componentFalse: RowLayout {
-                Repeater {
-                    model: window.awesome
-                    delegate: Button {
-                        enabled: modelData.enabled
-                        checkable: modelData.checkable
-                        checked: modelData.checked
-                        onClicked: modelData.trigger();
-                        iconName: modelData.iconName
-                        text: modelData.text
-                        tooltip: modelData.shortcut
-                        exclusiveGroup: appTabs
-                    }
+            Repeater {
+                model: window.awesome
+                delegate: Button {
+                    enabled: modelData.enabled
+                    checkable: modelData.checkable
+                    checked: modelData.checked
+                    onClicked: modelData.trigger();
+                    iconName: modelData.iconName
+                    text: app.isCompact ? "" : modelData.text
+                    tooltip: i18n("%1 (%2)", modelData.text, modelData.shortcut)
+                    exclusiveGroup: appTabs
                 }
             }
-            componentTrue: Button {
-                text: appTabs.current ? appTabs.current.text: ""
-                menu: Menu {
-                    id: menu
-                    Instantiator {
-                        model: window.awesome
-                        MenuItem {
-                            enabled: modelData.enabled
-                            checkable: modelData.checkable
-                            checked: modelData.checked
-                            onTriggered: modelData.trigger();
-                            iconName: modelData.iconName
-                            text: modelData.text
-//                             tooltip: modelData.shortcut
-                            exclusiveGroup: appTabs
-                        }
-                        onObjectAdded: menu.insertItem(index, object)
-                        onObjectRemoved: menu.removeItem(object)
+
+            Item {
+                Layout.fillWidth: true
+            }
+            ConditionalLoader {
+                condition: app.isCompact
+                enabled: stackView.currentItem!=null && stackView.currentItem.searchFor!=null
+
+                componentTrue: Button {
+                    iconName: "search"
+                    checkable: true
+                    onCheckedChanged: {
+                        compactSearch.visible = checked
+                        compactSearch.focus = true
                     }
                 }
-            }
-        }
+                componentFalse: TextField {
+                    id: searchWidget
+                    Component.onCompleted: {
+                        root.search = searchWidget
+                    }
+                    focus: true
 
-        Item {
-            Layout.fillWidth: !app.isCompact
+                    placeholderText: i18n("Search...")
+                    onTextChanged: searchTimer.running = true
+                    onEditingFinished: if(text == "" && backAction.enabled) {
+                        backAction.trigger()
+                    }
+                }
+
+            }
+            ToolButton {
+                id: button
+                iconName: "application-menu"
+                tooltip: i18n("Configure and learn about Muon Discover")
+                onClicked: {
+                    var pos = mapToItem(window, 0, height);
+                    app.showMenu(pos.x, pos.y);
+                }
+            }
         }
         TextField {
-            id: searchWidget
-            Layout.fillWidth: app.isCompact
-            placeholderText: i18n("Search...")
-            focus: true
-            enabled: stackView.currentItem!=null && stackView.currentItem.searchFor!=null
+            id: compactSearch
+            visible: false
+            Layout.fillWidth: true
 
+            placeholderText: i18n("Search...")
             onTextChanged: searchTimer.running = true
-            onEditingFinished: if(searchWidget.text == "" && backAction.enabled) {
+            onEditingFinished: if(text == "" && backAction.enabled) {
                 backAction.trigger()
             }
         }
-        ToolButton {
-            id: button
-            iconName: "application-menu"
-            tooltip: i18n("Configure and learn about Muon Discover")
-            onClicked: {
-                var pos = mapToItem(window, 0, height);
-                app.showMenu(pos.x, pos.y);
-            }
-        }
     }
 }