scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-10 23:25:31 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add micro-interactions to reminders flyout [SCI-6627] (#3951)

Browse source 
Co-authored-by: Anton <anton@scinote.net>
This commit is contained in:
aignatov-bio 2022-03-24 10:16:47 +01:00 • committed by GitHub
parent 116dfa9247
commit 5e92429212
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/assets/javascripts/sitewide/repository_helper.js
View file

@ -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();
}
});
});

10
app/assets/stylesheets/layouts/reminders.scss
View file

@ -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 {

2
app/assets/stylesheets/repository/repository_table.scss
View file

@ -50,7 +50,7 @@
padding: 1px 8px;
position: relative;
.fas {
.fas.fa-pencil-alt {
line-height: 35px;
text-align: center;
width: 30px;

10
app/views/shared/_repository_row_reminder.html.erb
View file

@ -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%>