scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-28 19:24:10 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #5572 from aignatov-bio/ai-sci-8539-navigator-ui-revamp

Browse source 
Navigator ui revamp [SCI-8539][SCI-8467]
This commit is contained in:
aignatov-bio 2023-06-12 12:53:32 +02:00 committed by GitHub
commit 4c9aa2a1f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/stylesheets/application.tailwind.css
View file

@ -11,3 +11,25 @@ html {
border-style: solid;
border-color: theme('borderColor.DEFAULT', currentColor);
}
.scroll-container .ps__rail-y{
background-color: var(--sn-white);
opacity: 1;
}
.scroll-container .ps__thumb-y{
background-color: var(--sn-grey);
opacity: 1;
right: 5px;
}
.scroll-container .ps__rail-x{
background-color: var(--sn-white);
opacity: 1;
}
.scroll-container .ps__thumb-x{
background-color: var(--sn-grey);
opacity: 1;
bottom: 5px;
}

9
app/javascript/vue/navigation/navigator.vue
View file

@ -1,19 +1,20 @@
<template>
<div class="w-[216px] ml-6 h-full border rounded relative bg-sn-white flex flex-col right-0 absolute navigator-container">
<div class="px-3 py-2 flex items-center relative leading-4">
<div class="px-3 py-1.5 flex items-center relative leading-4">
<i class="sn-icon sn-icon-navigator"></i>
<div class="font-bold text-base pl-2">
<div class="font-bold text-base pl-3">
{{ i18n.t('navigator.title') }}
</div>
<i @click="$emit('navigator:colapse')" class="sn-icon sn-icon-close ml-auto cursor-pointer absolute right-3 top-2"></i>
<i @click="$emit('navigator:colapse')" class="sn-icon sn-icon-close ml-auto cursor-pointer absolute right-2.5 top-1.5"></i>
</div>
<perfect-scrollbar @ps-scroll-y="onScrollY" @ps-scroll-x="onScrollX" ref="scrollContainer" class="grow py-4 relative px-3">
<perfect-scrollbar @ps-scroll-y="onScrollY" @ps-scroll-x="onScrollX" ref="scrollContainer" class="grow py-2 relative px-4 scroll-container">
<NavigatorItem v-for="item in sortedMenuItems"
:key="item.id"
:currentItemId="currentItemId"
:item="item"
:firstLevel="true"
:reloadCurrentLevel="reloadCurrentLevel"
:paddingLeft="0"
:reloadChildrenLevel="reloadChildrenLevel"
:archived="archived" />
</perfect-scrollbar>

59
app/javascript/vue/navigation/navigator_item.vue
View file

@ -1,35 +1,39 @@
<template>
<div class="text-sn-blue w-full flex justify-center flex-col"
:class="{ 'pl-6': !firstLevel }"
:navigator-item-id="item.id"
>
<div class="min-w-[190px] py-1.5 px-1 menu-item flex items-center whitespace-nowrap" :title="this.itemToolTip" :class="{ 'bg-sn-light-grey active': activeItem }">
<div class="w-6 h-6 flex justify-start shrink-0 mr-1.5">
<i v-if="hasChildren"
class="sn-icon cursor-pointer"
:class="{'sn-icon-right': !childrenExpanded, 'sn-icon-down': childrenExpanded }"
@click="toggleChildren"></i>
<div>
<div class="text-sn-blue w-full flex justify-center flex-col menu-item"
:class="{ 'bg-sn-super-light-blue active': activeItem }"
:style="{ 'padding-left': paddingLeft + 'px', 'min-width': (paddingLeft + 182) + 'px' }"
:navigator-item-id="item.id"
>
<div class="min-w-[182px] py-1.5 px-1 flex items-center whitespace-nowrap" :title="this.itemToolTip">
<div class="w-6 h-6 flex justify-start shrink-0 mr-2">
<i v-if="hasChildren"
class="sn-icon cursor-pointer"
:class="{'sn-icon-right': !childrenExpanded, 'sn-icon-down': childrenExpanded }"
@click="toggleChildren"></i>
</div>
<i v-if="itemIcon" class="mr-1" :class="itemIcon"></i>
<a :href="item.url"
class="text-ellipsis overflow-hidden hover:no-underline pr-3"
:class="{
'text-sn-science-blue-hover': (!item.archived && archived),
'no-hover': (!item.archived && archived)
}">
<template v-if="item.archived">(A)</template>
{{ item.name }}
</a>
</div>
<i v-if="itemIcon" class="mr-1" :class="itemIcon"></i>
<a :href="item.url"
class="text-ellipsis overflow-hidden hover:no-underline pr-3"
:class="{
'text-sn-science-blue-hover': (!item.archived && archived),
'no-hover': (!item.archived && archived)
}">
<template v-if="item.archived">(A)</template>
{{ item.name }}
</a>
</div>
<div class="basis-full" :class="{'hidden': !childrenExpanded}">
<NavigatorItem v-for="item in sortedMenuItems"
@item:expand="treeExpand"
:key="item.id"
:currentItemId="currentItemId"
:reloadCurrentLevel="reloadCurrentLevel"
:reloadChildrenLevel="reloadChildrenLevel"
:item="item"
:archived="archived" />
@item:expand="treeExpand"
:key="item.id"
:currentItemId="currentItemId"
:paddingLeft="24 + paddingLeft"
:reloadCurrentLevel="reloadCurrentLevel"
:reloadChildrenLevel="reloadChildrenLevel"
:item="item"
:archived="archived" />
</div>
</div>
</template>
@ -45,6 +49,7 @@ export default {
item: Object,
currentItemId: String,
archived: Boolean,
paddingLeft: Number,
reloadCurrentLevel: Boolean,
reloadChildrenLevel: Boolean
},