SONAR-6215 make it possible to resize the workspace window

4 files changed, 56 insertions, 25 deletions

diff --git a/server/sonar-web/src/main/hbs/workspace/workspace-viewer-header.hbs b/server/sonar-web/src/main/hbs/workspace/workspace-viewer-header.hbs
index e601ad66837..c6546fa7fd6 100644
--- a/server/sonar-web/src/main/hbs/workspace/workspace-viewer-header.hbs
+++ b/server/sonar-web/src/main/hbs/workspace/workspace-viewer-header.hbs
@@ -1,13 +1,15 @@
 <h6 class="workspace-viewer-name">{{qualifierIcon q}}&nbsp;{{name}}</h6>
 
+<div class="workspace-viewer-resize js-resize"></div>
+
 <div class="workspace-viewer-actions">
   <a href="#" class="js-minimize icon-minimize spacer-right"
      title="{{t 'workspace.minimize'}}" data-placement="bottom" data-toggle="tooltip"></a>
 
-  <a href="#" class="js-full-screen icon-bigger-size workspace-for-normal-size spacer-right"
+  <a href="#" class="js-full-screen icon-bigger-size spacer-right"
      title="{{t 'workspace.full_window'}}" data-placement="bottom" data-toggle="tooltip"></a>
 
-  <a href="#" class="js-normal-size icon-smaller-size workspace-for-full-screen spacer-right"
+  <a href="#" class="js-normal-size icon-smaller-size spacer-right"
      title="{{t 'workspace.normal_size'}}" data-placement="bottom" data-toggle="tooltip"></a>
 
   <a href="#" class="js-close icon-close"
diff --git a/server/sonar-web/src/main/js/workspace/views/viewer-header-view.js b/server/sonar-web/src/main/js/workspace/views/viewer-header-view.js
index 1afebbdbc83..4f15baf29b2 100644
--- a/server/sonar-web/src/main/js/workspace/views/viewer-header-view.js
+++ b/server/sonar-web/src/main/js/workspace/views/viewer-header-view.js
@@ -31,6 +31,8 @@ define([
     },
 
     events: {
+      'mousedown .js-resize': 'onResizeClick',
+
       'click .js-minimize': 'onMinimizeClick',
       'click .js-full-screen': 'onFullScreenClick',
       'click .js-normal-size': 'onNormalSizeClick',
@@ -39,6 +41,7 @@ define([
 
     onRender: function () {
       this.$('[data-toggle="tooltip"]').tooltip({ container: 'body' });
+      this.$('.js-normal-size').addClass('hidden');
     },
 
     onClose: function () {
@@ -46,6 +49,11 @@ define([
       $('.tooltip').remove();
     },
 
+    onResizeClick: function (e) {
+      e.preventDefault();
+      this.startResizing(e);
+    },
+
     onMinimizeClick: function (e) {
       e.preventDefault();
       this.trigger('viewerMinimize');
@@ -66,12 +74,40 @@ define([
       this.trigger('viewerClose');
     },
 
+    startResizing: function (e) {
+      this.initialResizePosition = e.clientY;
+      this.initialResizeHeight = $('.workspace-viewer-container').height();
+      var processResizing = _.bind(this.processResizing, this),
+          stopResizing = _.bind(this.stopResizing, this);
+      $('body')
+          .on('mousemove.workspace', processResizing)
+          .on('mouseup.workspace', stopResizing);
+    },
+
+    processResizing: function (e) {
+      var currentResizePosition = e.clientY,
+          resizeDelta = this.initialResizePosition - currentResizePosition,
+          height = this.initialResizeHeight + resizeDelta;
+      $('.workspace-viewer-container').height(height);
+    },
+
+    stopResizing: function () {
+      $('body')
+          .off('mousemove.workspace')
+          .off('mouseup.workspace');
+    },
+
     toFullScreen: function () {
-      this.$el.closest('.workspace-viewer').addClass('workspace-viewer-full-screen');
+      this.$('.js-normal-size').removeClass('hidden');
+      this.$('.js-full-screen').addClass('hidden');
+      this.initialResizeHeight = $('.workspace-viewer-container').height();
+      $('.workspace-viewer-container').height('9999px');
     },
 
     toNormalSize: function () {
-      this.$el.closest('.workspace-viewer').removeClass('workspace-viewer-full-screen');
+      this.$('.js-normal-size').addClass('hidden');
+      this.$('.js-full-screen').removeClass('hidden');
+      $('.workspace-viewer-container').height(this.initialResizeHeight);
     }
   });
 
diff --git a/server/sonar-web/src/main/less/components/workspace.less b/server/sonar-web/src/main/less/components/workspace.less
index 8a45ac2d09c..af43195daf6 100644
--- a/server/sonar-web/src/main/less/components/workspace.less
+++ b/server/sonar-web/src/main/less/components/workspace.less
@@ -56,22 +56,9 @@
   box-shadow: 0 -6px 12px rgba(0, 0, 0, .175);
 }
 
-.workspace-viewer-full-screen {
-  .workspace-viewer-container {
-    height: ~"calc(100vh - 30px - @{navbarGlobalHeight} - 10px)";
-  }
-
-  .workspace-for-full-screen {
-    display: inline;
-  }
-
-  .workspace-for-normal-size {
-    display: none;
-  }
-}
-
 .workspace-viewer-header {
   @topPadding: (30px - @formControlHeight) / 2;
+  position: relative;
   height: 30px;
   padding: @topPadding 10px;
   .box-sizing(border-box);
@@ -87,6 +74,16 @@
   font-weight: 300;
 }
 
+.workspace-viewer-resize {
+  position: absolute;
+  top: 3px;
+  left: 50%;
+  .size(30px, 5px);
+  margin-left: -15px;
+  background: no-repeat 0 0 url('data:image/svg+xml;utf8,<svg width="30px" height="5px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><g id="Layer1"><g transform="matrix(1,0,0,1,0,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,4,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,8,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,12,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,16,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,20,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,24,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,28,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,0,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,4,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,8,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,12,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,16,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,20,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,24,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,28,3)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,0,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,4,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,8,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,12,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,16,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,20,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,24,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g><g transform="matrix(1,0,0,1,28,0)"><rect x="0" y="0" width="2" height="2" style="fill:#777;fill-opacity:0.5;"/></g></g></g></svg>');
+  cursor: ns-resize;
+}
+
 .workspace-viewer-actions {
   float: right;
   line-height: @formControlHeight;
@@ -96,16 +93,14 @@
 
 .workspace-viewer-container {
   height: ~"calc(40vh - 30px)";
+  min-height: 100px;
+  max-height: ~"calc(95vh - 30px)";
   padding: 5px 10px;
   overflow-y: scroll;
   overflow-x: auto;
   .box-sizing(border-box);
 }
 
-.workspace-for-full-screen {
-  display: none;
-}
-
 
 // Misc
 .with-workspace {
diff --git a/server/sonar-web/src/test/js/workspace.js b/server/sonar-web/src/test/js/workspace.js
index b27862533a8..35a9ef58026 100644
--- a/server/sonar-web/src/test/js/workspace.js
+++ b/server/sonar-web/src/test/js/workspace.js
@@ -233,7 +233,7 @@ casper.test.begin(testName('Minimize'), 2, function (test) {
 });
 
 
-casper.test.begin(testName('Full Screen'), 8, function (test) {
+casper.test.begin(testName('Full Screen'), 6, function (test) {
   casper
       .start(lib.buildUrl('source-viewer'), function () {
         lib.setDefaultViewport();
@@ -270,12 +270,10 @@ casper.test.begin(testName('Full Screen'), 8, function (test) {
         test.assertNotVisible('.workspace-viewer .js-normal-size');
 
         casper.click('.workspace-viewer .js-full-screen');
-        test.assertExists('.workspace-viewer.workspace-viewer-full-screen');
         test.assertNotVisible('.workspace-viewer .js-full-screen');
         test.assertVisible('.workspace-viewer .js-normal-size');
 
         casper.click('.workspace-viewer .js-normal-size');
-        test.assertDoesntExist('.workspace-viewer.workspace-viewer-full-screen');
         test.assertVisible('.workspace-viewer .js-full-screen');
         test.assertNotVisible('.workspace-viewer .js-normal-size');
       })