Say hello to DeclarativeHeader

data/images/view-toggle-pressed-left.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="38px" height="38px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <title>view-toggle-pressed-left</title>
+    <title>view-toggle-pressed-right</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="57.2162807%" id="radialGradient-1">
@@ -9,6 +9,6 @@
         </radialGradient>
     </defs>
     <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
-        <path d="M0,0 L0,38 L29.9992049,38 C34.417922,38 38,34.4250523 38,29.9992049 L38,8.00079513 C38,3.582078 34.4250523,0 29.9992049,0 L0,0 Z M0,0" id="Rectangle 1" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#radialGradient-1)"></path>
+        <path d="M8.00079513,0 C3.582078,0 0,3.57494774 0,8.00079513 L0,29.9992049 C0,34.417922 3.57494774,38 8.00079513,38 L38,38 L38,0 L8.00079513,0 Z M8.00079513,0" id="Rectangle 1" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#radialGradient-1)"></path>
     </g>
 </svg>

data/images/view-toggle-pressed-right.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="38px" height="38px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <title>view-toggle-pressed-right</title>
+    <title>view-toggle-pressed-left</title>
     <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
     <defs>
         <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="57.2162807%" id="radialGradient-1">
@@ -9,6 +9,6 @@
         </radialGradient>
     </defs>
     <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
-        <path d="M8.00079513,0 C3.582078,0 0,3.57494774 0,8.00079513 L0,29.9992049 C0,34.417922 3.57494774,38 8.00079513,38 L38,38 L38,0 L8.00079513,0 Z M8.00079513,0" id="Rectangle 1" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#radialGradient-1)"></path>
+        <path d="M0,0 L0,38 L29.9992049,38 C34.417922,38 38,34.4250523 38,29.9992049 L38,8.00079513 C38,3.582078 34.4250523,0 29.9992049,0 L0,0 Z M0,0" id="Rectangle 1" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#radialGradient-1)"></path>
     </g>
 </svg>

data/qml/tomahawkimports/FlexibleHeader.qml

@@ -0,0 +1,122 @@
+import QtQuick 1.1
+import tomahawk 1.0
+
+Rectangle {
+    id: root
+    anchors.fill: parent
+
+    property bool showSearchField: true
+
+    property int spacing: defaultFontHeight / 2
+
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: "#615858" }
+        GradientStop { position: 1.0; color: "#231F1F" }
+    }
+
+    Row {
+        anchors.fill: parent
+        anchors.margins: root.spacing
+        spacing: root.spacing
+
+        Image {
+            id: iconImage
+            source: iconSource
+            height: parent.height * 0.8
+            width: height
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Column {
+            height: parent.height
+            width: parent.width - iconImage.width - toggleViewButtons.width - searchField.width - parent.spacing * 5
+
+            Item {
+                id: titleItem
+                height: captionText1.height
+                width: parent.width
+                clip: true
+
+                property string titleText: caption
+
+                onTitleTextChanged: {
+                    if(captionText1.text.length > 0) {
+                        captionText2.text = caption;
+                        renewTitleAnimation.start();
+                    } else {
+                        captionText1.text = titleText;
+                    }
+                }
+
+                ParallelAnimation {
+                    id: renewTitleAnimation
+                    property int duration: 500
+                    property variant easingType: Easing.OutBounce;
+
+                    NumberAnimation { target: captionText2; property: "anchors.topMargin"; to: 0; duration: renewTitleAnimation.duration; easing.type: renewTitleAnimation.easingType }
+                    NumberAnimation { target: captionText1; property: "anchors.topMargin"; to: captionText1.height * 2; duration: renewTitleAnimation.duration; easing.type: renewTitleAnimation.easingType }
+
+                    onCompleted: {
+                        captionText1.text = titleItem.titleText
+                        captionText2.anchors.topMargin = -captionText2.height * 2
+                        captionText1.anchors.topMargin = 0
+                    }
+                }
+
+                Text {
+                    id: captionText1
+                    color: "white"
+                    anchors.left: parent.left
+                    anchors.top: parent.top
+
+                    font.pointSize: defaultFontSize + 4
+                    font.bold: true
+                    width: parent.width
+                    elide: Text.ElideRight
+                }
+                Text {
+                    id: captionText2
+                    color: "white"
+                    anchors.left: parent.left
+                    anchors.top: parent.top
+                    anchors.topMargin: -height * 2
+                    font.pointSize: defaultFontSize + 4
+                    font.bold: true
+                    width: parent.width
+                    elide: Text.ElideRight
+                }
+
+            }
+            Text {
+                text: description
+                color: "white"
+                font.pointSize:  defaultFontSize + 1
+                width: parent.width
+                elide: Text.ElideRight
+            }
+        }
+
+        ToggleViewButtons {
+            id: toggleViewButtons
+            anchors.verticalCenter: parent.verticalCenter
+            height: defaultFontHeight * 1.5
+            model: toggleViewButtonModel
+
+            onCurrentIndexChanged: mainView.viewModeSelected(currentIndex)
+        }
+
+
+        SearchField {
+            id: searchField
+            opacity: root.showSearchField ? 1 : 0
+            anchors {
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+                rightMargin: root.spacing
+            }
+
+            onTextChanged: mainView.setFilterText(text)
+
+        }
+    }
+}

data/qml/tomahawkimports/ToggleViewButtons.qml

@@ -0,0 +1,34 @@
+import QtQuick 1.1
+import tomahawk 1.0
+
+Row {
+    id: root
+    width: repeater.width
+
+    property alias model: repeater.model
+    property int currentIndex: 0
+
+    Repeater {
+        id: repeater
+        height: root.height
+        width: count * height
+
+
+        delegate: Image {
+            height: repeater.height
+            width: height
+
+            source: "../../images/view-toggle-" + (index === root.currentIndex ? "pressed-" : "inactive-" ) + (index === 0 ? "left" : ( index === repeater.count - 1 ? "right" : "centre" )) +  ".svg"
+            smooth: true
+            Image {
+                anchors.fill: parent
+                source: "../../images/" + modelData + (index === root.currentIndex ? "-active.svg" : "-inactive.svg")
+            }
+            MouseArea {
+                id: mouseArea
+                anchors.fill: parent
+                onClicked: root.currentIndex = index
+            }
+        }
+    }
+}