Quality Gates: some improvements of the rendering

29 files changed, 184 insertions, 255 deletions

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_header.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_header.hbs.erb
index bd8551e64f8..bf8043f5ae2 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_header.hbs.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/issues/templates/_header.hbs.erb
@@ -1,7 +1,7 @@
 <script id="issues-header-template" type="text/x-handlebars-template">
   <h1 class="navigator-header-title">{{#if name}}{{name}}{{else}}<%= message ('issues') -%>{{/if}}</h1>
 
-    <div class="navigator-header-actions">
+    <div class="navigator-header-actions button-group">
       <button id="issues-new-search"><%= message ('issue_filter.new_search') -%></button>
 
       {{#if appState.canManageFilters}}
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 673ec7b1976..b3f04ae1e0a 100644
--- 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
@@ -11,11 +11,11 @@
 
 <%= 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_new_template.hbs' -%>
 <%= render :partial => '/quality_gates/templates/quality_gate_edit_template.hbs' -%>
 <%= render :partial => '/quality_gates/templates/quality_gate_detail_template.hbs' -%>
 <%= render :partial => '/quality_gates/templates/quality_gate_detail_header_template.hbs' -%>
 <%= render :partial => '/quality_gates/templates/quality_gate_detail_conditions_template.hbs' -%>
+<%= render :partial => '/quality_gates/templates/quality_gate_detail_conditions_empty_template.hbs' -%>
 <%= render :partial => '/quality_gates/templates/quality_gate_detail_condition_template.hbs' -%>
 <%= render :partial => '/quality_gates/templates/quality_gate_detail_projects_template.hbs' -%>
 
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_actions_template.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_actions_template.hbs.erb
index 552d9e20573..7284e1d2545 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_actions_template.hbs.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_actions_template.hbs.erb
@@ -1,7 +1,7 @@
 <script id="quality-gate-actions-template" type="text/x-handlebars-template">
   <h1 class="navigator-header-title"><%= message('quality_gates.page') -%></h1>
 
-  <div class="navigator-header-actions">
+  <div class="navigator-header-actions button-group">
     <button id="quality-gate-add"><%= message('add_verb') -%></button>
   </div>
 </script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_detail_condition_template.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_detail_condition_template.hbs.erb
index bf7f19f389b..4b747169c62 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_detail_condition_template.hbs.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_detail_condition_template.hbs.erb
@@ -25,11 +25,15 @@
   </td>
   <td class="quality-gate-condition-actions" width="120px" nowrap>
     {{#if id}}
-      <button class="update-condition" disabled><%= message('update_verb') -%></button>
-      <a class="action link-red delete-condition"><%= message('delete') -%></a>
+      <div class="button-group">
+        <button class="update-condition" disabled><%= message('update_verb') -%></button>
+        <button class="button-red delete-condition"><%= message('delete') -%></button>
+      </div>
     {{else}}
-      <button class="add-condition"><%= message('add_verb') -%></button>
-      <a class="action cancel-add-condition"><%= message('cancel') -%></a>
+      <div class="button-group">
+        <button class="add-condition"><%= message('add_verb') -%></button>
+        <a class="action cancel-add-condition"><%= message('cancel') -%></a>
+      </div>
     {{/if}}
   </td>
 </script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_detail_conditions_empty_template.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_detail_conditions_empty_template.hbs.erb
new file mode 100644
index 00000000000..29e5ecd845f
--- /dev/null
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_detail_conditions_empty_template.hbs.erb
@@ -0,0 +1,5 @@
+<script id="quality-gate-detail-conditions-empty-template" type="text/x-handlebars-template">
+  <td colspan="6">
+    <%= message('quality_gates.no_conditions') -%>
+  </td>
+</script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_detail_header_template.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_detail_header_template.hbs.erb
index 718a6de2ef4..87293b4146c 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_detail_header_template.hbs.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_detail_header_template.hbs.erb
@@ -1,13 +1,13 @@
 <script id="quality-gate-detail-header-template" type="text/x-handlebars-template">
   <h1 class="navigator-header-title">{{name}}</h1>
 
-  <div class="navigator-header-actions">
+  <div class="navigator-header-actions button-group">
     <button id="quality-gate-rename"><%= message('rename') -%></button>
     {{#if default}}
       <button id="quality-gate-unset-as-default"><%= message('unset_as_default') -%></button>
     {{else}}
       <button id="quality-gate-set-as-default"><%= message('set_as_default') -%></button>
     {{/if}}
-    <a id="quality-gate-delete" class="link-action link-red"><%= message('delete') -%></a>
+    <button id="quality-gate-delete" class="button-red"><%= message('delete') -%></button>
   </div>
 </script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_edit_template.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_edit_template.hbs.erb
index 6ebe5db1a5a..476885dc75d 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_edit_template.hbs.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_edit_template.hbs.erb
@@ -1,22 +1,24 @@
 <script id="quality-gate-edit-template" type="text/x-handlebars-template">
-  <div class="modal-head">
-    <h2><%= message('quality_gates.add') -%></h2>
-  </div>
+  <form>
+    <div class="modal-head">
+      <h2><%= message('quality_gates.add') -%></h2>
+    </div>
 
-  <div class="modal-body">
-    <div class="modal-error"></div>
-    <div class="modal-field">
-      <label for="quality-gate-edit-name"><%= message('name') -%> <em class="mandatory">*</em></label>
-      <input id="quality-gate-edit-name" value="{{name}}" type="text" size="50" maxlength="100">
+    <div class="modal-body">
+      <div class="modal-error"></div>
+      <div class="modal-field">
+        <label for="quality-gate-edit-name"><%= message('name') -%> <em class="mandatory">*</em></label>
+        <input id="quality-gate-edit-name" value="{{name}}" type="text" size="50" maxlength="100">
+      </div>
     </div>
-  </div>
 
-  <div class="modal-foot">
-    {{#if id}}
-      <button id="quality-gate-save"><%= message('save') -%></button>
-    {{else}}
-      <button id="quality-gate-create"><%= message('create') -%></button>
-    {{/if}}
-    <a id="quality-gate-cancel-create" class="action"><%= message('cancel') -%></a>
-  </div>
+    <div class="modal-foot">
+      {{#if id}}
+        <button id="quality-gate-save"><%= message('save') -%></button>
+      {{else}}
+        <button id="quality-gate-create"><%= message('create') -%></button>
+      {{/if}}
+      <a id="quality-gate-cancel-create" class="action"><%= message('cancel') -%></a>
+    </div>
+  </form>
 </script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_new_template.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_new_template.hbs.erb
deleted file mode 100644
index 71b8863a744..00000000000
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_new_template.hbs.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<script id="quality-gate-new-template" type="text/x-handlebars-template">
-  <div class="quality-gate-header">
-    <div class="quality-gate-header-rename">
-      <input id="quality-gate-renaming-input" type="text" value="">
-
-      <div class="navigator-header-actions">
-        <button id="quality-gate-save"><%= message('save') -%></button>
-        <button id="quality-gate-cancel-save"><%= message('cancel') -%></button>
-      </div>
-    </div>
-  </div>
-</script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_sidebar_list_item_template.hbs.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_sidebar_list_item_template.hbs.erb
index eafcd7dfd26..06b6eed6d2e 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_sidebar_list_item_template.hbs.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/quality_gates/templates/_quality_gate_sidebar_list_item_template.hbs.erb
@@ -1,3 +1,3 @@
 <script id="quality-gate-sidebar-list-item-template" type="text/x-handlebars-template">
-  <div class="line">{{name}} {{#if default}}<span class="subtitle"><%= message('default') -%></span>{{/if}}</div>
+  <div class="line">{{name}} {{#if default}}<span class="subtitle">(<%= message('default') -%>)</span>{{/if}}</div>
 </script>
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 010c084bff8..b42539c7373 100644
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/router.coffee
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/router.coffee
@@ -3,13 +3,11 @@ define [
   'quality-gate/models/quality-gate',
   'quality-gate/views/quality-gate-detail-view',
   'quality-gate/views/quality-gate-detail-header-view',
-  'quality-gate/views/quality-gate-new-view'
 ], (
   Backbone,
   QualityGate,
   QualityGateDetailView,
-  QualityGateDetailHeaderView,
-  QualityGateNewView
+  QualityGateDetailHeaderView
 ) ->
 
   class QualityGateRouter extends Backbone.Router
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 881ceb6c8b6..998123bce29 100644
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/router.js
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/router.js
@@ -3,7 +3,7 @@
   var __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-  define(['backbone', 'quality-gate/models/quality-gate', 'quality-gate/views/quality-gate-detail-view', 'quality-gate/views/quality-gate-detail-header-view', 'quality-gate/views/quality-gate-new-view'], function(Backbone, QualityGate, QualityGateDetailView, QualityGateDetailHeaderView, QualityGateNewView) {
+  define(['backbone', 'quality-gate/models/quality-gate', 'quality-gate/views/quality-gate-detail-view', 'quality-gate/views/quality-gate-detail-header-view'], function(Backbone, QualityGate, QualityGateDetailView, QualityGateDetailHeaderView) {
     var QualityGateRouter, _ref;
     return QualityGateRouter = (function(_super) {
       __extends(QualityGateRouter, _super);
diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-condition-view.coffee b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-condition-view.coffee
index 7467feaa6e5..db44b306145 100644
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-condition-view.coffee
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-condition-view.coffee
@@ -30,6 +30,7 @@ define [
       'click .delete-condition': 'deleteCondition'
       'click .add-condition': 'saveCondition'
       'click .cancel-add-condition': 'cancelAddCondition'
+      'keyup :input': 'enableUpdate'
       'change :input': 'enableUpdate'
 
 
diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-condition-view.js b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-condition-view.js
index 5a15393ba6e..3a82a59b3e2 100644
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-condition-view.js
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-condition-view.js
@@ -37,6 +37,7 @@
         'click .delete-condition': 'deleteCondition',
         'click .add-condition': 'saveCondition',
         'click .cancel-add-condition': 'cancelAddCondition',
+        'keyup :input': 'enableUpdate',
         'change :input': 'enableUpdate'
       };
 
diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-conditions-empty-view.coffee b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-conditions-empty-view.coffee
new file mode 100644
index 00000000000..35bad098ae8
--- /dev/null
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-conditions-empty-view.coffee
@@ -0,0 +1,11 @@
+define [
+  'backbone.marionette',
+  'handlebars',
+], (
+  Marionette,
+  Handlebars,
+) ->
+
+  class QualityGateDetailConditionsView extends Marionette.ItemView
+    tagName: 'tr'
+    template: Handlebars.compile jQuery('#quality-gate-detail-conditions-empty-template').html()
diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-conditions-view.coffee b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-conditions-view.coffee
index 2e2c9388459..cbd14813682 100644
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-conditions-view.coffee
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-conditions-view.coffee
@@ -2,17 +2,20 @@ define [
   'backbone.marionette',
   'handlebars',
   'quality-gate/models/condition',
-  'quality-gate/views/quality-gate-detail-condition-view'
+  'quality-gate/views/quality-gate-detail-condition-view',
+  'quality-gate/views/quality-gate-detail-conditions-empty-view'
 ], (
   Marionette,
   Handlebars,
   Condition,
-  QualityGateDetailConditionView
+  QualityGateDetailConditionView,
+  QualityGateDetailConditionsEmptyView
 ) ->
 
   class QualityGateDetailConditionsView extends Marionette.CompositeView
     template: Handlebars.compile jQuery('#quality-gate-detail-conditions-template').html()
     itemView: QualityGateDetailConditionView
+    emptyView: QualityGateDetailConditionsEmptyView
     itemViewContainer: '.quality-gate-conditions tbody'
 
 
diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-conditions-view.js b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-conditions-view.js
index 91fbbdfefb4..eeb9d18fa5d 100644
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-conditions-view.js
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-conditions-view.js
@@ -3,7 +3,7 @@
   var __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-  define(['backbone.marionette', 'handlebars', 'quality-gate/models/condition', 'quality-gate/views/quality-gate-detail-condition-view'], function(Marionette, Handlebars, Condition, QualityGateDetailConditionView) {
+  define(['backbone.marionette', 'handlebars', 'quality-gate/models/condition', 'quality-gate/views/quality-gate-detail-condition-view', 'quality-gate/views/quality-gate-detail-conditions-empty-view'], function(Marionette, Handlebars, Condition, QualityGateDetailConditionView, QualityGateDetailConditionsEmptyView) {
     var QualityGateDetailConditionsView, _ref;
     return QualityGateDetailConditionsView = (function(_super) {
       __extends(QualityGateDetailConditionsView, _super);
@@ -17,6 +17,8 @@
 
       QualityGateDetailConditionsView.prototype.itemView = QualityGateDetailConditionView;
 
+      QualityGateDetailConditionsView.prototype.emptyView = QualityGateDetailConditionsEmptyView;
+
       QualityGateDetailConditionsView.prototype.itemViewContainer = '.quality-gate-conditions tbody';
 
       QualityGateDetailConditionsView.prototype.ui = {
diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-projects-view.coffee b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-projects-view.coffee
index 353074e6e3a..b0b9a63167e 100644
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-projects-view.coffee
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-projects-view.coffee
@@ -13,7 +13,6 @@ define [
 
     onRender: ->
       unless @model.get('default')
-        @$el.css 'max-width', 600
         new SelectList
           el: @$('#select-list-projects')
           width: '100%'
diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-projects-view.js b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-projects-view.js
index ea37af52df2..88e40868d93 100644
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-projects-view.js
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-detail-projects-view.js
@@ -17,7 +17,6 @@
 
       QualityGateDetailProjectsView.prototype.onRender = function() {
         if (!this.model.get('default')) {
-          this.$el.css('max-width', 600);
           return new SelectList({
             el: this.$('#select-list-projects'),
             width: '100%',
diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-edit-view.coffee b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-edit-view.coffee
index 34d94fef340..72cf1b8b476 100644
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-edit-view.coffee
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-edit-view.coffee
@@ -16,8 +16,7 @@ define [
 
 
     events:
-      'click #quality-gate-create': 'createQualityGate'
-      'click #quality-gate-save': 'saveQualityGate'
+      'submit form': 'onSubmit'
       'click #quality-gate-cancel-create': 'hide'
 
 
@@ -51,6 +50,13 @@ define [
       .done => @hide()
 
 
+    onSubmit: (e) ->
+      e.preventDefault()
+      if @model.isNew()
+        @createQualityGate()
+      else
+        @saveQualityGate()
+
     createQualityGate: ->
       data = name: @ui.nameInput.val()
       @saveRequest('create', data).done (r) =>
diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-edit-view.js b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-edit-view.js
index 6b4c397c3ce..be300f07ac0 100644
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-edit-view.js
+++ b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-edit-view.js
@@ -22,8 +22,7 @@
       };
 
       QualityGateEditView.prototype.events = {
-        'click #quality-gate-create': 'createQualityGate',
-        'click #quality-gate-save': 'saveQualityGate',
+        'submit form': 'onSubmit',
         'click #quality-gate-cancel-create': 'hide'
       };
 
@@ -61,6 +60,15 @@
         });
       };
 
+      QualityGateEditView.prototype.onSubmit = function(e) {
+        e.preventDefault();
+        if (this.model.isNew()) {
+          return this.createQualityGate();
+        } else {
+          return this.saveQualityGate();
+        }
+      };
+
       QualityGateEditView.prototype.createQualityGate = function() {
         var data,
           _this = this;
diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-new-view.coffee b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-new-view.coffee
deleted file mode 100644
index 681c63cfe4f..00000000000
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-new-view.coffee
+++ /dev/null
@@ -1,50 +0,0 @@
-define [
-  'backbone.marionette',
-  'handlebars',
-], (
-  Marionette,
-  Handlebars,
-) ->
-
-  class QualityGateNewView extends Marionette.ItemView
-    className: 'quality-gate'
-    template: Handlebars.compile jQuery('#quality-gate-new-template').html()
-
-
-    ui:
-      input: '#quality-gate-renaming-input'
-      header: '.quality-gate-header'
-
-
-    events:
-      'click #quality-gate-save': 'save'
-      'click #quality-gate-cancel-save': 'cancel'
-
-
-    onDomRefresh: ->
-      @ui.input.focus()
-
-
-    save: ->
-      @showHeaderSpinner()
-      name = @ui.input.val()
-      jQuery.ajax
-        url: "#{baseUrl}/api/qualitygates/create"
-        type: 'POST'
-        data: name: name
-      .done (r) =>
-        @model.set r
-        @options.app.qualityGates.add @model
-        @options.app.router.navigate "show/#{@model.id}", trigger: true
-
-
-    cancel: ->
-      @options.app.openFirstQualityGate()
-
-
-    showHeaderSpinner: ->
-      @ui.header.addClass 'navigator-fetching'
-
-
-    hideHeaderSpinner: ->
-      @ui.header.removeClass 'navigator-fetching'
diff --git a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-new-view.js b/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-new-view.js
deleted file mode 100644
index f6c1024e29f..00000000000
--- a/sonar-server/src/main/webapp/javascripts/quality-gate/views/quality-gate-new-view.js
+++ /dev/null
@@ -1,71 +0,0 @@
-// Generated by CoffeeScript 1.6.3
-(function() {
-  var __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
-
-  define(['backbone.marionette', 'handlebars'], function(Marionette, Handlebars) {
-    var QualityGateNewView, _ref;
-    return QualityGateNewView = (function(_super) {
-      __extends(QualityGateNewView, _super);
-
-      function QualityGateNewView() {
-        _ref = QualityGateNewView.__super__.constructor.apply(this, arguments);
-        return _ref;
-      }
-
-      QualityGateNewView.prototype.className = 'quality-gate';
-
-      QualityGateNewView.prototype.template = Handlebars.compile(jQuery('#quality-gate-new-template').html());
-
-      QualityGateNewView.prototype.ui = {
-        input: '#quality-gate-renaming-input',
-        header: '.quality-gate-header'
-      };
-
-      QualityGateNewView.prototype.events = {
-        'click #quality-gate-save': 'save',
-        'click #quality-gate-cancel-save': 'cancel'
-      };
-
-      QualityGateNewView.prototype.onDomRefresh = function() {
-        return this.ui.input.focus();
-      };
-
-      QualityGateNewView.prototype.save = function() {
-        var name,
-          _this = this;
-        this.showHeaderSpinner();
-        name = this.ui.input.val();
-        return jQuery.ajax({
-          url: "" + baseUrl + "/api/qualitygates/create",
-          type: 'POST',
-          data: {
-            name: name
-          }
-        }).done(function(r) {
-          _this.model.set(r);
-          _this.options.app.qualityGates.add(_this.model);
-          return _this.options.app.router.navigate("show/" + _this.model.id, {
-            trigger: true
-          });
-        });
-      };
-
-      QualityGateNewView.prototype.cancel = function() {
-        return this.options.app.openFirstQualityGate();
-      };
-
-      QualityGateNewView.prototype.showHeaderSpinner = function() {
-        return this.ui.header.addClass('navigator-fetching');
-      };
-
-      QualityGateNewView.prototype.hideHeaderSpinner = function() {
-        return this.ui.header.removeClass('navigator-fetching');
-      };
-
-      return QualityGateNewView;
-
-    })(Marionette.ItemView);
-  });
-
-}).call(this);
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator.css b/sonar-server/src/main/webapp/stylesheets/navigator.css
index a341ca6b615..7744da7d84d 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator.css
+++ b/sonar-server/src/main/webapp/stylesheets/navigator.css
@@ -142,28 +142,8 @@
   font-style: italic;
 }
 .navigator-header-actions {
-  display: inline-block;
-  vertical-align: middle;
   margin-left: 16px;
 }
-.navigator-header-actions > button {
-  position: relative;
-  z-index: 2;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  padding: 2px 8px;
-  font-size: 11px;
-  font-weight: normal;
-  cursor: pointer;
-}
-.navigator-header-actions > button:hover,
-.navigator-header-actions > button:focus {
-  z-index: 3;
-}
-.navigator-header-actions > button + button {
-  margin-left: -1px;
-}
 .navigator-header-actions > a {
   vertical-align: middle;
   margin: 0 8px;
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator/base.css b/sonar-server/src/main/webapp/stylesheets/navigator/base.css
index 4e062c3ebe6..d0fdac56c55 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator/base.css
+++ b/sonar-server/src/main/webapp/stylesheets/navigator/base.css
@@ -142,28 +142,8 @@
   font-style: italic;
 }
 .navigator-header-actions {
-  display: inline-block;
-  vertical-align: middle;
   margin-left: 16px;
 }
-.navigator-header-actions > button {
-  position: relative;
-  z-index: 2;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  padding: 2px 8px;
-  font-size: 11px;
-  font-weight: normal;
-  cursor: pointer;
-}
-.navigator-header-actions > button:hover,
-.navigator-header-actions > button:focus {
-  z-index: 3;
-}
-.navigator-header-actions > button + button {
-  margin-left: -1px;
-}
 .navigator-header-actions > a {
   vertical-align: middle;
   margin: 0 8px;
diff --git a/sonar-server/src/main/webapp/stylesheets/navigator/base.less b/sonar-server/src/main/webapp/stylesheets/navigator/base.less
index 2456f8a51a0..df11c997f48 100644
--- a/sonar-server/src/main/webapp/stylesheets/navigator/base.less
+++ b/sonar-server/src/main/webapp/stylesheets/navigator/base.less
@@ -154,30 +154,8 @@
 }
 
 .navigator-header-actions {
-  display: inline-block;
-  vertical-align: middle;
   margin-left: 16px;
 
-  & > button {
-    position: relative;
-    z-index: 2;
-    display: inline-block;
-    vertical-align: middle;
-    margin: 0;
-    padding: 2px 8px;
-    font-size: @smallFontSize;
-    font-weight: normal;
-    cursor: pointer;
-
-    &:hover, &:focus {
-      z-index: 3;
-    }
-  }
-
-  & > button + button {
-    margin-left: -1px;
-  }
-
   & > a {
     vertical-align: middle;
     margin: 0 8px;
diff --git a/sonar-server/src/main/webapp/stylesheets/quality-gates.css b/sonar-server/src/main/webapp/stylesheets/quality-gates.css
index 303502edf91..6110fbb5b0b 100644
--- a/sonar-server/src/main/webapp/stylesheets/quality-gates.css
+++ b/sonar-server/src/main/webapp/stylesheets/quality-gates.css
@@ -142,28 +142,8 @@
   font-style: italic;
 }
 .navigator-header-actions {
-  display: inline-block;
-  vertical-align: middle;
   margin-left: 16px;
 }
-.navigator-header-actions > button {
-  position: relative;
-  z-index: 2;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  padding: 2px 8px;
-  font-size: 11px;
-  font-weight: normal;
-  cursor: pointer;
-}
-.navigator-header-actions > button:hover,
-.navigator-header-actions > button:focus {
-  z-index: 3;
-}
-.navigator-header-actions > button + button {
-  margin-left: -1px;
-}
 .navigator-header-actions > a {
   vertical-align: middle;
   margin: 0 8px;
@@ -373,9 +353,17 @@
   padding: 0 10px;
   border-right-color: #cdcdcd;
 }
+.quality-gates-navigator .navigator-actions .navigator-header-title {
+  font-size: 13px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
 .quality-gates-navigator .navigator-results {
   top: 67px;
 }
+.quality-gates-navigator .navigator-results .subtitle {
+  text-transform: lowercase;
+}
 .quality-gates-navigator .navigator-details {
   top: 67px;
   padding: 10px;
@@ -390,6 +378,7 @@
 .quality-gate-section-name {
   margin-bottom: 10px;
   font-weight: bold;
+  text-transform: uppercase;
 }
 .quality-gate-introduction {
   margin-bottom: 20px;
diff --git a/sonar-server/src/main/webapp/stylesheets/quality-gates.less b/sonar-server/src/main/webapp/stylesheets/quality-gates.less
index 5bd981b3392..c16f58b053b 100644
--- a/sonar-server/src/main/webapp/stylesheets/quality-gates.less
+++ b/sonar-server/src/main/webapp/stylesheets/quality-gates.less
@@ -16,10 +16,20 @@
     height: @navigatorHeaderHeight;
     padding: 0 @navigatorPadding;
     border-right-color: @navigatorBorderColor;
+
+    .navigator-header-title {
+      font-size: 13px;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
   }
 
   .navigator-results {
     top: @navigatorTopOffset + @navigatorHeaderHeight;
+
+    .subtitle {
+      text-transform: lowercase;
+    }
   }
 
   .navigator-details {
@@ -42,6 +52,7 @@
 .quality-gate-section-name {
   margin-bottom: @navigatorPadding;
   font-weight: bold;
+  text-transform: uppercase;
 }
 
 
diff --git a/sonar-server/src/main/webapp/stylesheets/ui.css b/sonar-server/src/main/webapp/stylesheets/ui.css
index 8581c07bfd5..14ff2e2fc53 100644
--- a/sonar-server/src/main/webapp/stylesheets/ui.css
+++ b/sonar-server/src/main/webapp/stylesheets/ui.css
@@ -107,3 +107,42 @@ input[type=button][disabled]:focus {
   background: #ebebeb;
   cursor: default;
 }
+.button-red:hover,
+.button-red:focus {
+  border-color: #900;
+  background: #cc0000;
+  color: #fff;
+}
+.button-red:active {
+  border-color: #900;
+  background: #ff0000;
+}
+.button-group {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  white-space: nowrap;
+}
+.button-group > button {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: normal;
+  cursor: pointer;
+}
+.button-group > button:hover,
+.button-group > button:focus {
+  z-index: 3;
+}
+.button-group > button + button {
+  margin-left: -1px;
+}
+.button-group > a {
+  vertical-align: middle;
+  margin: 0 8px;
+  font-size: 11px;
+}
diff --git a/sonar-server/src/main/webapp/stylesheets/ui.less b/sonar-server/src/main/webapp/stylesheets/ui.less
index 5dc200c871e..6627c09b25b 100644
--- a/sonar-server/src/main/webapp/stylesheets/ui.less
+++ b/sonar-server/src/main/webapp/stylesheets/ui.less
@@ -81,3 +81,49 @@ input[type=button] {
     cursor: default;
   }
 }
+
+.button-red {
+  &:hover, &:focus {
+    border-color: #900;
+    background: lighten(#900, 10%);
+    color: #fff;
+  }
+
+  &:active {
+    border-color: #900;
+    background: lighten(#900, 20%);
+  }
+}
+
+.button-group {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  white-space: nowrap;
+
+  & > button {
+    position: relative;
+    z-index: 2;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    padding: 2px 8px;
+    font-size: @smallFontSize;
+    font-weight: normal;
+    cursor: pointer;
+
+    &:hover, &:focus {
+      z-index: 3;
+    }
+  }
+
+  & > button + button {
+    margin-left: -1px;
+  }
+
+  & > a {
+    vertical-align: middle;
+    margin: 0 8px;
+    font-size: @smallFontSize;
+  }
+}