SONAR-4366 Create initial layout on fly

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/index.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/index.html.erb
index b3f04ae1e0a002b53ba4b32132f60145cda3c4dd..b7533d0d9eeb3b3e99fef730cfb836f7e81dbec2 100644 (file)
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/index.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/index.html.erb
@@ -2,13 +2,11 @@
   <script data-main="<%= ApplicationController.root_context -%>/javascripts/quality-gate/app" src="<%= ApplicationController.root_context -%>/javascripts/third-party/require.js"></script>
 <% end %>
 
-<div class="navigator quality-gates-navigator">
-  <div class="navigator-header"></div>
-  <div class="navigator-results"><i class="spinner"></i></div>
-  <div class="navigator-details"></div>
-  <div class="navigator-actions"></div>
+<div class="quality-gate-page-loader">
+  <i class="spinner"></i>
 </div>
 
+<%= render :partial => '/quality_gates/templates/quality_gates_layout.hbs' -%>
 <%= render :partial => '/quality_gates/templates/quality_gate_sidebar_list_item_template.hbs' -%>
 <%= render :partial => '/quality_gates/templates/quality_gate_actions_template.hbs' -%>
 <%= render :partial => '/quality_gates/templates/quality_gate_edit_template.hbs' -%>

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gates_layout.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gates_layout.hbs.erb
new file mode 100644 (file)
index 0000000..97713cf
--- /dev/null
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gates_layout.hbs.erb
@@ -0,0 +1,6 @@
+<script id="quality-gates-layout" type="text/x-handlebars-template">
+  <div class="navigator-header"></div>
+  <div class="navigator-results"></div>
+  <div class="navigator-details"></div>
+  <div class="navigator-actions"></div>
+</script>

diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/app.coffee b/sonar-server/src/main/webapp/javascripts/quality-gate/app.coffee
index 9346cb288c0e50acb8d3ba73df99d48789d20d7c..b2884874d53b4efa60e28fe7889fd129fce1fccc 100644 (file)
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/app.coffee
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/app.coffee
@@ -29,7 +29,8 @@ requirejs [
   'quality-gate/views/quality-gate-sidebar-list-view',
   'quality-gate/views/quality-gate-actions-view',
   'quality-gate/views/quality-gate-edit-view',
-  'quality-gate/router'
+  'quality-gate/router',
+  'quality-gate/layout',
   'common/handlebars-extensions'
 ], (
   Backbone, Marionette, Handlebars,
@@ -38,7 +39,8 @@ requirejs [
   QualityGateSidebarListItemView,
   QualityGateActionsView,
   QualityGateEditView,
-  QualityGateRouter
+  QualityGateRouter,
+  QualityGateLayout
 ) ->
 
   # Create a generic error handler for ajax requests
@@ -62,7 +64,7 @@ requirejs [
     if @qualityGates.length > 0
       @router.navigate "show/#{@qualityGates.models[0].get('id')}", trigger: true
     else
-      App.contentRegion.reset()
+      App.layout.contentRegion.reset()
 
   App.deleteQualityGate = (id) ->
     App.qualityGates.remove id
@@ -72,25 +74,23 @@ requirejs [
     App.qualityGates.each (gate) ->
       gate.set('default', false) unless gate.id == id
 
-  # Define page regions
-  App.addRegions
-    headerRegion: '.navigator-header'
-    actionsRegion: '.navigator-actions'
-    listRegion: '.navigator-results'
-    detailsRegion: '.navigator-details'
+  # Construct layout
+  App.addInitializer ->
+    @layout = new QualityGateLayout
+    jQuery('body').append @layout.render().el
 
   # Construct actions bar
   App.addInitializer ->
     @qualityGateActionsView = new QualityGateActionsView
       app: @
-    @actionsRegion.show @qualityGateActionsView
+    @layout.actionsRegion.show @qualityGateActionsView
 
   # Construct sidebar
   App.addInitializer ->
     @qualityGateSidebarListView = new QualityGateSidebarListItemView
       collection: @qualityGates
       app: @
-    @listRegion.show @qualityGateSidebarListView
+    @layout.listRegion.show @qualityGateSidebarListView
 
   # Construct edit view
   App.addInitializer ->

diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/app.js b/sonar-server/src/main/webapp/javascripts/quality-gate/app.js
index 98e67daedfeb13a43e973d8c2e8b28238181c1e8..63301e4b418f71c27b991e09b58c134a39066b8d 100644 (file)
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/app.js
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/app.js
@@ -29,7 +29,7 @@
     }
   });
 
-  requirejs(['backbone', 'backbone.marionette', 'handlebars', 'quality-gate/collections/quality-gates', 'quality-gate/collections/metrics', 'quality-gate/views/quality-gate-sidebar-list-view', 'quality-gate/views/quality-gate-actions-view', 'quality-gate/views/quality-gate-edit-view', 'quality-gate/router', 'common/handlebars-extensions'], function(Backbone, Marionette, Handlebars, QualityGates, Metrics, QualityGateSidebarListItemView, QualityGateActionsView, QualityGateEditView, QualityGateRouter) {
+  requirejs(['backbone', 'backbone.marionette', 'handlebars', 'quality-gate/collections/quality-gates', 'quality-gate/collections/metrics', 'quality-gate/views/quality-gate-sidebar-list-view', 'quality-gate/views/quality-gate-actions-view', 'quality-gate/views/quality-gate-edit-view', 'quality-gate/router', 'quality-gate/layout', 'common/handlebars-extensions'], function(Backbone, Marionette, Handlebars, QualityGates, Metrics, QualityGateSidebarListItemView, QualityGateActionsView, QualityGateEditView, QualityGateRouter, QualityGateLayout) {
     var App;
     jQuery.ajaxSetup({
       error: function(jqXHR) {
@@ -51,7 +51,7 @@
           trigger: true
         });
       } else {
-        return App.contentRegion.reset();
+        return App.layout.contentRegion.reset();
       }
     };
     App.deleteQualityGate = function(id) {
@@ -65,24 +65,22 @@
         }
       });
     };
-    App.addRegions({
-      headerRegion: '.navigator-header',
-      actionsRegion: '.navigator-actions',
-      listRegion: '.navigator-results',
-      detailsRegion: '.navigator-details'
+    App.addInitializer(function() {
+      this.layout = new QualityGateLayout;
+      return jQuery('body').append(this.layout.render().el);
     });
     App.addInitializer(function() {
       this.qualityGateActionsView = new QualityGateActionsView({
         app: this
       });
-      return this.actionsRegion.show(this.qualityGateActionsView);
+      return this.layout.actionsRegion.show(this.qualityGateActionsView);
     });
     App.addInitializer(function() {
       this.qualityGateSidebarListView = new QualityGateSidebarListItemView({
         collection: this.qualityGates,
         app: this
       });
-      return this.listRegion.show(this.qualityGateSidebarListView);
+      return this.layout.listRegion.show(this.qualityGateSidebarListView);
     });
     App.addInitializer(function() {
       this.qualityGateEditView = new QualityGateEditView({

diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/layout.coffee b/sonar-server/src/main/webapp/javascripts/quality-gate/layout.coffee
new file mode 100644 (file)
index 0000000..6b0ef91
--- /dev/null
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/layout.coffee
@@ -0,0 +1,15 @@
+define [
+  'backbone.marionette',
+  'common/handlebars-extensions'
+], (
+  Marionette
+) ->
+
+  class AppLayout extends Marionette.Layout
+    className: 'navigator quality-gates-navigator'
+    template: getTemplate '#quality-gates-layout'
+    regions:
+      headerRegion: '.navigator-header'
+      actionsRegion: '.navigator-actions'
+      listRegion: '.navigator-results'
+      detailsRegion: '.navigator-details'

diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/router.coffee b/sonar-server/src/main/webapp/javascripts/quality-gate/router.coffee
index b42539c7373a339c1a79f10156c0f63d5bcb3121..f21161a97bfc9c7a42ac6fc2efb3108dba404d41 100644 (file)
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/router.coffee
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/router.coffee
@@ -28,12 +28,12 @@ define [
         qualityGateDetailHeaderView = new QualityGateDetailHeaderView
           app: @app
           model: qualityGate
-        @app.headerRegion.show qualityGateDetailHeaderView
+        @app.layout.headerRegion.show qualityGateDetailHeaderView
 
         qualityGateDetailView = new QualityGateDetailView
           app: @app
           model: qualityGate
-        @app.detailsRegion.show qualityGateDetailView
+        @app.layout.detailsRegion.show qualityGateDetailView
         qualityGateDetailView.$el.hide()
 
         qualityGateDetailHeaderView.showSpinner()

diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/router.js b/sonar-server/src/main/webapp/javascripts/quality-gate/router.js
index 998123bce298bc9a4dd7f76938ef000577eefaa9..3ffdf8f2947e7fda5bbb5e6ec10ee9ecce3a3c11 100644 (file)
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/router.js
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/router.js
@@ -30,12 +30,12 @@
             app: this.app,
             model: qualityGate
           });
-          this.app.headerRegion.show(qualityGateDetailHeaderView);
+          this.app.layout.headerRegion.show(qualityGateDetailHeaderView);
           qualityGateDetailView = new QualityGateDetailView({
             app: this.app,
             model: qualityGate
           });
-          this.app.detailsRegion.show(qualityGateDetailView);
+          this.app.layout.detailsRegion.show(qualityGateDetailView);
           qualityGateDetailView.$el.hide();
           qualityGateDetailHeaderView.showSpinner();
           return qualityGate.fetch().done(function() {

diff --git a/sonar-server/src/main/webapp/stylesheets/quality-gates.css b/sonar-server/src/main/webapp/stylesheets/quality-gates.css
index 6110fbb5b0b8148069b58661014b03190889c1b9..a188ce71186418a288f264cab140cb4190ae69d9 100644 (file)
--- a/sonar-server/src/main/webapp/stylesheets/quality-gates.css
+++ b/sonar-server/src/main/webapp/stylesheets/quality-gates.css
@@ -340,6 +340,9 @@
 .navigator-page #ftlinks {
   margin-top: 0;
 }
+.quality-gate-page-loader {
+  padding: 10px 0 0 10px;
+}
 .quality-gates-navigator .navigator-header {
   left: 320px;
   border-bottom-color: #e1e1e1;

diff --git a/sonar-server/src/main/webapp/stylesheets/quality-gates.less b/sonar-server/src/main/webapp/stylesheets/quality-gates.less
index c16f58b053b6528d0b1e3e6a9b32a1ee1e2f0e92..e95ef5e1b795722176f2432fe08f1ab7e47696c5 100644 (file)
--- a/sonar-server/src/main/webapp/stylesheets/quality-gates.less
+++ b/sonar-server/src/main/webapp/stylesheets/quality-gates.less
@@ -2,6 +2,10 @@
 @import "mixins";
 @import "navigator/base";
 
+.quality-gate-page-loader {
+  padding: @navigatorPadding 0 0 @navigatorPadding;
+}
+
 .quality-gates-navigator {
 
   .navigator-header {