Small snapshots CSS corrections

This commit is contained in:
aignatov-bio 2020-05-11 14:53:28 +02:00
parent 78b4067c50
commit 309f8c1a3d
10 changed files with 54 additions and 22 deletions

View file

@ -1,6 +1,6 @@
/* eslint-disable no-param-reassign, no-use-before-define */
/* global DataTableHelpers PerfectScrollbar FilePreviewModal animateSpinner HelperModule
initAssignedTasksDropdown */
initAssignedTasksDropdown I18n */
var MyModuleRepositories = (function() {
const FULL_VIEW_MODAL = $('#myModuleRepositoryFullViewModal');
@ -173,6 +173,11 @@ var MyModuleRepositories = (function() {
drawCallback: function() {
FULL_VIEW_TABLE.columns.adjust();
FilePreviewModal.init();
renderFullViewRepositoryName(
tableContainer.attr('data-repository-name'),
tableContainer.attr('data-repository-snapshot-created')
);
updateFullViewRowsCount(tableContainer.attr('data-assigned-items-count'));
if (FULL_VIEW_TABLE_SCROLLBAR) {
FULL_VIEW_TABLE_SCROLLBAR.update();
} else {
@ -397,10 +402,10 @@ var MyModuleRepositories = (function() {
function initRepositoryFullView() {
$('#assigned-items-container').on('click', '.action-buttons .full-screen', function(e) {
var repositoryNameObject = $(this).closest('.assigned-repository-caret')
.find('.assigned-repository-title')
.clone();
.find('.assigned-repository-title');
FULL_VIEW_MODAL.find('.repository-name').html(repositoryNameObject);
renderFullViewRepositoryName(repositoryNameObject.text());
FULL_VIEW_MODAL.modal('show');
$.getJSON($(this).data('table-url'), (data) => {
FULL_VIEW_MODAL.find('.table-container').html(data.html);
@ -454,17 +459,31 @@ var MyModuleRepositories = (function() {
function updateFullViewRowsCount(value) {
FULL_VIEW_MODAL.data('rows-count', value);
FULL_VIEW_MODAL.find('.assigned-repository-title').attr('data-rows-count', `[${value}]`);
FULL_VIEW_MODAL.find('.repository-name').attr('data-rows-count', value);
}
function renderFullViewRepositoryName(name, snapshotDate) {
var title;
var repositoryName = name || FULL_VIEW_MODAL.find('.repository-name').data('repository-name');
if (snapshotDate) {
title = I18n.t('my_modules.repository.full_view.modal_snapshot_header', {
repository_name: repositoryName,
snaphot_date: snapshotDate
});
} else {
title = I18n.t('my_modules.repository.full_view.modal_live_header', {
repository_name: repositoryName
});
}
FULL_VIEW_MODAL.find('.repository-name').data('repository-name', repositoryName);
FULL_VIEW_MODAL.find('.repository-name').html(title);
}
function initRepoistoryAssignView() {
$('.repositories-dropdown-menu').on('click', '.repository', function(e) {
var assignUrlModal = $(this).data('assign-url-modal');
var updateUrlModal = $(this).data('update-url-modal');
var repositoryNameObject = $(this).find('.name').clone().addClass('assigned-repository-title');
FULL_VIEW_MODAL.find('.repository-name').html(repositoryNameObject);
FULL_VIEW_MODAL.data('rows-count', $(this).data('rows-count'));
FULL_VIEW_MODAL.modal('show');
$.get($(this).data('table-url'), (data) => {
FULL_VIEW_MODAL.find('.table-container').html(data.html);
@ -546,9 +565,10 @@ var MyModuleRepositories = (function() {
UPDATE_REPOSITORY_MODAL.modal('hide');
HelperModule.flashAlertMsg(data.flash, 'success');
SELECTED_ROWS = {};
$(FULL_VIEW_TABLE.table().container()).find('.dataTable')
.attr('data-assigned-items-count', data.rows_count)
FULL_VIEW_TABLE.ajax.reload(null, false);
reloadRepositoriesList();
updateFullViewRowsCount(data.rows_count);
renderFullViewAssignButtons();
},
error: function(data) {

View file

@ -63,10 +63,11 @@ var dropdownSelector = (function() {
var modalContainerBottom = 0;
var maxHeight = 0;
if (modalContainer.length) {
windowHeight = modalContainer.height() + modalContainer[0].getBoundingClientRect().top;
containerPositionLeft -= modalContainer[0].getBoundingClientRect().left;
modalContainerBottom = windowHeight - modalContainer[0].getBoundingClientRect().bottom;
if (modalContainer.length && windowHeight - modalContainer.height() > 100) {
let modalClientRect = modalContainer[0].getBoundingClientRect();
windowHeight = modalContainer.height() + modalClientRect.top;
containerPositionLeft -= modalClientRect.left;
modalContainerBottom = windowHeight + modalClientRect.bottom;
maxHeight += modalContainerBottom;
}
bottomSpace = windowHeight - containerPosition - containerHeight;

View file

@ -12,7 +12,7 @@
&::after {
color: $color-alto;
content: attr(data-rows-count);
content: '[' attr(data-rows-count) ']';
display: inline-block;
line-height: 22px;
padding-left: 5px;
@ -211,16 +211,16 @@
flex-grow: 1;
max-width: calc(100% - 20px);
.assigned-repository-title {
.repository-name {
@include my-module-repository-title;
@include font-h2;
}
.breadcrumbs {
@include font-small;
align-items: center;
color: $color-silver-chalice;
display: flex;
font-size: 10px;
height: 20px;
width: 90%;
@ -367,6 +367,7 @@
.list-group-item-text {
@include font-small;
color: $color-silver-chalice;
}

View file

@ -45,7 +45,7 @@ $color-alabaster: $color-concrete;
$color-gainsboro: $color-concrete;
$color-silver: $color-alto;
$color-dove-gray: $color-volcano;
$color-emperor: $color-volcano;
$color-emperor: $color-black;
$brand-default: $color-white;
$brand-info: $brand-focus;
$brand-other: $brand-success;

View file

@ -10,7 +10,8 @@
<span class="slash">/</span>
<span class="my-module" title="<%= @my_module.name %>"><%= @my_module.name %></span>
</div>
<div class="repository-name">
<div class="repository-name-container">
<span class="repository-name"></span>
</div>
</div>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>

View file

@ -2,6 +2,9 @@
data-id="<%= @repository_snapshot.id %>"
data-type="snapshot"
data-source="<%= index_dt_my_module_repository_snapshot_path(@my_module, @repository_snapshot) %>"
data-repository-name="<%= @repository_snapshot.name %>"
data-repository-snapshot-created="<%= l(@repository_snapshot.updated_at, format: :full) %>"
data-assigned-items-count="<%= @repository_snapshot.repository_rows.count %>"
data-default-order="<%= default_snapshot_table_order_as_js_array %>"
data-default-table-columns="<%= default_snapshot_table_columns %>"
data-load-state-url="<%= repository_load_table_state_path(@repository_snapshot) %>"

View file

@ -4,6 +4,8 @@
data-source="<%= index_dt_my_module_repository_path(@my_module, @repository) %>"
data-default-order="<%= default_table_order_as_js_array %>"
data-default-table-columns="<%= default_table_columns %>"
data-repository-name="<%= @repository.name %>"
data-assigned-items-count="<%= @my_module.repository_rows_count(@repository) %>"
data-load-state-url="<%= repository_load_table_state_path(@repository) %>"
data-versions-sidebar-url="<%= full_view_sidebar_my_module_repository_snapshots_path(@my_module, @repository) %>"
>

View file

@ -10,7 +10,7 @@
<i class="fas fa-users"></i>
</span>
<% end %>
<span class="name" data-rows-count="[<%= assigned_items_count %>]"><%= repository.name %></span>
<span class="name" data-rows-count="<%= assigned_items_count %>"><%= repository.name %></span>
<% if assigned_items_count.positive? %>
<span class="assigned-items">
<i class="fas fa-file-signature"></i>

View file

@ -7,7 +7,8 @@
data-parent="#assigned-items-container"
>
<i class="fas fa-caret-right"></i>
<span class="assigned-repository-title" data-rows-count="[<%= repository.assigned_rows_count %>]">
<span class="assigned-repository-title" data-rows-count="<%= repository.assigned_rows_count %>">
<%= repository.name %>
</span>
<div class="action-buttons">

View file

@ -791,6 +791,9 @@ en:
repository:
head_title: "%{project} | %{module} | Inventory %{repository}"
export: 'Export'
full_view:
modal_live_header: '%{repository_name}: Live version'
modal_snapshot_header: '%{repository_name}: Snapshot of %{snaphot_date}'
snapshots:
simple_view:
live_bottom_label: 'Live version'
@ -1067,7 +1070,7 @@ en:
share_inventory: "Share"
view_only_permission_label: "You have veiw-only permission"
show_per_page: "Show %{number} per page"
filter_inventory: "Filter inventory"
filter_inventory: "Filter inventory item"
options_dropdown:
import_items: 'Import items'