SONAR-4851 Completely new UI of filters bar

4 files changed, 210 insertions, 92 deletions

diff --git a/sonar-server/src/main/webapp/stylesheets/navigator.css b/sonar-server/src/main/webapp/stylesheets/navigator.css
index 146ed8be9bf..915976b925b 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator.css
+++ b/sonar-server/src/main/webapp/stylesheets/navigator.css
@@ -1,45 +1,15 @@
 /*
+ * Fonts
+ */
+/*
  * Colors
  */
-.navigator .select2-container .select2-choice,
-.navigator .select2-container-multi .select2-choices {
-  border: 1px solid #aaa;
-  border-radius: 0;
-  background: #ffffff;
-}
-.navigator .select2-container-active .select2-choice,
-.navigator .select2-container-active .select2-choices {
-  box-shadow: none;
-}
-.navigator .select2-container-multi .select2-choices {
-  white-space: nowrap;
-}
-.navigator .select2-container-multi .select2-choices li {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-}
 .navigator-filters {
   margin-bottom: 10px;
-  padding: 10px;
-  border: 1px solid #cdcdcd;
+  border-bottom: 1px solid #cdcdcd;
   background: #efefef;
   font-size: 0;
 }
-.navigator-filters-favorite {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 15px;
-  padding-right: 14px;
-  border-right: 1px solid #cdcdcd;
-}
-.navigator-filters-favorite-toggle {
-  display: block;
-  width: 16px;
-  height: 16px;
-  background: url(../images/star.png) no-repeat left center;
-  cursor: pointer;
-}
 .navigator-filters-list {
   display: inline-block;
   vertical-align: middle;
@@ -49,14 +19,27 @@
   display: inline-block;
   vertical-align: middle;
   margin-left: 20px;
-  font-size: 14px;
+  font-size: 13px;
 }
 .navigator-filter {
   display: inline-block;
   vertical-align: top;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 7px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.3s ease;
 }
-.navigator-filter + .navigator-filter {
-  margin-left: 20px;
+.navigator-filter:hover {
+  background-color: #e2e2e2;
+}
+.navigator-filter.active {
+  position: relative;
+  padding: 0 6px;
+  border-left: 1px solid #cdcdcd;
+  border-right: 1px solid #cdcdcd;
+  background: #fff;
 }
 .navigator-filter-disabled {
   display: none;
@@ -65,18 +48,85 @@
   display: inline-block;
   vertical-align: middle;
   margin-right: 5px;
-  color: #666;
-  font-size: 14px;
+  color: #333;
+  font-size: 13px;
 }
 .navigator-filter-label:after {
   content: ":";
 }
-.navigator-filter-body {
+.navigator-filter-value {
   display: inline-block;
   vertical-align: middle;
-  color: #000;
-  font-size: 14px;
+  max-width: 120px;
+  color: #333;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.navigator-filter-value.default {
+  color: #666;
 }
 .navigator-filter-range-input {
-  width: 80px;
+  width: 120px;
+}
+.navigator-filter-details {
+  display: none;
+  position: absolute;
+  z-index: 1200;
+  min-width: 100px;
+  border: 1px solid #cdcdcd;
+  background: #fff;
+  font-size: 13px;
+  transition: opacity 0.3s ease;
+}
+.navigator-filter-details.active {
+  display: block;
+}
+.navigator-filter-details-inner {
+  padding: 5px 7px;
+}
+.navigator-filter-select-list {
+  min-width: 150px;
+  max-height: 182px;
+  padding: 5px 0;
+  overflow-y: auto;
+}
+.navigator-filter-select-list label {
+  display: block;
+  padding: 5px 7px;
+  transition: background 0.3s ease;
+  cursor: pointer;
+}
+.navigator-filter-select-list label:hover {
+  background-color: #ededed;
+}
+.navigator-filter-select-list input[type=checkbox] {
+  position: relative;
+  top: -1px;
+  cursor: pointer;
+}
+.navigator-filter-select-list .single {
+  padding: 5px 7px;
+}
+.navigator-filter-select-list .line {
+  height: 1px;
+  margin: 5px 0;
+  background: #cdcdcd;
+}
+.navigator-filter-search {
+  margin: 7px;
+}
+.navigator-filter-search input {
+  width: 100%;
+  height: 26px;
+  padding: 0 7px;
+  border: 1px solid #cdcdcd;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.navigator-filter-favorite {
+  width: 16px;
+  height: 36px;
+  background: url('../images/star.png') no-repeat center center;
 }
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator.less b/sonar-server/src/main/webapp/stylesheets/navigator.less
index 031988f5f61..789d0f61e1c 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator.less
+++ b/sonar-server/src/main/webapp/stylesheets/navigator.less
@@ -1,55 +1,21 @@
 @import "mixins";
 @import "variables";
 
-.navigator {
-
-  .select2-container .select2-choice,
-  .select2-container-multi .select2-choices {
-    border: 1px solid #aaa;
-    border-radius: 0;
-    background: @white;
-  }
+@navigatorHeight: 36px;
+@navigatorHover: darken(@grey, 5%);
+@navigatorFilterPadding: 7px;
 
-  .select2-container-active .select2-choice,
-  .select2-container-active .select2-choices {
-    box-shadow: none;
-  }
-
-  .select2-container-multi .select2-choices {
-    white-space: nowrap;
-  }
-
-  .select2-container-multi .select2-choices li {
-    float: none;
-    display: inline-block;
-    vertical-align: middle;
-  }
+.navigator {
 
 }
 
 .navigator-filters {
   margin-bottom: 10px;
-  padding: 10px;
-  border: 1px solid @darkGrey;
+  border-bottom: 1px solid @darkGrey;
   background: @grey;
   font-size: 0;
 }
 
-.navigator-filters-favorite {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 15px;
-  padding-right: 14px;
-  border-right: 1px solid #cdcdcd;
-}
-
-.navigator-filters-favorite-toggle {
-  display: block;
-  .size(16px, 16px);
-  background: url(../images/star.png) no-repeat left center;
-  cursor: pointer;
-}
-
 .navigator-filters-list {
   display: inline-block;
   vertical-align: middle;
@@ -60,16 +26,30 @@
   display: inline-block;
   vertical-align: middle;
   margin-left: 20px;
-  font-size: 14px;
+  font-size: @baseFontSize;
 }
 
 .navigator-filter {
   display: inline-block;
   vertical-align: top;
-}
+  height: @navigatorHeight;
+  line-height: @navigatorHeight;
+  padding: 0 @navigatorFilterPadding;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.3s ease;
 
-.navigator-filter + .navigator-filter {
-  margin-left: 20px;
+  &:hover {
+    background-color: @navigatorHover;
+  }
+
+  &.active {
+    position: relative;
+    padding: 0 @navigatorFilterPadding - 1px;
+    border-left: 1px solid #cdcdcd;
+    border-right: 1px solid #cdcdcd;
+    background: #fff;
+  }
 }
 
 .navigator-filter-disabled {
@@ -80,21 +60,98 @@
   display: inline-block;
   vertical-align: middle;
   margin-right: 5px;
-  color: #666;
-  font-size: 14px;
+  color: #333;
+  font-size: @baseFontSize;
 
   &:after { content: ":"; }
 }
 
-.navigator-filter-body {
+.navigator-filter-value {
   display: inline-block;
   vertical-align: middle;
-  color: #000;
-  font-size: 14px;
+  max-width: 120px;
+  color: #333;
+  font-size: @baseFontSize;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.default {
+    color: #666;
+  }
 }
 
 .navigator-filter-range-input {
-  width: 80px;
+  width: 120px;
+}
+
+.navigator-filter-details {
+  display: none;
+  position: absolute;
+  z-index: 1200;
+  min-width: 100px;
+  border: 1px solid #cdcdcd;
+  background: #fff;
+  font-size: @baseFontSize;
+  transition: opacity 0.3s ease;
+
+  &.active {
+    display: block;
+  }
+}
+
+.navigator-filter-details-inner {
+  padding: 5px @navigatorFilterPadding;
+}
+
+.navigator-filter-select-list {
+  min-width: 150px;
+  max-height: 182px;
+  padding: 5px 0;
+  overflow-y: auto;
+
+  label {
+    display: block;
+    padding: 5px @navigatorFilterPadding;
+    transition: background 0.3s ease;
+    cursor: pointer;
+
+    &:hover {
+      background-color: darken(#fff, 7%);
+    }
+  }
+
+  input[type=checkbox] {
+    position: relative;
+    top: -1px;
+    cursor: pointer;
+  }
+
+  .single {
+    padding: 5px @navigatorFilterPadding;
+  }
+
+  .line {
+    height: 1px;
+    margin: 5px 0;
+    background: #cdcdcd;
+  }
+}
+
+.navigator-filter-search {
+  margin: @navigatorFilterPadding;
+
+  input {
+    .size(100%, 26px);
+    padding: 0 7px;
+    border: 1px solid #cdcdcd;
+    .box-sizing(border-box);
+  }
+}
+
+.navigator-filter-favorite {
+  .size(16px, @navigatorHeight);
+  background: url('../images/star.png') no-repeat center center;
 }
 
 .navigator-results {
diff --git a/sonar-server/src/main/webapp/stylesheets/variables.css b/sonar-server/src/main/webapp/stylesheets/variables.css
index cf549c1e46d..6fbfac8e716 100644
--- a/sonar-server/src/main/webapp/stylesheets/variables.css
+++ b/sonar-server/src/main/webapp/stylesheets/variables.css
@@ -1,3 +1,6 @@
 /*
+ * Fonts
+ */
+/*
  * Colors
  */
diff --git a/sonar-server/src/main/webapp/stylesheets/variables.less b/sonar-server/src/main/webapp/stylesheets/variables.less
index 80028758a9c..354f666ed0a 100644
--- a/sonar-server/src/main/webapp/stylesheets/variables.less
+++ b/sonar-server/src/main/webapp/stylesheets/variables.less
@@ -1,4 +1,12 @@
 /*
+ * Fonts
+ */
+
+@baseFontSize: 13px;
+
+
+
+/*
  * Colors
  */