From 5314ef14c77d183f8ceaabf0323d0dfafa988ec1 Mon Sep 17 00:00:00 2001 From: wandji Date: Mon, 25 Sep 2023 09:46:19 +0100 Subject: [PATCH] Revert "Add navigation section to item card [SCI-9154] (#6268)" (#6284) This reverts commit 7430f2240d283cc13be177b35d9e0ee36442cc86. --- app/assets/stylesheets/application.sass.scss | 1 + .../shared/repository_item_sidebar.scss | 47 +++++ .../RepositoryItemSidebar.vue | 183 +++++++++--------- .../repository_values/HighlightComponent.vue | 16 ++ .../shared/_repository_row_sidebar.html.erb | 2 +- config/locales/en.yml | 9 +- 6 files changed, 156 insertions(+), 102 deletions(-) create mode 100644 app/assets/stylesheets/shared/repository_item_sidebar.scss create mode 100644 app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss index 34c9335f6..7b1ba75ab 100644 --- a/app/assets/stylesheets/application.sass.scss +++ b/app/assets/stylesheets/application.sass.scss @@ -77,6 +77,7 @@ @import "shared/assets"; @import "shared/avatar"; @import "shared/cards"; +@import "shared/repository_item_sidebar"; @import "shared/comments_sidebar"; @import "shared/comments"; @import "shared/content_pane"; diff --git a/app/assets/stylesheets/shared/repository_item_sidebar.scss b/app/assets/stylesheets/shared/repository_item_sidebar.scss new file mode 100644 index 000000000..eacc01e5c --- /dev/null +++ b/app/assets/stylesheets/shared/repository_item_sidebar.scss @@ -0,0 +1,47 @@ +// Should use tailwind; commented out for reference when refactoring + +// // scss-lint:disable IdSelector +// // scss-lint:disable SelectorDepth +// // scss-lint:disable NestingDepth + +// .repository-item-sidebar { +// font-size: 14px; +// font-weight: 400; +// line-height: 20px; + +// .header { +// border-bottom: 1px solid var(--sn-sleepy-grey); +// height: var(--top-navigation-height); + +// .item-name { +// font-size: 20px; +// line-height: 30px; +// width: calc(100% - 2rem); +// } +// } + +// .title { +// font-size: 18px; +// font-weight: 600; +// line-height: 28px; +// } + +// #information { +// width: 70%; +// } + +// .item-details { +// div { +// border-bottom: 1px solid var(--sn-sleepy-grey); + +// span { +// &.repository-name { +// -webkit-box-orient: vertical; +// display: -webkit-box; +// -webkit-line-clamp: 3; +// overflow: hidden; +// } +// } +// } +// } +// } diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue index 4f011e4b8..85e54e04b 100644 --- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue +++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue @@ -1,46 +1,26 @@ @@ -162,6 +158,7 @@ import RepositoryDateTimeRangeValue from './repository_values/RepositoryDateTime import RepositoryDateValue from './repository_values/RepositoryDateValue.vue'; import RepositoryDateRangeValue from './repository_values/RepositoryDateRangeValue.vue'; import RepositoryTimeRangeValue from './repository_values/RepositoryTimeRangeValue.vue' +import HighlightComponent from './repository_values/HighlightComponent.vue'; export default { name: 'RepositoryItemSidebar', @@ -178,16 +175,16 @@ export default { RepositoryDateValue, RepositoryDateRangeValue, RepositoryTimeRangeValue, + 'highlight-component': HighlightComponent }, data() { + // using dummy data for now return { repositoryRowId: null, repositoryName: null, defaultColumns: null, customColumns: null, isShowing: false, - navClicked: false, - activeNav: 'information', sequenceExpanded: false, assigned: 'Assigned to 3 private tasks that will not be displayed', barCodeSrc: null @@ -207,13 +204,6 @@ export default { } } }, - computed: { - navigations() { - return ['information', 'custom_columns', 'assigned', 'qr'].map(nav => ( - { label: I18n.t(`repositories.item_card.navigations.${nav}`), value: nav } - )); - } - }, beforeDestroy() { delete window.repositoryItemSidebarComponent; }, @@ -244,39 +234,42 @@ export default { this.customColumns = result.custom_columns; this.$nextTick(() => { this.generateBarCode(this.defaultColumns.code); - this.attachScrollEvent(); }); } }); }, - hightlightContent(nav) { - this.activeNav = nav; - this.navClicked = true; - this.$nextTick(function() { - $(`#repository-item-sidebar #${nav}_wrapper`)[0].scrollIntoView(); - }) - }, - attachScrollEvent() { - const topOffsets = {} - const sections = ['information', 'custom_columns', 'assigned', 'qr']; - for(let idx = 0; idx < sections.length; idx++) { - topOffsets[sections[idx]] = $(`#repository-item-sidebar #${sections[idx]}_wrapper`).offset().top; + // determine the identifier value according to the text-item (target) value + handleSideNavClick(e) { + let highlightItemId + const targetId = e.target.id + switch (targetId) { + case 'text-item-1': + highlightItemId = 'highlight-item-1' + break + case 'text-item-2': + highlightItemId = 'highlight-item-2' + break + case 'text-item-3': + highlightItemId = 'highlight-item-3' + break + case 'text-item-4': + highlightItemId = 'highlight-item-4' + break + default: null } - let isScrolling; - $('.content').on('scroll', () => { - if(isScrolling !== null) clearTimeout(isScrolling); - isScrolling = setTimeout(() => { - const scrollPosition = $('.content').scrollTop(); - for(let idx = 0; idx < sections.length; idx++) { - if(scrollPosition < topOffsets[sections[idx + 1]] - topOffsets['information']) { - // Set nav only when scrolling is not triggered by ckicking nav - if(sections[idx] !== this.activeNav && !this.navClicked) this.activeNav = sections[idx]; - break; - } - } - this.navClicked = false; - }, 150) - }) + + const arrOfBurgerItemIds = ['text-item-1', 'text-item-2', 'text-item-3', 'text-item-4'] + const arrOfBurgerHighlightItemIds = ['highlight-item-1', 'highlight-item-2', 'highlight-item-3', 'highlight-item-4'] + const arrToUnhighlight_1 = arrOfBurgerItemIds.filter((i) => i !== targetId) + const arrToUnhighlight_2 = arrOfBurgerHighlightItemIds.filter((i) => i !== highlightItemId) + + // highlight the target text and corresponding identifier + document.getElementById(targetId).classList.add('text-sn-science-blue') + document.getElementById(highlightItemId).classList.add('bg-sn-science-blue') + + //unhighlight the rest of the text and identifiers + arrToUnhighlight_1.forEach(id => document.getElementById(id).classList.remove('text-sn-science-blue')) + arrToUnhighlight_2.forEach(id => document.getElementById(id).classList.remove('bg-sn-science-blue')) }, generateBarCode(text) { if(!text) return; diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue b/app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue new file mode 100644 index 000000000..e696d5a6d --- /dev/null +++ b/app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue @@ -0,0 +1,16 @@ + + + diff --git a/app/views/shared/_repository_row_sidebar.html.erb b/app/views/shared/_repository_row_sidebar.html.erb index c08ee42cf..f32aeb03b 100644 --- a/app/views/shared/_repository_row_sidebar.html.erb +++ b/app/views/shared/_repository_row_sidebar.html.erb @@ -1,6 +1,6 @@
+ class='bg-white fixed top-0 right-0 h-screen w-[565px] overflow-auto gap-2.5 self-stretch z-[9999] rounded-tl-4 rounded-bl-4 transition-transform ease-in-out transform translate-x-full'>
diff --git a/config/locales/en.yml b/config/locales/en.yml index 3f2b49079..de5599bf8 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2114,13 +2114,10 @@ en: id: "Item ID" added_on: "Added on" added_at: "Added at" - added_by: "Added by" - navigations: - information: "Information" - custom_columns: "Custom columns" - assigned: "Assigned" - qr: "QR" + added_by: 'Added by' no_custom_columns_label: 'This item has no custom columns' + navigations: + qr: "QR" repository_time_range_value: no_time_range: 'No time range' repository_text_value: