From 0ce3ff174ac2f083a211159952b61256f3cd9547 Mon Sep 17 00:00:00 2001
From: Arjen Hiemstra <ahiemstra@heimr.nl>
Date: Mon, 30 Mar 2015 10:59:31 +0200
Subject: [PATCH] Style categories for advanced mode

---
 qml/SidebarAdvanced.qml       |  6 ++++++
 qml/SidebarCategoryHeader.qml | 35 +++++++++++++++++++++++++++++++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/qml/SidebarAdvanced.qml b/qml/SidebarAdvanced.qml
index 40fb4ee683..6aafd1c2e5 100644
--- a/qml/SidebarAdvanced.qml
+++ b/qml/SidebarAdvanced.qml
@@ -9,6 +9,12 @@ UM.SettingsView {
     id: settingsView;
 
     onShowDescription: base.showDescription(text, x, y);
+
+    categoryStyle: UM.Theme.styles.category;
+
+    spacing: UM.Theme.sizes.default_margin.height;
+
+    style: ScrollViewStyle { }
 }
 //
 // Rectangle {
diff --git a/qml/SidebarCategoryHeader.qml b/qml/SidebarCategoryHeader.qml
index 7a193a65ca..391c0bb9a8 100644
--- a/qml/SidebarCategoryHeader.qml
+++ b/qml/SidebarCategoryHeader.qml
@@ -5,11 +5,17 @@ import QtQuick.Layouts 1.1
 
 import UM 1.0 as UM
 
-Rectangle {
+UM.AngledCornerRectangle {
+    id: base;
+
     Layout.preferredHeight: UM.Theme.sizes.section.height;
     Layout.preferredWidth: UM.Theme.sizes.section.width;
 
-    color: UM.Theme.colors.primary;
+    property bool clickable: false;
+    signal clicked();
+
+    color: clickable ? UM.Theme.colors.button : UM.Theme.colors.primary;
+    cornerSize: UM.Theme.sizes.default_margin.width;
 
     property alias icon: iconImage.source;
     property alias text: label.text;
@@ -43,4 +49,29 @@ Rectangle {
         font: UM.Theme.fonts.large;
         color: UM.Theme.colors.primary_text;
     }
+
+    MouseArea {
+        id: mouse;
+        anchors.fill: parent;
+
+        enabled: base.clickable;
+        hoverEnabled: true;
+
+        onClicked: {console.log('click'); base.clicked(); }
+    }
+
+    states: [
+        State {
+            name: "hover";
+            when: mouse.containsMouse;
+
+            PropertyChanges { target: base; color: UM.Theme.colors.button_hover; }
+        },
+        State {
+            name: "down";
+            when: mouse.pressed;
+
+            PropertyChanges { target: base; color: UM.Theme.colors.button_down; }
+        }
+    ]
 }