From f480c28d2ad5bf6afbb22390960f6c5b4a3e810f Mon Sep 17 00:00:00 2001 From: Amir Raminfar Date: Sat, 27 Mar 2021 15:18:27 -0700 Subject: [PATCH] Adds fuzzy search modal (#1108) * Adds fuzzy search modal * Fixes modal bug * Updates fuzzy with autocomplete component * Adds better shortcut * Fixes padding * Fixes tests --- assets/App.vue | 20 ++++- assets/components/FuzzySearchModal.vue | 80 ++++++++++++++++++ assets/components/SideMenu.vue | 13 ++- assets/main.js | 5 ++ assets/pages/Container.vue | 1 - assets/pages/Index.vue | 2 +- assets/styles.scss | 3 +- ...se-renders-full-page-on-desktop-1-snap.png | Bin 36980 -> 37615 bytes ...ge-renders-full-page-on-desktop-1-snap.png | Bin 35020 -> 35648 bytes ...home-page-renders-ipad-viewport-1-snap.png | Bin 69545 -> 70044 bytes ...de-renders-full-page-on-desktop-1-snap.png | Bin 35484 -> 36038 bytes ...ight-mode-renders-ipad-viewport-1-snap.png | Bin 70972 -> 71575 bytes 12 files changed, 118 insertions(+), 6 deletions(-) create mode 100644 assets/components/FuzzySearchModal.vue diff --git a/assets/App.vue b/assets/App.vue index 5f341aa4..bb9ba630 100644 --- a/assets/App.vue +++ b/assets/App.vue @@ -4,7 +4,7 @@ - + @@ -42,11 +42,15 @@ import { mapActions, mapGetters, mapState } from "vuex"; import { Splitpanes, Pane } from "splitpanes"; +import hotkeys from "hotkeys-js"; + import LogContainer from "./components/LogContainer"; import SideMenu from "./components/SideMenu"; import MobileMenu from "./components/MobileMenu"; import Search from "./components/Search"; +import PastTime from "./components/PastTime"; import Icon from "./components/Icon"; +import FuzzySearchModal from "./components/FuzzySearchModal"; export default { name: "App", @@ -56,6 +60,7 @@ export default { LogContainer, MobileMenu, Splitpanes, + PastTime, Pane, Search, }, @@ -79,6 +84,9 @@ export default { document.documentElement.setAttribute("data-theme", "light"); } this.menuWidth = this.settings.menuWidth; + hotkeys("command+k, ctrl+k", (event, handler) => { + this.showFuzzySearch(); + }); }, watch: { hasSmallerScrollbars(newValue, oldValue) { @@ -100,7 +108,7 @@ export default { }, }, computed: { - ...mapState(["isMobile", "settings"]), + ...mapState(["isMobile", "settings", "containers"]), ...mapGetters(["visibleContainers", "activeContainers"]), hasSmallerScrollbars() { return this.settings.smallerScrollbars; @@ -120,6 +128,14 @@ export default { this.updateSetting({ menuWidth }); } }, + showFuzzySearch() { + this.$buefy.modal.open({ + parent: this, + component: FuzzySearchModal, + animation: "false", + width: 600, + }); + }, }, }; diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue new file mode 100644 index 00000000..4f40126a --- /dev/null +++ b/assets/components/FuzzySearchModal.vue @@ -0,0 +1,80 @@ + + + + + diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue index 98ca0a37..c8cb6f62 100644 --- a/assets/components/SideMenu.vue +++ b/assets/components/SideMenu.vue @@ -8,7 +8,18 @@ -
+
+ +
+