Core 941 update visual presentation of items on my profile (#1633)

* Style name as link

Making a separate edit button for it is tricky due to the way the "editable" component works.

* Render emails as details elements

* Enable other login options as details

and restyle Add an email button

* Name editor has pencil icon with "edit name" label

* Fix logout button

Author: RoyEJohnson

app/assets/javascripts/profile/authentication.coffee

@@ -101,10 +101,4 @@ OX.Profile.Authentication = {
       klass = SPECIAL_TYPES[$(el).data('provider')] or AuthenticationOption
       new klass(el)
 
-    $('#enable-other-sign-in').click (e) ->
-      e.preventDefault()
-      $(this).hide()
-      $('.row.other-sign-in').slideToggle()
-
-
 }

app/assets/javascripts/profile/email.coffee

@@ -11,7 +11,6 @@ class Email
     @id = this.$el.attr('data-id')
     this.$el.find('.searchable').change(@saveSearchable)
     this.$el.find('.resend-confirmation').click(@sendVerification)
-    this.$el.find('.email, .unconfirmed-warning').click(@toggleProperties)
     @update()
 
   update: ->
@@ -22,10 +21,6 @@ class Email
     else
       delBtn.on('click', @confirmDelete)
 
-  toggleProperties: ->
-    this.$el.toggleClass('expanded')
-    this.$el.find('button').attr('aria-expanded', this.$el.hasClass('expanded'))
-
   toggleSpinner: (show) ->
     this.$el.find('.spinner').toggle(_.isBoolean(show) and show)
 
@@ -102,7 +97,7 @@ OX.Profile.Email = {
     @addEmail.hide()
     email = $('#email-template').children().clone().addClass('new')
     $('#add-an-email-editable').append(email)
-    input = $(email).find('.email .value')
+    input = $(email).find('summary .value')
     input.editable(
       url: BASE_URL
       params: (params) ->

app/assets/javascripts/profile/name.coffee

@@ -5,7 +5,7 @@ class OX.Profile.Name
   @editable: (el, attribs) ->
     el.editable(
       value: attribs,
-      success: (response) -> $(@).html(response.full_name)
+      success: (response) -> $(@).find('.text-content').html(response.full_name)
       validate: (attrs) ->
         if not attrs.first_name and not attrs.last_name
           OX.I18n.name.first_last_name_blank

app/assets/stylesheets/profile.scss

@@ -55,6 +55,12 @@ $font-path: '/accounts/fonts';
     margin-top: 20px;
   }
 
+  #name {
+    .glyphicon {
+      margin-left: 2rem;
+    };
+  }
+
   .category {
     text-align: right;
     font-weight: bold;
@@ -71,6 +77,11 @@ $font-path: '/accounts/fonts';
     }
   }
 
+  button.editable {
+    background-color: transparent;
+    border: 0;
+  }
+
   .info {
     @media(max-width: 767px) {
       margin-left: 15px;
@@ -113,6 +124,9 @@ $font-path: '/accounts/fonts';
   }
 
   .email-entry {
+    &:not(.new) summary {
+      display: list-item;
+    }
     &:first-child {
       .alert { margin-top: 0; }
     }
@@ -133,7 +147,6 @@ $font-path: '/accounts/fonts';
       top: 15px;
     }
     .controls {
-      display: none;
       overflow: hidden;
       margin-left: 20px;
       margin-top: 4px;
@@ -161,12 +174,6 @@ $font-path: '/accounts/fonts';
         }
       }
     }
-    &.expanded,
-    &[aria-expanded="true"] {
-      .controls {
-        display: block;
-      }
-    }
 
     .resend-confirmation {
       margin-left: 7px;
@@ -198,6 +205,9 @@ $font-path: '/accounts/fonts';
   }
 
   #add-an-email {
+    background-color: transparent;
+    border: thin solid gray;
+    border-radius: 0.3rem;
     margin-top: 10px;
     display: block;
   }
@@ -246,6 +256,10 @@ $font-path: '/accounts/fonts';
     }
   }
 
+  #enable-other-sign-in {
+    display: list-item;
+  }
+
   .enabled-providers {
     .mod-holder .add { display: none; }
     .mod-holder .add--newflow { display: none; }
@@ -258,6 +272,15 @@ $font-path: '/accounts/fonts';
   }
 
   .other-sign-in {
+    summary {
+      display: list-item;
+      margin-top: -3rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .controls {
+      padding-left: 1.6rem;
+    }
     .authentication {
       .mod-holder {
         .edit   { display: none; }
@@ -268,9 +291,4 @@ $font-path: '/accounts/fonts';
     }
   }
 
-  .row.other-sign-in {
-    display: none;
-  }
-
-
 }

app/helpers/profile_helper.rb

@@ -82,11 +82,11 @@ def email_entry(value:, id:, is_verified:, is_searchable:)
 
     (
       <<-SNIPPET
-        <div class="email-entry editable-click #{'verified' if is_verified}" data-id="#{id}">
-          <button type="button" class="email" aria-expanded="false">
+        <details class="email-entry editable-click #{'verified' if is_verified}" data-id="#{id}">
+          <summary>
             <span class="value">#{value}</span>
-          </button>
-          #{unconfirmed_link}
+            #{unconfirmed_link}
+          </summary>
           <div class="controls">
             <div class='resend-confirmation'>
               <i class='fa fa-envelope-o'></i>
@@ -100,7 +100,7 @@ def email_entry(value:, id:, is_verified:, is_searchable:)
             </div>
           </div>
           <i class="spinner fa fa-spinner fa-spin fa-lg" style="display:none"></i>
-        </div>
+        </details>
       SNIPPET
     ).html_safe
   end

app/views/newflow/base/profile_newflow.html.erb

@@ -23,7 +23,11 @@
     display: none;
   }
 
-  a, #enable-other-sign-in, #add-an-email, .resend-confirmation input[type=submit] {
+  a,
+  #enable-other-sign-in,
+  #add-an-email,
+  button.editable,
+  .resend-confirmation input[type=submit] {
     color: #027eb5 !important;
   }
 
@@ -123,6 +127,7 @@
         I18n.t(:"legacy.users.edit.sign_out"),
         newflow_logout_path,
         class: 'sign-out',
+        method: :get,
         data: {
           'ga-category': 'Logout',
           'ga-action': 'Click',
@@ -138,7 +143,13 @@
       <%= I18n.t(:"legacy.users.edit.name") %>
     </div>
     <div class="col-sm-10 info">
-      <button href="#" id="name" class="editable" data-type="profile_name"><%= current_user.full_name %></button>
+      <button type="button" id="name"
+        class="editable"
+        data-type="profile_name"
+      >
+        <span class="text-content"><%= current_user.full_name %></span>
+        <span class="glyphicon glyphicon-pencil" aria-label="edit name"></span>
+      </button>
     </div>
   </div>
 
@@ -196,30 +207,26 @@
           <%= newflow_way_to_login(provider: provider, has_authentication: true, current_providers: current_providers) %>
         <% end %>
       </div>
-      <% if other_available_providers.any? %>
-      <div class="col-sm-offset-2 info col-sm-10">
-        <button id="enable-other-sign-in"><%= I18n.t(:"student_profile.enable_other_sign_in_options") %></button>
-      </div>
-      <% end %>
-
     </div>
 
-    <div class="row other-sign-in">
-      <div class="col-sm-2 category">
-        <%= I18n.t(:"student_profile.other_sign_in_options_html").html_safe %>
-      </div>
-      <div class="col-sm-10 info providers">
-        <% other_available_providers.each do |provider| %>
-          <%=
-            newflow_way_to_login(
-              provider: provider,
-              has_authentication: false,
-              current_providers: current_providers
-            )
-          %>
-        <% end %>
+    <% if other_available_providers.any? %>
+      <div class="row other-sign-in">
+        <details class="col-sm-10 col-sm-offset-2 info providers">
+          <summary><%= I18n.t(:"student_profile.enable_other_sign_in_options") %></summary>
+          <div class="controls">
+            <% other_available_providers.each do |provider| %>
+              <%=
+                newflow_way_to_login(
+                  provider: provider,
+                  has_authentication: false,
+                  current_providers: current_providers
+                )
+              %>
+            <% end %>
+          <div>
+        </details>
       </div>
-    </div>
+    <% end %>
 
       <hr>
       <div class="row">