diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe4746ce..a5dc2f69 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,8 @@
## Unreleased
- Fixed search bug
-- Hiding grouping while searching
+- Hiding grouping while searching
+- Showing search queries when searching
## [0.4.0] - 2020-01-11
diff --git a/src/presentation/Scripts/TheScripts.vue b/src/presentation/Scripts/TheScripts.vue
index 318f0e77..4f8af266 100644
--- a/src/presentation/Scripts/TheScripts.vue
+++ b/src/presentation/Scripts/TheScripts.vue
@@ -8,13 +8,15 @@
-
-
+
+
+
+ Searching for "{{this.searchQuery | threeDotsTrim}}"
- Search has no matches 😞
+ Sorry, no matches for "{{this.searchQuery | threeDotsTrim}}" 😞
Feel free to extend the scripts
here.
@@ -41,11 +43,21 @@
ScriptsTree,
CardList,
},
+ filters: {
+ threeDotsTrim(query: string) {
+ const threshold = 30;
+ if (query.length <= threshold - 3) {
+ return query;
+ }
+ return `${query.substr(0, threshold)}...`;
+ },
+ },
})
export default class TheScripts extends StatefulVue {
public showCards = false;
public showList = false;
public repositoryUrl = '';
+ private searchQuery = '';
private isSearching = false;
private searchHasMatches = false;
@@ -59,6 +71,7 @@
this.updateGroups();
});
state.filter.filtered.on((result: IFilterResult) => {
+ this.searchQuery = result.query;
this.isSearching = true;
this.searchHasMatches = result.hasAnyMatches();
this.updateGroups();
@@ -97,8 +110,13 @@
}
.tree {
padding-left: 3%;
- margin-top: 15px; // Card margin
- margin-bottom: 15px; // Card margin
+ padding-top: 15px;
+ padding-bottom: 15px;
+ .search-query {
+ display: flex;
+ justify-content: center;
+ color: $gray;
+ }
}
}
.help-container {