Merge branch 'master' of github.com:mixxxdj/mixxx into serato-library-feature

12 files changed, 160 insertions, 338 deletions

diff --git a/res/controllers/Roland_DJ-505-scripts.js b/res/controllers/Roland_DJ-505-scripts.js
index 48d97fc5fe..be2ddb4f77 100644
--- a/res/controllers/Roland_DJ-505-scripts.js
+++ b/res/controllers/Roland_DJ-505-scripts.js
@@ -297,21 +297,21 @@ DJ505.sortLibrary = function(channel, control, value, _status, _group) {
 
     var sortColumn;
     switch (control) {
-        case 0x12:  // SONG
-            sortColumn = 1;
-            break;
-        case 0x13:  // BPM
-            sortColumn = 14;
-            break;
-        case 0x14:  // ARTIST
-            sortColumn = 0;
-            break;
-        case 0x1E:  // KEY
-            sortColumn = 19;
-            break;
-        default:
-            // unknown sort column
-            return;
+    case 0x12:  // SONG
+        sortColumn = 1;
+        break;
+    case 0x13:  // BPM
+        sortColumn = 14;
+        break;
+    case 0x14:  // ARTIST
+        sortColumn = 0;
+        break;
+    case 0x1E:  // KEY
+        sortColumn = 19;
+        break;
+    default:
+        // unknown sort column
+        return;
     }
     engine.setValue("[Library]", "sort_column_toggle", sortColumn);
 };
@@ -438,6 +438,44 @@ DJ505.Deck = function(deckNumbers, offset) {
         }
     };
 
+    /* Platter Spin LED Indicator on Jog Wheels
+     *
+     * The Controller features a LED indicator that imitates a spinning
+     * platter when the deck is playing and also shows to position inside a
+     * bar.
+     *
+     * LED indicator values:
+     * - 0x00 - 0x1F: Beat 0 (downbeat) to 1
+     * - 0x20 - 0x3F: Beat 1 to 2
+     * - 0x40 - 0x5F: Beat 2 to 3
+     * - 0x60 - 0x7F: Beat 3 (upbeat) to 0 (next downbeat)
+     *
+     * TODO: Add proper bar support for the LED indicators
+     *
+     * Mixx currently does not support bar detection, so we don't know which
+     * of the 4 beats in a we are on. This has been worked around by counting
+     * beats manually, but this is error prone and does not support moving
+     * backwards in a track, has problems with loops, does not detect hotcue
+     * jumps and does not indicate the downbeat (obviously).
+     *
+     * See Launchpad issue: https://bugs.launchpad.net/mixxx/+bug/419155
+     */
+    this.beatIndex = 0;
+    this.lastBeatDistance = 0;
+    engine.makeConnection(this.currentDeck, "beat_distance", function(value) {
+        // Check if we're already in front of the next beat.
+        if (value < this.lastBeatDistance) {
+            this.beatIndex = (this.beatIndex + 1) % 4;
+        }
+        this.lastBeatDistance = value;
+
+        // Since deck indices start with 1, we use 0xAF + deck for the status
+        // byte, so that we 0xB0 for the first deck.
+        var status = 0xAF + script.deckFromGroup(this.currentDeck);
+
+        // Send a value between 0x00 and 0x7F to set jog wheel LED indicator
+        midi.sendShortMsg(status, 0x06, Math.round(0x1f * value + 0x20 * this.beatIndex));
+    });
 
     // ========================== LOOP SECTION ==============================
 
@@ -1113,24 +1151,24 @@ DJ505.PadSection.prototype.paramButtonPressed = function(channel, control, value
     }
     var button;
     switch (control) {
-        case 0x2A: // PARAMETER 2 -
-            if (this.currentMode.param2MinusButton) {
-                button = this.currentMode.param2MinusButton;
-                break;
-            }
-            /* falls through */
-        case 0x28: // PARAMETER -
-            button = this.currentMode.paramMinusButton;
+    case 0x2A: // PARAMETER 2 -
+        if (this.currentMode.param2MinusButton) {
+            button = this.currentMode.param2MinusButton;
             break;
-        case 0x2B: // PARAMETER 2 +
-            if (this.currentMode.param2PlusButton) {
-                button = this.currentMode.param2PlusButton;
-                break;
-            }
-            /* falls through */
-        case 0x29: // PARAMETER +
-            button = this.currentMode.paramPlusButton;
+        }
+        /* falls through */
+    case 0x28: // PARAMETER -
+        button = this.currentMode.paramMinusButton;
+        break;
+    case 0x2B: // PARAMETER 2 +
+        if (this.currentMode.param2PlusButton) {
+            button = this.currentMode.param2PlusButton;
             break;
+        }
+        /* falls through */
+    case 0x29: // PARAMETER +
+        button = this.currentMode.paramPlusButton;
+        break;
     }
     if (button) {
         button.input(channel, control, value, status, group);
@@ -1499,7 +1537,7 @@ DJ505.RollMode.prototype.setLoopSize = function(loopSize) {
         padLoopSize = (this.loopSize * Math.pow(2, i));
         this.pads[i].inKey = "beatlooproll_" + padLoopSize + "_activate";
         this.pads[i].outKey = "beatloop_" + padLoopSize + "_enabled";
-        this.pads[i].off = (padLoopSize === 0.25) ? DJ505.PadColor.TURQUOISE : ((padLoopSize === 4) ? DJ505.PadColor.AQUAMARINE : (this.pads[i].color + DJ505.PadColor.DIM_MODIFIER));
+        this.pads[i].off = (padLoopSize === 0.25) ? DJ505.PadColor.TURQUOISE : ((padLoopSize === 4) ? DJ505.PadColor.AQUAMARINE : (this.color + DJ505.PadColor.DIM_MODIFIER));
     }
     this.reconnectComponents();
 };
diff --git a/res/images/library/ic_library_cross.svg b/res/images/library/ic_library_cross.svg
deleted file mode 100644
index 850fb242c6..0000000000
--- a/res/images/library/ic_library_cross.svg
+++ /dev/null
@@ -1,208 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
-   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"
-   version="1.1"
-   width="16"
-   height="16"
-   id="svg2"
-   inkscape:version="0.92.3 (unknown)"
-   sodipodi:docname="ic_library_cross.svg"
-   style="display:inline"
-   inkscape:export-filename=""
-   inkscape:export-xdpi="135"
-   inkscape:export-ydpi="135">
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1366"
-     inkscape:window-height="740"
-     id="namedview26"
-     showgrid="true"
-     inkscape:zoom="8"
-     inkscape:cx="0.67922109"
-     inkscape:cy="19.34323"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="ic_library_unchecked"
-     inkscape:object-paths="true"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     inkscape:snap-midpoints="true"
-     inkscape:snap-page="true"
-     inkscape:snap-bbox="true"
-     inkscape:snap-bbox-midpoints="true"
-     inkscape:bbox-nodes="true">
-    <inkscape:grid
-       type="xygrid"
-       id="grid3788"
-       empspacing="4"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true"
-       originx="4"
-       spacingx="1"
-       spacingy="1"
-       color="#00ffe0"
-       opacity="0.1254902"
-       empcolor="#0072ff"
-       empopacity="0.25098039"
-       originy="4"
-       dotted="false" />
-  </sodipodi:namedview>
-  <title
-     id="title5647">Mixxx 1.12+ iconset</title>
-  <defs
-     id="defs28">
-    <linearGradient
-       id="linearGradient5515"
-       osb:paint="solid">
-      <stop
-         style="stop-color:#000000;stop-opacity:1;"
-         offset="0"
-         id="stop5517" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4942">
-      <stop
-         style="stop-color:#ff6600;stop-opacity:1;"
-         offset="0"
-         id="stop4944" />
-      <stop
-         style="stop-color:#de5800;stop-opacity:1;"
-         offset="1"
-         id="stop4946" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5695-6">
-      <stop
-         style="stop-color:#3c3c3c;stop-opacity:1;"
-         offset="0"
-         id="stop5697-6" />
-      <stop
-         style="stop-color:#000000;stop-opacity:1;"
-         offset="1"
-         id="stop5699-7" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient5695-4">
-      <stop
-         style="stop-color:#646464;stop-opacity:1;"
-         offset="0"
-         id="stop5697-7" />
-      <stop
-         style="stop-color:#000000;stop-opacity:1;"
-         offset="1"
-         id="stop5699-6" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4942-73">
-      <stop
-         style="stop-color:#ff6600;stop-opacity:1;"
-         offset="0"
-         id="stop4944-6" />
-      <stop
-         style="stop-color:#de5800;stop-opacity:1;"
-         offset="1"
-         id="stop4946-6" />
-    </linearGradient>
-    <linearGradient
-       id="linearGradient4942-5">
-      <stop
-         style="stop-color:#ff6600;stop-opacity:1;"
-         offset="0"
-         id="stop4944-9" />
-      <stop
-         style="stop-color:#de5800;stop-opacity:1;"
-         offset="1"
-         id="stop4946-5" />
-    </linearGradient>
-  </defs>
-  <metadata
-     id="metadata4">
-    <rdf:RDF>
-      <rdf:Description
-         rdf:about="">
-        <dc:title />
-        <dc:creator />
-        <dc:rights />
-        <dc:description />
-        <dc:format>image/svg+xml</dc:format>
-        <dc:language>en</dc:language>
-      </rdf:Description>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>Mixxx 1.12+ iconset</dc:title>
-        <dc:subject>
-          <rdf:Bag>
-            <rdf:li>Mixxx</rdf:li>
-            <rdf:li>GUI</rdf:li>
-            <rdf:li>Interface</rdf:li>
-            <rdf:li>Icons</rdf:li>
-          </rdf:Bag>
-        </dc:subject>
-        <dc:creator>
-          <cc:Agent>
-            <dc:title>s.brandt@mixxx.org</dc:title>
-          </cc:Agent>
-        </dc:creator>
-        <cc:license
-           rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
-        <dc:date>2014-04-18</dc:date>
-        <dc:source>www.mixxx.org</dc:source>
-        <dc:description>Iconset for use in Mixxx 1.12s+. Optimized for 48px (16px) icon size. Contains icons for preference menu and library widget
-
-Grid based on suggestions from http://techbase.kde.org/Projects/Oxygen/Style</dc:description>
-        <dc:coverage />
-        <dc:language>en</dc:language>
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
-  <g
-     style="display:inline"
-     id="ic_library_crates"
-     inkscape:label="#g6169"
-     transform="translate(0,-16)">
-    <g
-       transform="matrix(0.415098,0,0,0.415098,-1.660392,19.54706)"
-       inkscape:label="#g6145"
-       id="ic_library_unchecked"
-       style="display:inline">
-      <path
-         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#b3b3b3;fill-opacity:1;fill-rule:nonzero;stroke:#b3b3b3;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
-         d="m 23.272556,-3.7269755 c -8.503582,0 -16.8634872,8.359906 -16.8634872,16.8634875 0,8.503582 8.3599052,16.863487 16.8634872,16.863487 8.503582,0 16.863488,-8.359905 16.863488,-16.863487 0,-8.5035815 -8.359906,-16.8634875 -16.863488,-16.8634875 z m -6.81315,7.641268 c 0.615804,0 1.222017,0.243332 1.693877,0.715193 l 5.119273,5.119272 5.119273,-5.119272 c 0.943722,-0.943722 2.444032,-0.943722 3.387754,0 0.943722,0.943721 0.943722,2.444032 0,3.387754 l -5.119273,5.1192725 5.119273,5.119273 c 0.943722,0.943721 0.943722,2.444032 0,3.387754 -0.943722,0.943722 -2.444032,0.943722 -3.387754,0 l -5.119273,-5.119273 -5.119273,5.119273 c -0.943721,0.943722 -2.444032,0.943722 -3.387754,0 -0.943722,-0.943722 -0.943722,-2.444033 0,-3.387754 l 5.119273,-5.119273 -5.119273,-5.1192725 c -0.943722,-0.943722 -0.943722,-2.444033 0,-3.387754 0.471861,-0.471861 1.078073,-0.715193 1.693877,-0.715193 z"
-         id="cross"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="ssssssscssscssscssscsss"
-         inkscape:export-filename=""
-         inkscape:export-xdpi="45"
-         inkscape:export-ydpi="45"
-         inkscape:label="#path3781" />
-    </g>
-  </g>
-</svg>
diff --git a/res/images/library/ic_library_cross_grey.svg b/res/images/library/ic_library_cross_grey.svg
new file mode 100644
index 0000000000..73d80c1c02
--- /dev/null
+++ b/res/images/library/ic_library_cross_grey.svg
@@ -0,0 +1,8 @@
+<svg width="19" height="19" version="1.1" xmlns="http://www.w3.org/2000/svg">
+	<title>Mixxx 1.12+ iconset</title>
+	<g transform="translate(0,-13)">
+		<g transform="matrix(.4151 0 0 .4151 -1.6604 19.547)">
+			<path d="m26.886-7.3406c-7.2888 0-14.454 7.1656-14.454 14.454 0 7.2888 7.1656 14.454 14.454 14.454 7.2888 0 14.454-7.1656 14.454-14.454 0-7.2888-7.1656-14.454-14.454-14.454zm-5.8398 6.5497c.52783 0 1.0474.20857 1.4519.61302l4.3879 4.3879 4.3879-4.3879c.8089-.8089 2.0949-.8089 2.9038 0s.8089 2.0949 0 2.9038l-4.3879 4.3879 4.3879 4.3879c.8089.8089.8089 2.0949 0 2.9038s-2.0949.8089-2.9038 0l-4.3879-4.3879-4.3879 4.3879c-.8089.8089-2.0949.8089-2.9038 0s-.8089-2.0949 0-2.9038l4.3879-4.3879-4.3879-4.3879c-.8089-.8089-.8089-2.0949 0-2.9038.40445-.40445.92406-.61302 1.4519-.61302z" color="#000000" fill="#b3b3b3" stroke-width="0"/>
+		</g>
+	</g>
+</svg>
diff --git a/res/images/library/ic_library_cross_orange.svg b/res/images/library/ic_library_cross_orange.svg
new file mode 100644
index 0000000000..f102affb9b
--- /dev/null
+++ b/res/images/library/ic_library_cross_orange.svg
@@ -0,0 +1,8 @@
+<svg width="19" height="19" version="1.1" xmlns="http://www.w3.org/2000/svg">
+	<title>Mixxx 1.12+ iconset</title>
+	<g transform="translate(0,-13)">
+		<g transform="matrix(.4151 0 0 .4151 -1.6604 19.547)">
+			<path d="m26.886-7.3406c-7.2888 0-14.454 7.1656-14.454 14.454 0 7.2888 7.1656 14.454 14.454 14.454 7.2888 0 14.454-7.1656 14.454-14.454 0-7.2888-7.1656-14.454-14.454-14.454zm-5.8398 6.5497c.52783 0 1.0474.20857 1.4519.61302l4.3879 4.3879 4.3879-4.3879c.8089-.8089 2.0949-.8089 2.9038 0s.8089 2.0949 0 2.9038l-4.3879 4.3879 4.3879 4.3879c.8089.8089.8089 2.0949 0 2.9038s-2.0949.8089-2.9038 0l-4.3879-4.3879-4.3879 4.3879c-.8089.8089-2.0949.8089-2.9038 0s-.8089-2.0949 0-2.9038l4.3879-4.3879-4.3879-4.3879c-.8089-.8089-.8089-2.0949 0-2.9038.40445-.40445.92406-.61302 1.4519-.61302z" color="#000000" fill="#f60" stroke-width="0"/>
+		</g>
+	</g>
+</svg>
diff --git a/res/mixxx.qrc b/res/mixxx.qrc
index 9b1833187c..545cba1fea 100644
--- a/res/mixxx.qrc
+++ b/res/mixxx.qrc
@@ -8,11 +8,12 @@
       <!-- lock icon for crates, playlists & history -->
         <file>images/library/ic_library_locked_tracklist.svg</file>
         <file>images/library/cover_default.svg</file>
-        <file>images/library/ic_library_cross.svg</file>
         <file>images/library/ic_library_autodj.svg</file>
         <file>images/library/ic_library_banshee.svg</file>
         <file>images/library/ic_library_computer.svg</file> <!-- from Gnome high contrast icons LGPL 2.1 -->
         <file>images/library/ic_library_crates.svg</file>
+        <file>images/library/ic_library_cross_grey.svg</file>
+        <file>images/library/ic_library_cross_orange.svg</file>
         <file>images/library/ic_library_history.svg</file>
         <file>images/library/ic_library_history_current.svg</file>
         <file>images/library/ic_library_itunes.svg</file>
diff --git a/res/skins/Deere/style.qss b/res/skins/Deere/style.qss
index d73f7d60ff..6f03e9e621 100644
--- a/res/skins/Deere/style.qss
+++ b/res/skins/Deere/style.qss
@@ -354,31 +354,14 @@ WSearchLineEdit {
   border: 1px solid #4B4B4B;
   background-color: #1e1e1e;
   color: #d2d2d2;
-}
-
-WSearchLineEdit:focus {
-  margin: 0px 0px 0px 1px;
-  padding: 2px;
-  border: 1px solid #FF6600;
-  background-color: #1e1e1e;
-  color: #D6D6D6;
-  selection-color: #222222;
-  selection-background-color: #d2d2d2;
-}
-  /* Clear button */
-  WSearchLineEdit QToolButton {
-    /* C++ code adds 3px in each dimension.
-       height of search box inside the border: 22px
-       make the button use the available height */
-    height: 19px;
-    width: 19px;
-    }
-    WSearchLineEdit QToolButton:!focus {
-      image: url(skin:/icon/ic_lib_clear_search.svg);
-    }
-    WSearchLineEdit QToolButton:focus {
-      image: url(skin:/icon/ic_lib_clear_search_focus.svg);
-    }
+  }
+  WSearchLineEdit:focus {
+    border: 1px solid #FF6600;
+    color: #D6D6D6;
+    selection-color: #222222;
+    selection-background-color: #d2d2d2;
+  }
+  /* Clear button: see /skins/default.qss */
 
 /* library preview deck */
 #PreviewDeck {
diff --git a/res/skins/LateNight/style.qss b/res/skins/LateNight/style.qss
index a5bafb7af5..8d286e285f 100644
--- a/res/skins/LateNight/style.qss
+++ b/res/skins/LateNight/style.qss
@@ -9,7 +9,6 @@ WNumber,
 WNumberPos,
 WPushButton, WLibrary QPushButton,
 WRecordingDuration,
-WSearchLineEdit,
 WTime,
 WTrackText,
 WTrackProperty,
@@ -29,7 +28,6 @@ WOverview QPushButton */ {
 }
 
 /* regular font weight */
-WSearchLineEdit,
 QToolTip {
   font-weight: normal;
 }
@@ -37,7 +35,6 @@ QToolTip {
 /* regular case / no text transformation */
 WKey,
 WOverview,
-WSearchLineEdit,
 WTrackProperty, WTrackText,
 QToolTip,
 /* WLibrary QMenu,  */
@@ -191,7 +188,6 @@ WOverview QLabel {
   color: #d2d2d2;
 }
 
-WSearchLineEdit,
 #LibraryBPMSpinBox,
 #LibraryBPMButton::item,
 #LibraryContainer QTableView,
@@ -1045,13 +1041,6 @@ QPushButton#pushButtonAutoDJ:checked,
 #ToolbarLogo {
   image: url(skin:/style_classic/mixxx_logo_small.svg) no-repeat center center;
 }
-
-WSearchLineEdit QToolButton:!focus {
-  image: url(skin:/buttons_classic/btn__lib_clear_search.svg);
-  }
-  WSearchLineEdit QToolButton:focus {
-    image: url(skin:/buttons_classic/btn__lib_clear_search_focus.svg);
-  }
 /************** Button icons **************************************************/
 /************** Button styles *************************************************/
 
@@ -2218,23 +2207,16 @@ QScrollBar {
   margin-bottom: 3px;
   margin-left: 2px;
 }
+
 WSearchLineEdit {
   padding: 2px;
   background: #0f0f0f;
   }
   WSearchLineEdit:focus {
-    padding: 2px 0px 2px 2px;
+    padding: 1px;
     border: 2px solid #d08e00;
   }
-  /* Clear button */
-  WSearchLineEdit QToolButton {
-    /* C++ code adds 3px in each dimension.
-      height of search box inside the border: 22px
-      make the button use the available height */
-    height: 19px;
-    width: 19px;
-    margin-right: -1px;
-    }
+  /* Clear button: see /skins/default.qss */
 
 /* HorizontalSplitter
   (the splitter itself is horizontal)
diff --git a/res/skins/Shade/skin.xml b/res/skins/Shade/skin.xml
index 12dd99f40f..8031750707 100644
--- a/res/skins/Shade/skin.xml
+++ b/res/skins/Shade/skin.xml
@@ -463,7 +463,15 @@
                       </Connection>
                     </WidgetGroup>
                     <!--Search Input Field-->
-                    <SearchBox></SearchBox>
+                    <WidgetGroup>
+                      <Style>
+                        QGroupBox {margin: 0px 0px 5px 0px;}
+                      </Style>
+                      <Layout>horizontal</Layout>
+                      <Children>
+                        <SearchBox></SearchBox>
+                      </Children>
+                    </WidgetGroup>
                     <!--Library Tree View-->
                     <Splitter>
                       <Size>e,me</Size>
diff --git a/res/skins/Shade/style.qss b/res/skins/Shade/style.qss
index d4ad9bbf65..6f52fc2c60 100644
--- a/res/skins/Shade/style.qss
+++ b/res/skins/Shade/style.qss
@@ -150,7 +150,7 @@ QTreeView {
   border-color: #585858;
   show-decoration-selected: 0;
   /* Don't define top margin here, it won't shift ScrollBar.
-  Defined by SearchBox	*/
+  Set by SearchBox wrapper	*/
   margin: 0px;
   }
   QTreeView:focus,
@@ -286,37 +286,20 @@ QTreeView::item:!selected {
 
 /* library search text box */
 WSearchLineEdit {
-  padding: 2px;
   margin-top: 2px;
+  padding: 2px;
   border: 1px solid #656565;
-  font-size: 10pt;
-  font-family: "Open Sans";
   background: #0f0f0f;
   color: #cfcfcf;
-  selection-background-color: #d2d2d2;
-  selection-color: #0f0f0f;
-  margin-bottom: 5px;
   }
   WSearchLineEdit:focus {
+    padding: 1px;
     border: 2px solid #ff6600;
     color: #eeeeee;
-    padding: 2px;
+    selection-color: #0f0f0f;
+    selection-background-color: #d2d2d2;
   }
-  /* Clear button */
-  WSearchLineEdit QToolButton {
-    /* C++ code adds 3px in each dimension.
-       height of search box inside the border: 22px
-       make the button use the available height */
-    height: 19px;
-    width: 19px;
-    margin-bottom: 2px;
-    }
-    WSearchLineEdit QToolButton:!focus {
-      image: url(skin:/btn/btn_lib_clear_search.svg);
-    }
-    WSearchLineEdit QToolButton:focus {
-      image: url(skin:/btn/btn_lib_clear_search_focus.svg);
-    }
+  /* Clear button: see /skins/default.qss */
 
 QHeaderView {
   /* Note(ronso0)
diff --git a/res/skins/Tango/library.xml b/res/skins/Tango/library.xml
index f563731cab..860a3bd3f5 100644
--- a/res/skins/Tango/library.xml
+++ b/res/skins/Tango/library.xml
@@ -59,15 +59,27 @@ Description:
                     <SizePolicy>me,min</SizePolicy>
                     <Children>
                       <WidgetGroup><!-- Search, Maxi button -->
+                        <ObjectName>SearchBoxContainer</ObjectName>
                         <Layout>horizontal</Layout>
                         <SizePolicy>me,min</SizePolicy>
                         <Children>
+
                           <SearchBox></SearchBox>
-                          <Template src="skin:button_2state_persist.xml">
-                            <SetVariable name="ObjectName">LibMiniMaxiButton</SetVariable>
-                            <SetVariable name="Size">19f,28f</SetVariable>
-                            <SetVariable name="ConfigKey">[Master],maximize_library</SetVariable>
-                          </Template>
+
+                          <!-- Align the expand buttontop in case the searchbox grows taller -->
+                          <WidgetGroup>
+                            <ObjectName>AlignTop</ObjectName>
+                            <Layout>horizontal</Layout>
+                            <Size>19f,15min</Size>
+                            <Children>
+                              <Template src="skin:button_2state_persist.xml">
+                                <SetVariable name="ObjectName">LibMiniMaxiButton</SetVariable>
+                                <SetVariable name="Size">19f,15f</SetVariable>
+                                <SetVariable name="ConfigKey">[Master],maximize_library</SetVariable>
+                              </Template>
+                            </Children>
+                          </WidgetGroup>
+
                         </Children>
                       </WidgetGroup><!-- /Search, Maxi button -->
 
diff --git a/res/skins/Tango/style.qss b/res/skins/Tango/style.qss
index baf80b4a2c..3da3938d64 100644
--- a/res/skins/Tango/style.qss
+++ b/res/skins/Tango/style.qss
@@ -22,8 +22,7 @@ WLabel,
 WNumber,
 WTrackProperty,
 WBeatSpinBox,
-WEffectSelector, WEffectSelector QAbstractItemView,
-WSearchLineEdit {
+WEffectSelector, WEffectSelector QAbstractItemView {
   font-family: Ubuntu;
   font-weight: normal;
 }
@@ -2197,8 +2196,11 @@ QToolTip {
  ################### most of it was LateNight & Deere ##########
 ############ added styling for AutoDJ & Recording etc ##### */
 
+#SearchBoxContainer {
+  margin-bottom: 5px;
+}
+
 #LibMiniMaxiButton {
-  margin-bottom: 12px;
   }
   #LibMiniMaxiButton[displayValue="0"] {
     image: url(skin:/buttons/btn_lib_maxi.svg) no-repeat center top;
@@ -2289,7 +2291,12 @@ QTreeView::branch:open:has-children:has-siblings {
     border-image: none;
     background-color: #333;
   }
-/* Text label of branch item */
+/* ToDo Style branch icons
+QTreeView::item:indicator {
+  qproperty-iconSize: 40px;
+  qproperty-icon: url(skin:/buttons/btn_lib_clear_search.svg);
+  background-color: green;
+  } */
 QTreeView::item:selected {
   border-image: none;
   background-image: none;
@@ -2690,34 +2697,22 @@ WLibrary QSpinBox {
 /* library search text box */
 WSearchLineEdit {
   padding: 2px;
-  margin-bottom: 5px;
   border: 1px solid #656565;
-  border-left: 0px;
   color: #cfcfcf;
   background: #0f0f0f;
   selection-color: #0f0f0f;
   selection-background-color: #d2d2d2;
+/* margin will increase the Qt widget size which is used to position the
+  Clear button. If > 0 it will shift the cue button outside the visible
+  search box.
+  margin-bottom: 5px; */
   }
   WSearchLineEdit:focus {
+    padding: 1px;
     border: 2px solid #ff6600;
     color: #eeeeee;
-    padding: 2px;
   }
-  /* Clear button */
-  WSearchLineEdit QToolButton {
-    /* C++ code adds 3px in each dimension.
-       height of search box inside the border: 22px
-       make the button use the available height */
-    height: 19px;
-    width: 19px;
-    margin-bottom: 5px;
-    }
-    WSearchLineEdit QToolButton:!focus {
-      image: url(skin:/buttons/btn_lib_clear_search.svg);
-    }
-    WSearchLineEdit QToolButton:focus {
-      image: url(skin:/buttons/btn_lib_clear_search_focus.svg);
-    }
+  /* Clear button: see /skins/default.qss */
 
 WLibrary QLabel,
 WLibrary QRadioButton {	/*
diff --git a/res/skins/default.qss b/res/skins/default.qss
index 65e8305124..bdc5b71c93 100644
--- a/res/skins/default.qss
+++ b/res/skins/default.qss
@@ -37,3 +37,15 @@ WColorPicker QPushButton[checked="false"] {
 WColorPicker QPushButton[checked="true"] {
   qproperty-icon: url(:/images/ic_checkmark.svg);
 }
+
+/* Clear button */
+#SearchClearButton {
+  background: none;
+  border: 0px solid #fff;
+}
+#SearchClearButton:!focus {
+  image: url(:/images/library/ic_library_cross_grey.svg)
+}
+#SearchClearButton:focus {
+  image: url(:/images/library/ic_library_cross_orange.svg)
+}