From 5e92429212fa9fbced7bd83db0453090a1c3e2a1 Mon Sep 17 00:00:00 2001
From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>
Date: Thu, 24 Mar 2022 10:16:47 +0100
Subject: [PATCH] Add micro-interactions to reminders flyout [SCI-6627] (#3951)

Co-authored-by: Anton <anton@scinote.net>
---
 .../javascripts/sitewide/repository_helper.js      | 14 +++++++++++---
 app/assets/stylesheets/layouts/reminders.scss      | 10 ++--------
 .../stylesheets/repository/repository_table.scss   |  2 +-
 app/views/shared/_repository_row_reminder.html.erb | 10 +++++-----
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/sitewide/repository_helper.js b/app/assets/javascripts/sitewide/repository_helper.js
index 515837547..da4df8ba2 100644
--- a/app/assets/javascripts/sitewide/repository_helper.js
+++ b/app/assets/javascripts/sitewide/repository_helper.js
@@ -64,21 +64,29 @@ function prepareRepositoryHeaderForExport(th) {
 }
 
 function initReminderDropdown(table) {
+  $(table).on('keyup', '.row-reminders-dropdown', function(e) {
+    if (e.key === 'Escape') {
+      $(this).dropdown('toggle');
+    }
+  });
   $(table).on('show.bs.dropdown', '.row-reminders-dropdown', function() {
     let row = $(this).closest('tr');
     let screenHeight = screen.height;
     let rowPosition = row[0].getBoundingClientRect().y;
+    let dropdownMenu = $(this).find('.dropdown-menu');
     if ((screenHeight / 2) < rowPosition) {
-      $(this).find('.dropdown-menu').css({ top: 'unset', bottom: '100%' });
+      dropdownMenu.css({ top: 'unset', bottom: '100%' });
     } else {
-      $(this).find('.dropdown-menu').css({ bottom: 'unset', top: '100%' });
+      dropdownMenu.css({ bottom: 'unset', top: '100%' });
     }
     $.ajax({
       url: $(this).attr('data-row-reminders-url'),
       type: 'GET',
       dataType: 'json',
       success: function(data) {
-        $('.row-reminders-dropdown .dropdown-menu').html(data.html);
+        dropdownMenu.html(data.html);
+
+        dropdownMenu.find('.row-reminders-footer')[0].focus();
       }
     });
   });
diff --git a/app/assets/stylesheets/layouts/reminders.scss b/app/assets/stylesheets/layouts/reminders.scss
index 315da55ba..16fd4d90e 100644
--- a/app/assets/stylesheets/layouts/reminders.scss
+++ b/app/assets/stylesheets/layouts/reminders.scss
@@ -17,14 +17,8 @@
   }
 
   .row-reminders-footer {
-    display: inline;
-  }
-
-  .fas {
-    line-height: 30px;
-    margin-left: 8px;
-    margin-top: 5px;
-    width: 16px;
+    margin: 4px 14px;
+    padding: 8px 2px;
   }
 
   hr {
diff --git a/app/assets/stylesheets/repository/repository_table.scss b/app/assets/stylesheets/repository/repository_table.scss
index 9b1fe2bf2..b1404d4c6 100644
--- a/app/assets/stylesheets/repository/repository_table.scss
+++ b/app/assets/stylesheets/repository/repository_table.scss
@@ -50,7 +50,7 @@
     padding: 1px 8px;
     position: relative;
 
-    .fas {
+    .fas.fa-pencil-alt {
       line-height: 35px;
       text-align: center;
       width: 30px;
diff --git a/app/views/shared/_repository_row_reminder.html.erb b/app/views/shared/_repository_row_reminder.html.erb
index 1c099a492..739cd75df 100644
--- a/app/views/shared/_repository_row_reminder.html.erb
+++ b/app/views/shared/_repository_row_reminder.html.erb
@@ -5,13 +5,13 @@
     <% elsif reminder.value_type == 'RepositoryDateTimeValueBase' %>
       <%= render partial: 'shared/reminder/date_reminder', locals: { reminder: reminder } %>
     <% end %>
-    <div class="row-reminders-footer" data-row-hide-reminders-url="
-      <%= repository_repository_row_repository_cell_hide_reminder_url(reminder.repository_row.repository, 
-                                                                      reminder.repository_row, 
-                                                                      reminder) %> ">
+    <button class="row-reminders-footer btn btn-light" data-row-hide-reminders-url="
+      <%= repository_repository_row_repository_cell_hide_reminder_url(reminder.repository_row.repository,
+                                                                      reminder.repository_row,
+                                                                      reminder) %> " tabindex="<%= index + 1 %>">
       <i class="fas fa-times"></i>
       <%= t('repository_row.reminder.clear') %>
-    </div>
+    </button>
     <%if index + 1 < reminders.length %>
         <hr>
     <%end%>