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

Revert "Add navigation section to item card [SCI-9154] (#6268)" (#6284)

Browse source 
This reverts commit 7430f2240d.
This commit is contained in:
wandji 2023-09-25 09:46:19 +01:00 • committed by GitHub
parent 7430f2240d
commit 5314ef14c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 156 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -77,6 +77,7 @@
@import "shared/assets"; @import "shared/assets";
@import "shared/avatar"; @import "shared/avatar";
@import "shared/cards"; @import "shared/cards";
@import "shared/repository_item_sidebar";
@import "shared/comments_sidebar"; @import "shared/comments_sidebar";
@import "shared/comments"; @import "shared/comments";
@import "shared/content_pane"; @import "shared/content_pane";

47
app/assets/stylesheets/shared/repository_item_sidebar.scss Normal file
View file

@ -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;
// }
// }
// }
// }
// }

183
app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
View file

@ -1,46 +1,26 @@
<template> <template>
<div id="repository-item-sidebar" class="w-ful h-full bg-white flex flex-col relative"> <div id="repository-item-sidebar" class="w-ful h-full py-6 px-6 bg-white flex flex-col">
<div class="header fixed w-full"> <div class="header flex w-full">
<div class="flex justify-between m-6 h-[31px]"> <h4 class="item-name my-auto truncate" :title="defaultColumns?.name">
<h4 class="my-auto truncate" :title="defaultColumns?.name"> {{ !defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
{{ !defaultColumns?.archived ? i18n.t('labels.archived') : '' }} {{ defaultColumns?.name }}
{{ defaultColumns?.name }} </h4>
</h4> <i @click="toggleShowHideSidebar" class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
<i @click="toggleShowHideSidebar" class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
</div>
</div> </div>
<div id="divider" class="bg-sn-sleepy-grey flex mt-[79px] mx-6 items-center self-stretch h-px"></div> <div id="divider" class="w-500 bg-sn-light-grey flex my-6 items-center self-stretch h-px "></div>
<div class="overflow-auto content flex flex-col justify-between px-6 h-full relative scroll-smooth">
<aside class="navigations fixed top-28 right-6"> <div id="body-wrapper" class="flex flex-1 justify-between">
<nav class="w-full"> <div id="left-col" class="flex flex-col gap-4 mb-4">
<ul class="flex flex-col gap-3 text-right list-none"> <div id="information">
<li v-for="nav in navigations" :key="nav.value" class="cursor-pointer inline-block relative"> <div id="title" class="font-inter text-xl font-semibold leading-7 mb-4">{{
<span i18n.t('repositories.item_card.title.information') }}</div>
:class="`${activeNav === nav.value ? 'text-sn-science-blue' : 'text-sn-grey'} mr-8 transition-colors`" <div class="item-details">
@click.prevent="hightlightContent(nav.value)"
>
{{ nav.label }}
</span>
<span
:class="`${activeNav === nav.value ? 'bg-sn-science-blue w-1 inset-y-0 right-0.5' : 'transparent hidden'} absolute transition-all rounded`"
>
</span>
</li>
</ul>
</nav>
</aside>
<div id="body-wrapper" class="grow-1">
<div class="flex flex-col gap-4 mb-4 mt-4 w-[350px]">
<section id="information_wrapper">
<h4 class="font-inter text-base font-semibold leading-7 mb-4">
{{ i18n.t('repositories.item_card.title.information') }}
</h4>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="flex flex-col "> <div class="flex flex-col ">
<span class="inline-block font-semibold pb-[6px]">{{ <span class="inline-block font-semibold pb-[6px]">{{
i18n.t('repositories.item_card.default_columns.repository_name') }}</span> i18n.t('repositories.item_card.default_columns.repository_name') }}</span>
<span class="text-sn-dark-grey line-clamp-3" :title="repositoryName"> <span class="repository-name flex text-sn-dark-grey" :title="repositoryName">
{{ repositoryName }} {{ repositoryName }}
</span> </span>
</div> </div>
@ -50,7 +30,7 @@
<div class="flex flex-col "> <div class="flex flex-col ">
<span class="inline-block font-semibold pb-[6px]">{{ i18n.t('repositories.item_card.default_columns.id') <span class="inline-block font-semibold pb-[6px]">{{ i18n.t('repositories.item_card.default_columns.id')
}}</span> }}</span>
<span class="inline-block text-sn-dark-grey"> <span class="inline-block text-sn-dark-grey" :title="defaultColumns?.code">
{{ defaultColumns?.code }} {{ defaultColumns?.code }}
</span> </span>
</div> </div>
@ -61,7 +41,7 @@
<span class="inline-block font-semibold pb-[6px]">{{ <span class="inline-block font-semibold pb-[6px]">{{
i18n.t('repositories.item_card.default_columns.added_on') i18n.t('repositories.item_card.default_columns.added_on')
}}</span> }}</span>
<span class="inline-block text-sn-dark-grey"> <span class="inline-block text-sn-dark-grey" :title="defaultColumns?.added_on">
{{ defaultColumns?.added_on }} {{ defaultColumns?.added_on }}
</span> </span>
</div> </div>
@ -72,20 +52,21 @@
<span class="inline-block font-semibold pb-[6px]">{{ <span class="inline-block font-semibold pb-[6px]">{{
i18n.t('repositories.item_card.default_columns.added_by') i18n.t('repositories.item_card.default_columns.added_by')
}}</span> }}</span>
<span class="inline-block text-sn-dark-grey"> <span class="inline-block text-sn-dark-grey" :title="defaultColumns?.added_by">
{{ defaultColumns?.added_by }} {{ defaultColumns?.added_by }}
</span> </span>
</div> </div>
</div> </div>
</section> </div>
</div>
<div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px "></div>
<div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px "></div>
<section id="custom_columns_wrapper" class="flex flex-col min-h-[64px] h-auto">
<h4 id="custom-columns-label" class="font-inter text-base font-semibold leading-7 pb-4"> <div id="custom-col-assigned-qr-wrapper" class="flex flex-col gap-4">
{{ i18n.t('repositories.item_card.navigations.custom_columns') }} <div id="custom-columns-wrapper" class="flex flex-col min-h-[64px] h-auto">
</h4>
<div id="custom-columns-label" class="font-inter text-base font-semibold leading-7 pb-4">Custom columns</div>
<!-- start of custom columns --> <!-- start of custom columns -->
<div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto"> <div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
<div v-for="(column, index) in customColumns" class="flex flex-col gap-4 w-[350px] h-auto"> <div v-for="(column, index) in customColumns" class="flex flex-col gap-4 w-[350px] h-auto">
@ -103,11 +84,11 @@
<div v-else id="custom-columns-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5"> <div v-else id="custom-columns-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
{{ i18n.t('repositories.item_card.no_custom_columns_label') }} {{ i18n.t('repositories.item_card.no_custom_columns_label') }}
</div> </div>
</section> </div>
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div> <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div>
<section id="assigned_wrapper" class="flex flex-col "> <div id="assigned-wrapper" class="flex flex-col h-[64px] ">
<div v-if="this.assigned" id="assigned-label" class="font-inter text-base font-semibold leading-7 pb-4"> <div v-if="this.assigned" id="assigned-label" class="font-inter text-base font-semibold leading-7 pb-4">
Assigned (3) Assigned (3)
@ -123,11 +104,11 @@
<div id="assigned-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5"> <div id="assigned-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
{{ this.assigned }} {{ this.assigned }}
</div> </div>
</section> </div>
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div> <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div>
<section id="qr_wrapper"> <section id="qr-wrapper">
<h4 class="font-inter text-base font-semibold leading-7 mb-4 mt-0">{{ i18n.t('repositories.item_card.navigations.qr') }}</h4> <h4 class="font-inter text-base font-semibold leading-7 mb-4 mt-0">{{ i18n.t('repositories.item_card.navigations.qr') }}</h4>
<div class="bar-code-container"> <div class="bar-code-container">
<canvas id="bar-code-canvas" class="hidden"></canvas> <canvas id="bar-code-canvas" class="hidden"></canvas>
@ -136,15 +117,30 @@
</section> </section>
</div> </div>
</div> </div>
<div id="navigation" class="min-w-[130px] h-[130px] flex item-end gap-x-4 ">
<div class="footer"> <div class="flex flex-col py-2 px-0 gap-3 self-stretch w-[130px] h-[130px] justify-center items-center">
<div id="divider" class="w-full bg-sn-sleepy-grey flex items-center self-stretch h-px mb-6"></div> <div class="flex flex-col w-[130px] h-[130px] justify-between text-right">
<div id="bottom-button-wrapper" class="flex mb-6 justify-end"> <div @click="handleSideNavClick" id="text-item-1" class="hover:cursor-pointer text-sn-grey">Information</div>
<button type="button" class="btn btn-primary print-label-button" :data-rows="JSON.stringify([repositoryRowId])"> <div @click="handleSideNavClick" id="text-item-2" class="hover:cursor-pointer text-sn-grey">Custom columns
{{ i18n.t('repository_row.modal_print_label.print_label') }} </div>
</button> <div @click="handleSideNavClick" id="text-item-3" class="hover:cursor-pointer text-sn-grey">Assigned</div>
<div @click="handleSideNavClick" id="text-item-4" class="hover:cursor-pointer text-sn-grey">QR</div>
</div>
</div> </div>
</div> </div>
<highlight-component
:items-to-create="['highlight-item-1', 'highlight-item-2', 'highlight-item-3', 'highlight-item-4']">
</highlight-component>
</div>
<div id="bottom" class="h-[100px] flex flex-col justify-end" :class="{ 'pb-6': customColumns?.length }">
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px mb-6"></div>
<div id="bottom-button-wrapper" class="flex h-10 justify-end">
<button type="button" class="btn btn-primary print-label-button" :data-rows="JSON.stringify([repositoryRowId])">
{{ i18n.t('repository_row.modal_print_label.print_label') }}
</button>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -162,6 +158,7 @@ import RepositoryDateTimeRangeValue from './repository_values/RepositoryDateTime
import RepositoryDateValue from './repository_values/RepositoryDateValue.vue'; import RepositoryDateValue from './repository_values/RepositoryDateValue.vue';
import RepositoryDateRangeValue from './repository_values/RepositoryDateRangeValue.vue'; import RepositoryDateRangeValue from './repository_values/RepositoryDateRangeValue.vue';
import RepositoryTimeRangeValue from './repository_values/RepositoryTimeRangeValue.vue' import RepositoryTimeRangeValue from './repository_values/RepositoryTimeRangeValue.vue'
import HighlightComponent from './repository_values/HighlightComponent.vue';
export default { export default {
name: 'RepositoryItemSidebar', name: 'RepositoryItemSidebar',
@ -178,16 +175,16 @@ export default {
RepositoryDateValue, RepositoryDateValue,
RepositoryDateRangeValue, RepositoryDateRangeValue,
RepositoryTimeRangeValue, RepositoryTimeRangeValue,
'highlight-component': HighlightComponent
}, },
data() { data() {
// using dummy data for now
return { return {
repositoryRowId: null, repositoryRowId: null,
repositoryName: null, repositoryName: null,
defaultColumns: null, defaultColumns: null,
customColumns: null, customColumns: null,
isShowing: false, isShowing: false,
navClicked: false,
activeNav: 'information',
sequenceExpanded: false, sequenceExpanded: false,
assigned: 'Assigned to 3 private tasks that will not be displayed', assigned: 'Assigned to 3 private tasks that will not be displayed',
barCodeSrc: null 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() { beforeDestroy() {
delete window.repositoryItemSidebarComponent; delete window.repositoryItemSidebarComponent;
}, },
@ -244,39 +234,42 @@ export default {
this.customColumns = result.custom_columns; this.customColumns = result.custom_columns;
this.$nextTick(() => { this.$nextTick(() => {
this.generateBarCode(this.defaultColumns.code); this.generateBarCode(this.defaultColumns.code);
this.attachScrollEvent();
}); });
} }
}); });
}, },
hightlightContent(nav) { // determine the identifier value according to the text-item (target) value
this.activeNav = nav; handleSideNavClick(e) {
this.navClicked = true; let highlightItemId
this.$nextTick(function() { const targetId = e.target.id
$(`#repository-item-sidebar #${nav}_wrapper`)[0].scrollIntoView(); switch (targetId) {
}) case 'text-item-1':
}, highlightItemId = 'highlight-item-1'
attachScrollEvent() { break
const topOffsets = {} case 'text-item-2':
const sections = ['information', 'custom_columns', 'assigned', 'qr']; highlightItemId = 'highlight-item-2'
for(let idx = 0; idx < sections.length; idx++) { break
topOffsets[sections[idx]] = $(`#repository-item-sidebar #${sections[idx]}_wrapper`).offset().top; 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', () => { const arrOfBurgerItemIds = ['text-item-1', 'text-item-2', 'text-item-3', 'text-item-4']
if(isScrolling !== null) clearTimeout(isScrolling); const arrOfBurgerHighlightItemIds = ['highlight-item-1', 'highlight-item-2', 'highlight-item-3', 'highlight-item-4']
isScrolling = setTimeout(() => { const arrToUnhighlight_1 = arrOfBurgerItemIds.filter((i) => i !== targetId)
const scrollPosition = $('.content').scrollTop(); const arrToUnhighlight_2 = arrOfBurgerHighlightItemIds.filter((i) => i !== highlightItemId)
for(let idx = 0; idx < sections.length; idx++) {
if(scrollPosition < topOffsets[sections[idx + 1]] - topOffsets['information']) { // highlight the target text and corresponding identifier
// Set nav only when scrolling is not triggered by ckicking nav document.getElementById(targetId).classList.add('text-sn-science-blue')
if(sections[idx] !== this.activeNav && !this.navClicked) this.activeNav = sections[idx]; document.getElementById(highlightItemId).classList.add('bg-sn-science-blue')
break;
} //unhighlight the rest of the text and identifiers
} arrToUnhighlight_1.forEach(id => document.getElementById(id).classList.remove('text-sn-science-blue'))
this.navClicked = false; arrToUnhighlight_2.forEach(id => document.getElementById(id).classList.remove('bg-sn-science-blue'))
}, 150)
})
}, },
generateBarCode(text) { generateBarCode(text) {
if(!text) return; if(!text) return;

16
app/javascript/vue/repository_item_sidebar/repository_values/HighlightComponent.vue Normal file
View file

@ -0,0 +1,16 @@
<template>
<div id="highlight-container" class="w-[1px] h-[130px] flex flex-col justify-evenly bg-sn-light-grey">
<div v-for="(item, index) in itemsToCreate">
<div :key="index" :id="item" class="w-[5px] h-[28px] rounded-[11px]"></div>
</div>
</div>
</template>
<script>
export default {
name: 'HighlightComponent',
props: {
itemsToCreate: Array
}
}
</script>

2
app/views/shared/_repository_row_sidebar.html.erb
View file

@ -1,6 +1,6 @@
<div <div
id="repositoryItemSidebar" id="repositoryItemSidebar"
data-behaviour="vue" data-behaviour="vue"
class='bg-white fixed top-0 right-0 h-screen w-[565px] z-[9999] rounded-tl-4 rounded-bl-4 transition-transform ease-in-out transform translate-x-full'> 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'>
<repository-item-sidebar /> <repository-item-sidebar />
</div> </div>

9
config/locales/en.yml
View file

@ -2114,13 +2114,10 @@ en:
id: "Item ID" id: "Item ID"
added_on: "Added on" added_on: "Added on"
added_at: "Added at" added_at: "Added at"
added_by: "Added by" added_by: 'Added by'
navigations:
information: "Information"
custom_columns: "Custom columns"
assigned: "Assigned"
qr: "QR"
no_custom_columns_label: 'This item has no custom columns' no_custom_columns_label: 'This item has no custom columns'
navigations:
qr: "QR"
repository_time_range_value: repository_time_range_value:
no_time_range: 'No time range' no_time_range: 'No time range'
repository_text_value: repository_text_value: