* Imported QML resources.

2025-08-06 14:16:32 +02:00 · 2013-05-18 22:53:18 +02:00
parent 09c272a07c
commit 17eeae9a8f
27 changed files with 1996 additions and 0 deletions
--- a/data/images/inputfield-border.svg
+++ b/data/images/inputfield-border.svg
@@ -0,0 +1,145 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="32"
+   version="1.1"
+   viewBox="0 0 32 32"
+   width="32"
+   x="0px"
+   y="0px"
+   id="svg2"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="inputfield-border.svg">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 22 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="44 : 22 : 1"
+       inkscape:persp3d-origin="22 : 14.666667 : 1"
+       id="perspective2836" />
+  </defs>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2880"
+     inkscape:window-height="1720"
+     id="namedview14"
+     showgrid="true"
+     inkscape:zoom="22.627417"
+     inkscape:cx="27.047196"
+     inkscape:cy="19.278199"
+     inkscape:window-x="-12"
+     inkscape:window-y="45"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2990"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true" />
+  </sodipodi:namedview>
+  <g
+     id="g4599">
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="M 4.65625,2.53125 C 0.01699841,4.4354339 3.6476695,11.37715 2.5,15.15625 c 0.9104726,4.415191 -1.74364624,10.215434 1.125,13.9375 7.922985,0.877493 16.321668,0.399451 24.3125,0.1875 C 31.683761,26.34472 28.403491,19.966164 29.5,15.84375 28.337107,11.830292 31.896487,5.0854716 27.625,2.59375 19.995242,2.3871025 12.300962,2.5260218 4.65625,2.53125 z"
+       id="path4601"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="M 4.78125,2.15625 C -0.50384498,3.6307191 3.3089847,11.154694 2.15625,15 c 0.9229661,4.546013 -1.76090684,10.511754 1.125,14.3125 7.901377,1.296184 16.629903,0.28974 24.6875,0.375 C 32.275546,27.028776 28.653465,20.168522 29.84375,16 28.645472,11.822061 32.315037,4.9433197 27.90625,2.3125 20.331149,1.9143664 12.389796,2.2847244 4.78125,2.15625 z"
+       id="path4605"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="m 4.71875,1.8125 c -5.60622152,1.4178135 -1.8407007,9.335986 -2.9375,13.3125 1.0422893,4.584739 -2.09676889,11.02483 1.5625,14.625 8.081978,0.980787 16.725347,0.518622 24.875,0.1875 4.402595,-2.83693 0.856871,-9.769091 2,-14.0625 -1.179633,-4.234007 2.610959,-11.6624143 -2.4375,-14 C 20.11261,1.665057 12.395997,1.8099213 4.71875,1.8125 z"
+       id="path4609"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="M 4.34375,1.46875 C -1.4013281,3.6570978 2.6368879,11.554337 1.4375,16.09375 2.5716902,20.523565 -1.4013805,28.864524 4.59375,30.53125 12.624379,30.017378 21.200972,31.58868 28.96875,30 32.860269,25.890157 29.400879,19.01996 30.5625,13.90625 29.907854,10.034046 32.893088,1.9946986 26.90625,1.4375 19.397406,1.4612481 11.795029,1.3918794 4.34375,1.46875 z"
+       id="path4613"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="m 4.625,1.09375 c -6.2068547,1.3257477 -2.6318919,9.686262 -3.5625,13.96875 1.1448342,4.811525 -2.4458629,11.943183 2.09375,15.40625 8.111337,1.130173 16.686474,0.284334 24.90625,0.3125 5.588519,-2.412228 1.736328,-10.285499 2.875,-14.84375 C 29.823429,11.396143 33.723745,3.1822192 27.75,1.125 20.050017,0.99409221 12.327794,1.0658584 4.625,1.09375 z"
+       id="path4617"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="M 4.59375,0.75 C -0.61385497,1.3040672 0.78718888,7.8712117 0.71875,11.459821 1.1629644,17.279444 -0.11932148,23.455713 1.25,29.09375 c 2.821567,4.196632 8.916358,1.349939 13.066963,2.1875 C 19.332991,30.61559 25.044407,32.586609 29.6875,30.375 33.051694,26.90515 30.469139,21.267325 31.28125,16.968751 30.597411,12.179526 32.636881,6.6229625 30.3125,2.25 26.821643,-1.0138505 21.248342,1.5206042 16.968751,0.71875 12.844428,0.74314509 8.7159665,0.67222023 4.59375,0.75 z"
+       id="path4621"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="M 4.53125,0.375 C 1.3894018,0.60024126 -0.18415805,3.9813327 0.34375,6.8169646 0.40966407,13.865499 0.21403433,20.929441 0.4375,27.96875 c 0.5865041,3.066072 3.9812099,4.147942 6.7366076,3.6875 6.9294814,-0.06599 13.8743884,0.129817 20.7946424,-0.09375 3.066072,-0.586504 4.147942,-3.98121 3.6875,-6.736608 C 31.590265,17.896411 31.786067,10.951504 31.5625,4.03125 30.975996,0.96517848 27.58129,-0.11669206 24.825892,0.34375 18.061449,0.36541598 11.293922,0.30095384 4.53125,0.375 z"
+       id="path4625"
+       inkscape:connector-curvature="0" />
+    <path
+       id="path4629"
+       d="m 5,0 22,0 c 2.77,0 5,2.23 5,5 l 0,22 c 0,2.77 -2.23,5 -5,5 L 5,32 C 2.23,32 0,29.77 0,27 L 0,5 C 0,2.23 2.23,0 5,0 z"
+       style="opacity:0.064667;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="M 4.46875,-0.3125 C 0.98344595,-0.12851319 -0.95137919,3.548349 -0.34375,6.7857146 -0.21552288,13.997692 -0.59536534,21.254525 -0.16338012,28.44023 0.58057677,31.627772 4.1300096,32.842509 7.1428576,32.34375 14.235767,32.215407 21.373601,32.595537 28.44023,32.16338 31.627772,31.419423 32.842509,27.86999 32.34375,24.857142 32.215407,17.764233 32.595537,10.626399 32.16338,3.5597705 31.419423,0.37222754 27.86999,-0.84250881 24.857142,-0.34375 18.061422,-0.32218456 11.26281,-0.38641136 4.46875,-0.3125 z"
+       id="path4631"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="m 4.46875,-0.6875 c -4.88903887,0.31100674 -5.938444,6.0477797 -5.1875,9.9732151 0.41575444,6.5986889 -0.7714644,13.4654919 0.46875,19.9330349 2.5002101,5.615111 9.8337653,2.870216 14.535716,3.5 5.227227,-0.673134 11.102211,1.356807 15.964284,-1 4.618144,-3.665229 1.605796,-10.45511 2.46875,-15.433038 C 31.834965,11.207777 34.77447,4.6031 30.625,0.5625 26.002847,-2.3037853 19.99663,0.03815215 14.857141,-0.71875 11.394973,-0.69362162 7.9291701,-0.76635345 4.46875,-0.6875 z"
+       id="path4635"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="M 4.4375,-1.03125 C -2.4288841,-0.40966905 -1.3119005,8.2085409 -1.0625,13 0.16788472,19.074593 -3.8317535,27.473817 1.59375,32.0625 8.5628736,34.728281 16.662641,32.170927 24,33.0625 29.022589,34.430248 34.293748,30.315663 33.0625,25 32.365371,17.457535 34.334575,9.3983493 32.34375,2.09375 28.430894,-3.9134302 19.817453,0.11168301 14,-1.0625 c -3.186531,0.031844 -6.3778449,-0.056838 -9.5625,0.03125 z"
+       id="path4639"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="M 4.40625,-1.40625 C -2.6356932,-0.73578486 -1.8066321,7.9924057 -1.4375,13 -0.23753983,19.199171 -4.2465159,27.811194 1.46875,32.40625 8.5086357,35.093269 16.607199,32.562499 24,33.4375 29.206688,34.80078 34.643458,30.487912 33.4375,25 32.720722,17.386853 34.764131,9.2829251 32.65625,1.90625 28.669603,-4.2590766 19.946075,-0.32351915 14,-1.4375 c -3.196957,0.031744 -6.3986661,-0.056723 -9.59375,0.03125 z"
+       id="path4643"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="M 4.375,-1.75 C -2.3899272,-1.2431511 -2.4446337,7.0084439 -1.78125,12 -0.57839019,18.49983 -4.4259935,26.910214 0.625,32.21875 6.6149095,35.870482 14.375511,32.750815 21,33.78125 26.00645,34.811355 33.908351,33.579761 33.78125,27 33.025646,18.677041 35.173733,9.8203103 32.96875,1.75 28.969659,-4.6437363 20.059663,-0.68188005 14,-1.78125 10.792617,-1.7496477 7.5805122,-1.8377839 4.375,-1.75 z"
+       id="path4647"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="M 4.875,-2.125 C -1.8309464,-2.1825575 -3.2026722,5.8349656 -2.15625,11 -1.080826,17.712074 -4.3881621,25.748049 -0.375,31.6875 4.9763374,36.782756 13.437274,32.97527 20,34.15625 25.186853,34.907535 33.649994,34.582135 34.09375,27.625 33.532181,19.108316 35.431584,10.074869 33.375,1.78125 29.243722,-5.2757831 19.506448,-0.97339883 13,-2.15625 10.294719,-2.1339361 7.5677947,-2.1998142 4.875,-2.125 z"
+       id="path4651"
+       inkscape:connector-curvature="0" />
+    <path
+       style="opacity:0.06466699;fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-opacity:1"
+       d="M 4.34375,-2.46875 C -2.8099687,-2.0064215 -3.3295148,6.5980666 -2.5,12 -1.2963625,18.720406 -5.2816016,27.573393 0.3125,32.875 6.7337709,36.640288 14.932728,33.450664 22,34.5 27.257415,35.699243 34.692301,33.44159 34.5,27 33.751825,18.586732 35.895885,9.6625663 33.65625,1.5 29.388001,-5.6000779 19.620414,-1.344641 13,-2.5 c -2.884405,0.032599 -5.7737456,-0.058009 -8.65625,0.03125 z"
+       id="path4655"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
--- a/data/images/station-artist.svg
+++ b/data/images/station-artist.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="500px" viewBox="0 0 500 500" 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>station-artist</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="50%" x2="50%" y2="170.589844%" id="linearGradient-1">
+            <stop stop-color="rgb(254,255,254)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <path d="M245.48466,91 C161.807243,91 94,158.187218 94,241.021267 C94,323.885705 161.807243,391 245.48466,391 C329.137526,391 397,323.885699 397,241.021267 C397.006157,158.188001 329.137415,91 245.48466,91 L245.48466,91 L245.48466,91 M328.597284,221.910531 L283.447689,255.452489 L299.857913,308.566669 C300.496157,310.61443 299.741311,312.856636 297.986141,314.126613 C297.090145,314.776792 296.034589,315.10492 294.966758,315.10492 C293.960297,315.10492 292.947699,314.807174 292.076251,314.211683 L245.496742,282.462275 L198.929509,314.211683 C197.155929,315.433048 194.774789,315.390513 193.019619,314.126613 C191.264449,312.856637 190.515741,310.620506 191.147847,308.566669 L207.551935,255.452489 L162.408476,221.910531 C160.671717,220.616248 159.947556,218.374041 160.610347,216.320204 C161.279276,214.254214 163.187869,212.850556 165.378763,212.801944 L222.071977,211.671726 L240.673094,159.213801 C241.397255,157.190346 243.32426,155.8353 245.490606,155.8353 C247.656952,155.8353 249.602368,157.190346 250.320392,159.213801 L268.92151,211.671726 L325.614723,212.801944 C327.793343,212.850556 329.708074,214.254214 330.377002,216.320204 C331.052217,218.375335 330.334166,220.616913 328.597284,221.910531 C328.597284,221.910531 330.334166,220.616913 328.597284,221.910531 L328.597284,221.910531" id="Shape" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+    </g>
+</svg>
--- a/data/images/station-genre.svg
+++ b/data/images/station-genre.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="500px" height="500px" viewBox="0 0 500 500" 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>station-genre</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="50%" x2="50%" y2="170.589844%" id="linearGradient-1">
+            <stop stop-color="rgb(254,255,254)" offset="0%"></stop>
+            <stop stop-color="rgb(0,0,0)" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page 1" fill="rgb(215,215,215)" fill-rule="evenodd">
+        <g id="Group" fill="rgb(0,0,0)">
+            <path d="M389.045442,230.429716 C383.570272,224.959128 241.528204,83.1885389 241.528204,83.1885389 L179.981162,84.9885389 L160.691354,104.235598 C166.349226,110.976775 171.677056,117.782657 175.749546,123.859127 C179.185524,122.035598 183.098886,121.000304 187.259779,121.000304 C200.856353,121.000304 211.871525,132.006186 211.871525,145.576774 C211.871525,159.14148 200.850461,170.141481 187.259779,170.141481 C173.669099,170.141481 162.648034,159.141481 162.648034,145.576774 C162.648034,142.612068 163.19614,139.788539 164.1568,137.159127 C158.104056,132.623833 151.208523,126.559127 144.560523,120.34148 L129.631991,135.24148 L129.631991,198.565012 L276.789714,345.447361 C276.789714,345.447361 281.192246,351.47089 287.22731,345.447361 C293.262374,339.423831 389.045432,243.817946 389.045432,243.817946 C389.045432,243.817946 394.514592,235.894158 389.045442,230.429716 C389.045442,230.429716 394.514592,235.894158 389.045442,230.429716 L389.045442,230.429716" id="Shape" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+            <path d="M178.83767,140.964384 C179.008585,140.964384 179.309159,140.952619 179.427032,140.82909 C182.916053,137.346737 161.374883,108.893797 132.325244,78.5584992 C131.523712,78.4114404 129.867605,78.1349698 127.975755,78.1349698 C125.512223,78.1349698 122.20001,78.5996757 120.437818,80.8290875 C118.940839,82.7173229 118.622584,85.7232053 119.506627,89.7761465 C138.165813,109.723719 170.456964,140.964384 178.83767,140.964384 C178.83767,140.964384 170.456964,140.964384 178.83767,140.964384 L178.83767,140.964384" id="Shape" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+            <path d="M141.000749,228.394014 L196.30056,367.023423 C196.30056,367.023423 197.726815,373.270482 204.551624,370.576364 C207.793113,369.288128 233.895943,358.911658 260.440793,348.358717 L260.423112,348.364599 L141.000749,228.394014 L141.000749,228.394014 L141.000749,228.394014" id="Shape" stroke="rgb(150,150,150)" stroke-width="1" fill="url(#linearGradient-1)"></path>
+        </g>
+    </g>
+</svg>
--- a/data/images/station-year.svg
+++ b/data/images/station-year.svg
--- a/data/qml/DeclarativeHeader.qml
+++ b/data/qml/DeclarativeHeader.qml
@@ -0,0 +1,21 @@
+import QtQuick 1.1
+import tomahawk 1.0
+import "tomahawkimports"
+
+// Only to be used together with DeclarativeHeader C++ class
+// If you want to use the header in QML, use FlexibleHeader
+
+Item {
+    anchors.fill: parent
+
+    FlexibleHeader {
+        anchors.fill: parent
+        icon: iconSource
+        title: caption
+        subtitle: description
+        buttonModel: buttonList
+
+        onSearchTextChanged: mainView.setFilterText(searchText)
+        onCurrentButtonIndexChanged: mainView.viewModeSelected(currentButtonIndex)
+    }
+}
--- a/data/qml/QmlGridView.qml
+++ b/data/qml/QmlGridView.qml
@@ -0,0 +1,65 @@
+import QtQuick 1.1
+//import tomahawk 1.0
+import "tomahawkimports"
+
+Rectangle {
+    anchors.fill: parent
+    color: "black"
+
+    Text {
+        id: fontMetrics
+        text: "Here's some sample text"
+        opacity: 0
+    }
+
+    GridView {
+        id: gridView
+        anchors.fill: parent
+        //anchors.rightMargin: scrollBar.width
+
+        cellHeight: cellWidth
+        cellWidth: calculateCoverSize(gridView.width - 3)
+
+        cacheBuffer: cellHeight * 5
+
+        function calculateCoverSize(rectWidth) {
+            var itemWidth = fontMetrics.width;
+            var itemsPerRow = Math.max( 1, Math.floor( rectWidth / itemWidth ) );
+
+            var remSpace = rectWidth - ( itemsPerRow * itemWidth );
+            var extraSpace = remSpace / itemsPerRow;
+            return itemWidth + extraSpace;
+
+        }
+
+        model: mainModel
+
+        delegate: CoverImage {
+            height: gridView.cellHeight// * 0.95
+            width: gridView.cellWidth// * 0.95
+
+            showLabels: true
+            showMirror: false
+            artistName: model.artistName
+            trackName: model.trackName
+            artworkId: model.coverID
+            showPlayButton: true
+            currentlyPlaying: isPlaying
+            smooth: !gridView.moving
+
+            onClicked: {
+                rootView.onItemClicked(index)
+            }
+            onPlayClicked: {
+                rootView.onItemPlayClicked(index)
+            }
+        }
+    }
+
+    ScrollBar {
+        id: scrollBar
+        listView: gridView
+        orientation: Qt.Vertical
+        margin: -width
+    }
+}
--- a/data/qml/SpinnerTest.qml
+++ b/data/qml/SpinnerTest.qml
@@ -0,0 +1,34 @@
+import QtQuick 1.1
+import "tomahawkimports"
+
+Rectangle {
+width: 1400
+height: 900
+color: "black"
+
+BusyIndicator {
+  anchors.centerIn: parent
+  anchors.horizontalCenterOffset: 200
+  height: 200
+  width: 200
+}
+
+Image {
+  id: svgSpinner
+  source: "../images/loading-animation.svg"
+  smooth: true
+  height: 200
+  width: 200 
+  anchors.centerIn: parent
+  anchors.horizontalCenterOffset: -200
+
+  Timer {
+    running: true
+    repeat: true
+    interval: 200
+    onTriggered: svgSpinner.rotation += 360 / 12
+  }
+}
+
+
+}
--- a/data/qml/StationView.qml
+++ b/data/qml/StationView.qml
@@ -0,0 +1,162 @@
+import QtQuick 1.1
+import tomahawk 1.0
+import "tomahawkimports"
+import "stations"
+Rectangle {
+    id: scene
+    color: "black"
+    anchors.fill: parent
+    state: "list"
+
+    FlexibleHeader {
+        id: header
+        anchors {
+            left: parent.left
+            top: parent.top
+            right: parent.right
+        }
+        height: defaultFontHeight * 4
+        width: parent.width
+        icon: "../images/station.svg"
+        title: mainView.title
+        subtitle: generator.summary
+        showSearchField: false
+        showBackButton: stationListView.currentIndex > 0
+        showNextButton: stationListView.currentIndex == 2
+        nextButtonText: "Save"
+
+        z: 1 //cover albumcovers that may leave their area
+
+        onBackPressed: stationListView.decrementCurrentIndex()
+        onNextPressed: stationListView.incrementCurrentIndex()
+    }
+
+    ListModel {
+        id: modeModel
+        ListElement { label: "By Artist"; image: "../../images/station-artist.svg"; creatorContent: "stations/CreateByArtist.qml" }
+        ListElement { label: "By Genre"; image: "../../images/station-genre.svg"; creatorContent: "stations/CreateByGenre.qml" }
+        ListElement { label: "By Year"; image: "../../images/station-year.svg"; creatorContent: "year" }
+    }
+
+    VisualItemModel {
+        id: stationVisualModel
+
+        StationCreatorPage1 {
+            height: scene.height - header.height
+            width: scene.width
+            model: modeModel
+
+            onItemClicked: {
+                stationCreator.content = modeModel.get(index).creatorContent
+                stationListView.incrementCurrentIndex()
+            }
+        }
+
+        StationCreatorPage2 {
+            id: stationCreator
+            height: stationListView.height
+            width: stationListView.width
+
+            onNext: stationListView.incrementCurrentIndex()
+        }
+
+        Item {
+            id: stationItem
+            height: stationListView.height
+            width: stationListView.width
+
+            CoverFlip {
+                id: coverView
+                anchors.right: parent.right
+                anchors.top: parent.top
+                height: parent.height
+                width: parent.width
+                interactive: false
+
+                backgroundColor: scene.color
+
+                model: dynamicModel
+                currentIndex: currentlyPlayedIndex
+
+                onItemPlayPauseClicked: {
+                    mainView.playItem(index)
+                }
+
+                onItemClicked: {
+                    mainView.playItem(index)
+                }
+
+                states: [
+                    State {
+                        name: "empty"; when: mainView.loading
+                        PropertyChanges {
+                            target: coverView
+                            anchors.rightMargin: -coverView.width
+                            anchors.topMargin: - coverView.height
+                            scale: 0
+                        }
+                    }
+                ]
+                transitions: [
+                    Transition {
+                        from: "empty"
+                        to: "*"
+                        NumberAnimation {
+                            properties: "anchors.topMargin,anchors.rightMargin,scale"
+                            duration: 1000
+                            easing.type: Easing.OutQuad
+                        }
+                    }
+
+                ]
+//                Behavior on anchors.topMargin {
+//                    NumberAnimation { duration: 500 }
+//                }
+//                Behavior on anchors.rightMargin {
+//                    NumberAnimation { duration: 500 }
+//                }
+//                Behavior on scale {
+//                    NumberAnimation { duration: 500 }
+//                }
+
+            }
+            BusyIndicator {
+                id: busyIndicator
+                anchors.centerIn: parent
+                height: defaultFontHeight * 4
+                width: height
+
+                opacity: mainView.loading ? 1 : 0
+                running: mainView.loading
+            }
+
+        }
+
+    }
+
+
+    ListView {
+        id: stationListView
+        anchors {
+            left: parent.left
+            top: header.bottom
+            right: parent.right
+            bottom: parent.bottom
+        }
+
+        contentHeight: height
+        contentWidth: width
+        orientation: ListView.Horizontal
+        model: stationVisualModel
+        interactive: false
+        highlightMoveDuration: 300
+
+        onHeightChanged: {
+            contentHeight = scene.height
+        }
+        onWidthChanged: {
+            contentWidth = scene.width
+        }
+    }
+
+}
--- a/data/qml/stations/CreateByArtist.qml
+++ b/data/qml/stations/CreateByArtist.qml
@@ -0,0 +1,69 @@
+import QtQuick 1.1
+import tomahawk 1.0
+import "../tomahawkimports"
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    signal done()
+
+    function createStation(artist) {
+        mainView.startStationFromArtist(artist)
+        root.done()
+    }
+
+    Column {
+        id: upperColumn
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: parent.height
+        width: defaultFontHeight * 30
+        anchors.bottomMargin: defaultFontHeight
+        spacing: defaultFontHeight
+
+        HeaderLabel {
+            id: headerText
+            text: "Create station by artist..."
+        }
+
+        Row {
+            height: artistInputField.height
+            width: parent.width
+            spacing: defaultFontHeight * 0.5
+
+            InputField {
+                id: artistInputField
+                width: parent.width - createFromInputButton.width - parent.spacing
+
+                onAccepted: createStation(text)
+            }
+
+            PushButton {
+                id: createFromInputButton
+                text: "Go!"
+                enabled: artistInputField.text.length > 2
+                onClicked: createStation(artistInputField.text)
+            }
+        }
+
+        Item {
+            height: parent.height - headerText.height - artistInputField.height - parent.spacing * 3
+            width: parent.width
+            ArtistView {
+                id: artistView
+                height: parent.height
+                width: parent.width
+                model: artistChartsModel
+                clip: true
+                delegateHeight: defaultFontHeight * 6
+
+                onItemClicked: {
+                    createStation(artistChartsModel.itemFromIndex(index).artistName);
+                }
+            }
+            ScrollBar {
+                listView: artistView
+            }
+        }
+    }
+}
--- a/data/qml/stations/CreateByGenre.qml
+++ b/data/qml/stations/CreateByGenre.qml
@@ -0,0 +1,88 @@
+import QtQuick 1.1
+import tomahawk 1.0
+import "../tomahawkimports"
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    signal done()
+
+    function createStation(genre) {
+        mainView.startStationFromGenre(genre)
+        root.done()
+    }
+
+    ListModel {
+        id: styleModel
+        ListElement { modelData: "acoustic" }
+        ListElement { modelData: "alternative" }
+        ListElement { modelData: "alternative rock" }
+        ListElement { modelData: "classic" }
+        ListElement { modelData: "folk" }
+        ListElement { modelData: "indie" }
+        ListElement { modelData: "pop" }
+        ListElement { modelData: "rock" }
+        ListElement { modelData: "hip-hop" }
+        ListElement { modelData: "punk" }
+        ListElement { modelData: "grunge" }
+        ListElement { modelData: "indie" }
+        ListElement { modelData: "electronic" }
+        ListElement { modelData: "country" }
+        ListElement { modelData: "jazz" }
+        ListElement { modelData: "psychodelic" }
+        ListElement { modelData: "soundtrack" }
+        ListElement { modelData: "reggae" }
+        ListElement { modelData: "house" }
+        ListElement { modelData: "drum and base" }
+    }
+
+    Column {
+        id: upperColumn
+        anchors.fill: parent
+        anchors.bottomMargin: defaultFontHeight
+        spacing: defaultFontHeight
+
+        HeaderLabel {
+            id: headerText
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "Create station by genre..."
+        }
+
+        Row {
+            width: defaultFontHeight * 30
+            height: genreInputField.height
+            spacing: defaultFontHeight * 0.5
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            InputField {
+                id: genreInputField
+                width: parent.width - createFromInputButton.width - parent.spacing
+
+                onAccepted: createStation(text);
+            }
+
+            PushButton {
+                id: createFromInputButton
+                text: "Go!"
+                height: genreInputField.height
+                enabled: genreInputField.text.length > 2
+                onClicked: createStation(genreInputField.text)
+            }
+        }
+
+        Item {
+            height: parent.height - headerText.height - genreInputField.height
+            width: parent.width
+            TagCloud {
+                anchors.fill: parent
+                anchors.margins: parent.width / 6
+                model: styleModel
+
+                onTagClicked: {
+                    root.createStation(tag);
+                }
+            }
+        }
+    }
+}
--- a/data/qml/stations/StationConfig.qml
+++ b/data/qml/stations/StationConfig.qml
@@ -0,0 +1,79 @@
+import QtQuick 1.1
+import tomahawk 1.0
+import "tomahawkimports"
+
+Item {
+    id: fineTuneView
+
+    property color textColor: "white"
+
+    signal done();
+
+    Grid {
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.margins: 50
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: scene.width / 2
+        spacing: 50
+        columns: 2
+
+        Text {
+            color: fineTuneView.textColor
+            text: "Name:"
+
+        }
+        InputField {
+            text: echonestStation.name
+
+            onAccepted: {
+                print("text changed!!!")
+                echonestStation.name = text;
+            }
+        }
+
+        Text {
+            id: tempoText
+            text: "Tempo:"
+            color: "white"
+        }
+        DoubleSlider {
+            width: 500
+            height: tempoText.height
+            min: 0
+            max: 500
+            lowerSliderPos: echonestStation.minTempo
+            upperSliderPos: echonestStation.maxTempo
+            onValueChanged: echonestStation.setTempo( lowerSliderPos, upperSliderPos )
+        }
+
+        Text {
+            id: hotnessText
+            text: "Hotness:"
+            color: "white"
+        }
+        DoubleSlider {
+            width: 500
+            height: hotnessText.height
+            min: 0
+            max: 100
+            minLabel: "Less"
+            maxLabel: "More"
+            showFloatingLabel: false
+            lowerSliderPos: echonestStation.minHotttness * 100
+            upperSliderPos: echonestStation.maxHotttness * 100
+            onValueChanged: echonestStation.setHotttness( 1.0 * lowerSliderPos / 100, 1.0 * upperSliderPos / 100 )
+        }
+    }
+
+
+    Button {
+        id: configureButton
+        onClicked: fineTuneView.done();
+        text: "configure"
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 20
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
+}
--- a/data/qml/stations/StationCreatorPage1.qml
+++ b/data/qml/stations/StationCreatorPage1.qml
@@ -0,0 +1,64 @@
+import QtQuick 1.1
+import tomahawk 1.0
+import "../tomahawkimports"
+
+
+Item {
+    id: root
+    property alias model: gridView.model
+    property int spacing: 10
+
+    signal itemClicked(int index)
+
+    GridView {
+        id: gridView
+        anchors.centerIn: parent
+        width: root.width * 9 / 10
+        height: cellHeight
+
+        cellWidth: (width - 1) / 3
+        cellHeight: cellWidth //* 10 / 16
+
+        delegate: Image {
+            width: gridView.cellWidth - root.spacing
+            height: gridView.cellHeight - root.spacing
+            source: image
+            smooth: true
+
+            Rectangle {
+                id: textBackground
+                anchors {
+                    left: parent.left
+                    bottom: parent.bottom
+                    right: parent.right
+                }
+                height: parent.height / 5
+                color: "black"
+                opacity: .5
+
+            }
+            Text {
+                anchors.centerIn: textBackground
+                text: label
+                color: "white"
+                font.bold: true
+            }
+            Rectangle {
+                id: hoverShade
+                anchors.fill: parent
+                color: "white"
+                opacity: mouseArea.containsMouse ? .2 : 0
+
+                Behavior on opacity {
+                    NumberAnimation { easing.type: Easing.Linear; duration: 300 }
+                }
+            }
+            MouseArea {
+                id: mouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: root.itemClicked(index)
+            }
+        }
+    }
+}
--- a/data/qml/stations/StationCreatorPage2.qml
+++ b/data/qml/stations/StationCreatorPage2.qml
@@ -0,0 +1,25 @@
+import QtQuick 1.1
+import tomahawk 1.0
+import "../tomahawkimports"
+
+Item {
+    id: root
+
+    property int margins: defaultFontHeight * 2
+    property alias content: contentLoader.source
+
+    signal next()
+
+    Loader {
+        id: contentLoader
+        anchors.fill: parent
+        anchors.margins: root.margins
+    }
+
+    Connections {
+        target: contentLoader.item
+
+        onDone: root.next()
+    }
+
+}
--- a/data/qml/tomahawkimports/ArtistView.qml
+++ b/data/qml/tomahawkimports/ArtistView.qml
@@ -0,0 +1,71 @@
+import QtQuick 1.1
+import tomahawk 1.0
+
+ListView {
+    id: root
+
+    property int delegateHeight: defaultFontHeight * 3
+
+    signal itemClicked(int index)
+
+    delegate: Item {
+        width: parent.width
+        height: root.delegateHeight
+
+        Rectangle {
+            id: background
+            anchors.fill: parent
+            radius: defaultFontHeight / 2
+            opacity: 0.5
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "#00FFFFFF" }
+                GradientStop { position: 1.0; color: "#AAFFFFFF" }
+            }
+
+            states: [
+                State {
+                    name: "hovered"; when: mouseArea.containsMouse
+                    PropertyChanges { target: background; opacity: 1 }
+                }
+            ]
+
+            transitions: [
+                Transition {
+                    from: "*"; to: "hovered"
+                    NumberAnimation { properties: "opacity"; duration: 100 }
+                },
+                Transition {
+                    from: "hovered"; to: "*"
+                    NumberAnimation { properties: "opacity"; duration: 600 }
+                }
+            ]
+        }
+
+        Row {
+            anchors.fill: parent
+            spacing: defaultFontHeight
+
+            CoverImage {
+                id: coverImage
+                height: parent.height
+                width: height
+                showLabels: false
+                artworkId: model.coverID
+            }
+            Text {
+                text: model.artistName
+                color: "white"
+                anchors.verticalCenter: parent.verticalCenter
+                width: parent.width - coverImage.width - parent.spacing
+                elide: Text.ElideRight
+            }
+        }
+
+        MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+            onClicked: root.itemClicked(index)
+            hoverEnabled: true
+        }
+    }
+}
--- a/data/qml/tomahawkimports/BusyIndicator.qml
+++ b/data/qml/tomahawkimports/BusyIndicator.qml
@@ -0,0 +1,52 @@
+import QtQuick 1.1
+
+Item {
+    id: busyIndicator
+    width: 100
+    height: width
+    property int barWidth: width / 10
+    property int barHeight: height / 4
+    property int count: 12
+    property color color: "white"
+    property int currentHighlight: 0
+    property bool running: true
+    property int interval: 200
+
+    Behavior on opacity {
+        NumberAnimation { duration: 500 }
+    }
+
+    Repeater {
+        model: busyIndicator.count
+
+
+        Item {
+            height: parent.height
+            width: busyIndicator.barWidth
+            anchors.centerIn: parent
+            Rectangle {
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
+                }
+                height: busyIndicator.barHeight
+                radius: width / 2
+
+                color: busyIndicator.color
+            }
+            rotation: 360 / busyIndicator.count * index
+            opacity: 1 - ((index > busyIndicator.currentHighlight ? busyIndicator.currentHighlight + busyIndicator.count : busyIndicator.currentHighlight) - index) / busyIndicator.count
+            Behavior on opacity {
+                NumberAnimation { duration: busyIndicator.interval }
+            }
+        }
+    }
+
+    Timer {
+        interval: busyIndicator.interval
+        running: busyIndicator.running
+        repeat: true
+        onTriggered: parent.currentHighlight = (parent.currentHighlight + 1) % busyIndicator.count
+    }
+}
--- a/data/qml/tomahawkimports/Button.qml
+++ b/data/qml/tomahawkimports/Button.qml
@@ -0,0 +1,29 @@
+import QtQuick 1.1
+
+Rectangle {
+    id: root
+    color:  buttonMouseArea.containsMouse ? "blue" : "gray"
+    border.width: 2
+    border.color: "white"
+    radius: height/2
+    height: buttonText.height * 1.2
+    width: buttonText.width * 1.5
+
+    property alias text: buttonText.text
+    property color textColor: "white"
+
+    signal clicked()
+
+    Text {
+        id: buttonText
+        anchors.centerIn: parent
+        color: root.textColor
+    }
+
+    MouseArea {
+        id: buttonMouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: root.clicked();
+    }
+}
--- a/data/qml/tomahawkimports/CoverFlip.qml
+++ b/data/qml/tomahawkimports/CoverFlip.qml
@@ -0,0 +1,137 @@
+import QtQuick 1.1
+import tomahawk 1.0
+
+PathView {
+    id: coverView
+
+    // The start coordinates for the covers
+    // Default is left, centered in height
+    property int pathStartX: 0
+    property int pathStartY: height
+
+    // The size of the covers in the path
+    property int coverSize: height
+
+    property color backgroundColor: "black"
+
+    // emitted when a cover is clicked
+    signal itemClicked(int index)
+
+    // emitted when a cover is clicked
+    signal itemPlayPauseClicked(int index)
+
+    preferredHighlightBegin: 0.2 // scene.width / 11000
+    preferredHighlightEnd: preferredHighlightBegin
+    pathItemCount: 5
+    //highlightMoveDuration: 500
+
+    property bool itemHovered: false
+
+    delegate: Item {
+        id: delegateItem
+        height: coverView.coverSize
+        width: coverView.coverSize
+
+        scale: PathView.itemScale
+        //        itemBrightness: PathView.itemBrightness - ((coverView.itemHovered && !coverDelegate.containsMouse) ? .4 : 0)
+        property double itemBrightness: PathView.itemBrightness
+        property double itemOpacity: PathView.itemOpacity
+        property int _origZ
+
+        z: coverView.width - x
+
+        CoverImage {
+            id: coverDelegate
+            height: coverView.coverSize
+            width: coverView.coverSize
+            anchors {
+                top: parent.top
+                right: parent.right
+            }
+
+            backgroundColor: coverView.backgroundColor
+
+            showLabels: true
+            showMirror: true
+            artistName: model.artistName
+            trackName: model.trackName
+            artworkId: model.coverID
+            showPlayButton: true
+            currentlyPlaying: isPlaying
+            smooth: true
+
+            //        itemBrightness: PathView.itemBrightness - ((coverView.itemHovered && !coverDelegate.containsMouse) ? .4 : 0)
+            itemBrightness: coverDelegate.containsMouse ? 1 : parent.itemBrightness * (coverView.itemHovered ? .5 : 1)
+            opacity: parent.itemOpacity
+            z: coverView.width - x
+
+            onPlayClicked: {
+                console.log("***************")
+                coverView.itemPlayPauseClicked(index)
+            }
+
+            onClicked: {
+                coverView.itemClicked(index)
+            }
+
+            onContainsMouseChanged: {
+                if (containsMouse) {
+                    delegateItem._origZ = delegateItem.z;
+                    coverView.itemHovered = true
+                } else {
+                    coverView.itemHovered = false
+                }
+            }
+
+
+        }
+        states: [
+            State {
+                name: "hovered"; when: coverDelegate.containsMouse && !coverView.moving && index !== currentIndex
+                PropertyChanges {
+                    target: delegateItem
+                    width: coverView.coverSize * 2
+                    z: delegateItem._origZ
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                NumberAnimation {
+                    properties: "width"
+                    duration: 300
+                    easing.type: Easing.InOutSine
+                }
+
+            }
+        ]
+    }
+
+    path: Path {
+        startX: coverView.pathStartX
+        startY: coverView.pathStartY
+
+        PathAttribute { name: "itemOpacity"; value: 0 }
+        PathAttribute { name: "itemBrightness"; value: 0 }
+        PathAttribute { name: "itemScale"; value: 1.3 }
+
+        PathLine { x: coverView.width / 4; y: coverView.height / 4 * 3}
+        PathPercent { value: 0.1 }
+        PathAttribute { name: "itemOpacity"; value: 0 }
+        PathAttribute { name: "itemBrightness"; value: 1 }
+        PathAttribute { name: "itemScale"; value: 1.0 }
+
+        PathLine { x: coverView.width / 2; y: coverView.height / 2}
+        PathPercent { value: 0.2 }
+        PathAttribute { name: "itemOpacity"; value: 1 }
+        PathAttribute { name: "itemBrightness"; value: 1 }
+        PathAttribute { name: "itemScale"; value: 0.5 }
+
+        PathLine { x: coverView.width; y: 0 }
+        PathPercent { value: 1 }
+        PathAttribute { name: "itemOpacity"; value: 1 }
+        PathAttribute { name: "itemBrightness"; value: 0 }
+        PathAttribute { name: "itemScale"; value: 0.1 }
+    }
+
+}
--- a/data/qml/tomahawkimports/CoverImage.qml
+++ b/data/qml/tomahawkimports/CoverImage.qml
@@ -0,0 +1,197 @@
+import QtQuick 1.1
+
+Item {
+    id: root
+
+    // Should the artist + track labels be painted
+    property bool showLabels: true
+
+    // Should the play button be painted on mouse hover?
+    property bool showPlayButton: false
+
+    // if this is true, the play button will be swapped by a pause button
+    property bool currentlyPlaying: false
+
+    // Should the mirror be painted?
+    property bool showMirror: false
+
+    // Labels & Cover
+    property string artistName
+    property string trackName
+    property string artworkId
+
+    // The border color for the cover image
+    property color borderColor: "black"
+    // The border width for the cover image
+    property int borderWidth: 2
+
+    // needed to adjust the shadow
+    property color backgroundColor: "black"
+
+    // sets the brightness for the item and its mirror (1: brightest, 0: darkest)
+    property double itemBrightness: 1
+    property double mirrorBrightness: .5
+
+    // set this to true if you want to smoothly scale the cover (be aware of performance impacts)
+    property bool smooth: false
+
+    // will be emitted when the on hower play button is clicked
+    signal playClicked()
+    // will be emitted when the cover is clicked
+    signal clicked()
+    // will be emitted when the cover is hovered by the mouse
+    property alias containsMouse: mouseArea.containsMouse
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onClicked: {
+            print("Cover clicked");
+            root.clicked();
+        }
+    }
+
+    Rectangle {
+        id: itemShadow
+        color: backgroundColor
+        anchors.fill: parent
+
+        //opacity: 1 - itemBrightness
+
+        Behavior on opacity {
+            NumberAnimation { easing.type: Easing.Linear; duration: 300 }
+        }
+    }
+
+    Component {
+        id: coverImage
+
+        Item {
+            property bool isMirror: false
+
+            Image {
+                anchors.fill: parent
+                source: "image://albumart/" + artworkId + (isMirror ? "-mirror" : "") + (showLabels ? "-labels" : "")
+                smooth: root.smooth
+                opacity: itemBrightness
+                Behavior on opacity {
+                    NumberAnimation { duration: 300 }
+                }
+            }
+
+            Rectangle {
+                id: itemGlow
+                anchors.fill: parent
+                anchors.topMargin: isMirror ? parent.height / 2 : 0
+
+                opacity: (mouseArea.containsMouse ? .2 : 0)
+
+                Gradient {
+                    id: glowGradient
+                    GradientStop { position: 0.0; color: "white" }
+                    GradientStop { position: 0.7; color: "white" }
+                    GradientStop { position: 0.8; color: "#00000000" }
+                    GradientStop { position: 1.0; color: "#00000000" }
+                }
+                Gradient {
+                    id: mirrorGlowGradient
+                    GradientStop { position: 0.0; color: "#00000000" }
+                    GradientStop { position: 0.5; color: "#00000000" }
+                    GradientStop { position: 1.0; color: "#44FFFFFF" }
+                }
+
+                states: [
+                    State {
+                        name: "mirrored"; when: isMirror
+                        PropertyChanges {
+                            target: itemGlow
+                            gradient: mirrorGlowGradient
+                        }
+                    },
+                    State {
+                        name: "normal"; when: !isMirror
+                        PropertyChanges {
+                            target: itemGlow
+                            gradient: glowGradient
+                        }
+                    }
+                ]
+
+                Behavior on opacity {
+                    NumberAnimation { easing.type: Easing.Linear; duration: 300 }
+                }
+            }
+
+            Text {
+                id: trackText
+                color: "white"
+                font.bold: true
+                text: trackName
+                anchors { left: parent.left; right: parent.right; bottom: artistText.top }
+                anchors.margins: 2
+                horizontalAlignment: Text.AlignHCenter
+                elide: Text.ElideRight
+                opacity: showLabels ? itemBrightness * (isMirror ? 0.5 : 1): 0
+                font.pixelSize: root.height / 15
+                Behavior on opacity {
+                    NumberAnimation { duration: 300 }
+                }
+            }
+            Text {
+                id: artistText
+                color: "white"
+                font.bold: trackText.text.length == 0
+                text: artistName
+                anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
+                anchors.margins: root.height / 20
+                horizontalAlignment: Text.AlignHCenter
+                elide: Text.ElideRight
+                opacity: showLabels ? itemBrightness * (isMirror ? 0.5 : 1) : 0
+                font.pixelSize: trackText.text.length == 0 ? root.height / 10 : root.height / 15
+                Behavior on opacity {
+                    NumberAnimation { duration: 300 }
+                }
+            }
+        }
+
+    }
+    Loader {
+        sourceComponent: coverImage
+        anchors.fill: parent
+    }
+
+    Loader {
+        id: mirroredCover
+        sourceComponent: parent.showMirror ? coverImage : undefined
+        anchors.fill: parent
+        onLoaded: {
+            item.isMirror = true
+        }
+        transform : [
+            Rotation {
+                angle: 180; origin.y: root.height
+                axis.x: 1; axis.y: 0; axis.z: 0
+            }
+        ]
+    }
+
+    Image {
+        id: playButton
+        visible: showPlayButton ? (mouseArea.containsMouse || currentlyPlaying) : false
+        source: currentlyPlaying ? "../../images/pause-rest.svg" : "../../images/play-rest.svg"
+        anchors.centerIn: parent
+        height: mirroredCover.height / 5
+        width: height
+        smooth: root.smooth
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                print("Play button clicked");
+                root.playClicked();
+            }
+        }
+    }
+
+}
--- a/data/qml/tomahawkimports/DoubleSlider.qml
+++ b/data/qml/tomahawkimports/DoubleSlider.qml
@@ -0,0 +1,151 @@
+import QtQuick 1.1
+
+Item {
+    id: root
+    width: 500
+    height: 10
+
+    property int min: 0
+    property int max: 100
+
+    /** The labels next to the slider
+      * if empty, min and max values are used
+      */
+    property string minLabel: ""
+    property string maxLabel: ""
+
+    /** Should the floating label indicating the current position be shown? */
+    property bool showFloatingLabel: true
+
+    property int lowerSliderPos: 25
+    property int upperSliderPos: 75
+
+    signal valueChanged()
+
+    Row {
+        anchors.fill: parent
+        spacing: 10
+
+        Text {
+            id: minText
+            text: root.minLabel.length > 0 ? root.minLabel : min
+            color: "white"
+        }
+
+        Item {
+            id: sliderRect
+            height: root.height
+            width: parent.width - minText.width - maxText.width - parent.spacing * 2
+
+            function sliderPosToValue( sliderPos ) {
+                var percent = sliderPos * 100 / (sliderRect.width - lowerSlider.width);
+                return Math.floor(percent * (root.max - root.min) / 100) + root.min
+            }
+
+            function valueToSloderPos( value ) {
+                var percent = (value - root.min) * 100 / (root.max - root.min)
+                return percent * (sliderRect.width - lowerSlider.width) / 100
+            }
+
+            Rectangle {
+                id: sliderBase
+                height: root.height / 5
+                width: parent.width
+                color: "white"
+                radius: height / 2
+                anchors.centerIn: parent
+
+            }
+            Rectangle {
+                id: lowerSlider
+                height: root.height
+                width: height
+                anchors.top: root.top
+                radius: height/2
+                border.color: "black"
+                border.width: 2
+                x: sliderRect.valueToSloderPos(root.lowerSliderPos)
+
+                Rectangle {
+                    id: lowerFloatingRect
+                    color: "white"
+                    anchors.bottom: lowerSlider.top
+                    anchors.bottomMargin: 10
+                    visible: root.showFloatingLabel && lowerSliderMouseArea.pressed
+                    width: lowerFloatingText.width * 1.2
+                    height: lowerFloatingText.height + height * 1.2
+                    x: -(width - lowerSlider.width) / 2
+                    radius: height / 4
+
+                    Text {
+                        id: lowerFloatingText
+                        anchors.centerIn: parent
+                        text: sliderRect.sliderPosToValue(lowerSlider.x)
+                    }
+                }
+            }
+            MouseArea {
+                id: lowerSliderMouseArea
+                anchors.fill: lowerSlider
+                drag.target: lowerSlider
+                drag.axis: "XAxis"
+                drag.minimumX: 0
+                drag.maximumX: upperSlider.x - lowerSlider.width
+                onReleased: {
+                    root.lowerSliderPos = sliderRect.sliderPosToValue( lowerSlider.x );
+                    root.valueChanged();
+                }
+            }
+
+            Rectangle {
+                id: upperSlider
+                height: root.height
+                width: height
+                anchors.top: root.top
+                radius: height/2
+                border.color: "black"
+                border.width: 2
+                x: sliderRect.valueToSloderPos(root.upperSliderPos)
+                Rectangle {
+                    id: upperFloatingRect
+                    color: "white"
+                    anchors.bottom: upperSlider.top
+                    anchors.bottomMargin: 10
+                    visible: root.showFloatingLabel && upperSliderMouseArea.pressed
+                    width: upperFloatingText.width * 1.2
+                    height: upperFloatingText.height + height * 1.2
+                    radius: height / 4
+                    x: -(width - upperSlider.width) / 2
+
+                    Text {
+                        id: upperFloatingText
+                        anchors.centerIn: parent
+                        text: sliderRect.sliderPosToValue(upperSlider.x)
+                    }
+                }
+
+            }
+            MouseArea {
+                id: upperSliderMouseArea
+                anchors.fill: upperSlider
+                onClicked: print("button pressed")
+                drag.target: upperSlider
+                drag.axis: "XAxis"
+                drag.minimumX: lowerSlider.x + lowerSlider.width
+                drag.maximumX: parent.width - upperSlider.width
+                onReleased: {
+                    root.upperSliderPos = sliderRect.sliderPosToValue( upperSlider.x );
+                    root.valueChanged();
+                }
+
+            }
+        }
+
+
+        Text {
+            id: maxText
+            text: root.maxLabel.length > 0 ? root.maxLabel : max
+            color: "white"
+        }
+    }
+}
--- a/data/qml/tomahawkimports/FlexibleHeader.qml
+++ b/data/qml/tomahawkimports/FlexibleHeader.qml
@@ -0,0 +1,199 @@
+import QtQuick 1.1
+import tomahawk 1.0
+
+Rectangle {
+    id: root
+
+    // The icon
+    property alias icon: iconImage.source
+
+    // The title
+    property alias title: titleItem.titleText
+
+    // The subtitle/description
+    property alias subtitle: subtitleText.text
+
+    // The model for the ToggleViewButtons.
+    // "modelData" role name holds the iconSource
+    // => You can use a QStringList or StandardListModel here
+    property alias buttonModel: toggleViewButtons.model
+
+    // The index of the currently selected item
+    property alias currentButtonIndex: toggleViewButtons.currentIndex
+
+    // Should we show the searchfield?
+    property bool showSearchField: true
+
+    // The SearchFields text
+    property alias searchText: searchField.text
+
+    property bool showBackButton: false
+    property bool showNextButton: false
+
+    property string backButtonText: "Back"
+    property string nextButtonText: "Next"
+
+    // Layout spacing
+    property int spacing: defaultFontHeight * 0.5
+
+    signal backPressed()
+    signal nextPressed()
+    signal savePressed()
+
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: "#615858" }
+        GradientStop { position: 1.0; color: "#231F1F" }
+    }
+
+    Row {
+        id: leftRow
+        anchors {
+            left: parent.left
+            top: parent.top
+            bottom: parent.bottom
+            right: rightRow.left
+        }
+
+        anchors.margins: root.spacing
+        spacing: root.spacing
+
+        Image {
+            id: iconImage
+            height: parent.height * 0.8
+            width: height
+            anchors.verticalCenter: parent.verticalCenter
+            smooth: true
+        }
+
+        Column {
+            height: parent.height
+            width: parent.width - iconImage.width - parent.spacing
+
+            Item {
+                id: titleItem
+                height: captionText1.height
+                width: parent.width
+                clip: true
+
+                property string titleText
+
+                onTitleTextChanged: {
+                    if(captionText1.text.length > 0) {
+                        captionText2.text = titleText;
+                        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 * 1.5
+                    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 * 1.5
+                    font.bold: true
+                    width: parent.width
+                    elide: Text.ElideRight
+                }
+
+            }
+            Text {
+                id: subtitleText
+                color: "white"
+                font.pointSize:  defaultFontSize * 1.2
+                width: parent.width
+                elide: Text.ElideRight
+            }
+        }
+
+    }
+
+    Row {
+        id: rightRow
+        anchors {
+            top: parent.top
+            right: parent.right
+            rightMargin: -backButton.width - root.spacing - nextButton.width
+            bottom: parent.bottom
+            margins: root.spacing
+        }
+        width: childrenRect.width
+        spacing: root.spacing
+        layoutDirection: Qt.RightToLeft
+
+        states: [
+            State {
+                name: "oneVisible"; when: root.showBackButton && !root.showNextButton
+                PropertyChanges {
+                    target: rightRow
+                    anchors.rightMargin: -nextButton.width
+                }
+            },
+            State {
+                name: "bothVisible"; when: root.showBackButton && root.showNextButton
+                PropertyChanges {
+                    target: rightRow
+                    anchors.rightMargin: root.spacing
+                }
+            }
+
+        ]
+
+        Behavior on anchors.rightMargin {
+            NumberAnimation { duration: 200 }
+        }
+
+        PushButton {
+            id: nextButton
+            anchors.verticalCenter: parent.verticalCenter
+            text: root.nextButtonText
+            onClicked: root.nextPressed();
+        }
+        PushButton {
+            id: backButton
+            anchors.verticalCenter: parent.verticalCenter
+            text: root.backButtonText
+            onClicked: root.backPressed();
+        }
+        InputField {
+            id: searchField
+            visible: root.showSearchField
+            anchors.verticalCenter: parent.verticalCenter
+            placeholderText: "Search..."
+            showSearchIcon: true
+        }
+        ToggleViewButtons {
+            id: toggleViewButtons
+            anchors.verticalCenter: parent.verticalCenter
+            height: defaultFontHeight * 1.5
+        }
+    }
+}
--- a/data/qml/tomahawkimports/HeaderLabel.qml
+++ b/data/qml/tomahawkimports/HeaderLabel.qml
@@ -0,0 +1,7 @@
+import QtQuick 1.1
+
+Text {
+    color: "white"
+    font.pointSize: defaultFontSize + 5
+    font.bold: true
+}
--- a/data/qml/tomahawkimports/InputField.qml
+++ b/data/qml/tomahawkimports/InputField.qml
@@ -0,0 +1,90 @@
+import QtQuick 1.1
+
+Rectangle {
+    id: root
+    color: "white"
+    border.color: "black"
+    border.width: defaultFontHeight * 0.1
+    radius: defaultFontHeight * 0.25
+
+    height: textInput.height * 1.4
+    width: 300
+
+    property bool showSearchIcon: false
+    property string text: ""
+    property string placeholderText: ""
+
+    property int spacing: defaultFontHeight * 0.2
+    signal accepted( string text )
+
+    Image {
+        id: searchIcon
+        anchors {
+            left: parent.left
+            leftMargin:  root.spacing
+            verticalCenter:  parent.verticalCenter
+        }
+        height: parent.height * 0.6
+        width: root.showSearchIcon ? height : 1
+        opacity: root.showSearchIcon ? 1 : 0
+        smooth: true
+        source: "../../images/search-icon.svg"
+    }
+
+    Item {
+        id: textItem
+        anchors.left: searchIcon.right
+        anchors.leftMargin: root.spacing
+        anchors.right: clearIcon.right
+        anchors.rightMargin: root.spacing
+        height: textInput.height
+        anchors.verticalCenter: parent.verticalCenter
+
+        TextInput {
+            id: textInput
+            width: parent.width
+            anchors.centerIn: parent
+            text: root.text
+            font.pointSize: defaultFontSize
+
+            onAccepted: root.accepted( text );
+            onTextChanged: root.text = text;
+        }
+        Text {
+            width: parent.width
+            anchors.centerIn: parent
+            text: root.text.length === 0 ? root.placeholderText : ""
+            color: "lightgray"
+            font.pointSize: defaultFontSize
+        }
+    }
+
+    Image {
+        id: clearIcon
+        anchors {
+            right: parent.right
+            rightMargin:  root.spacing
+            verticalCenter:  parent.verticalCenter
+        }
+        height: parent.height * 0.8
+        width: (root.showSearchIcon && root.text.length > 0) ? height : 1
+        opacity: (root.showSearchIcon && root.text.length > 0) ? 1 : 0
+        smooth: true
+        source: "../../images/search-box-dismiss-x.svg"
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: textInput.text = ""
+        }
+    }
+
+
+    BorderImage {
+        source: "../../images/inputfield-border.svg"
+        anchors.fill: parent
+        anchors.margins: root.radius * 0.1
+        clip: true
+        border.left: defaultFontHeight/4; border.top: defaultFontHeight/4
+        border.right: defaultFontHeight/4; border.bottom: defaultFontHeight/4
+    }
+}
--- a/data/qml/tomahawkimports/PushButton.qml
+++ b/data/qml/tomahawkimports/PushButton.qml
@@ -0,0 +1,34 @@
+import QtQuick 1.1
+//import tomahawk 1.0
+
+Rectangle {
+    id: root
+    height: buttonText.height * 1.4
+    width: buttonText.width + (spacing * 2)
+    radius: defaultFontHeight * 0.25
+    border.width: defaultFontHeight * 0.05
+    border.color: "#a7a7a7"
+
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: mouseArea.pressed ? "#040404" : "#fbfbfb" }
+        GradientStop { position: 1.0; color: mouseArea.pressed ? "#8e8f8e" : "#787878" }
+    }
+
+    property int spacing: defaultFontHeight * 0.5
+    property alias text: buttonText.text
+
+    signal clicked()
+
+    Text {
+        id: buttonText
+        anchors.centerIn: root
+        font.pointSize: defaultFontSize
+        color: mouseArea.pressed ? "white" : "black"
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: root.clicked()
+    }
+}
--- a/data/qml/tomahawkimports/RoundedButton.qml
+++ b/data/qml/tomahawkimports/RoundedButton.qml
@@ -0,0 +1,43 @@
+import QtQuick 1.1
+import tomahawk 1.0
+
+Rectangle {
+    id: root
+    border.width: 4
+    border.color: enabled ? "white" : "grey"
+    radius: height / 2
+    color: (buttonMouseArea.containsMouse && enabled) ? "#22ffffff" : "black"
+    opacity: hidden ? 0 : 1
+
+    height: defaultFontHeight * 2
+    width: height
+
+    property string text
+    property bool enabled: true
+    property bool hidden: false
+
+    signal clicked()
+
+    Behavior on opacity {
+        NumberAnimation { duration: 200 }
+    }
+
+    Behavior on color {
+        ColorAnimation { duration: 200 }
+    }
+
+    Text {
+        anchors.centerIn: parent
+        text: parent.text
+        color: root.border.color
+        font.pixelSize: parent.height * .75
+        font.bold: true
+    }
+    MouseArea {
+        id: buttonMouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        enabled: root.enabled
+        onClicked: parent.clicked()
+    }
+}
--- a/data/qml/tomahawkimports/ScrollBar.qml
+++ b/data/qml/tomahawkimports/ScrollBar.qml
@@ -0,0 +1,69 @@
+import QtQuick 1.1
+
+Item {
+    id: scrollBar
+    width: defaultFontHeight / 2
+
+    // the ListView where to attach this scrollbar
+    property variant listView
+    // the orientation of the scrollbar
+    property variant orientation : Qt.Vertical
+
+    property int margin: defaultFontHeight * 0.25
+
+    states: [
+        State {
+            name: "hidden"; when: !listView.moving
+            PropertyChanges { target: scrollBar; opacity: 0 }
+        },
+        State {
+            name: "visible"; when: listView.moving
+            PropertyChanges { target: scrollBar; opacity: 1 }
+        }
+    ]
+    transitions: [
+        Transition {
+            from: "hidden"
+            to: "visible"
+            NumberAnimation { properties: "opacity"; duration: 200 }
+        },
+        Transition {
+            from: "visible"
+            to: "hidden"
+            NumberAnimation { properties: "opacity"; duration: 2000 }
+        }
+    ]
+
+    anchors {
+        left: orientation == Qt.Vertical ? listView.right : listView.left
+        leftMargin: orientation == Qt.Vertical ? scrollBar.margin : 0
+        top: orientation == Qt.Vertical ? listView.top : listView.bottom
+        topMargin: orientation == Qt.Vertical ? 0 : scrollBar.margin
+        bottom: orientation == Qt.Vertical ? listView.bottom : undefined
+        right: orientation == Qt.Vertical ? undefined : listView.right
+    }
+
+    // A light, semi-transparent background
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
+        color: "white"
+        opacity: 0.2
+        clip: true
+        // Size the bar to the required size, depending upon the orientation.
+        Rectangle {
+            property real position: orientation == Qt.Vertical ? (listView.contentY / listView.contentHeight) : (listView.contentX / listView.contentWidth)
+            property real pageSize: orientation == Qt.Vertical ? (listView.height / listView.contentHeight) : (listView.width / listView.contentWidth)
+
+            x: orientation == Qt.Vertical ? 1 : (position * (scrollBar.width-2) + 1)
+            y: orientation == Qt.Vertical ? (position * (scrollBar.height-2) + 1) : 1
+            width: orientation == Qt.Vertical ? (parent.width-2) : (pageSize * (scrollBar.width-2))
+            height: orientation == Qt.Vertical ? (pageSize * (scrollBar.height-2)) : (parent.height-2)
+            radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
+            color: "white"
+            opacity: 1
+        }
+    }
+
+}
--- a/data/qml/tomahawkimports/TagCloud.qml
+++ b/data/qml/tomahawkimports/TagCloud.qml
@@ -0,0 +1,80 @@
+import QtQuick 1.1
+import tomahawk 1.0
+
+Item {
+    id: tagCloud
+
+    property variant model: 10
+
+    signal tagClicked( string tag )
+
+    function randomNumber(min, max) {
+        var date = new Date();
+        return (max - min) * Math.random(date.getSeconds()) + min
+    }
+
+    Flow {
+        anchors.centerIn: parent
+        width: parent.width
+        spacing: 3
+
+        Repeater {
+            id: cloudRepeater
+            model: tagCloud.model
+
+            delegate: Item {
+                id: cloudItem
+                width: delegateText.width * 1.1
+                height: delegateText.height
+                property double itemScale: Math.random() + .3
+                scale: itemScale
+                Text {
+                    id: delegateText
+                    color: "gray"
+                    //text: controlModel.controlAt( index ).summary
+                    text: modelData
+                    font.pointSize: 16
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.verticalCenterOffset: tagCloud.randomNumber(0, 15)
+
+                    states: [
+                        State {
+                            name: "hovered"; when: cloudItemMouseArea.containsMouse
+                            PropertyChanges {
+                                target: delegateText
+                                color: "white"
+                            }
+                        }
+                    ]
+                    transitions: [
+                        Transition {
+                            from: "*"
+                            to: "hovered"
+                            ColorAnimation {
+                                duration: 200
+                            }
+                        },
+                        Transition {
+                            from: "hovered"
+                            to: "*"
+                            ColorAnimation {
+                                duration: 1000
+                            }
+                        }
+                    ]
+
+                }
+                MouseArea {
+                    id: cloudItemMouseArea
+                    hoverEnabled: true
+                    anchors.fill: parent
+                    onClicked: tagCloud.tagClicked( modelData )
+                }
+
+                Behavior on scale {
+                    NumberAnimation { easing: Easing.Linear; duration: 1000 }
+                }
+            }
+        }
+    }
+}
--- a/data/qml/tomahawkimports/ToggleViewButtons.qml
+++ b/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 ? "active-" : "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
+            }
+        }
+    }
+}