update other email fields to use dropdowns with Manage link24910-set-emails

4 files changed, 55 insertions, 7 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index ff31e7f7b3d..6fbe6b6b8e9 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -41,6 +41,7 @@
   border: 1px solid $border-color;
   border-radius: $border-radius-base;
   white-space: nowrap;
+  position: relative;
 
   &[disabled] {
     background-color: $input-bg-disabled;
@@ -79,8 +80,9 @@
   .fa-chevron-down {
     font-size: $dropdown-chevron-size;
     position: relative;
-    top: -3px;
-    margin-left: 5px;
+    top: calc(50% - 0.5em);
+    right: 1em;
+    position: absolute;
   }
 
   &:hover {
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 8031c4467a4..b872dc98d57 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -70,6 +70,20 @@
   }
 }
 
+.account-well-flex {
+  display: -webkit-flex;
+  display: flex;
+
+  *:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  *:last-child {
+    margin-left: auto;
+  }
+}
+
 .profile-link-holder {
   display: inline;
 
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index 5c5e5940365..9f340163c57 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -24,7 +24,23 @@
       = form_for @user, url: profile_notifications_path, method: :put, html: { class: 'update-notifications prepend-top-default' } do |f|
         .form-group
           = f.label :notification_email, class: "label-light"
-          = f.select :notification_email, @user.all_emails, { include_blank: false }, class: "select2"
+          - if @user.all_emails.length <= 1
+            .account-well.account-well-flex
+              %span= @user.notification_email
+              = link_to 'Manage', profile_emails_path()
+          - else
+            .dropdown
+              %button.dropdown-toggle.wide{ 'data-toggle' => 'dropdown' }
+                %span.light
+                  = @user.email
+                = icon('chevron-down')
+              %ul.dropdown-menu.dropdown-menu-full-width
+                - @user.all_emails.each do |email|
+                  %li
+                    = link_to email, profile_email_path(email), method: :put
+                %li.separator
+                %li
+                  = link_to 'Manage', profile_emails_path()
 
       = label_tag :global_notification_level, "Global notification level", class: "label-light"
       %br
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index ebbea583470..e9fcdfa992c 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -58,17 +58,20 @@
             = f.text_field :email, class: "form-control", required: true, value: nil
           - else
             - if @user.all_emails.length <= 1
-              = f.text_field :email, class: "form-control", required: true, readonly: true
+              .account-well.account-well-flex
+                %span= @user.email
+                = link_to 'Manage', profile_emails_path()
             - else
               .dropdown
-                %button.dropdown-toggle.form-control{ 'data-toggle' => 'dropdown' }
+                %button.dropdown-toggle.wide{ 'data-toggle' => 'dropdown' }
                   %span.light
                     = @user.email
                   = icon('chevron-down')
-                %ul.dropdown-menu
+                %ul.dropdown-menu.dropdown-menu-full-width
                   - @user.all_emails.each do |email|
                     %li
                       = link_to email, profile_email_path(email), method: :put
+                  %li.separator
                   %li
                     = link_to 'Manage', profile_emails_path()
           - if @user.unconfirmed_email.present?
@@ -83,7 +86,20 @@
             %span.help-block We also use email for avatar detection if no avatar is uploaded.
       .form-group
         = f.label :public_email, class: "label-light"
-        = f.select :public_email, options_for_select(@user.all_emails, selected: @user.public_email), { include_blank: 'Do not show on profile' }, class: "select2"
+        .dropdown
+          %button.dropdown-toggle.wide{ 'data-toggle' => 'dropdown' }
+            %span.light
+              = 'Do not show on profile'
+            = icon('chevron-down')
+          %ul.dropdown-menu.dropdown-menu-full-width
+            %li
+              = link_to 'Do not show on profile', profile_email_path(''), method: :put
+            - @user.all_emails.each do |email|
+              %li
+                = link_to email, profile_email_path(email), method: :put
+            %li.separator
+            %li
+              = link_to 'Manage', profile_emails_path()
         %span.help-block This email will be displayed on your public profile.
       .form-group
         = f.label :skype, class: "label-light"