scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-04 02:45:53 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2313 from aignatov-bio/ai-sci-4328-fix-general-css-issues-for-repositories

Browse source 
Fix general css issue for repositories [SCI-4238]
This commit is contained in:
aignatov-bio 2020-01-16 11:37:49 +01:00 • committed by GitHub
commit 17c643fb21
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 164 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/repositories/renderers/edit_renderers.js
View file

@ -8,8 +8,8 @@ $.fn.dataTable.render.editRowName = function(formId, cell) {
let text = $cell.find('a').first().text();
$cell.html(`
<div class="form-group">
<input class="form-control editing"
<div class="sci-input-container text-field">
<input class="sci-input-field"
form="${formId}"
type="text"
name="repository_row[name]"
@ -49,8 +49,8 @@ $.fn.dataTable.render.editRepositoryTextValue = function(formId, columnId, cell)
let text = $cell.text();
$cell.html(`
<div class="form-group">
<input class="form-control editing"
<div class="sci-input-container text-field">
<input class="sci-input-field"
form="${formId}"
type="text"
name="repository_cells[${columnId}]"
@ -137,8 +137,8 @@ $.fn.dataTable.render.editRepositoryNumberValue = function(formId, columnId, cel
let $cell = $(cell.node());
$cell.html(`
<div class="form-group">
<input class="form-control editing"
<div class="sci-input-container text-field">
<input class="sci-input-field"
form="${formId}"
type="number"
name="repository_cells[${columnId}]"

12
app/assets/javascripts/repositories/renderers/new_renderers.js
View file

@ -5,8 +5,8 @@ GLOBAL_CONSTANTS DateTimeHelper
$.fn.dataTable.render.newRowName = function(formId, $cell) {
$cell.html(`
<div class="form-group">
<input class="form-control editing"
<div class="sci-input-container text-field">
<input class="sci-input-field"
form="${formId}"
type="text"
name="repository_row[name]"
@ -39,8 +39,8 @@ $.fn.dataTable.render.newRepositoryAssetValue = function(formId, columnId, $cell
$.fn.dataTable.render.newRepositoryTextValue = function(formId, columnId, $cell) {
$cell.html(`
<div class="form-group">
<input class="form-control editing"
<div class="sci-input-container text-field">
<input class="sci-input-field"
form="${formId}"
type="text"
name="repository_cells[${columnId}]"
@ -66,8 +66,8 @@ $.fn.dataTable.render.newRepositoryChecklistValue = function(formId, columnId, $
$.fn.dataTable.render.newRepositoryNumberValue = function(formId, columnId, $cell) {
$cell.html(`
<div class="form-group">
<input class="form-control editing"
<div class="sci-input-container text-field">
<input class="sci-input-field"
form="${formId}"
type="number"
name="repository_cells[${columnId}]"

35
app/assets/javascripts/repositories/repository_datatable.js
View file

@ -1,5 +1,5 @@
/*
globals I18n _ SmartAnnotation FilePreviewModal animateSpinner Promise
globals I18n _ SmartAnnotation FilePreviewModal animateSpinner Promise dropdownSelector
HelperModule animateLoading hideAssignUnasignModal RepositoryDatatableRowEditor
*/
@ -385,7 +385,7 @@ var RepositoryDatatable = (function(global) {
function dataTableInit() {
viewAssigned = 'assigned';
TABLE = $(TABLE_ID).DataTable({
dom: "R<'main-actions'<'toolbar'><'filter-container'f>>t<'pagination-row'<'pagination-info'li><'pagination-actions'p>>",
dom: "R<'main-actions hidden'<'toolbar'><'filter-container'f>>t<'pagination-row hidden'<'pagination-info'li><'pagination-actions'p>>",
stateSave: true,
processing: true,
serverSide: true,
@ -519,6 +519,8 @@ var RepositoryDatatable = (function(global) {
});
},
fnInitComplete: function() {
var tableLengthSelect = $('.dataTables_length select');
var tableFilterInput = $('.dataTables_filter input');
initRowSelection();
bindExportActions();
disableCheckboxToggleOnAssetDownload();
@ -540,7 +542,34 @@ var RepositoryDatatable = (function(global) {
initCancelButton();
}
$('.dataTables_scrollBody, .dataTables_scrollHead').css('overflow', '');
if ($('.repository-show').length) {
$('.dataTables_scrollBody, .dataTables_scrollHead').css('overflow', '');
}
if (tableLengthSelect.val() == null) {
tableLengthSelect.val(10).change();
}
$.each(tableLengthSelect.find('option'), (i, option) => {
option.innerHTML = I18n.t('repositories.index.show_per_page', { number: option.value });
});
$('.dataTables_length').append(tableLengthSelect).find('label').remove();
dropdownSelector.init(tableLengthSelect, {
noEmptyOption: true,
singleSelect: true,
closeOnSelect: true,
selectAppearance: 'simple'
});
tableFilterInput.attr('placeholder', I18n.t('repositories.index.filter_inventory'))
.addClass('sci-input-field')
.css('margin', 0);
$('.dataTables_filter').append(`
<div class="sci-input-container left-icon">
<i class="fas fa-search"></i>
</div>`).find('.sci-input-container').prepend(tableFilterInput);
$('.dataTables_filter').find('label').remove();
$('.main-actions, .pagination-row').removeClass('hidden');
}
});

19
app/assets/javascripts/sitewide/form_errors.js
View file

@ -25,12 +25,6 @@ var renderFormError = function(ev, input, errMsgs, clearErr, errAttributes) {
$form.clearFormErrors();
}
// Mark error form group
var $formGroup = $(input).closest('.form-group');
if (!$formGroup.hasClass('has-error')) {
$formGroup.addClass('has-error');
}
// Add error message/s
var errorText = ($.makeArray(errMsgs).map(function(m) {
if( m instanceof Array ) {
@ -40,6 +34,19 @@ var renderFormError = function(ev, input, errMsgs, clearErr, errAttributes) {
}
})).join('<br />');
if ($(input).hasClass('sci-input-field')) {
$(input).closest('.sci-input-container').addClass('error');
$(input).closest('.sci-input-container').attr('data-error-text', errorText);
return;
}
// Mark error form group
var $formGroup = $(input).closest('.form-group');
if (!$formGroup.hasClass('has-error')) {
$formGroup.addClass('has-error');
}
var $errSpan = "<span class='help-block'" +
errAttributes + '>' + errorText + '</span>';
$(input).after($errSpan);

1
app/assets/stylesheets/application.scss
View file

@ -28,6 +28,7 @@
@import "partials/*";
@import "my_modules/protocols/*";
@import "my_modules/results/*";
@import "my_modules/*";
@import "protocols/*";
@import "repository/*";
@import "repository_columns/*";

7
app/assets/stylesheets/extend/bootstrap.scss vendored
View file

@ -143,3 +143,10 @@
}
}
}
.bootstrap-datetimepicker-widget {
.dow {
@include font-button;
}
}

8
app/assets/stylesheets/extend/datatable.scss
View file

@ -12,9 +12,15 @@
tr {
th {
border-bottom-width: 0;
border-bottom: 2px solid $color-white;
border-left: 2px solid $color-white;
font-weight: bold;
white-space: nowrap;
.modal-tooltiptext {
margin-left: -10px;
margin-top: 10px;
}
&::after {
color: $color-silver-chalice;

69
app/assets/stylesheets/my_modules/repositories.scss Normal file
View file

@ -0,0 +1,69 @@
// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
// scss-lint:disable NestingDepth ImportantRule
.my-module-inventories {
.main-actions {
align-items: center;
display: flex;
.filter-container {
flex-grow: 1;
}
}
.dataTables_scroll {
.dataTables_scrollBody {
thead {
opacity: 0;
}
}
}
tbody {
tr:hover {
.assigned-column {
.repository-row-edit-icon {
display: none !important;
}
.circle-icon {
margin-left: 30px !important;
}
}
}
}
.pagination-row {
align-items: center;
display: flex;
.pagination-info,
.pagination-actions {
flex-grow: 1;
}
.pagination-info {
align-items: center;
display: flex;
.dataTables_info {
padding-top: 0;
}
.dataTables_length {
margin-right: 24px;
width: 170px;
.dropdown-selector-container {
width: inherit;
}
label {
margin-bottom: 0;
}
}
}
}
}

9
app/assets/stylesheets/repositories.scss
View file

@ -132,7 +132,7 @@
}
.dataTables_scrollBody {
thead {
thead th#checkbox {
opacity: 0;
}
}
@ -166,7 +166,12 @@
}
.dataTables_length {
margin-right: 10px;
margin-right: 24px;
width: 170px;
.dropdown-selector-container {
width: inherit;
}
label {
margin-bottom: 0;

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

@ -78,15 +78,21 @@
padding: 5px;
}
}
}
.checklist-dropdown span {
color: $brand-primary;
cursor: pointer;
&:hover {
text-decoration: underline;
span {
color: $brand-primary;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
// Text and Number field
.text-field.sci-input-container {
min-width: 150px;
}
// DateTime
.datetime-container {

1
app/assets/stylesheets/shared_styles/elements/input_fields.scss
View file

@ -16,6 +16,7 @@
animation-timing-function: $timing-function-sharp;
border: $border-default;
border-radius: $border-radius-default;
box-shadow: none;
height: 36px;
outline: 0;
padding: 0 0 0 10px;

8
app/assets/stylesheets/themes/scinote.scss
View file

@ -516,14 +516,6 @@ a[data-toggle="tooltip"] {
.dataTables_wrapper {
margin-top: 15px;
clear: both;
.dataTables_length {
float: left;
}
.dataTables_filter {
float: right;
}
}
table {

2
app/views/my_modules/repository.html.erb
View file

@ -44,7 +44,7 @@
<% end %>
</div>
<div id="content"
<div id="content" class="my-module-inventories"
data-repo-id="#repository-table-<%= @repository.id %>">
<%= render partial: "repositories/repository_table",
locals: {

2
config/locales/en.yml
View file

@ -1007,6 +1007,8 @@ en:
edit_inventory: "Edit Inventory"
share_inventory: "Share"
view_only_permission_label: "You have veiw-only permission"
show_per_page: "Show %{number} per page"
filter_inventory: "Filter inventory"
options_dropdown:
import_items: 'Import items'