Move the user profile edit action close to the user details

openSUSE · Mar 18, 2021 · dc04932 · dc04932
1 parent 197ce1a
commit dc04932
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 5 deletions.
diff --git a/src/api/app/views/webui/user/_index_actions.html.haml b/src/api/app/views/webui/user/_index_actions.html.haml
@@ -1,5 +1,5 @@
 - content_for :actions do
-  - if configuration.accounts_editable?(user)
+  - if configuration.accounts_editable?(user) && !feature_enabled?('user_profile_redesign')
     = render partial: 'webui/user/index_actions/edit_account', locals: { account_edit_link: account_edit_link, user: user }
   - if configuration.passwords_changable?(user)
     = render partial: 'webui/user/index_actions/change_password'

diff --git a/src/api/app/views/webui/user/user_profile_redesign/_basic_info.html.haml b/src/api/app/views/webui/user/user_profile_redesign/_basic_info.html.haml
@@ -1,4 +1,14 @@
-.basic-info{ class: feature_enabled?(:user_profile_redesign) ? 'in-place-editing' : '' }
+.editing-form.d-none
+  = render partial: 'webui/user/user_profile_redesign/edit_account_form',
+           locals: { displayed_user: user, role_titles: role_titles, account_edit_link: account_edit_link }
+
+.basic-info
+  - if configuration.accounts_editable?(user)
+    .d-flex.flex-row-reverse
+      = link_to('javascript:void(0);', id: 'toggle-in-place-editing', class: 'nav-link', remote: true, title: 'Edit Your Account') do
+        %i.fas.mr-2.fa-user-edit
+        %span.nav-item-name Edit
+
   .row.mb-3.mb-md-0
     .col-4.col-sm-2.col-md-12.text-center
       = image_tag_for(user, size: 200)
@@ -18,3 +28,15 @@
       = mail_to(user.email, title: "Send mail to #{user.name}", class: 'd-block') do
         %i.fas.fa-envelope.mr-1
         = user.email
+
+
+:javascript
+  $('#toggle-in-place-editing').on('click', function () {
+    $('.in-place-editing .basic-info').toggleClass('d-none');
+    $('.in-place-editing .editing-form').toggleClass('d-none');
+  });
+  $('#cancel-in-place-editing').on('click', function () {
+    $('.in-place-editing .basic-info').toggleClass('d-none');
+    $('.in-place-editing .editing-form').toggleClass('d-none');
+    return false;
+  });
diff --git a/src/api/app/views/webui/user/user_profile_redesign/_edit_account_form.html.haml b/src/api/app/views/webui/user/user_profile_redesign/_edit_account_form.html.haml
@@ -24,5 +24,5 @@
       You are behind a proxy. You can modify other data related to your profile by
       = link_to(' this link.', account_edit_link)
   .form-group.text-right
-    = link_to 'Cancel', user_path(displayed_user), class: 'cancel btn btn-outline-danger px-4', remote: true
+    = button_tag 'Cancel', id: 'cancel-in-place-editing', class: 'cancel btn btn-outline-danger px-4'
     = submit_tag('Update', class: 'btn btn-primary px-4')
diff --git a/src/api/app/views/webui/user/user_profile_redesign/_info.html.haml b/src/api/app/views/webui/user/user_profile_redesign/_info.html.haml
@@ -2,7 +2,9 @@
 
 .card.mb-3
   .card-body
-    = render partial: 'webui/user/user_profile_redesign/basic_info', locals: { user: user, role_titles: role_titles }
+    .in-place-editing
+      = render partial: 'webui/user/user_profile_redesign/basic_info',
+               locals: { user: user, role_titles: role_titles, configuration: configuration, account_edit_link: account_edit_link }
 
     - if user.rss_token && is_user
       = link_to(user_rss_notifications_path(token: user.rss_token.string, format: 'rss'),

diff --git a/src/api/app/views/webui/users/update.js.haml b/src/api/app/views/webui/users/update.js.haml
@@ -4,7 +4,7 @@ resetFormValidation();
     element = $("##{@displayed_user.class.name.underscore}_#{field}"); // Create strings like "user_email"
     setFormValidation(element, "#{messages.to_sentence}");
 - else
-  - locals = { user: @displayed_user, role_titles: @role_titles }
+  - locals = { user: @displayed_user, role_titles: @role_titles, account_edit_link: @account_edit_link, configuration: @configuration }
   :plain
     $('.in-place-editing').animate({
       opacity: 0.25