MMF-661 rework search (#2030)

5 files changed, 106 insertions, 20 deletions

diff --git a/server/sonar-web/src/main/less/components/menu.less b/server/sonar-web/src/main/less/components/menu.less
index 08ff56e2fc3..b8b7a6d7161 100644
--- a/server/sonar-web/src/main/less/components/menu.less
+++ b/server/sonar-web/src/main/less/components/menu.less
@@ -76,9 +76,27 @@
       background-color: @barBackgroundColor;
     }
   }
+
+  .menu-footer {
+    display: block;
+    padding: 8px 16px 4px;
+    white-space: nowrap;
+
+    & > a {
+      display: inline;
+      padding: 0;
+      border-bottom: 1px solid @darkGrey;
+      color: @secondFontColor;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
 }
 
 .menu-search {
+  position: relative;
   padding: 4px 16px 0;
 
   .search-box-input { font-size: @smallFontSize; }
@@ -86,6 +104,16 @@
   .search-box-submit { vertical-align: baseline; }
 }
 
+.menu-search-full-width {
+  display: flex;
+  align-items: center;
+
+  .search-box-input {
+    flex-grow: 1;
+    width: auto;
+  }
+}
+
 .menu-search ~ .menu {
   > li > a {
     &:hover, &:focus {
diff --git a/server/sonar-web/src/main/less/components/navbar.less b/server/sonar-web/src/main/less/components/navbar.less
index 605f36ab152..b2c03da21f6 100644
--- a/server/sonar-web/src/main/less/components/navbar.less
+++ b/server/sonar-web/src/main/less/components/navbar.less
@@ -93,6 +93,16 @@
 .navbar-nav > li > a {
   padding: @navbarTopPadding 10px;
   line-height: @navbarLineHeight;
+
+  &.navbar-avatar {
+    margin-right: 7px;
+    padding: 3px;
+  }
+
+  &.navbar-help {
+    line-height: 16px;
+    padding: 7px;
+  }
 }
 
 .navbar-nav > li.navbar-more > a {
@@ -124,21 +134,34 @@
 
 .navbar-search {
   position: relative;
-  width: 480px;
-  box-sizing: border-box;
-  transition: width 0.2s ease;
+  padding-right: 3px;
 }
 
 .navbar-search-input {
-  width: 100%;
-  padding: 0 20px 0 40px !important;
-  border: none !important;
+  width: 280px;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  padding-left: 26px !important;
 }
 
-.navbar-search-icon {
+.navbar-search-input-hint {
   position: absolute;
   top: 4px;
-  left: 20px;
+  right: 30px;
+  line-height: @formControlHeight;
+  font-size: 12px;
+  color: @secondFontColor;
+
+  &.is-shifted {
+    z-index: @dropdown-menu-z-index + 1;
+    top: 32px;
+  }
+}
+
+.navbar-search-icon {
+  position: relative;
+  width: 16px;
+  margin-right: -20px;
   color: @secondFontColor;
 
   &:before {
@@ -146,19 +169,44 @@
   }
 }
 
-.navbar-search-extra {
+.navbar-search-item-icons {
+  position: relative;
   display: inline-block;
-  width: 90px;
-  margin-right: 10px;
-  text-align: right;
-}
+  vertical-align: middle;
+  width: 16px;
+  height: 16px;
+
+  > * {
+    position: absolute;
+    z-index: 5;
+    top: 0;
+    left: 0;
+  }
 
-.navbar-search-subtitle {
-  position: absolute;
-  top: 5px;
-  right: 40px;
+  > .icon-star,
+  > .icon-clock {
+    z-index: 6;
+    top: -5px;
+    left: -5px;
+  }
 }
 
+.navbar-search-shortcut-hint {
+  margin-top: 5px;
+  padding: 5px 10px;
+  border-top: 1px solid #e6e6e6;
+  background-color: #f3f3f3;
+  color: #777;
+  font-size: 11px;
+
+  .shortcut-button {
+    min-width: 16px;
+    height: 16px;
+    line-height: 12px;
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+}
 
 .navbar-global {
   top: 0;
@@ -293,6 +341,9 @@
 
 .global-navbar-search-dropdown {
   max-height: 80vh;
+  width: 440px;
+  padding: 0;
   overflow-y: auto;
   overflow-x: hidden;
+  box-shadow: @defaultShadow;
 }
diff --git a/server/sonar-web/src/main/less/components/tooltips.less b/server/sonar-web/src/main/less/components/tooltips.less
index a0a073940c5..ac14eefb361 100644
--- a/server/sonar-web/src/main/less/components/tooltips.less
+++ b/server/sonar-web/src/main/less/components/tooltips.less
@@ -78,6 +78,7 @@
   border-radius: 4px;
   letter-spacing: 0.04em;
   overflow: hidden;
+  word-break: break-word;
 
   .alert {
     margin-bottom: 5px /* align with side padding */ ;
diff --git a/server/sonar-web/src/main/less/init/icons.less b/server/sonar-web/src/main/less/init/icons.less
index f27c923ff21..e0546239f38 100644
--- a/server/sonar-web/src/main/less/init/icons.less
+++ b/server/sonar-web/src/main/less/init/icons.less
@@ -178,14 +178,14 @@ a[class^="icon-"], a[class*=" icon-"] {
 .icon-qualifier-dir,
 .icon-qualifier-pac { background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M14%2012.286V5.703c0-.198-.058-.36-.195-.5S13.512%205%2013.315%205H6.704c-.196%200-.36-.075-.5-.214-.136-.14-.203-.312-.203-.51v-.57c0-.2-.07-.363-.207-.502C5.655%203.064%205.487%203%205.29%203H2.707c-.196%200-.363.065-.5.204-.137.14-.206.302-.206.5v8.582c0%20.2.07.367.206.506.137.14.304.208.5.208h10.61c.196%200%20.352-.07.49-.208.137-.14.194-.307.194-.506zm1-6.598v6.65c0%20.458-.152.83-.475%201.16-.324.326-.7.502-1.15.502H2.647c-.452%200-.84-.175-1.162-.503-.324-.328-.486-.7-.486-1.158V3.654c0-.457.162-.842.486-1.17C1.81%202.158%202.196%202%202.648%202h2.7c.45%200%20.84.157%201.164.485.324.328.488.714.488%201.17V4h6.373c.452%200%20.83.174%201.152.5.323.33.475.73.475%201.187z%22%20fill%3D%22%23F90%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E'); }
 .icon-qualifier-trk,
-.icon-qualifier-brc,
 .icon-qualifier-dev_prj { background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M14.985%2013.988L1%2014.005%201.02%205h13.966v8.988zM1.998%205.995l.006%207.02L14.022%2013%2014%206.004l-12.002-.01zM3%204.5V4h9.996l.004.5h1l-.005-1.497-11.98.003L2%204.5zm1-2v-.504h8.002L12%202.5h1l-.004-1.495H3.003L3%202.5z%22%20fill%3D%22%232D88C0%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E'); }
+.icon-qualifier-brc { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M16%2016H6v-6h10v6zm-9-1h8v-4H7v4zM7%209h8v1H7zM8%208h6v1H8z%22%20fill%3D%22%232D88C0%22%2F%3E%3Cpath%20d%3D%22M5%2012H1V5h12v2h1V4H0v9h5zM3%201h8v.5h1V0H2v1.5h1zM2%203h10v.5h1V2H1v1.5h1z%22%20fill%3D%22%232D88C0%22%2F%3E%3C%2Fsvg%3E'); }
 .icon-qualifier-cla,
 .icon-qualifier-uts { background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M3%2014h10V6H9V2H3zm7.012-9h3.008c-.012-.674-.78-1.258-1.27-1.752-.488-.495-.973-1.243-1.75-1.24v2.96zM14%204.995V15H2V1l7.997.02c1.013-.03%201.57.893%202.239%201.555.667.663%201.75%201.47%201.763%202.42z%22%20fill%3D%22%232D88C0%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20d%3D%22M7%208l-3%202.5L7%2013zM8%2013l3-2.5L8%208z%22%20fill%3D%22%232D88C0%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E'); }
 .icon-qualifier-fil { background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M3%2014h10V6H9V2H3zm7.012-9h3.008c-.012-.674-.78-1.258-1.27-1.752-.488-.495-.973-1.243-1.75-1.24v2.96zM14%204.995V15H2V1l7.997.02c1.013-.03%201.57.893%202.239%201.555.667.663%201.75%201.47%201.763%202.42z%22%20fill%3D%22%232D88C0%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20fill%3D%22%232D88C0%22%20d%3D%22M4%2011h8v1H4zM4%209h8v1H4z%22%2F%3E%3C%2Fsvg%3E'); }
 .icon-qualifier-lib { background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M1%2013h4V3H1zm3-1H2v-2h2v2zM2%204h2v4H2zM6%2013h4V3H6zm3-1H7v-2h2v2zM7%204h2v4H7zM11%2013h4V3h-4zm3-1h-2v-2h2v2zm-2-8h2v4h-2z%22%20fill%3D%22%232D88C0%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E'); }
-.icon-qualifier-vw,
-.icon-qualifier-svw { background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M1.016%2014.97V1.015H14.97V14.97H1.015zm1-1H13.97V2.015H2.015V13.97z%22%20fill%3D%22%232D88C0%22%2F%3E%3Cpath%20d%3D%22M3.006%207V3.006H7V7H3.006zm1-1H6V4.006H4.006V6zM9%207V3.015h3.985V7H9zm1-1h1.985V4.015H10V6zM3.004%2012.996V9H7v3.996H3.004zm1-1H6V10H4.004v1.996zM9%2012.997V9h3.997v3.997H9zm1-1h1.997V10H10v1.997z%22%20fill%3D%22%232D88C0%22%2F%3E%3C%2Fsvg%3E'); }
+.icon-qualifier-vw { background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M1.016%2014.97V1.015H14.97V14.97H1.015zm1-1H13.97V2.015H2.015V13.97z%22%20fill%3D%22%232D88C0%22%2F%3E%3Cpath%20d%3D%22M3.006%207V3.006H7V7H3.006zm1-1H6V4.006H4.006V6zM9%207V3.015h3.985V7H9zm1-1h1.985V4.015H10V6zM3.004%2012.996V9H7v3.996H3.004zm1-1H6V10H4.004v1.996zM9%2012.997V9h3.997v3.997H9zm1-1h1.997V10H10v1.997z%22%20fill%3D%22%232D88C0%22%2F%3E%3C%2Fsvg%3E'); }
+.icon-qualifier-svw { background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M13%207.2V1H1v12h7v1H0V0h14v7.2%22%20fill%3D%22%232D88C0%22%2F%3E%3Cpath%20d%3D%22M2%206V2h4v4H2zm1-1h2V3H3v2zm5%201V2h4v4H8zm1-1h2V3H9v2zm-7%207V8h4v4H2zm1-1h2V9H3v2zM16%2016H7V7h9v9zm-8-1h7V8H8v7z%22%20fill%3D%22%232D88C0%22%2F%3E%3Cpath%20d%3D%22M9%209h2v2H9zM12%209h2v2h-2zM9%2012h2v2H9zM12%2012h2v2h-2z%22%20fill%3D%22%232D88C0%22%2F%3E%3C%2Fsvg%3E'); }
 .icon-qualifier-dev { background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M7.974%208.02c-.938%200-1.82-.36-2.482-1.017-.663-.655-1.028-1.527-1.028-2.455%200-.927.365-1.8%201.028-2.455.663-.656%201.544-1.017%202.482-1.017.937%200%201.82.36%202.482%201.017.662.656%201.027%201.528%201.027%202.455%200%20.928-.365%201.8-1.027%202.455C9.793%207.66%208.91%208.02%207.974%208.02zm0-5.778c-1.286%200-2.332%201.034-2.332%202.306s1.046%202.307%202.332%202.307c1.285%200%202.332-1.035%202.332-2.307S9.258%202.242%207.974%202.242zm3.534%206.418c.127.016.243.045.348.086.17.066.302.146.406.246.132.124.253.282.36.47.126.218.226.442.3.668.08.253.15.535.206.838.056.313.095.604.113.867.02.28.03.57.03.862%200%20.532-.174.758-.306.882-.142.132-.397.31-.973.31H3.948c-.233%200-.437-.03-.606-.09-.14-.05-.26-.123-.366-.222-.13-.123-.306-.35-.306-.88%200-.294.01-.584.03-.863.018-.263.056-.554.112-.867.055-.303.125-.585.207-.838.073-.226.173-.45.298-.667.108-.19.23-.347.36-.47.106-.1.238-.18.407-.247.105-.04.22-.07.348-.086.202.13.432.277.683.435.342.217.756.4%201.265.564.523.166%201.06.25%201.59.25.534%200%201.07-.084%201.592-.25.51-.164.923-.348%201.266-.565.25-.158.48-.304.682-.435zm-.244-1.18c-.055%200-.184.066-.387.196-.202.13-.43.276-.685.437-.255.16-.586.307-.994.437-.408.13-.818.196-1.23.196-.41%200-.82-.065-1.228-.196-.408-.13-.74-.276-.993-.437-.255-.16-.484-.306-.686-.437-.202-.13-.33-.196-.386-.196-.374%200-.716.06-1.026.183-.31.12-.572.283-.787.487-.213.203-.404.45-.57.737-.165.288-.297.584-.395.888-.098.303-.18.633-.244.988-.063.355-.106.685-.128.992-.02.306-.032.62-.032.942%200%20.73.224%201.304.672%201.726.448.42%201.043.632%201.785.632h8.044c.743%200%201.34-.21%201.787-.633.447-.42.67-.996.67-1.725%200-.32-.01-.635-.03-.942-.022-.307-.065-.637-.13-.992-.064-.355-.146-.685-.244-.988-.098-.304-.23-.6-.395-.888-.166-.288-.356-.534-.57-.737-.216-.204-.478-.366-.788-.487-.31-.122-.652-.183-1.026-.183z%22%20fill%3D%22%232D88C0%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E'); }
 
 
diff --git a/server/sonar-web/src/main/less/init/type.less b/server/sonar-web/src/main/less/init/type.less
index 7e44c097375..75fe1839413 100644
--- a/server/sonar-web/src/main/less/init/type.less
+++ b/server/sonar-web/src/main/less/init/type.less
@@ -68,6 +68,11 @@ sub { vertical-align: text-bottom; }
 em     { font-style: italic; }
 strong { font-weight: 600; }
 
+mark {
+  background: none;
+  font-weight: bold;
+}
+
 .emphasised-measure {
   font-size: 24px;
   font-weight: 300;
@@ -139,6 +144,7 @@ small,
 
 .text-emphasis-variant(@color) { color: @color; }
 .text-muted   { .text-emphasis-variant(@secondFontColor); }
+.text-muted-2 { .text-emphasis-variant(@middleGrey); }
 .text-danger  { .text-emphasis-variant(@red); }
 .text-warning { .text-emphasis-variant(@orange); }
 .text-info    { .text-emphasis-variant(@blue); }