SONAR-3263 improve style of confirmation popup

9 files changed, 62 insertions, 32 deletions

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/controllers/confirm_controller.rb b/sonar-server/src/main/webapp/WEB-INF/app/controllers/confirm_controller.rb
index b7152864157..2d0cc771bae 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/controllers/confirm_controller.rb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/controllers/confirm_controller.rb
@@ -19,7 +19,7 @@
 #
 class ConfirmController < ApplicationController
 
-  # GET /confirm?url=<return_to_url>&[t=<title_key]
+  # GET /confirm?url=<return_to_url>[&tk=<title_key][&mk=<message_key][&mp=<message_parameters]
   def index
     render :partial => 'confirm/confirm'
   end
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/helpers/application_helper.rb b/sonar-server/src/main/webapp/WEB-INF/app/helpers/application_helper.rb
index ad2aa501ad8..efd21372d8c 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/helpers/application_helper.rb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/helpers/application_helper.rb
@@ -725,6 +725,7 @@ module ApplicationHelper
   # ==== Options
   # * <tt>:id</tt> - HTML ID of the button
   # * <tt>:class</tt> - Additional CSS class, generally 'red-button' for deletions
+  # * <tt>:title_key</tt> -
   # * <tt>:message_key</tt> -
   # * <tt>:message_params</tt> -
   # * <tt>:width</tt> - width in pixels
@@ -732,16 +733,18 @@ module ApplicationHelper
   def button_to_action(label, post_url, options={})
     clazz = options[:class]
     id = "id='#{options[:id]}'" if options[:id]
+    title_key = options[:title_key]
     message_key = options[:message_key]
     message_params = options[:message_params]
     width = options[:width]||500
 
     url = "#{ApplicationController.root_context}/confirm?url=#{u post_url}"
+    url += "&tk=#{title_key}" if title_key
     if message_key
-      url += "&k=#{message_key}&"
-      url += message_params.map{|p| "p=#{u p}"}.join('&') if message_params
+      url += "&mk=#{message_key}&"
+      url += message_params.map{|p| "mp=#{u p}"}.join('&') if message_params
     end
 
-    "<a href='#{url}' modal-width='#{width}' class='open-modal button #{clazz}' #{id}>#{label}</a>"
+    "<a href='#{url}' modal-width='#{width}' class='open-modal button #{clazz}' #{id}>#{h label}</a>"
   end
 end
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/confirm/_confirm.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/confirm/_confirm.html.erb
index dceb6db2f4a..3f816a061a4 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/confirm/_confirm.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/confirm/_confirm.html.erb
@@ -1,16 +1,22 @@
 <%
-   message_key = params[:k] || 'are_you_sure'
-   message_params = params[:p] || []
+   title_key = params[:tk] || 'are_you_sure'
+   message_key = params[:mk] || 'are_you_sure'
+   message_params = params[:mp] || []
 %>
 <form id="form-confirm" method="post" action="<%= params[:url] -%>">
   <fieldset>
     <div class="form-head">
-      <img src="<%= ApplicationController.root_context -%>/images/warning.png" style="vertical-align: text-bottom"/>
-      <%= h message(message_key, :params => message_params) -%>
+      <h2><%= h message title_key -%></h2>
+    </div>
+    <div class="form-body">
+      <div class="info">
+        <img src="<%= ApplicationController.root_context -%>/images/information.png" style="vertical-align: text-bottom"/>
+        <%= h message(message_key, :params => message_params) -%>
+      </div>
     </div>
     <div class="form-foot">
-      <input type="submit" value="Confirm"/>
-      <a href="#" onclick="return closeModalWindow()"><%= message('cancel') -%></a>
+      <input type="submit" value="<%= h message('confirm') -%>"/>
+      <a href="#" onclick="return closeModalWindow()"><%= h message('cancel') -%></a>
     </div>
   </fieldset>
 </form>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/profiles/_copy_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/profiles/_copy_form.html.erb
index 13c26d3096c..58f4a342bf0 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/profiles/_copy_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/profiles/_copy_form.html.erb
@@ -6,12 +6,10 @@
     </div>
     <div class="form-body">
       <% if @error %>
-        <div class="form-field">
-          <p class="error"><%= h @error -%></p>
-        </div>
+        <p class="error"><%= h @error -%></p>
       <% end %>
       <div class="form-field">
-        <label for="name">New name</label>
+        <label for="name">New name <em>*</em></label>
         <input id="new-name" name="name" type="text" size="50" maxlength="100"/>
       </div>
     </div>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/profiles/_rename_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/profiles/_rename_form.html.erb
index 6026b876a27..47d7b61f919 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/profiles/_rename_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/profiles/_rename_form.html.erb
@@ -5,15 +5,14 @@
     <div class="form-head">
       <h2>Rename Profile: <%= h @profile.name -%></h2>
     </div>
+
     <div class="form-body">
       <% if @error %>
-        <div class="form-field">
-          <p class="error"><%= h @error -%></p>
-        </div>
+        <p class="error"><%= h @error -%></p>
       <% end %>
 
       <div class="form-field">
-        <label for="name">New name</label>
+        <label for="name">New name <em>*</em></label>
         <input id="new-name" name="name" type="text" size="50" maxlength="100"/>
       </div>
     </div>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/profiles/index.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/profiles/index.html.erb
index fd31c1266d7..c193a57642f 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/profiles/index.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/profiles/index.html.erb
@@ -112,6 +112,7 @@
           <% if !profile.default_profile? && administrator? %>
             <%= button_to_action message('set_as_default'), "profiles/set_as_default?id=#{profile.id}",
                                                :id => "activate_#{profile.key.parameterize}",
+                                               :title_key => 'set_as_default',
                                                :message_key => 'quality_profiles.are_you_sure_want_x_profile_as_default',
                                                :message_params => [profile.name] -%>
           <% end %>
@@ -146,6 +147,7 @@
               <%= button_to_action message('delete'), "profiles/delete/#{profile.id}",
                                    :class => 'red-button',
                                    :id => "delete_#{profile.key.parameterize}",
+                                   :title_key => 'quality_profiles.delete_confirm_title',
                                    :message_key => 'quality_profiles.are_you_sure_want_delete_profile_x',
                                    :message_params => [profile.name]
               -%>
diff --git a/sonar-server/src/main/webapp/javascripts/application.js b/sonar-server/src/main/webapp/javascripts/application.js
index a4a1ac077fa..345802d5411 100644
--- a/sonar-server/src/main/webapp/javascripts/application.js
+++ b/sonar-server/src/main/webapp/javascripts/application.js
@@ -268,8 +268,10 @@ Treemap.prototype.onLoaded = function (componentsSize) {
           if ($j('#modal').length) {
             return; // another window is already opening
           }
-          var $dialog = $j('<div id="modal"></div>').appendTo('body');
-          $j.get($link.attr('href'), {}, function (html) {
+          var $dialog = $j('<div id="modal" class="ui-widget-overlay"></div>').appendTo('body');
+          var url = $link.attr('modal-url') || $link.attr('href');
+          $j.get(url,function (html) {
+            $dialog.removeClass('ui-widget-overlay');
             $dialog.html(html);
             $dialog
                 .dialog({
@@ -284,6 +286,10 @@ Treemap.prototype.onLoaded = function (componentsSize) {
                   }
                 });
             $dialog.dialog("open");
+          }).error(function () {
+            alert("Server error. Please contact your administrator.");
+          }).complete(function() {
+            $dialog.removeClass('ui-widget-overlay');
           });
 
           $link.click(function () {
diff --git a/sonar-server/src/main/webapp/stylesheets/layout.css b/sonar-server/src/main/webapp/stylesheets/layout.css
index b6410c2ba6d..7dd4a87c418 100644
--- a/sonar-server/src/main/webapp/stylesheets/layout.css
+++ b/sonar-server/src/main/webapp/stylesheets/layout.css
@@ -250,7 +250,3 @@ body, a {
 .nolayout {
   padding: 10px;
 }
-
-#modal {
-  display: none;
-}
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/stylesheets/style.css b/sonar-server/src/main/webapp/stylesheets/style.css
index 3400d8de54e..169e1377a84 100644
--- a/sonar-server/src/main/webapp/stylesheets/style.css
+++ b/sonar-server/src/main/webapp/stylesheets/style.css
@@ -304,6 +304,12 @@ h4, .h4 {
   padding: 4px;
 }
 
+.info {
+  background-color: #CAE3F2;
+  padding: 4px;
+  border: 1px solid #4B9FD5;
+}
+
 /* ------------------- SETUP / MIGRATION PAGES ------------------- */
 .migration {
   background-image: url("../images/sonar.png");
@@ -316,7 +322,7 @@ h4, .h4 {
   border: 1px solid #4b9fd5;
   width: 230px;
   text-align: left;
-  background-color: #d4e7ff;
+  background-color: #CAE3F2;
   padding: 15px 20px;
 }
 
@@ -2347,27 +2353,35 @@ select.medium-width {
   background-color: #EFEFEF;
   line-height: 30px;
   height: 30px;
+  border-bottom: 1px solid #ccc;
 }
 
 .form-body {
-  border-top: 1px solid #ccc;
+  padding: 5px;
 }
 
 .form-field {
-  padding: 5px 10px;
+  clear: both;
+  display: block;
+  padding: 5px 0 5px 140px;
 }
 
-.form-field label:before {
-  content: "";
+.form-field label em {
+  color: #990000;
+  font-style: italic;
 }
 
 .form-field label {
   display: block;
-  text-align: right;
-  width: 120px;
   float: left;
+  text-align: right;
+  width: 130px;
+  left: -140px;
+  margin-right: -130px;
   line-height: 1;
-  padding: 5px 5px 0 0;
+  word-wrap: break-word;
+  position: relative;
+  padding-top: 5px;
 }
 
 .form-foot {
@@ -2382,6 +2396,12 @@ select.medium-width {
   margin-right: 10px;
 }
 
+.form-field-description {
+  clear: both;
+  font-size: 11px;
+  color: #777;
+}
+
 input[type=text], input[type=password]{
   height: 18px;
   padding: 0 3px;