SONAR-6507 Redesign the "My Profile" page

10 files changed, 196 insertions, 165 deletions

diff --git a/server/sonar-web/src/main/less/components/panels.less b/server/sonar-web/src/main/less/components/panels.less
index bc067a025c9..3e072fa1f56 100644
--- a/server/sonar-web/src/main/less/components/panels.less
+++ b/server/sonar-web/src/main/less/components/panels.less
@@ -36,6 +36,11 @@
   padding-right: 0;
 }
 
+.panel-white {
+  border: 1px solid @barBorderColor;
+  background-color: #fff;
+}
+
 .panel-info {
   border: 1px solid @blue;
   background-color: @lightBlue;
diff --git a/server/sonar-web/src/main/less/init/icons.less b/server/sonar-web/src/main/less/init/icons.less
index 4165443ea14..4370b75b8ac 100644
--- a/server/sonar-web/src/main/less/init/icons.less
+++ b/server/sonar-web/src/main/less/init/icons.less
@@ -301,18 +301,22 @@ a[class^="icon-"], a[class*=" icon-"] {
   content: "\f073";
   font-size: @iconFontSize;
 }
-.icon-favorite { font-size: @iconFontSize; }
-.icon-favorite:before {
-  content: "\f005";
-  color: @orange;
-  font-size: @iconFontSize;
+
+.icon-favorite,
+.icon-not-favorite {
+  display: inline-block;
+  vertical-align: top;
+  .square(16px);
+  background-size: 16px 16px;
+  background: no-repeat center center;
 }
-.icon-not-favorite { font-size: @iconFontSize; }
-.icon-not-favorite:before {
-  content: "\f005";
-  color: @darkGrey;
-  font-size: @iconFontSize;
+.icon-favorite {
+  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M15.428%205.777c0%20.13-.078.274-.233.428l-3.24%203.16.767%204.465c.006.042.01.102.01.18%200%20.124-.032.23-.095.316-.062.086-.153.13-.272.13-.113%200-.232-.036-.357-.108l-4.01-2.107L3.99%2014.35c-.13.072-.25.107-.357.107-.125%200-.22-.043-.28-.13-.064-.085-.095-.19-.095-.316%200-.037.006-.096.018-.18l.768-4.464-3.25-3.16C.644%206.045.57%205.9.57%205.775c0-.22.167-.356.5-.41l4.482-.652L7.562.652c.112-.244.258-.366.437-.366.177%200%20.323.122.436.366l2.01%204.062%204.48.652c.335.054.5.19.5.41h.002z%22%20fill%3D%22%23F90%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
+}
+.icon-not-favorite {
+  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M15.428%205.777c0%20.13-.078.274-.233.428l-3.24%203.16.767%204.465c.006.042.01.102.01.18%200%20.124-.032.23-.095.316-.062.086-.153.13-.272.13-.113%200-.232-.036-.357-.108l-4.01-2.107L3.99%2014.35c-.13.072-.25.107-.357.107-.125%200-.22-.043-.28-.13-.064-.085-.095-.19-.095-.316%200-.037.006-.096.018-.18l.768-4.464-3.25-3.16C.644%206.045.57%205.9.57%205.775c0-.22.167-.356.5-.41l4.482-.652L7.562.652c.112-.244.258-.366.437-.366.177%200%20.323.122.436.366l2.01%204.062%204.48.652c.335.054.5.19.5.41h.002z%22%20fill%3D%22%23CDCDCD%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-help:before {
   content: "\f059";
   color: @blue;
diff --git a/server/sonar-web/src/main/less/init/misc.less b/server/sonar-web/src/main/less/init/misc.less
index 7c51d9d1a62..d9d5442cf20 100644
--- a/server/sonar-web/src/main/less/init/misc.less
+++ b/server/sonar-web/src/main/less/init/misc.less
@@ -81,6 +81,7 @@ td.spacer-top    { padding-top: 8px; }
 .width-15 { width: 15%; }
 .width-10 { width: 10%; }
 
+.abs-width-240 { width: 240px; }
 .abs-width-400 { width: 400px; }
 
 .justify {
diff --git a/server/sonar-web/src/main/less/init/tables.less b/server/sonar-web/src/main/less/init/tables.less
index 4b99895eef1..e643f1b7207 100644
--- a/server/sonar-web/src/main/less/init/tables.less
+++ b/server/sonar-web/src/main/less/init/tables.less
@@ -192,11 +192,16 @@ td.sep {
   padding: 0 5px;
 }
 
-table.form td {
+table.form td{
   padding: 2px 5px;
   vertical-align: top;
 }
 
+table.form th {
+  padding: 2px 5px;
+  font-weight: 600;
+}
+
 table.form td.keyCell {
   width: 1%;
   white-space: nowrap;
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/account_controller.rb b/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/account_controller.rb
index 066c1096ee7..8ee24acdefa 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/account_controller.rb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/controllers/account_controller.rb
@@ -56,6 +56,10 @@ class AccountController < ApplicationController
     redirect_to :controller => 'account', :action => 'index'
   end
 
+  def change_password_form
+    render :partial => 'change_password_form'
+  end
+
   def update_notifications
     verify_post_request
     # Global notifs
@@ -69,7 +73,7 @@ class AccountController < ApplicationController
     if project_notifs
       project_notifs.each do |r_id, per_project_notif|
         per_project_notif.each do |dispatch, channels|
-          channels.each do |channel|
+          channels.each do |channel, value|
             current_user.add_property(:prop_key => 'notification.' + dispatch + '.' + channel, :text_value => 'true', :resource_id => r_id)
           end
         end
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_change_password_form.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_change_password_form.html.erb
new file mode 100644
index 00000000000..87bd160850c
--- /dev/null
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_change_password_form.html.erb
@@ -0,0 +1,26 @@
+<form id="pass_form_tag" name="pass_form_tag" method="post" action="<%= ApplicationController.root_context -%>/account/change_password">
+  <div class="modal-head">
+    <h2><%= message('my_profile.password.title') -%></h2>
+  </div>
+
+  <div class="modal-body">
+    <div class="modal-field">
+      <label for="old_password"><%= message('my_profile.password.old') -%>:</label>
+      <%= password_field_tag 'old_password', nil, {:autocomplete => 'off'} %>
+    </div>
+    <div class="modal-field">
+      <label for="password"><%= message('my_profile.password.new') -%>:</label>
+      <%= password_field_tag 'password', nil, {:autocomplete => 'off'} %>
+    </div>
+    <div class="modal-field">
+      <label for="password_confirmation"><%= message('my_profile.password.confirm') -%>:</label>
+      <%= password_field_tag 'password_confirmation', nil, {:autocomplete => 'off'} %>
+    </div>
+  </div>
+
+  <div class="modal-foot">
+    <%= submit_tag message('my_profile.password.submit') %>
+    <%= link_to message('cancel'), { :controller => 'account', :action => 'index' } %>
+  </div>
+
+</form>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_favorites.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_favorites.html.erb
new file mode 100644
index 00000000000..629abb7f285
--- /dev/null
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_favorites.html.erb
@@ -0,0 +1,9 @@
+<h2 class="spacer-bottom"><%= message('my_profile.favorites.title') -%></h2>
+<table class="data">
+  <% for f in current_user.favourites %>
+    <tr>
+      <td class="thin"><%= link_to_favourite f -%></td>
+      <td><%= qualifier_icon f %> <%= link_to_resource f %></td>
+    </tr>
+  <% end %>
+</table>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_global_notifications.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_global_notifications.html.erb
index 0b0b227ccef..2d2b66ce8a9 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_global_notifications.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_global_notifications.html.erb
@@ -1,27 +1,31 @@
-<h2><%= message('my_profile.overall_notifications.title') -%></h2>
+<h2 class="spacer-bottom"><%= message('my_profile.overall_notifications.title') -%></h2>
+
+<p class="spacer-bottom"><%= message('notification.dispatcher.information') -%></p>
 
-<span><%= message('notification.dispatcher.information') -%></span>
-<br/><br/>
 <table class="form">
+  <thead>
   <tr>
-    <td></td>
+    <th></th>
     <% for channel in @channels %>
-      <td class="text-center"><b><%= message('notification.channel.' + channel.getKey()) -%></b></td>
+      <th class="text-center"><%= message('notification.channel.' + channel.getKey()) -%></th>
     <% end %>
   </tr>
+  </thead>
+  <tbody>
   <% for dispatcher in @global_dispatchers %>
     <tr>
       <td><%= message('notification.dispatcher.' + dispatcher) -%></td>
       <%
-           for channel in @channels
-             notification_id = dispatcher + '.' + channel.getKey()
-             check_box_id = 'global_notifs[' + notification_id + ']'
-             check_box_checked = @global_notifications[notification_id]
+         for channel in @channels
+           notification_id = dispatcher + '.' + channel.getKey()
+           check_box_id = 'global_notifs[' + notification_id + ']'
+           check_box_checked = @global_notifications[notification_id]
       %>
-      <td class="text-center">
+        <td class="text-center">
           <%= check_box_tag check_box_id, 'true', check_box_checked %>
-      </td>
+        </td>
       <% end %>
     </tr>
   <% end %>
+  </tbody>
 </table>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_per_project_notifications.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_per_project_notifications.html.erb
index fdd7cb765c7..a05956318dd 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_per_project_notifications.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/_per_project_notifications.html.erb
@@ -1,78 +1,57 @@
-<h2><%= message('my_profile.per_project_notifications.title') -%></h2>
-    
+<h2 class="spacer-bottom"><%= message('my_profile.per_project_notifications.title') -%></h2>
+
+<% @per_project_notifications.each do |r_id, per_project_notif| %>
+  <div class="spacer-bottom js-project" data-project-id="<%= r_id -%>">
     <table class="form">
+      <thead>
       <tr>
-        <td>
-          <%= resource_select_tag 'new_project', {
-                :qualifiers => ['TRK'],
-                :width => '250px',
-                :select2_options => {'placeholder' => "'" + message('my_profile.add_project') + "'"}
-              } -%>
-          <script>
-              $j('#new_project').change(function (event) {
-                var id = event.target.value;
-                if (id != null) {
-                  //window.location = '<%= ApplicationController.root_context -%>/account/index?new_project=' + id;
-                  $j('#notif_form').submit();
-                }
-              });
-          </script>
-        </td>
-        
-        <% 
-           unless @per_project_notifications.empty?
-             @per_project_dispatchers.each do |dispatcher| 
-        %>
-          <td style="width: 180px;" class="text-center"><b><%= message('notification.dispatcher.' + dispatcher) -%></b></td>
-        <% 
-             end
-           end
-        %>
-      </tr>
-      
-      <% 
-         unless @per_project_notifications.empty?
-           index = 0
-           @per_project_notifications.each do |r_id, per_project_notif|
-             index += 1
-      %>
-      <tr id="row_<%= index -%>">
-        <td class="text-middle">
-          <table style="width: 100%">
-            <tr>
-              <td class="nowrap" style="vertical-align: bottom; width: 100%;"><b><%= Project.by_key(r_id).name -%></b></td>
-              <td class="nowrap" style="padding-left: 10px">
-                <a href="#" onclick="$j('#row_<%= index -%>').detach(); return false;" id="remove-<%= index -%>"><img src="<%= ApplicationController.root_context -%>/images/cross-gray.png" title="<%= message('my_profile.remove_this_line') -%>"/></a>
-              </td>
-            </tr>
-          </table>
-        </td>
-        
-        <% 
-           @per_project_dispatchers.each_with_index do |dispatcher, d_index|
-             subscribed_channels = per_project_notif[dispatcher]
-             select_id = index.to_s + "_" + dispatcher
-        %>
-          <td>
-            <select id="<%= select_id -%>" name="project_notifs[<%= r_id.to_s -%>][<%= dispatcher-%>][]" multiple style="width: 100%">
-              <% @channels.each do |channel| -%>
-                <option value="<%= channel.getKey() -%>" <%= 'selected' if per_project_notif[dispatcher].include?(channel.getKey()) || (r_id==@new_project_id && channel.getKey()=='EmailNotificationChannel') -%>><%= message('notification.channel.' + channel.getKey()) -%></option>
-              <% end %>
-            </select>
-            <script>
-              $j('#<%= select_id -%>').select2();
-              <% if @selected_project_id == r_id && d_index == 0 -%>
-                // focus the input field and scroll the page to it
-                $j('#<%= select_id -%>').select2("focus");
-                $j(document).scrollTop( $j('#row_<%= index -%>').offset().top );
-              <% end %>
-            </script>
-          </td>
+        <th>
+          <a class="spacer-right icon-delete js-delete-project" href="#"></a>
+          <h3 class="display-inline-block"><%= Project.by_key(r_id).name -%></h3>
+        </th>
+        <% for channel in @channels %>
+          <th class="text-center"><%= message('notification.channel.' + channel.getKey()) -%></th>
         <% end %>
       </tr>
-      
-           <% end %>
-      
+      </thead>
+      <tbody>
+      <% @per_project_dispatchers.each do |dispatcher| %>
+        <tr>
+          <td><%= message('notification.dispatcher.' + dispatcher) -%></td>
+          <%
+             for channel in @channels
+               check_box_id = 'project_notifs[' + r_id.to_s + '][' + dispatcher + '][' + channel.getKey() + ']'
+               check_box_checked = per_project_notif[dispatcher].include?(channel.getKey())
+          %>
+            <td class="text-center">
+              <%= check_box_tag check_box_id, 'true', check_box_checked %>
+            </td>
+          <% end %>
+        </tr>
       <% end %>
-      
+      </tbody>
     </table>
+  </div>
+<% end %>
+
+<div class="spacer-bottom">
+  <%= resource_select_tag 'new_project', {:qualifiers => ['TRK'], :width => '250px',
+                                          :select2_options => {'placeholder' => "'" + message('my_profile.add_project') + "'"}
+                                       } -%>
+</div>
+
+<script>
+  (function ($) {
+    $('#new_project').on('change', function (e) {
+      var id = $(e.currentTarget).val();
+      if (id != null) {
+        $('#notif_form').submit();
+      }
+    });
+
+    $('.js-delete-project').on('click', function (e) {
+      e.preventDefault();
+      $(e.currentTarget).closest('[data-project-id]').remove();
+    });
+  })(window.jQuery);
+</script>
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/index.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/index.html.erb
index 90a27075860..dd0cd994586 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/index.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/account/index.html.erb
@@ -1,86 +1,80 @@
-<% content_for :style do %>
-  <style>
-    h2 {
-      padding-bottom: 10px;
-    }
-  </style>
-<% end %>
-
 <div class="page">
-  <h1 class="marginbottom10"><%= message('my_profile.page') -%></h1>
 
-  <div class="admin marginbottom10">
-    <table class="form">
-      <tr>
-        <td><b><%= message('my_profile.login') -%>:</b></td>
-        <td id="login"><%= current_user.login %></td>
-      </tr>
-      <tr>
-        <td><b><%= message('my_profile.name') -%>:</b></td>
-        <td id="name"><%= current_user.name %></td>
-      </tr>
-      <tr>
-        <td><b><%= message('my_profile.email') -%>:</b></td>
-        <td id="email"><%= current_user.email %></td>
-      </tr>
-      <tr>
-        <td><b><%= message('my_profile.groups') -%>:</b></td>
-        <td id="groups"><%= current_user.groups.sort.map(&:name).join(', ') %></td>
-      </tr>
-      <tr>
-        <td><b><%= message('my_profile.scm_accounts') -%>:</b></td>
-        <td id="groups"><%= current_user.full_scm_accounts.join(', ') %></td>
-      </tr>
-    </table>
-  </div>
+  <div class="pull-left big-spacer-right abs-width-240 text-center">
+    <div class="panel panel-white">
+      <div>
+        <% if configuration('sonar.lf.enableGravatar', 'true') == 'true' %>
+          <div class="js-avatar big-spacer-bottom"></div>
+        <% end %>
+        <h2 id="name"><%= current_user.name %></h2>
+        <p id="login" class="note"><%= current_user.login %></p>
+        <div class="text-center spacer-top">
+          <p id="email"><%= current_user.email %></p>
+        </div>
+      </div>
 
-  <% if User.editable_password? %>
-    <div class="admin marginbottom10">
-      <h2><%= message('my_profile.password.title') -%></h2>
+      <div class="big-spacer-top">
+        <h3 class="text-center"><%= message('my_profile.groups') -%></h3>
+        <ul id="groups">
+          <% current_user.groups.sort.each do |group| -%>
+            <li><%= group.name -%></li>
+          <% end -%>
+        </ul>
+      </div>
 
-      <form id="pass_form_tag" name="pass_form_tag" method="post" action="<%= ApplicationController.root_context -%>/account/change_password">
-        <table class="form">
-          <tr>
-            <td class="keyCell"><label for="old_password"><%= message('my_profile.password.old') -%>:</label></td>
-            <td><%= password_field_tag 'old_password', nil, {:autocomplete => 'off'} %></td>
-          </tr>
-          <tr>
-            <td class="keyCell"><label for="password"><%= message('my_profile.password.new') -%>:</label></td>
-            <td><%= password_field_tag 'password', nil, {:autocomplete => 'off'}  %></td>
-          </tr>
-          <tr>
-            <td class="keyCell"><label for="password_confirmation"><%= message('my_profile.password.confirm') -%>:</label></td>
-            <td><%= password_field_tag 'password_confirmation', nil, {:autocomplete => 'off'}  %></td>
-          </tr>
-          <tr>
-            <td></td>
-            <td><%= submit_tag message('my_profile.password.submit') %></td>
-          </tr>
-        </table>
-      </form>
+      <div class="big-spacer-top">
+        <h3 class="text-center"><%= message('my_profile.scm_accounts') -%></h3>
+        <ul id="scm-accounts">
+          <% current_user.full_scm_accounts.each do |scm_account| -%>
+            <li><%= scm_account -%></li>
+          <% end -%>
+        </ul>
+      </div>
 
-      <script>
-        //<![CDATA[
-         $j('#pass_form_tag :input:enabled:visible:first').focus();
-        //]]>
-      </script>
+      <% if User.editable_password? %>
+        <div class="big-spacer-top">
+          <button id="account-change-password-trigger" class="open-modal" href="<%= url_for :action => 'change_password_form' %>">
+            <i class="icon-lock"></i> <%= message('my_profile.password.title') -%>
+          </button>
+        </div>
+      <% end %>
     </div>
-  <% end -%>
+  </div>
+
+  <div class="overflow-hidden">
+    <% unless current_user.favourites.empty? -%>
+      <section class="big-spacer-bottom">
+        <%= render "account/favorites" -%>
+      </section>
+    <% end %>
 
-  <div class="admin marginbottom10">
     <form id="notif_form" method="post" action="<%= ApplicationController.root_context -%>/account/update_notifications">
       <% unless @global_dispatchers.empty? -%>
-        <%= render "account/global_notifications" -%>
-        <br/><br/>
+        <section class="big-spacer-bottom">
+          <%= render "account/global_notifications" -%>
+        </section>
       <% end %>
 
       <% unless @per_project_dispatchers.empty? -%>
-        <%= render "account/per_project_notifications" -%>  
+        <section>
+          <%= render "account/per_project_notifications" -%>
+        </section>
       <% end %>
-      
-      <br/><br/>
-      <input type="submit" value="<%= message('my_profile.notifications.submit') -%>" name="commit">
+
+      <section class="big-spacer-top">
+        <input type="submit" value="<%= message('my_profile.notifications.submit') -%>" name="commit">
+      </section>
     </form>
   </div>
-  
 </div>
+
+<script>
+  (function ($) {
+    $('html').addClass('dashboard-page');
+
+    <% if configuration('sonar.lf.enableGravatar', true) %>
+    var avatarHtml = Handlebars.helpers.avatarHelper('<%= current_user.email %>', 100).string;
+    $('.js-avatar').html(avatarHtml);
+    <% end %>
+  })(window.jQuery);
+</script>