SONAR-4572 SONAR-5431 Fluid layout of the component viewer

diff --git a/server/sonar-web/src/main/coffee/coding-rules/app.coffee b/server/sonar-web/src/main/coffee/coding-rules/app.coffee
index 103e12af9575c5097a1ebf75f7fa4613d6492030..022146843e04fa1401ecf8b77c599ebd14786f94 100644 (file)
--- a/server/sonar-web/src/main/coffee/coding-rules/app.coffee
+++ b/server/sonar-web/src/main/coffee/coding-rules/app.coffee
@@ -457,7 +457,6 @@ requirejs [
       property: 'rule_key'
       type: ReadOnlyFilterView
       enabled: false
-      inactive: true
       optional: true
 
 

diff --git a/server/sonar-web/src/main/coffee/component-viewer/app.coffee b/server/sonar-web/src/main/coffee/component-viewer/app.coffee
index f398d217ba9a07fe8cbae27b190ce48b7092ff86..60dc67f9838b61a34e972c40baccda62136a294a 100644 (file)
--- a/server/sonar-web/src/main/coffee/component-viewer/app.coffee
+++ b/server/sonar-web/src/main/coffee/component-viewer/app.coffee
@@ -28,19 +28,30 @@ requirejs [
   $ = jQuery
   API_ISSUE = "#{baseUrl}/api/issues/show"
   App = new Marionette.Application()
+  el = $('#body')
 
 
   App.addRegions
     viewerRegion: '#component-viewer'
 
 
+  App.resizeContainer = ->
+    width = $(window).width()
+    height = $(window).height()
+    el.innerWidth(width).innerHeight(height)
+
+
   App.requestComponentViewer = (s) ->
     if s?
       settings = issues: false, coverage: false, duplications: false, scm: false, workspace: false
       s.split(',').forEach (d) -> settings[d] = true
     else settings = null
     unless App.componentViewer?
-      App.componentViewer = new ComponentViewer settings: settings
+      @resizeContainer()
+      $(window).on 'resize', => @resizeContainer()
+      App.componentViewer = new ComponentViewer
+        settings: settings
+        elementToFit: el
       App.viewerRegion.show App.componentViewer
     App.componentViewer
 

diff --git a/server/sonar-web/src/main/coffee/component-viewer/header.coffee b/server/sonar-web/src/main/coffee/component-viewer/header.coffee
index b98d8a31bda01bb7b1bfd5da98386672db5e8dbf..6695c5be3247e3ac5c85d0a20a81095957dd1594 100644 (file)
--- a/server/sonar-web/src/main/coffee/component-viewer/header.coffee
+++ b/server/sonar-web/src/main/coffee/component-viewer/header.coffee
@@ -138,6 +138,7 @@ define [
       @ui.expandLinks.removeClass 'active'
       @ui.expandedBar.removeClass 'active'
       @barRegion.reset()
+      @options.main.fitIntoElement()
 
 
     enableBar: (scope) ->
@@ -157,6 +158,7 @@ define [
         activeHeaderItem = @state.get 'activeHeaderItem'
         if activeHeaderItem
           @$(activeHeaderItem).addClass 'active'
+        @options.main.fitIntoElement()
 
 
     enableBarItem: (item, silent = false) ->

diff --git a/server/sonar-web/src/main/coffee/component-viewer/main.coffee b/server/sonar-web/src/main/coffee/component-viewer/main.coffee
index 32e4cd8697ce653c181acec4f761f0782b761132..969ccd32f96ac8ba0dc5a625c7a20d73051e248f 100644 (file)
--- a/server/sonar-web/src/main/coffee/component-viewer/main.coffee
+++ b/server/sonar-web/src/main/coffee/component-viewer/main.coffee
@@ -85,6 +85,7 @@ define [
         @settings.set options.settings
       @settings.set 'scm', !!localStorage.getItem('componentViewerSCM')
       @shouldStoreSettings = options.shouldStoreSettings
+      @elementToFit = options.elementToFit
 
       @state = new State()
 
@@ -123,11 +124,33 @@ define [
         localStorage.setItem 'componentViewerSettings', JSON.stringify @settings.toJSON()
 
 
+    fitIntoElement: ->
+      return unless @elementToFit
+      source = @$(@sourceRegion.$el)
+      workspace = @$(@workspaceRegion.$el)
+
+      width = @elementToFit.width()
+      height = @elementToFit.height()
+      availableWidth = width - workspace.outerWidth(true)
+      availableHeight = height - @$(@headerRegion.$el).outerHeight(true)
+
+      source.removeClass 'overflow'
+      source.width(availableWidth).css('max-height', availableHeight)
+      source.addClass 'overflow'
+      workspace.removeClass 'overflow'
+      workspace.height availableHeight
+      workspace.addClass 'overflow'
+
+
     onRender: ->
       @workspaceRegion.show @workspaceView
       @$el.toggleClass 'component-viewer-workspace-enabled', @settings.get 'workspace'
       @sourceRegion.show @sourceView
       @headerRegion.show @headerView
+      @fitIntoElement()
+      resizeEvent = 'resize.componentViewer'
+      $(window).off(resizeEvent).on resizeEvent, =>
+        setTimeout (=> @fitIntoElement()), 100
 
 
     requestComponent: (key, clear = false, full = true) ->
@@ -261,6 +284,7 @@ define [
 
     toggleWorkspace: (store = false) ->
       if @settings.get 'workspace' then @hideWorkspace() else @showWorkspace()
+      @fitIntoElement()
       @storeSettings() if store
 
 

diff --git a/server/sonar-web/src/main/coffee/dashboard/file-app.coffee b/server/sonar-web/src/main/coffee/dashboard/file-app.coffee
index 8248a285bea072eb7c043b10cea55fa335f11f61..661562cef33b6ae9b417fb6aac36c3ce85192d7d 100644 (file)
--- a/server/sonar-web/src/main/coffee/dashboard/file-app.coffee
+++ b/server/sonar-web/src/main/coffee/dashboard/file-app.coffee
@@ -30,15 +30,25 @@ requirejs [
   $ = jQuery
 
   App = new Marionette.Application()
+  el = $('#accordion-panel')
 
 
   App.addRegions
     viewerRegion: '#accordion-panel'
 
 
+  App.resizeContainer = ->
+    width = $(window).width()
+    height = $(window).height() - el.offset().top - $('#footer').height() - 10
+    el.innerWidth(width).innerHeight(height)
+
+
   App.requestComponentViewer = ->
     unless App.componentViewer?
-      App.componentViewer = new ComponentViewer()
+      @resizeContainer()
+      $(window).on 'resize', => @resizeContainer()
+      App.componentViewer = new ComponentViewer
+        elementToFit: el
       App.viewerRegion.show App.componentViewer
     App.componentViewer
 

diff --git a/server/sonar-web/src/main/coffee/drilldown/app.coffee b/server/sonar-web/src/main/coffee/drilldown/app.coffee
index 7cc6ba303a69c73f0cb74d25d0cc2d81715ce06a..fc62830b711dae75b7d370d6fb960e38898cff1d 100644 (file)
--- a/server/sonar-web/src/main/coffee/drilldown/app.coffee
+++ b/server/sonar-web/src/main/coffee/drilldown/app.coffee
@@ -29,20 +29,28 @@ requirejs [
 
   $ = jQuery
   App = new Marionette.Application()
+  el = $('#accordion-panel')
 
 
   App.addRegions
     viewerRegion: '#accordion-panel'
 
 
+  App.resizeContainer = ->
+    height = Math.min 780, ($(window).height() - 20)
+    el.innerHeight(height)
+
+
   App.requestComponentViewer = ->
     unless App.componentViewer?
-      App.componentViewer = new ComponentViewer()
+      @resizeContainer()
+      $(window).on 'resize', => @resizeContainer()
+      App.componentViewer = new ComponentViewer
+        elementToFit: el
       App.viewerRegion.show App.componentViewer
     App.componentViewer
 
 
-
   App.addInitializer ->
     # Define parameters
     drilldown = window.drilldown || {}

diff --git a/server/sonar-web/src/main/js/issues/extra.js b/server/sonar-web/src/main/js/issues/extra.js
index 388fdfcb211a71516b64b33a3e66524ceff7b6f3..22aff79d14247618475f7a9c17eeb2d1a0ec8e78 100644 (file)
--- a/server/sonar-web/src/main/js/issues/extra.js
+++ b/server/sonar-web/src/main/js/issues/extra.js
@@ -147,16 +147,18 @@ define(
           var that = this,
               app = this.options.app,
               settings = localStorage.getItem('componentViewerSettings'),
+              navigatorDetails = jQuery('.navigator-details'),
               componentViewer = new ComponentViewer({
                 settings: settings,
                 shouldStoreSettings: true,
+                elementToFit: navigatorDetails,
                 component: {
                   project: this.model.get('project'),
                   projectLongName: this.model.get('projectLongName')
                 }
               }),
               showCallback = function () {
-                jQuery('.navigator-details').removeClass('navigator-fetching');
+                navigatorDetails.removeClass('navigator-fetching');
                 app.detailsRegion.show(componentViewer);
                 componentViewer.settings.set('issues', false);
                 componentViewer.open(that.model.get('component'));
@@ -165,7 +167,7 @@ define(
                 });
               };
 
-          jQuery('.navigator-details').empty().addClass('navigator-fetching');
+          navigatorDetails.empty().addClass('navigator-fetching');
           var issueKey = this.model.get('key');
           this.model.clear({ silent: true });
           this.model.set({ key: issueKey }, { silent: true });

diff --git a/server/sonar-web/src/main/less/component-viewer.less b/server/sonar-web/src/main/less/component-viewer.less
index da5027d78f5d0d7525b1d061e0f8e2c8de80075b..22ae66ac1f75eb5f737f124068c2cf9fc4199071 100644 (file)
--- a/server/sonar-web/src/main/less/component-viewer.less
+++ b/server/sonar-web/src/main/less/component-viewer.less
@@ -10,6 +10,7 @@
   min-width: 600px;
   border-left-width: 0;
   .box-sizing(border-box);
+  .clearfix;
 }
 
 .component-viewer-workspace-enabled {
@@ -31,11 +32,15 @@
 
 .component-viewer-workspace {
   position: relative;
-  display: table-cell;
-  vertical-align: top;
+  float: left;
   min-width: 30px;
+  margin-right: 10px;
   border: 1px solid @barBorderColor;
   background-color: @barBackgroundColor;
+
+  &.overflow {
+    .box-sizing(border-box);
+  }
 }
 
 .component-viewer-workspace-header {
@@ -102,14 +107,16 @@
 
 
 .component-viewer-source {
-  display: table-cell;
-  vertical-align: top;
-  width: 100%;
-  padding-left: 10px;
+  float: left;
+  border: 1px solid @barBorderColor;
+
+  &.overflow {
+    .box-sizing(border-box);
+    overflow: auto;
+  }
 
   .code {
     width: 100%;
-    border: 1px solid @barBorderColor;
   }
 
   .code th {

diff --git a/server/sonar-web/src/main/less/navigator/base.less b/server/sonar-web/src/main/less/navigator/base.less
index dc8fb5d34bf8e0ea877790e93e13632a9e087f97..1adb6a0ba1767aa516ba0bfa6e6f6c4fd274b71b 100644 (file)
--- a/server/sonar-web/src/main/less/navigator/base.less
+++ b/server/sonar-web/src/main/less/navigator/base.less
@@ -73,9 +73,7 @@
 
 .navigator-details {
   position: relative;
-  margin: 0 @navigatorPadding;
-
-  .component-viewer { margin-bottom: 10px; }
+  margin: 0 @navigatorPadding @navigatorPadding;
 }
 
 .navigator-resizer {