tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-24 22:25:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

🚧 Show all when search field has value

Browse Source
This commit is contained in:
Alicia Sykes 2021-08-13 21:48:28 +01:00
parent 5290be9214
commit 095bd3612c
2 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/MinimalView/MinimalSection.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :class="`minimal-section-inner ${selected ? 'selected' : ''}`"> <div :class="`minimal-section-inner ${selected ? 'selected' : ''} ${showAll ? 'show-all': ''}`">
<div class="section-items" v-if="selected"> <div class="section-items" v-if="selected || showAll">
<Item <Item
v-for="(item, index) in items" v-for="(item, index) in items"
:id="`${index}_${makeId(item.title)}`" :id="`${index}_${makeId(item.title)}`"
@ -48,6 +48,7 @@ export default {
modalOpen: Boolean, modalOpen: Boolean,
index: Number, index: Number,
selected: Boolean, selected: Boolean,
showAll: Boolean,
}, },
components: { components: {
Item, Item,
@ -107,6 +108,9 @@ export default {
border: 1px solid var(--primary); border: 1px solid var(--primary);
grid-column-start: span var(--col-count, 3); grid-column-start: span var(--col-count, 3);
} }
&.show-all {
border: none;
}
} }
</style> </style>

28
src/views/Minimal.vue
View File

@ -4,9 +4,10 @@
<router-link to="/"> <router-link to="/">
<h1>{{ pageInfo.title }}</h1> <h1>{{ pageInfo.title }}</h1>
</router-link> </router-link>
<MinimalSearch /> <MinimalSearch @user-is-searchin="(s) => { this.searchValue = s; }" />
</div> </div>
<div v-if="checkTheresData(sections)" class="item-group-container"> <div v-if="checkTheresData(sections)"
:class="`item-group-container ${!tabbedView ? 'showing-all' : ''}`">
<!-- Section heading buttons --> <!-- Section heading buttons -->
<MinimalHeading <MinimalHeading
v-for="(section, index) in getSections(sections)" v-for="(section, index) in getSections(sections)"
@ -15,6 +16,7 @@
:title="section.name" :title="section.name"
:selected="selectedSection === index" :selected="selectedSection === index"
@sectionSelected="sectionSelected" @sectionSelected="sectionSelected"
class="headings"
/> />
<!-- Section item groups --> <!-- Section item groups -->
<MinimalSection <MinimalSection
@ -26,11 +28,12 @@
:groupId="`section-${index}`" :groupId="`section-${index}`"
:items="filterTiles(section.items)" :items="filterTiles(section.items)"
:selected="selectedSection === index" :selected="selectedSection === index"
:showAll="!tabbedView"
itemSize="small" itemSize="small"
@sectionSelected="sectionSelected" @sectionSelected="sectionSelected"
@itemClicked="finishedSearching()" @itemClicked="finishedSearching()"
@change-modal-visibility="updateModalVisibility" @change-modal-visibility="updateModalVisibility"
:class="(filterTiles(section.items).length === 0 && searchValue) ? 'no-results' : ''" :class="(filterTiles(section.items).length === 0 && searchValue) ? 'no-results' : ''"
/> />
</div> </div>
</div> </div>
@ -60,7 +63,14 @@ export default {
layout: '', layout: '',
modalOpen: false, // When true, keybindings are disabled modalOpen: false, // When true, keybindings are disabled
selectedSection: 0, // The index of currently selected section selectedSection: 0, // The index of currently selected section
tabbedView: true, // By default use tabs, when searching then show all instead
}), }),
watch: {
/* When the theme changes, then call the update method */
searchValue() {
this.tabbedView = !this.searchValue.length > 0;
},
},
methods: { methods: {
sectionSelected(index) { sectionSelected(index) {
this.selectedSection = index; this.selectedSection = index;
@ -201,6 +211,14 @@ export default {
/* Hide when search term returns nothing */ /* Hide when search term returns nothing */
.no-results { display: none; } .no-results { display: none; }
&.showing-all {
flex-direction: column;
display: flex;
.headings {
display: none;
}
}
} }
.no-data { .no-data {