From ffd1fc743ca5ffff409b5376b8d68b80114b8ab1 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Wed, 16 Sep 2015 17:37:33 +0200
Subject: [PATCH] SONAR-6690 Update the style of select list component

---
 .../main/js/components/common/select-list.js  | 16 ++--
 .../src/main/less/components/select-list.less | 85 ++++++-------------
 2 files changed, 34 insertions(+), 67 deletions(-)

diff --git a/server/sonar-web/src/main/js/components/common/select-list.js b/server/sonar-web/src/main/js/components/common/select-list.js
index 325add51e5a..b14b83b2676 100644
--- a/server/sonar-web/src/main/js/components/common/select-list.js
+++ b/server/sonar-web/src/main/js/components/common/select-list.js
@@ -158,8 +158,10 @@ define(function () {
           '<a class="select-list-control-button" name="all">' + l.all + '</a>' +
           '</div>' +
           '<div class="select-list-search-control">' +
-          '<input type="text" placeholder="Search">' +
-          '<a class="select-list-search-control-clear">&times;</a>' +
+          '<form class="search-box">' +
+          '<span class="search-box-submit button-clean"><i class="icon-search"></i></span>' +
+          '<input class="search-box-input" type="search" name="q" placeholder="Search" maxlength="100" autocomplete="off">' +
+          '</form>' +
           '</div>' +
           '</div>' +
           '<div class="select-list-list-container">' +
@@ -171,9 +173,7 @@ define(function () {
     events: {
       'click .select-list-control-button[name=selected]': 'showSelected',
       'click .select-list-control-button[name=deselected]': 'showDeselected',
-      'click .select-list-control-button[name=all]': 'showAll',
-
-      'click .select-list-search-control-clear': 'clearSearch'
+      'click .select-list-control-button[name=all]': 'showAll'
     },
 
     initialize: function (options) {
@@ -230,7 +230,8 @@ define(function () {
       this.$list = this.$('.select-list-list');
 
       var searchInput = this.$('.select-list-search-control input')
-          .on('keyup', _.debounce(keyup, 250));
+          .on('keyup', _.debounce(keyup, 250))
+          .on('search', _.debounce(keyup, 250));
 
       if (this.settings.focusSearch) {
         setTimeout(function () {
@@ -241,8 +242,9 @@ define(function () {
       this.listItemViews = [];
 
       showError = function () {
+        that.$el.prevAll('.alert').remove();
         $('<div>')
-            .addClass('error').text(that.settings.errorMessage)
+            .addClass('alert alert-danger').text(that.settings.errorMessage)
             .insertBefore(that.$el);
       };
 
diff --git a/server/sonar-web/src/main/less/components/select-list.less b/server/sonar-web/src/main/less/components/select-list.less
index 98c07e2b2cd..d8cfd39d195 100644
--- a/server/sonar-web/src/main/less/components/select-list.less
+++ b/server/sonar-web/src/main/less/components/select-list.less
@@ -126,7 +126,10 @@
 }
 
 .select-list-check-control.disabled .select-list-control-button {
-  background-color: #fff !important;
+  color: #bbb;
+  border-color: #ddd;
+  background: #ebebeb;
+  cursor: not-allowed;
 }
 
 .select-list-control-button {
@@ -134,87 +137,49 @@
   z-index: @normal-z-index;
   display: inline-block;
   vertical-align: middle;
-  width: 110px;
   height: 27px;
   line-height: 25px;
+  padding: 0 12px;
   .box-sizing(border-box);
-  border: 1px solid #bfbfbf;
-  color: @baseFontColor;
+  border: 1px solid @darkBlue;
+  color: @darkBlue;
+  font-size: @smallFontSize;
   text-align: center;
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  .trans(none);
+}
+
+.select-list-control-button:first-child {
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+.select-list-control-button:last-child {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
 }
 
 .select-list-control-button:hover {
-  background-color: #f6f6f6;
-  color: @baseFontColor;
+  color: @darkBlue;
 }
 
 .select-list-control-button:active,
 .select-list-control-button.active {
   z-index: @above-normal-z-index;
-  background-color: #efefef;
-  color: @baseFontColor;
+  background-color: @darkBlue;
+  color: #fff;
+  font-weight: 500;
 }
 
 .select-list-control-button + .select-list-control-button {
   margin-left: -1px;
 }
 
-
 .select-list-search-control {
   position: relative;
-  float: right;
-  height: 27px;
-}
-
-.select-list-search-control input {
-  width: 170px;
-  height: 100%;
-  line-height: 27px\9;
-  padding: 0 40px 0 10px;
-  border: 1px solid #bfbfbf;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  transition: all 0.3s ease;
-}
-
-.select-list-search-control input:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.select-list-search-control input::-ms-clear {
-  display: none;
-}
-
-.select-list-search-control-clear {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  width: 23px;
-  height: 23px;
-  line-height: 24px;
-  background-color: #e0e0e0;
-  color: #fff;
-  cursor: pointer;
-  font-size: 18px;
-  text-align: center;
-  transition: all 0.3s ease;
-}
-
-  .select-list-search-control.disabled .select-list-search-control-clear {
-    filter: alpha(opacity=0);
-    opacity: 0;
-  }
-
-  .select-list-search-control-clear:hover {
-    background-color: #d6d6d6;
-  }
-
-.select-list-on-full-width .select-list-search-control {
   float: left;
-  margin-left: 20px;
+  height: 27px;
+  margin-left: 16px;
 }
 
 .select-list-wrapper {
-- 
2.39.5