TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: Ctrl+K will focus on search bar

Browse source
This commit is contained in:
Sai Karthik 2022-06-26 14:27:12 +05:30
parent e01ff36aae
commit c2f2d5bb11
No known key found for this signature in database
GPG key ID: F5B9A961BF6EAF0E
1 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/NavBar.vue
View file

@ -17,6 +17,7 @@
class="input !w-72 !h-10" class="input !w-72 !h-10"
type="text" type="text"
role="search" role="search"
ref="videoSearch"
:title="$t('actions.search')" :title="$t('actions.search')"
:placeholder="$t('actions.search')" :placeholder="$t('actions.search')"
@keyup="onKeyUp" @keyup="onKeyUp"
@ -72,7 +73,7 @@
<script> <script>
import SearchSuggestions from "./SearchSuggestions.vue"; import SearchSuggestions from "./SearchSuggestions.vue";
import hotkeys from "hotkeys-js";
export default { export default {
components: { components: {
SearchSuggestions, SearchSuggestions,
@ -86,6 +87,7 @@ export default {
mounted() { mounted() {
const query = new URLSearchParams(window.location.search).get("search_query"); const query = new URLSearchParams(window.location.search).get("search_query");
if (query) this.onSearchTextChange(query); if (query) this.onSearchTextChange(query);
this.focusOnSearchBar();
}, },
computed: { computed: {
shouldShowLogin(_this) { shouldShowLogin(_this) {
@ -96,6 +98,13 @@ export default {
}, },
}, },
methods: { methods: {
// focus on search bar when Ctrl+k is pressed
focusOnSearchBar() {
hotkeys("ctrl+k", event => {
event.preventDefault();
this.$refs.videoSearch.focus();
});
},
onKeyUp(e) { onKeyUp(e) {
if (e.key === "ArrowUp" || e.key === "ArrowDown") { if (e.key === "ArrowUp" || e.key === "ArrowDown") {
e.preventDefault(); e.preventDefault();
@ -124,3 +133,9 @@ export default {
}, },
}; };
</script> </script>
<style>
.input:focus {
@apply border-2 border-red-500;
box-shadow: 0 0 15px rgba(239, 68, 68, var(--tw-border-opacity));
}
</style>