scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-06 03:46:39 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #7550 from aignatov-bio/ai-sci-10698-fix-global-search-small-screens

Browse source 
Improve global search on small screens [SCI-10698]
This commit is contained in:
ajugo 2024-05-13 15:33:59 +02:00 • committed by GitHub
commit cb35d5f16b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 109 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/javascript/vue/global_search/groups/assets.vue
View file

@ -10,6 +10,13 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_auto_auto_auto_auto_auto] items-center">
<TableHeader :selected="selected" :columnNames="[
i18n.t('search.index.created_at'),
i18n.t('search.index.updated_at'),
'',
'',
i18n.t('search.index.team')
]"></TableHeader>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-6 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.parent.url" :icon="row.attributes.icon" :value="row.attributes.file_name"/>

6
app/javascript/vue/global_search/groups/experiments.vue
View file

@ -10,6 +10,12 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto] items-center">
<TableHeader :selected="selected" :columnNames="[
i18n.t('search.index.id'),
i18n.t('search.index.created_at'),
i18n.t('search.index.project'),
i18n.t('search.index.team')
]"></TableHeader>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-5 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>

5
app/javascript/vue/global_search/groups/folders.vue
View file

@ -10,6 +10,11 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_auto_auto_auto] items-center">
<TableHeader :selected="selected" :columnNames="[
i18n.t('search.index.created_at'),
i18n.t('search.index.folder'),
i18n.t('search.index.team')
]"></TableHeader>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-4 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>

4
app/javascript/vue/global_search/groups/helpers/cell_template.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] min-w-[8rem] items-center gap-1 text-xs group-hover:bg-sn-super-light-grey">
<div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] min-w-[6rem] items-center gap-1 text-xs group-hover:bg-sn-super-light-grey">
<template v-if="visible">
<b class="shrink-0">{{ label }}:</b>
<b class="shrink-0 tw-hidden lg:block">{{ label }}:</b>
<a v-if="url" :href="url" class="shrink-0 overflow-hidden hover:no-underline">
<img v-if="avatar" :src="avatar" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
<StringWithEllipsis class="w-full" :text="value"></StringWithEllipsis>

2
app/javascript/vue/global_search/groups/helpers/link_template.vue
View file

@ -1,6 +1,6 @@
<template>
<a target="_blank" :href="url"
class="h-full py-2 px-4 flex gap-1 items-center font-bold overflow-hidden group-hover:bg-sn-super-light-grey hover:no-underline"
class="h-full py-2 px-4 flex gap-1 items-center font-bold overflow-hidden group-hover:bg-sn-super-light-grey min-w-40 hover:no-underline"
>
<span v-if="icon" :class="icon" class="sn-icon shrink-0"></span>
<StringWithEllipsis

27
app/javascript/vue/global_search/groups/helpers/table_header.vue Normal file
View file

@ -0,0 +1,27 @@
<template>
<div class="contents lg:hidden">
<div class="px-4 py-2 bg-white h-full" :class="{'sticky top-[68px] z-10': selected}"></div>
<div
v-for="column in columnNames"
:key="column"
class="truncate px-4 py-2 bg-white text-xs font-bold h-full"
:class="{'sticky top-[68px] z-10': selected}"
>{{ column }}</div>
</div>
</template>
<script>
export default {
name: 'TableHeader',
props: {
columnNames: {
type: Array,
required: true
},
selected: {
type: Boolean,
default: false
}
}
};
</script>

7
app/javascript/vue/global_search/groups/label_templates.vue
View file

@ -10,6 +10,13 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
<TableHeader :selected="selected" :columnNames="[
i18n.t('search.index.format'),
i18n.t('search.index.created_at'),
i18n.t('search.index.updated_at'),
i18n.t('search.index.created_by'),
i18n.t('search.index.team')
]"></TableHeader>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-6 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="row.attributes.name"/>

8
app/javascript/vue/global_search/groups/my_module_protocols.vue
View file

@ -10,6 +10,14 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto_auto] items-center">
<TableHeader :selected="selected" :columnNames="[
i18n.t('search.index.id'),
i18n.t('search.index.created_at'),
i18n.t('search.index.updated_at'),
i18n.t('search.index.task'),
i18n.t('search.index.experiment'),
i18n.t('search.index.team')
]"></TableHeader>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-7 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>

7
app/javascript/vue/global_search/groups/my_modules.vue
View file

@ -10,6 +10,13 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
<TableHeader :selected="selected" :columnNames="[
i18n.t('search.index.id'),
i18n.t('search.index.created_at'),
i18n.t('search.index.updated_at'),
i18n.t('search.index.experiment'),
i18n.t('search.index.team')
]"></TableHeader>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-6 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>

6
app/javascript/vue/global_search/groups/projects.vue
View file

@ -10,6 +10,12 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto] items-center">
<TableHeader :selected="selected" :columnNames="[
i18n.t('search.index.id'),
i18n.t('search.index.created_at'),
i18n.t('search.index.folder'),
i18n.t('search.index.team')
]"></TableHeader>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-5 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>

7
app/javascript/vue/global_search/groups/protocols.vue
View file

@ -10,6 +10,13 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
<TableHeader :selected="selected" :columnNames="[
i18n.t('search.index.id'),
i18n.t('search.index.created_at'),
i18n.t('search.index.updated_at'),
i18n.t('search.index.created_by'),
i18n.t('search.index.team')
]"></TableHeader>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-6 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>

8
app/javascript/vue/global_search/groups/reports.vue
View file

@ -10,6 +10,14 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto_auto] items-center">
<TableHeader :selected="selected" :columnNames="[
i18n.t('search.index.id'),
i18n.t('search.index.created_at'),
i18n.t('search.index.updated_at'),
i18n.t('search.index.created_by'),
i18n.t('search.index.project'),
i18n.t('search.index.team')
]"></TableHeader>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-7 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="row.attributes.name"/>

7
app/javascript/vue/global_search/groups/repository_rows.vue
View file

@ -10,6 +10,13 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
<TableHeader :selected="selected" :columnNames="[
i18n.t('search.index.id'),
i18n.t('search.index.created_at'),
i18n.t('search.index.created_by'),
i18n.t('search.index.repository'),
i18n.t('search.index.team')
]"></TableHeader>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-6 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>

7
app/javascript/vue/global_search/groups/results.vue
View file

@ -10,6 +10,13 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_auto_auto_auto_auto_auto] items-center">
<TableHeader :selected="selected" :columnNames="[
i18n.t('search.index.created_at'),
i18n.t('search.index.updated_at'),
i18n.t('search.index.task'),
i18n.t('search.index.experiment'),
i18n.t('search.index.team')
]"></TableHeader>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-6 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>

4
app/javascript/vue/global_search/groups/search_mixin.js
View file

@ -6,6 +6,7 @@ import ListEnd from './helpers/list_end.vue';
import NoSearchResult from './helpers/no_search_result.vue';
import CellTemplate from './helpers/cell_template.vue';
import LinkTemplate from './helpers/link_template.vue';
import TableHeader from './helpers/table_header.vue';
/* global GLOBAL_CONSTANTS I18n */
export default {
@ -22,7 +23,8 @@ export default {
NoSearchResult,
ListEnd,
CellTemplate,
LinkTemplate
LinkTemplate,
TableHeader
},
data() {
return {

2
app/javascript/vue/navigation/quick_search.vue
View file

@ -4,7 +4,7 @@
<div class="sci--navigation--top-menu-search left-icon sci-input-container-v2" :class="{'disabled' : !currentTeam}" :title="i18n.t('nav.search')">
<input ref="searchField" type="text" class="!pr-20" v-model="searchQuery" @keydown="focusHistoryItem"
:class="{'active': flyoutOpened}"
@focus="openHistory" :placeholder="i18n.t('nav.search')" @keyup.enter="saveQuery"/>
@focus="openHistory" :placeholder="i18n.t('nav.search')" @keydown.enter="saveQuery"/>
<i class="sn-icon sn-icon-search"></i>
<div v-if="this.searchQuery.length > 1" class="flex items-center gap-1 absolute right-2 top-1.5">
<div class="btn btn-light icon-btn btn-xs" @click="this.searchQuery = ''; $refs.searchField.focus()">