Skip to content

Commit 12b8f8f

Browse files
ahmedhamidawanahmedhamidawan
committed
[25.1] Wrap ontology card in tool discovery view below list view selector
1 parent 66d0de4 commit 12b8f8f

2 files changed

Lines changed: 166 additions & 153 deletions

File tree

‎client/src/components/ToolsList/ToolsList.vue‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -257,43 +257,43 @@ function onToggleView(newView: ListViewMode) {
257257
</GButton>
258258
</div>
259259

260-
<div class="d-flex justify-content-between align-items-center">
261-
<ToolsListSectionFilters
262-
:filter-class="ToolFilters"
263-
:filter-text="filterText"
264-
:disabled="loading"
265-
@apply-filter="applyFilter" />
266-
267-
<!-- TODO: This div here and in ListHeader.vue needs to be a reusable component -->
268-
<div>
269-
Display:
270-
<GButtonGroup>
271-
<GButton
272-
id="view-grid"
273-
tooltip
274-
title="Grid view"
275-
size="small"
276-
:pressed="currentListViewMode === 'grid'"
277-
outline
278-
color="blue"
279-
@click="onToggleView('grid')">
280-
<FontAwesomeIcon :icon="faGripVertical" />
281-
</GButton>
282-
283-
<GButton
284-
id="view-list"
285-
tooltip
286-
title="List view"
287-
size="small"
288-
:pressed="currentListViewMode === 'list'"
289-
outline
290-
color="blue"
291-
@click="onToggleView('list')">
292-
<FontAwesomeIcon :icon="faBars" />
293-
</GButton>
294-
</GButtonGroup>
295-
</div>
296-
</div>
260+
<ToolsListSectionFilters
261+
:filter-class="ToolFilters"
262+
:filter-text="filterText"
263+
:disabled="loading"
264+
@apply-filter="applyFilter">
265+
<template v-slot:list-view-controls>
266+
<!-- TODO: This div here and in ListHeader.vue needs to be a reusable component -->
267+
<div class="d-flex flex-gapx-1 align-items-center">
268+
Display:
269+
<GButtonGroup>
270+
<GButton
271+
id="view-grid"
272+
tooltip
273+
title="Grid view"
274+
size="small"
275+
:pressed="currentListViewMode === 'grid'"
276+
outline
277+
color="blue"
278+
@click="onToggleView('grid')">
279+
<FontAwesomeIcon :icon="faGripVertical" />
280+
</GButton>
281+
282+
<GButton
283+
id="view-list"
284+
tooltip
285+
title="List view"
286+
size="small"
287+
:pressed="currentListViewMode === 'list'"
288+
outline
289+
color="blue"
290+
@click="onToggleView('list')">
291+
<FontAwesomeIcon :icon="faBars" />
292+
</GButton>
293+
</GButtonGroup>
294+
</div>
295+
</template>
296+
</ToolsListSectionFilters>
297297
</div>
298298

299299
<div class="tools-list-body">

‎client/src/components/ToolsList/ToolsListSectionFilters.vue‎

Lines changed: 129 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -99,134 +99,147 @@ function searchWithinSections(sections: ToolSection[], query: string) {
9999

100100
<template>
101101
<div class="d-flex flex-column flex-gapy-1">
102-
<div class="d-flex flex-gapx-1">
103-
<BDropdown
104-
block
105-
:disabled="props.disabled"
106-
variant="link"
107-
class="tool-section-dropdown"
108-
toggle-class="text-decoration-none"
109-
role="menu"
110-
aria-label="Select a tool section to filter by"
111-
size="sm">
112-
<template v-slot:button-content>
113-
<span class="sr-only">Select a tool section to filter by</span>
114-
<FontAwesomeIcon :icon="faLayerGroup" />
115-
<span v-if="selectedSection">
116-
{{ selectedSection.name }}
117-
</span>
118-
<i v-else> Select a section to filter by </i>
119-
</template>
120-
121-
<BDropdownGroup id="searchable-sections" class="sections-select-list" header-classes="search-header">
122-
<template v-slot:header>
123-
<BDropdownText>
124-
<BFormInput
125-
v-model="defaultToolSectionsFilter"
126-
type="text"
127-
placeholder="Filter sections..." />
128-
</BDropdownText>
102+
<div class="d-flex justify-content-between align-items-center">
103+
<div class="d-flex flex-gapx-1">
104+
<BDropdown
105+
block
106+
:disabled="props.disabled"
107+
variant="link"
108+
class="tool-section-dropdown"
109+
toggle-class="text-decoration-none"
110+
role="menu"
111+
aria-label="Select a tool section to filter by"
112+
size="sm">
113+
<template v-slot:button-content>
114+
<span class="sr-only">Select a tool section to filter by</span>
115+
<FontAwesomeIcon :icon="faLayerGroup" />
116+
<span v-if="selectedSection">
117+
{{ selectedSection.name }}
118+
</span>
119+
<i v-else> Select a section to filter by </i>
129120
</template>
130121

131-
<BDropdownItem
132-
v-for="sec in defaultToolSections"
133-
:key="sec.id"
134-
:title="sec.description"
135-
:active="selectedSection?.id === sec.id"
136-
@click="applyQuotedFilter('section', sec.name)">
137-
<span v-localize>{{ sec.name }}</span>
138-
</BDropdownItem>
139-
</BDropdownGroup>
140-
</BDropdown>
141-
142-
<GButton
143-
v-if="selectedSection"
144-
title="Remove section filter"
145-
icon-only
146-
inline
147-
transparent
148-
tooltip
149-
@click="applyQuotedFilter('section', selectedSection.name)">
150-
<FontAwesomeIcon :icon="faTimes" />
151-
</GButton>
152-
153-
<BDropdown
154-
block
155-
:disabled="props.disabled"
156-
variant="link"
157-
class="tool-section-dropdown"
158-
toggle-class="text-decoration-none"
159-
role="menu"
160-
aria-label="Select a tool ontology to filter by"
161-
size="sm">
162-
<template v-slot:button-content>
163-
<span class="sr-only">Select a tool ontology to filter by</span>
164-
<FontAwesomeIcon :icon="faSitemap" />
165-
<span v-if="selectedOntology">
166-
{{ selectedOntology.name }}
167-
</span>
168-
<i v-else> Select an ontology to filter by </i>
169-
</template>
170-
171-
<BDropdownGroup id="searchable-sections" class="sections-select-list" header-classes="search-header">
172-
<template v-slot:header>
173-
<BDropdownText>
174-
<BFormInput v-model="ontologiesFilter" type="text" placeholder="Filter ontologies..." />
175-
</BDropdownText>
176-
</template>
177-
178-
<BDropdownGroup v-if="Object.keys(edamOperations).length" id="edam-operations" class="unselectable">
122+
<BDropdownGroup
123+
id="searchable-sections"
124+
class="sections-select-list"
125+
header-classes="search-header">
179126
<template v-slot:header>
180-
<FontAwesomeIcon
181-
v-if="getPanelIcon('ontology:edam_operations')"
182-
:icon="getPanelIcon('ontology:edam_operations')"
183-
fixed-width
184-
size="sm" />
185-
<small class="font-weight-bold">{{ panels["ontology:edam_operations"]?.name }}</small>
127+
<BDropdownText>
128+
<BFormInput
129+
v-model="defaultToolSectionsFilter"
130+
type="text"
131+
placeholder="Filter sections..." />
132+
</BDropdownText>
186133
</template>
134+
187135
<BDropdownItem
188-
v-for="ont in edamOperations"
189-
:key="ont.id"
190-
:title="ont.description"
191-
:active="selectedOntology?.id === ont.id"
192-
@click="applyQuotedFilter('ontology', ont.id)">
193-
<span v-localize>{{ ont.name }}</span>
136+
v-for="sec in defaultToolSections"
137+
:key="sec.id"
138+
:title="sec.description"
139+
:active="selectedSection?.id === sec.id"
140+
@click="applyQuotedFilter('section', sec.name)">
141+
<span v-localize>{{ sec.name }}</span>
194142
</BDropdownItem>
195143
</BDropdownGroup>
144+
</BDropdown>
196145

197-
<BDropdownDivider />
146+
<GButton
147+
v-if="selectedSection"
148+
title="Remove section filter"
149+
icon-only
150+
inline
151+
transparent
152+
tooltip
153+
@click="applyQuotedFilter('section', selectedSection.name)">
154+
<FontAwesomeIcon :icon="faTimes" />
155+
</GButton>
198156

199-
<BDropdownGroup v-if="Object.keys(edamTopics).length" id="edam-topics" class="unselectable">
157+
<BDropdown
158+
block
159+
:disabled="props.disabled"
160+
variant="link"
161+
class="tool-section-dropdown"
162+
toggle-class="text-decoration-none"
163+
role="menu"
164+
aria-label="Select a tool ontology to filter by"
165+
size="sm">
166+
<template v-slot:button-content>
167+
<span class="sr-only">Select a tool ontology to filter by</span>
168+
<FontAwesomeIcon :icon="faSitemap" />
169+
<span v-if="selectedOntology">
170+
{{ selectedOntology.name }}
171+
</span>
172+
<i v-else> Select an ontology to filter by </i>
173+
</template>
174+
175+
<BDropdownGroup
176+
id="searchable-sections"
177+
class="sections-select-list"
178+
header-classes="search-header">
200179
<template v-slot:header>
201-
<FontAwesomeIcon
202-
v-if="getPanelIcon('ontology:edam_topics')"
203-
:icon="getPanelIcon('ontology:edam_topics')"
204-
fixed-width
205-
size="sm" />
206-
<small class="font-weight-bold">{{ panels["ontology:edam_topics"]?.name }}</small>
180+
<BDropdownText>
181+
<BFormInput v-model="ontologiesFilter" type="text" placeholder="Filter ontologies..." />
182+
</BDropdownText>
207183
</template>
208-
<BDropdownItem
209-
v-for="ont in edamTopics"
210-
:key="ont.id"
211-
:title="ont.description"
212-
:active="selectedOntology?.id === ont.id"
213-
@click="applyQuotedFilter('ontology', ont.id)">
214-
<span v-localize>{{ ont.name }}</span>
215-
</BDropdownItem>
184+
185+
<BDropdownGroup
186+
v-if="Object.keys(edamOperations).length"
187+
id="edam-operations"
188+
class="unselectable">
189+
<template v-slot:header>
190+
<FontAwesomeIcon
191+
v-if="getPanelIcon('ontology:edam_operations')"
192+
:icon="getPanelIcon('ontology:edam_operations')"
193+
fixed-width
194+
size="sm" />
195+
<small class="font-weight-bold">{{ panels["ontology:edam_operations"]?.name }}</small>
196+
</template>
197+
<BDropdownItem
198+
v-for="ont in edamOperations"
199+
:key="ont.id"
200+
:title="ont.description"
201+
:active="selectedOntology?.id === ont.id"
202+
@click="applyQuotedFilter('ontology', ont.id)">
203+
<span v-localize>{{ ont.name }}</span>
204+
</BDropdownItem>
205+
</BDropdownGroup>
206+
207+
<BDropdownDivider />
208+
209+
<BDropdownGroup v-if="Object.keys(edamTopics).length" id="edam-topics" class="unselectable">
210+
<template v-slot:header>
211+
<FontAwesomeIcon
212+
v-if="getPanelIcon('ontology:edam_topics')"
213+
:icon="getPanelIcon('ontology:edam_topics')"
214+
fixed-width
215+
size="sm" />
216+
<small class="font-weight-bold">{{ panels["ontology:edam_topics"]?.name }}</small>
217+
</template>
218+
<BDropdownItem
219+
v-for="ont in edamTopics"
220+
:key="ont.id"
221+
:title="ont.description"
222+
:active="selectedOntology?.id === ont.id"
223+
@click="applyQuotedFilter('ontology', ont.id)">
224+
<span v-localize>{{ ont.name }}</span>
225+
</BDropdownItem>
226+
</BDropdownGroup>
216227
</BDropdownGroup>
217-
</BDropdownGroup>
218-
</BDropdown>
219-
220-
<GButton
221-
v-if="selectedOntology"
222-
title="Remove ontology filter"
223-
icon-only
224-
inline
225-
transparent
226-
tooltip
227-
@click="applyQuotedFilter('ontology', selectedOntology.id)">
228-
<FontAwesomeIcon :icon="faTimes" />
229-
</GButton>
228+
</BDropdown>
229+
230+
<GButton
231+
v-if="selectedOntology"
232+
title="Remove ontology filter"
233+
icon-only
234+
inline
235+
transparent
236+
tooltip
237+
@click="applyQuotedFilter('ontology', selectedOntology.id)">
238+
<FontAwesomeIcon :icon="faTimes" />
239+
</GButton>
240+
</div>
241+
242+
<slot name="list-view-controls" />
230243
</div>
231244

232245
<ToolOntologyCard v-if="selectedOntology?.description" :ontology="selectedOntology" header />

0 commit comments

Comments
 (0)
⚡