From d61d264aa6b1faaa234964c9fef627d212e2ef3c Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Wed, 16 Jul 2014 19:05:12 +0600 Subject: [PATCH] SONAR-4572 SONAR-5431 Fluid layout of the component viewer --- .../src/main/coffee/coding-rules/app.coffee | 1 - .../main/coffee/component-viewer/app.coffee | 13 +++++++++- .../coffee/component-viewer/header.coffee | 2 ++ .../main/coffee/component-viewer/main.coffee | 24 +++++++++++++++++++ .../src/main/coffee/dashboard/file-app.coffee | 12 +++++++++- .../src/main/coffee/drilldown/app.coffee | 12 ++++++++-- server/sonar-web/src/main/js/issues/extra.js | 6 +++-- .../src/main/less/component-viewer.less | 21 ++++++++++------ .../src/main/less/navigator/base.less | 4 +--- 9 files changed, 78 insertions(+), 17 deletions(-) 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 103e12af957..022146843e0 100644 --- 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 f398d217ba9..60dc67f9838 100644 --- 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 b98d8a31bda..6695c5be324 100644 --- 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 32e4cd8697c..969ccd32f96 100644 --- 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 8248a285bea..661562cef33 100644 --- 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 7cc6ba303a6..fc62830b711 100644 --- 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 388fdfcb211..22aff79d142 100644 --- 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 da5027d78f5..22ae66ac1f7 100644 --- 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 dc8fb5d34bf..1adb6a0ba17 100644 --- 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 { -- 2.39.5