From ecf27c679e400aa1a8ac7f37428b47c5952fc277 Mon Sep 17 00:00:00 2001 From: Giga Chubinidze Date: Sat, 4 Mar 2023 23:03:41 +0400 Subject: [PATCH 1/6] Incorrect bottom action bar states for Protocol templates [SCI-8008] --- app/assets/stylesheets/shared/datatable.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/app/assets/stylesheets/shared/datatable.scss b/app/assets/stylesheets/shared/datatable.scss index 6b5ea33c4..9b3d6aa85 100644 --- a/app/assets/stylesheets/shared/datatable.scss +++ b/app/assets/stylesheets/shared/datatable.scss @@ -59,6 +59,20 @@ .btn { margin-right: .25em; } + + .btn:focus { + box-shadow: 0 0 0 3px $brand-focus; + } + + .btn-light { + &:active { + background-color: $color-alto !important; + } + + &:hover { + background: $color-white; + } + } } .pagination-info, From 1b9b10ccfbd21028add3e6c9262be7b8a4f5243f Mon Sep 17 00:00:00 2001 From: ajugo Date: Mon, 13 Mar 2023 13:04:23 +0100 Subject: [PATCH 2/6] Fix clickaway filtering for empty filter states [SCI-8103] (#5122) --- app/assets/javascripts/experiments/table.js | 40 ++++++++------ app/assets/javascripts/projects/index.js | 41 ++++++++------ app/assets/javascripts/projects/show.js | 35 +++++++----- app/assets/javascripts/protocols/index.js | 53 +++++++++++-------- .../javascripts/sitewide/filter_dropdown.js | 13 +++-- 5 files changed, 109 insertions(+), 73 deletions(-) diff --git a/app/assets/javascripts/experiments/table.js b/app/assets/javascripts/experiments/table.js index e47606f88..d7831ce54 100644 --- a/app/assets/javascripts/experiments/table.js +++ b/app/assets/javascripts/experiments/table.js @@ -491,29 +491,37 @@ var ExperimnetTable = { } }); }, - initFilters: function() { - this.filterDropdown = filterDropdown.init(); + getFilterValues: function() { let $experimentFilter = $('#experimentTable .my-modules-filters'); + $.each(this.filters, (_i, filter) => { + this.activeFilters[filter.name] = filter.apply($experimentFilter); + }); + + // filters are active if they have any non-empty value + let filtersEmpty = Object.values(this.activeFilters).every(value => /^\s+$/.test(value) + || value === null + || value === undefined + || (value && value.length === 0)); + this.filtersActive = !filtersEmpty; + }, + filtersEnabled: function() { + this.getFilterValues(); + + return this.filters.some((filter) => { + return filter.active(this.activeFilters[filter.name]); + }); + }, + initFilters: function() { + let $experimentFilter = $('#experimentTable .my-modules-filters'); + + this.filterDropdown = filterDropdown.init(() => this.filtersEnabled()); $.each(this.filters, (_i, filter) => { filter.init($experimentFilter); }); this.filterDropdown.on('filter:apply', () => { - $.each(this.filters, (_i, filter) => { - this.activeFilters[filter.name] = filter.apply($experimentFilter); - }); - - // filters are active if they have any non-empty value - let filtersEmpty = Object.values(this.activeFilters).every(value => /^\s+$/.test(value) || value === null || value === undefined || value && value.length === 0); - this.filtersActive = !filtersEmpty; - - filterDropdown.toggleFilterMark( - this.filterDropdown, - this.filters.some((filter) => { - return filter.active(this.activeFilters[filter.name]); - }) - ); + filterDropdown.toggleFilterMark(this.filterDropdown, this.filtersEnabled()); this.loadTable(); }); diff --git a/app/assets/javascripts/projects/index.js b/app/assets/javascripts/projects/index.js index d2e20665a..918a42585 100644 --- a/app/assets/javascripts/projects/index.js +++ b/app/assets/javascripts/projects/index.js @@ -559,7 +559,7 @@ var ProjectsIndex = (function() { } function initProjectsFilters() { - var $filterDropdown = filterDropdown.init(); + var $filterDropdown = filterDropdown.init(filtersEnabled); let $projectsFilter = $('.projects-index .projects-filters'); let $membersFilter = $('.members-filter', $projectsFilter); let $foldersCB = $('#folder_search', $projectsFilter); @@ -569,15 +569,30 @@ var ProjectsIndex = (function() { let $archivedOnToFilter = $('.archived-on-filter .to-date', $projectsFilter); let $textFilter = $('#textSearchFilterInput', $projectsFilter); + function getFilterValues() { + createdOnFromFilter = selectDate($createdOnFromFilter); + createdOnToFilter = selectDate($createdOnToFilter); + membersFilter = dropdownSelector.getValues($('.members-filter')); + lookInsideFolders = $foldersCB.prop('checked') ? 'true' : ''; + archivedOnFromFilter = selectDate($archivedOnFromFilter); + archivedOnToFilter = selectDate($archivedOnToFilter); + projectsViewSearch = $textFilter.val(); + } + + function filtersEnabled() { + getFilterValues(); + + return projectsViewSearch + || createdOnFromFilter + || createdOnToFilter + || (membersFilter && membersFilter.length !== 0) + || lookInsideFolders + || archivedOnFromFilter + || archivedOnToFilter; + } + function appliedFiltersMark() { - let filtersEnabled = projectsViewSearch - || createdOnFromFilter - || createdOnToFilter - || (membersFilter && membersFilter.length !== 0) - || lookInsideFolders - || archivedOnFromFilter - || archivedOnToFilter; - filterDropdown.toggleFilterMark($filterDropdown, filtersEnabled); + filterDropdown.toggleFilterMark($filterDropdown, filtersEnabled()); } dropdownSelector.init($membersFilter, { @@ -602,14 +617,6 @@ var ProjectsIndex = (function() { }); $filterDropdown.on('filter:apply', function() { - createdOnFromFilter = selectDate($createdOnFromFilter); - createdOnToFilter = selectDate($createdOnToFilter); - membersFilter = dropdownSelector.getValues($('.members-filter')); - lookInsideFolders = $foldersCB.prop('checked') ? 'true' : ''; - archivedOnFromFilter = selectDate($archivedOnFromFilter); - archivedOnToFilter = selectDate($archivedOnToFilter); - projectsViewSearch = $textFilter.val(); - appliedFiltersMark(); refreshCurrentView(); }); diff --git a/app/assets/javascripts/projects/show.js b/app/assets/javascripts/projects/show.js index c5a8efe49..ea8292bf6 100644 --- a/app/assets/javascripts/projects/show.js +++ b/app/assets/javascripts/projects/show.js @@ -147,7 +147,7 @@ } function initExperimentsFilters() { - var $filterDropdown = filterDropdown.init(); + var $filterDropdown = filterDropdown.init(filtersEnabled); let $experimentsFilter = $('.experiments-filters'); let $startedOnFromFilter = $('.started-on-filter .from-date', $experimentsFilter); @@ -158,18 +158,7 @@ let $archivedOnToFilter = $('.archived-on-filter .to-date', $experimentsFilter); let $textFilter = $('#textSearchFilterInput', $experimentsFilter); - function appliedFiltersMark() { - let filtersEnabled = experimentsViewSearch - || startedOnFromFilter - || startedOnToFilter - || modifiedOnFromFilter - || modifiedOnToFilter - || archivedOnFromFilter - || archivedOnToFilter; - filterDropdown.toggleFilterMark($filterDropdown, filtersEnabled); - } - - $filterDropdown.on('filter:apply', function() { + function getFilterValues() { startedOnFromFilter = selectDate($startedOnFromFilter); startedOnToFilter = selectDate($startedOnToFilter); modifiedOnFromFilter = selectDate($modifiedOnFromFilter); @@ -177,6 +166,26 @@ archivedOnFromFilter = selectDate($archivedOnFromFilter); archivedOnToFilter = selectDate($archivedOnToFilter); experimentsViewSearch = $textFilter.val(); + } + + function filtersEnabled() { + getFilterValues(); + + return experimentsViewSearch + || startedOnFromFilter + || startedOnToFilter + || modifiedOnFromFilter + || modifiedOnToFilter + || archivedOnFromFilter + || archivedOnToFilter; + } + + + function appliedFiltersMark() { + filterDropdown.toggleFilterMark($filterDropdown, filtersEnabled()); + } + + $filterDropdown.on('filter:apply', function() { appliedFiltersMark(); refreshCurrentView(); }); diff --git a/app/assets/javascripts/protocols/index.js b/app/assets/javascripts/protocols/index.js index 05e010a96..7f7dc6a44 100644 --- a/app/assets/javascripts/protocols/index.js +++ b/app/assets/javascripts/protocols/index.js @@ -51,7 +51,7 @@ var ProtocolsIndex = (function() { } function initProtocolsFilters() { - var $filterDropdown = filterDropdown.init(); + var $filterDropdown = filterDropdown.init(filtersEnabled); let $protocolsFilter = $('.protocols-index .protocols-filters'); let $publishedByFilter = $('.published-by-filter', $protocolsFilter); let $accessByFilter = $('.access-by-filter', $protocolsFilter); @@ -64,18 +64,36 @@ var ProtocolsIndex = (function() { let $archivedOnToFilter = $('.archived-on-filter .to-date', $protocolsFilter); let $textFilter = $('#textSearchFilterInput', $protocolsFilter); + function getFilterValues() { + publishedOnFromFilter = selectDate($publishedOnFromFilter); + publishedOnToFilter = selectDate($publishedOnToFilter); + modifiedOnFromFilter = selectDate($modifiedOnFromFilter); + modifiedOnToFilter = selectDate($modifiedOnToFilter); + publishedByFilter = dropdownSelector.getValues($('.published-by-filter')); + accessByFilter = dropdownSelector.getValues($('.access-by-filter')); + hasDraftFilter = $hasDraft.prop('checked') ? 'true' : ''; + archivedOnFromFilter = selectDate($archivedOnFromFilter); + archivedOnToFilter = selectDate($archivedOnToFilter); + protocolsViewSearch = $textFilter.val(); + } + + function filtersEnabled() { + getFilterValues(); + + return protocolsViewSearch + || publishedOnFromFilter + || publishedOnToFilter + || modifiedOnFromFilter + || modifiedOnToFilter + || (publishedByFilter && publishedByFilter.length !== 0) + || (accessByFilter && accessByFilter.length !== 0) + || hasDraftFilter + || archivedOnFromFilter + || archivedOnToFilter; + } + function appliedFiltersMark() { - let filtersEnabled = protocolsViewSearch - || publishedOnFromFilter - || publishedOnToFilter - || modifiedOnFromFilter - || modifiedOnToFilter - || (publishedByFilter && publishedByFilter.length !== 0) - || (accessByFilter && accessByFilter.length !== 0) - || hasDraftFilter - || archivedOnFromFilter - || archivedOnToFilter; - filterDropdown.toggleFilterMark($filterDropdown, filtersEnabled); + filterDropdown.toggleFilterMark($filterDropdown, filtersEnabled()); } $.each([$publishedByFilter, $accessByFilter], function(_i, selector) { @@ -97,17 +115,6 @@ var ProtocolsIndex = (function() { }); $filterDropdown.on('filter:apply', function() { - publishedOnFromFilter = selectDate($publishedOnFromFilter); - publishedOnToFilter = selectDate($publishedOnToFilter); - modifiedOnFromFilter = selectDate($modifiedOnFromFilter); - modifiedOnToFilter = selectDate($modifiedOnToFilter); - publishedByFilter = dropdownSelector.getValues($('.published-by-filter')); - accessByFilter = dropdownSelector.getValues($('.access-by-filter')); - hasDraftFilter = $hasDraft.prop('checked') ? 'true' : ''; - archivedOnFromFilter = selectDate($archivedOnFromFilter); - archivedOnToFilter = selectDate($archivedOnToFilter); - protocolsViewSearch = $textFilter.val(); - appliedFiltersMark(); protocolsDatatable.ajax.reload(); }); diff --git a/app/assets/javascripts/sitewide/filter_dropdown.js b/app/assets/javascripts/sitewide/filter_dropdown.js index 994b62d8f..9569040ed 100644 --- a/app/assets/javascripts/sitewide/filter_dropdown.js +++ b/app/assets/javascripts/sitewide/filter_dropdown.js @@ -1,5 +1,6 @@ var filterDropdown = (function() { var $filterContainer = ''; + var $filtersEnabled = false; function initClearButton() { $('.clear-button', $filterContainer).click(function(e) { @@ -21,7 +22,7 @@ var filterDropdown = (function() { }); } - function initSearchField() { + function initSearchField(filtersEnabledFunction) { var $textFilter = $('#textSearchFilterInput', $filterContainer); $filterContainer.on('show.bs.dropdown', function() { @@ -47,7 +48,9 @@ var filterDropdown = (function() { }).on('hide.bs.dropdown', function(e) { if (e.target === e.currentTarget) { $('#textSearchFilterHistory').hide(); - $('.apply-filters', $filterContainer).click(); + if (filtersEnabledFunction() || $filtersEnabled) { + $('.apply-filters', $filterContainer).click(); + } } }); @@ -98,15 +101,17 @@ var filterDropdown = (function() { } return { - init: function() { + init: function(filtersEnabledFunction) { $filterContainer = $('.filter-container'); + $filtersEnabled = false; initClearButton(); preventDropdownClose(); initApplyButton(); - initSearchField(); + initSearchField(filtersEnabledFunction); return $filterContainer; }, toggleFilterMark: function(filterContainer, filtersEnabled) { + $filtersEnabled = filtersEnabled; if (filtersEnabled) { filterContainer.addClass('filters-applied'); } else { From 0ffe9b619ca6e041a8d4cfe7d99f9b4c102d42a4 Mon Sep 17 00:00:00 2001 From: Giga Chubinidze Date: Mon, 13 Mar 2023 18:19:28 +0400 Subject: [PATCH 3/6] Protocol templates table - linked tasks modal [SCI-7630] --- app/assets/stylesheets/themes/scinote.scss | 9 ++++++++- .../protocols/index/_linked_children_modal_body.html.erb | 4 ++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index ca0978bb2..3f41b2773 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -554,9 +554,12 @@ mark,.mark { table tbody tr .breadcrumb { padding: 0 5px; + position: relative; + right: 15px; & li + li::before { - content: "> "; + color: $color-volcano; + content: "/ "; } } @@ -573,6 +576,10 @@ mark,.mark { } } +.no-linked-children { + padding: 16px 0; +} + a.edit-name-link small { margin-left: 5px; display: none; diff --git a/app/views/protocols/index/_linked_children_modal_body.html.erb b/app/views/protocols/index/_linked_children_modal_body.html.erb index 9cbaadbf7..61456f10f 100644 --- a/app/views/protocols/index/_linked_children_modal_body.html.erb +++ b/app/views/protocols/index/_linked_children_modal_body.html.erb @@ -11,7 +11,7 @@ <% else %> -
+
<%= t("protocols.index.linked_children.no_linked_children") %>
-<% end %> \ No newline at end of file +<% end %> From e6c204a2467ede66bbb557cf03c78eec2129a9dd Mon Sep 17 00:00:00 2001 From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com> Date: Tue, 14 Mar 2023 10:22:09 +0100 Subject: [PATCH 4/6] Fix save as new protocol modal [SCI-8003] (#5129) --- app/assets/javascripts/protocols/new_protocol.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/protocols/new_protocol.js b/app/assets/javascripts/protocols/new_protocol.js index eab55ab33..6221ed085 100644 --- a/app/assets/javascripts/protocols/new_protocol.js +++ b/app/assets/javascripts/protocols/new_protocol.js @@ -7,7 +7,7 @@ }) .on('show.bs.modal', function() { $(`${protocolModal} #protocol_name`).parent().removeClass('error'); - $(`${protocolModal} form[data-action="new"] #protocol_name`).val(''); + $(`${protocolModal} #protocol_name`).val(''); }); let roleSelector = `${protocolModal} #protocol_role_selector`; From 7b93ced5419608540e6aeb4e3dd356a6b27ddbf9 Mon Sep 17 00:00:00 2001 From: Soufiane Date: Tue, 14 Mar 2023 12:54:13 +0100 Subject: [PATCH 5/6] CSS: Protocol template - Details [SCI-8108] (#5131) * Fix spacing issue in protocol details [SCI-8108] * Fix spacing issue in protocol datatable [SCI-8108] * Match the styles of the authors and the keywords to figma [SCI-8108] * Fix broken dropdown footer [SCI-8108] * Fix hound [SCI-8108] --- .../my_modules/protocols/index.scss | 15 +++++++------- app/assets/stylesheets/protocols/index.scss | 10 +++++++++- .../stylesheets/protocols/protocol.scss | 20 +++++++++++++++++-- .../vue/protocol/protocolMetadata.vue | 8 ++++---- 4 files changed, 38 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss index 2faba7ff4..e27dfe9b8 100644 --- a/app/assets/stylesheets/my_modules/protocols/index.scss +++ b/app/assets/stylesheets/my_modules/protocols/index.scss @@ -426,10 +426,10 @@ left: -125px; max-width: 100vw; width: 506px; - padding: 15px 0; + padding: 0; .dropdown-content { - padding: 24px; + padding: 12px 24px; } .dropdown-header, @@ -489,16 +489,19 @@ } } } + } + + .dropdown-footer { + border-top: $border-tertiary; .notification-line { @include font-button; color: $color-silver-chalice; display: flex; - margin: 8px 0; .fas { line-height: 21px; - margin-right: 3px; + margin-right: 11px; } &.new-parent-version { @@ -510,10 +513,6 @@ } } } - - .dropdown-footer { - border-top: $border-tertiary; - } } } diff --git a/app/assets/stylesheets/protocols/index.scss b/app/assets/stylesheets/protocols/index.scss index a896a06e4..27ac008bb 100644 --- a/app/assets/stylesheets/protocols/index.scss +++ b/app/assets/stylesheets/protocols/index.scss @@ -20,6 +20,14 @@ width: 100%; tbody { + td { + vertical-align: middle; + } + + td:first-child { + padding-top: 4px; + } + td:not(:first-child) { max-width: 30rem; overflow: hidden; @@ -78,7 +86,7 @@ } td:not(:first-child) { - padding: 14px 8px; + padding: 12px 8px; } } diff --git a/app/assets/stylesheets/protocols/protocol.scss b/app/assets/stylesheets/protocols/protocol.scss index c6215b97b..52a90ffdb 100644 --- a/app/assets/stylesheets/protocols/protocol.scss +++ b/app/assets/stylesheets/protocols/protocol.scss @@ -96,12 +96,17 @@ padding-left: 20px; } } + .protocol-details { .protocol-metadata { margin-bottom: 2em; .data-block { margin-bottom: 16px; + + > :nth-child(2) { + margin-left: 8px; + } } .authors-data { @@ -113,12 +118,18 @@ flex-basis: calc(100% - 90px); flex-grow: 1; line-height: 32px; - margin-left: .75em; + margin-left: 8px; + font-weight: bold; } * { flex-shrink: 0; } + + .sci-inline-edit__view, + textarea { + padding-left: 10px; + } } .keywords-data { @@ -133,6 +144,11 @@ .dropdown-selector-container { padding-right: 10px; + margin-left: 0; + + .input-field { + margin-left: 0; + } &:not(.active) { .input-field { @@ -146,7 +162,7 @@ &.active { .input-field { - border: 1px solid $color-alto; + border: 1px solid $brand-focus; } } } diff --git a/app/javascript/vue/protocol/protocolMetadata.vue b/app/javascript/vue/protocol/protocolMetadata.vue index 50354b0ef..cc468178e 100644 --- a/app/javascript/vue/protocol/protocolMetadata.vue +++ b/app/javascript/vue/protocol/protocolMetadata.vue @@ -24,19 +24,19 @@