SONAR-5168 Left column on search pages should be resizeable

diff --git a/sonar-server/src/main/coffee/coding-rules/app.coffee b/sonar-server/src/main/coffee/coding-rules/app.coffee
index e9bc853cd8af6a04aca88c5f98a63c63fc7682d5..9d1393c46b26c950fd8ba56df82cdcf0cc01d4da 100644 (file)
--- a/sonar-server/src/main/coffee/coding-rules/app.coffee
+++ b/sonar-server/src/main/coffee/coding-rules/app.coffee
@@ -150,6 +150,8 @@ requirejs [
           collection: new Backbone.Collection r.facets
         @layout.facetsRegion.show @codingRulesFacetsView
 
+      @layout.onResize()
+
 
 
   App.fetchFirstPage = (fromFacets = false) ->

diff --git a/sonar-server/src/main/coffee/coding-rules/layout.coffee b/sonar-server/src/main/coffee/coding-rules/layout.coffee
index 48b4e68444c78e7ca04325ecef0941f2fd89d037..4f243a478e8ff8fff5d51da479c46caf3bf97e74 100644 (file)
--- a/sonar-server/src/main/coffee/coding-rules/layout.coffee
+++ b/sonar-server/src/main/coffee/coding-rules/layout.coffee
@@ -10,6 +10,7 @@ define [
     className: 'navigator coding-rules-navigator'
     template: Templates['coding-rules-layout']
     spinner: '<i class="spinner"></i>'
+    storageKey: 'codingRulesResultsWidth'
 
 
     regions:
@@ -21,20 +22,40 @@ define [
       facetsRegion: '.navigator-facets'
 
 
+    ui:
+      side: '.navigator-side'
+      results: '.navigator-results'
+      details: '.navigator-details'
+      resizer: '.navigator-resizer'
+
+
     initialize: ->
       jQuery(window).on 'resize', => @onResize()
 
+      @isResize = false
+      jQuery('body').on 'mousemove', (e) => @processResize(e)
+      jQuery('body').on 'mouseup', => @stopResize()
+
+
+    onRender: ->
+      @ui.resizer.on 'mousedown', (e) => @startResize(e)
+
+      resultsWidth = localStorage.getItem @storageKey
+      if resultsWidth
+        @$(@resultsRegion.el).width +resultsWidth
+        @ui.side.width +resultsWidth + 20
+
 
     onResize: ->
       footerEl = jQuery('#footer')
       footerHeight = footerEl.outerHeight true
 
-      resultsEl = jQuery('.navigator-results')
+      resultsEl = @ui.results
       resultsHeight = jQuery(window).height() - resultsEl.offset().top -
         parseInt(resultsEl.css('margin-bottom'), 10) - footerHeight
       resultsEl.height resultsHeight
 
-      detailsEl = jQuery('.navigator-details')
+      detailsEl = @ui.details
       detailsWidth = jQuery(window).width() - detailsEl.offset().left -
         parseInt(detailsEl.css('margin-right'), 10)
       detailsHeight = jQuery(window).height() - detailsEl.offset().top -
@@ -44,3 +65,25 @@ define [
 
     showSpinner: (region) ->
       @$(@[region].el).html @spinner
+
+
+    startResize: (e) ->
+      @isResize = true
+      @originalWidth = @ui.results.width()
+      @x = e.clientX
+      jQuery('html').attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false)
+
+
+    processResize: (e) ->
+      if @isResize
+        delta = e.clientX - @x
+        @$(@resultsRegion.el).width @originalWidth + delta
+        @ui.side.width @originalWidth + 20 + delta
+        localStorage.setItem @storageKey, @ui.results.width()
+        @onResize()
+
+
+    stopResize: ->
+      if @isResize
+        jQuery('html').attr('unselectable', 'off').css('user-select', 'all').off('selectstart')
+      @isResize = false

diff --git a/sonar-server/src/main/hbs/coding-rules/coding-rules-layout.hbs b/sonar-server/src/main/hbs/coding-rules/coding-rules-layout.hbs
index 4f23b5d282013f6c5da8c23e210cfc733df9ef3b..9180c4090ac4cc10eddb9c2c1928586948d64bb3 100644 (file)
--- a/sonar-server/src/main/hbs/coding-rules/coding-rules-layout.hbs
+++ b/sonar-server/src/main/hbs/coding-rules/coding-rules-layout.hbs
@@ -6,6 +6,7 @@
   <div class="navigator-side">
     <div class="navigator-actions"></div>
     <div class="navigator-results"></div>
+    <a class="navigator-resizer"><i class="icon-resizer"></i></a>
   </div>
   <div class="navigator-main">
     <div class="navigator-details"></div>

diff --git a/sonar-server/src/main/js/issues/app.js b/sonar-server/src/main/js/issues/app.js
index c23c65b698010e35966d46b5c244de207e75ed3f..26543828640e49d3c6d48c713aff80d5cf10fd9b 100644 (file)
--- a/sonar-server/src/main/js/issues/app.js
+++ b/sonar-server/src/main/js/issues/app.js
@@ -297,7 +297,7 @@ requirejs(
 
 
       NavigatorApp.addInitializer(function () {
-        var onResize = function() {
+        this.onResize = function() {
           var footerEl = jQuery('#footer'),
               footerHeight = footerEl.outerHeight(true);
 
@@ -313,11 +313,53 @@ requirejs(
                   parseInt(detailsEl.css('margin-bottom'), 10) - footerHeight;
           detailsEl.width(detailsWidth).height(detailsHeight);
         };
-        jQuery(window).on('resize', onResize);
-        onResize();
+        jQuery(window).on('resize', this.onResize);
+        this.onResize();
       });
 
 
+      NavigatorApp.addInitializer(function () {
+        var that = this;
+        jQuery('body')
+            .on('mousemove', function (e) { that.processResize(e); })
+            .on('mouseup', function (e) { that.stopResize(); });
+        jQuery('.navigator-resizer').on('mousedown', function (e) { that.startResize(e); });
+
+        var resultsWidth = localStorage.getItem('issuesResultsWidth');
+        if (resultsWidth) {
+          jQuery('.navigator-results').width(+resultsWidth);
+          jQuery('.navigator-side').width(+resultsWidth + 20);
+        }
+      });
+
+
+      NavigatorApp.startResize = function (e) {
+        this.isResize = true;
+        this.originalWidth = jQuery('.navigator-results').width();
+        this.x = e.clientX;
+        jQuery('html').attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
+      };
+
+
+      NavigatorApp.processResize = function (e) {
+        if (this.isResize) {
+          var delta = e.clientX - this.x;
+          jQuery('.navigator-results').width(this.originalWidth + delta);
+          jQuery('.navigator-side').width(this.originalWidth + 20 + delta);
+          localStorage.setItem('issuesResultsWidth', jQuery('.navigator-results').width());
+          this.onResize();
+        }
+      };
+
+
+      NavigatorApp.stopResize = function() {
+        if (this.isResize) {
+          jQuery('html').attr('unselectable', 'off').css('user-select', 'all').off('selectstart');
+        }
+        this.isResize = false;
+      };
+
+
       NavigatorApp.getQuery = function (withoutId) {
         var query = this.filterBarView.getQuery();
         if (!withoutId && this.favoriteFilter.id) {

diff --git a/sonar-server/src/main/less/icons.less b/sonar-server/src/main/less/icons.less
index 489f8c2fb61127b6cec54d0ccd3b1cfd7753413a..0042c5b31fef9defa9e74b108d4f070061115919 100644 (file)
--- a/sonar-server/src/main/less/icons.less
+++ b/sonar-server/src/main/less/icons.less
@@ -406,6 +406,11 @@ a[class^="icon-"], a[class*=" icon-"] {
   content: "\f016";
   font-size: @iconSmallFontSize;
 }
+.icon-resizer:before {
+  content: "\f142";
+  color: @darkGrey;
+  font-size: @iconFontSize;
+}
 
 
 /*

diff --git a/sonar-server/src/main/less/navigator/base.less b/sonar-server/src/main/less/navigator/base.less
index 1c020231c5f9f7330733ff4977ae77688744a024..ca6ded4c1e9125d300d97337421b795ba282a94e 100644 (file)
--- a/sonar-server/src/main/less/navigator/base.less
+++ b/sonar-server/src/main/less/navigator/base.less
@@ -33,9 +33,12 @@
 }
 
 .navigator-side {
+  position: relative;
   display: table-cell;
   vertical-align: top;
   width: @navigatorResultsWidth + 2 * @navigatorPadding;
+  min-width: 275px + 2 * @navigatorPadding;
+  max-width: 600px + 2 * @navigatorPadding;
 }
 
 .navigator-main {
@@ -51,22 +54,33 @@
 }
 
 .navigator-results {
+  position: relative;
+  z-index: 2;
   width: @navigatorResultsWidth;
+  min-width: 275px;
+  max-width: 600px;
   margin: @navigatorPadding;
   .box-sizing(border-box);
 }
 
 .navigator-actions {
-  .clearfix;
-  width: @navigatorResultsWidth;
+  position: relative;
+  z-index: 4;
   margin: 0 @navigatorPadding @navigatorPadding;
   border: 1px solid @navigatorBorderLightColor;
   .box-sizing(border-box);
+  .clearfix;
 }
 
 .navigator-details {
   position: relative;
-  margin: 0 @navigatorPadding @navigatorPadding 0;
+  margin: 0 @navigatorPadding @navigatorPadding @navigatorPadding;
+}
+
+.navigator-resizer {
+  position: absolute;
+  top: 50%; right: -1px;
+  cursor: col-resize;
 }
 
 .navigator-notes {
@@ -330,12 +344,9 @@
     }
 
     &:before {
-      position: fixed;
+      position: absolute;
       z-index: 3;
-      top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorStatusHeight;
-      bottom: 0;
-      left: 0;
-      width: @navigatorResultsWidth - 1px;
+      top: 0; bottom: 0; left: 0; right: 0;
     }
   }
 }
@@ -414,18 +425,18 @@
   .trans;
 
   &:hover {
-    background-color: @navigatorBarBackground;
+    background-color: @navigatorHover;
   }
 }
 
 .navigator-actions-order-choices {
-  .navigator-element;
-  top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight + @navigatorStatusHeight;
-  left: 0;
+  position: absolute;
+  top: 100%;
+  left: -1px;
   min-width: @navigatorResultsWidth / 2;
   background-color: #fff;
-  border-bottom: 1px solid @navigatorBorderLightColor;
-  border-right: 1px solid @navigatorBorderLightColor;
+  border: 1px solid @navigatorBorderLightColor;
+  box-shadow: @defaultShadow;
   overflow: hidden;
   display: none;
 
@@ -448,6 +459,7 @@
 
 .navigator-actions-total {
   float: right;
+  height: @navigatorStatusHeight;
   line-height: @navigatorStatusHeight;
 }
 

diff --git a/sonar-server/src/main/less/navigator/filters.less b/sonar-server/src/main/less/navigator/filters.less
index d996b299bf5ef7df126b87fe6ecb38afaeadd26c..47912285bc17759788fa9a94c48ddb90d1f8f560 100644 (file)
--- a/sonar-server/src/main/less/navigator/filters.less
+++ b/sonar-server/src/main/less/navigator/filters.less
@@ -171,7 +171,7 @@
   min-width: 100px;
   border: 1px solid @darkGrey;
   background: #fff;
-  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
+  box-shadow: @defaultShadow;
   font-size: @baseFontSize;
   transition: opacity 0.3s ease;
 

diff --git a/sonar-server/src/main/less/ui.less b/sonar-server/src/main/less/ui.less
index 6627c09b25be2c903e65bcd9827c7daf8e350870..47468a8a12a1db5af4fcf2b9162b3714a7f529f6 100644 (file)
--- a/sonar-server/src/main/less/ui.less
+++ b/sonar-server/src/main/less/ui.less
@@ -126,4 +126,4 @@ input[type=button] {
     margin: 0 8px;
     font-size: @smallFontSize;
   }
-}
+}
\ No newline at end of file

diff --git a/sonar-server/src/main/less/variables.less b/sonar-server/src/main/less/variables.less
index f9e3671e84ce10fc6313e776337ee9297fcd33ad..b1effcb941552e30e67d295856f0931fb387b9d1 100644 (file)
--- a/sonar-server/src/main/less/variables.less
+++ b/sonar-server/src/main/less/variables.less
@@ -60,6 +60,14 @@
 
 
 
+/*
+ * Shadows
+ */
+
+@defaultShadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
+
+
+
 /*
  * Transitions
  */

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb
index db0fd733ff37759702003a2e44f721e73af33876..7e10afb799bbbb324ce9a4fcba1021da2baed5d4 100644 (file)
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/search.html.erb
@@ -10,6 +10,7 @@
     <div class="navigator-side">
       <div class="navigator-actions"></div>
       <div class="navigator-results"></div>
+      <a class="navigator-resizer"><i class="icon-resizer"></i></a>
     </div>
     <div class="navigator-main">
       <div class="navigator-notes"><%= message('issue_filter.max_results_reached', :params => 10000) -%></div>

diff --git a/sonar-server/src/main/webapp/fonts/sonar.eot b/sonar-server/src/main/webapp/fonts/sonar.eot
index de3c07b67e43591e3648dbeaa43f9e36cf36062c..c1f7f3604c07da2932998b35c42eb8d41f902c47 100755 (executable)
Binary files a/sonar-server/src/main/webapp/fonts/sonar.eot and b/sonar-server/src/main/webapp/fonts/sonar.eot differ

diff --git a/sonar-server/src/main/webapp/fonts/sonar.svg b/sonar-server/src/main/webapp/fonts/sonar.svg
index e78f7de92adb792de1a9b927fa6ed4d9ef5760c3..a42e8c967205bbdc18f6a9336fd76d86d41fd0e5 100755 (executable)
--- a/sonar-server/src/main/webapp/fonts/sonar.svg
+++ b/sonar-server/src/main/webapp/fonts/sonar.svg
@@ -61,5 +61,6 @@
 <glyph unicode="&#xf122;" d="M365.714 341.714v-40q0-24-22.286-33.714-7.429-2.857-14.286-2.857-15.429 0-25.714 10.857l-292.571 292.571q-10.857 10.857-10.857 25.714t10.857 25.714l292.571 292.571q16.571 17.714 40 8 22.286-9.714 22.286-33.714v-39.429l-226.857-227.429q-10.857-10.857-10.857-25.714t10.857-25.714zM1024 320q0-33.143-9.714-76.286t-22-78.857-27.429-71.429-23.143-51.714l-11.429-22.857q-4.571-9.714-16-9.714-3.429 0-5.143 0.571-14.286 4.571-13.143 19.429 24.571 228.571-60.571 322.857-36.571 40.571-97.429 63.143t-152.857 30v-143.429q0-24-22.286-33.714-7.429-2.857-14.286-2.857-15.429 0-25.714 10.857l-292.571 292.571q-10.857 10.857-10.857 25.714t10.857 25.714l292.571 292.571q16.571 17.714 40 8 22.286-9.714 22.286-33.714v-149.714q234.857-16 342.286-126.286 96.571-98.857 96.571-290.857z" />
 <glyph unicode="&#xf126;" d="M164.571 118.857q0 22.857-16 38.857t-38.857 16-38.857-16-16-38.857 16-38.857 38.857-16 38.857 16 16 38.857zM164.571 777.143q0 22.857-16 38.857t-38.857 16-38.857-16-16-38.857 16-38.857 38.857-16 38.857 16 16 38.857zM530.286 704q0 22.857-16 38.857t-38.857 16-38.857-16-16-38.857 16-38.857 38.857-16 38.857 16 16 38.857zM585.143 704q0-29.714-14.857-55.143t-40-39.714q-1.143-164-129.143-236.571-38.857-21.714-116-46.286-73.143-22.857-96.857-40.571t-23.714-57.143v-14.857q25.143-14.286 40-39.714t14.857-55.143q0-45.714-32-77.714t-77.714-32-77.714 32-32 77.714q0 29.714 14.857 55.143t40 39.714v468.571q-25.143 14.286-40 39.714t-14.857 55.143q0 45.714 32 77.714t77.714 32 77.714-32 32-77.714q0-29.714-14.857-55.143t-40-39.714v-284q30.857 14.857 88 32.571 31.429 9.714 50 16.857t40.286 17.714 33.714 22.571 23.143 29.143 16 39.714 4.857 52.286q-25.143 14.286-40 39.714t-14.857 55.143q0 45.714 32 77.714t77.714 32 77.714-32 32-77.714z" horiz-adv-x="585" />
 <glyph unicode="&#xf127;" d="M250.857 233.714l-146.286-146.286q-5.714-5.143-13.143-5.143-6.857 0-13.143 5.143-5.143 5.714-5.143 13.143t5.143 13.143l146.286 146.286q5.714 5.143 13.143 5.143t13.143-5.143q5.143-5.714 5.143-13.143t-5.143-13.143zM347.429 210.286v-182.857q0-8-5.143-13.143t-13.143-5.143-13.143 5.143-5.143 13.143v182.857q0 8 5.143 13.143t13.143 5.143 13.143-5.143 5.143-13.143zM219.429 338.286q0-8-5.143-13.143t-13.143-5.143h-182.857q-8 0-13.143 5.143t-5.143 13.143 5.143 13.143 13.143 5.143h182.857q8 0 13.143-5.143t5.143-13.143zM941.714 265.143q0-68.571-48.571-116l-84-83.429q-47.429-47.429-116-47.429-69.143 0-116.571 48.571l-190.857 191.429q-12 12-24 32l136.571 10.286 156-156.571q15.429-15.429 38.857-15.714t38.857 15.143l84 83.429q16 16 16 38.286 0 22.857-16 38.857l-156.571 157.143 10.286 136.571q20-12 32-24l192-192q48-49.143 48-116.571zM589.143 678.857l-136.571-10.286-156 156.571q-16 16-38.857 16-22.286 0-38.857-15.429l-84-83.429q-16-16-16-38.286 0-22.857 16-38.857l156.571-156.571-10.286-137.143q-20 12-32 24l-192 192q-48 49.143-48 116.571 0 68.571 48.571 116l84 83.429q47.429 47.429 116 47.429 69.143 0 116.571-48.571l190.857-191.429q12-12 24-32zM950.857 630.857q0-8-5.143-13.143t-13.143-5.143h-182.857q-8 0-13.143 5.143t-5.143 13.143 5.143 13.143 13.143 5.143h182.857q8 0 13.143-5.143t5.143-13.143zM640 941.714v-182.857q0-8-5.143-13.143t-13.143-5.143-13.143 5.143-5.143 13.143v182.857q0 8 5.143 13.143t13.143 5.143 13.143-5.143 5.143-13.143zM872.571 855.429l-146.286-146.286q-6.286-5.143-13.143-5.143t-13.143 5.143q-5.143 5.714-5.143 13.143t5.143 13.143l146.286 146.286q5.714 5.143 13.143 5.143t13.143-5.143q5.143-5.714 5.143-13.143t-5.143-13.143z" horiz-adv-x="951" />
+<glyph unicode="&#xf142;" d="M219.429 246.857v-109.714q0-22.857-16-38.857t-38.857-16h-109.714q-22.857 0-38.857 16t-16 38.857v109.714q0 22.857 16 38.857t38.857 16h109.714q22.857 0 38.857-16t16-38.857zM219.429 539.429v-109.714q0-22.857-16-38.857t-38.857-16h-109.714q-22.857 0-38.857 16t-16 38.857v109.714q0 22.857 16 38.857t38.857 16h109.714q22.857 0 38.857-16t16-38.857zM219.429 832v-109.714q0-22.857-16-38.857t-38.857-16h-109.714q-22.857 0-38.857 16t-16 38.857v109.714q0 22.857 16 38.857t38.857 16h109.714q22.857 0 38.857-16t16-38.857z" horiz-adv-x="219" />
 <glyph unicode="&#xf188;" d="M932.571 411.429q0-14.857-10.857-25.714t-25.714-10.857h-128q0-97.714-38.286-165.714l118.857-119.429q10.857-10.857 10.857-25.714t-10.857-25.714q-10.286-10.857-25.714-10.857t-25.714 10.857l-113.143 112.571q-2.857-2.857-8.571-7.429t-24-16.286-37.143-20.857-46.857-16.571-55.429-7.429v512h-73.143v-512q-29.143 0-58 7.714t-49.714 18.857-37.714 22.286-24.857 18.571l-8.571 8-104.571-118.286q-11.429-12-27.429-12-13.714 0-24.571 9.143-10.857 10.286-11.714 25.429t8.857 26.571l115.429 129.714q-33.143 65.143-33.143 156.571h-128q-14.857 0-25.714 10.857t-10.857 25.714 10.857 25.714 25.714 10.857h128v168l-98.857 98.857q-10.857 10.857-10.857 25.714t10.857 25.714 25.714 10.857 25.714-10.857l98.857-98.857h482.286l98.857 98.857q10.857 10.857 25.714 10.857t25.714-10.857 10.857-25.714-10.857-25.714l-98.857-98.857v-168h128q14.857 0 25.714-10.857t10.857-25.714zM658.286 740.571h-365.714q0 76 53.429 129.429t129.429 53.429 129.429-53.429 53.429-129.429z" horiz-adv-x="951" />
 </font></defs></svg>
\ No newline at end of file

diff --git a/sonar-server/src/main/webapp/fonts/sonar.ttf b/sonar-server/src/main/webapp/fonts/sonar.ttf
index 32a776f885fa99d53b1ee4dd72a0d59c04e45f9d..d53c071c5f3537fae1ff7f34de0ac2ef905afda1 100755 (executable)
Binary files a/sonar-server/src/main/webapp/fonts/sonar.ttf and b/sonar-server/src/main/webapp/fonts/sonar.ttf differ

diff --git a/sonar-server/src/main/webapp/fonts/sonar.woff b/sonar-server/src/main/webapp/fonts/sonar.woff
index d8d6215fd36d524acfb2202da8407f585cb650b1..5d296e17d1a5c55a8a56a2c6fe928624260faded 100755 (executable)
Binary files a/sonar-server/src/main/webapp/fonts/sonar.woff and b/sonar-server/src/main/webapp/fonts/sonar.woff differ