tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-12 22:17:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

add switch tabs buttons to right sidebar

Browse Source
This commit is contained in:
geoffrey45 2022-08-19 16:39:25 +03:00
parent 03219166c5
commit dcd27921ae
2 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/RightSideBar/Queue.vue
View File

@ -79,9 +79,7 @@ onUpdated(() => {
.r-grid { .r-grid {
position: relative; position: relative;
height: 100%; height: 100%;
// display: grid;
// gap: 1rem;
.scrollable-r { .scrollable-r {
height: 100%; height: 100%;

40
src/components/RightSideBar/SearchInput.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div <div id="gsearch-input" class="rounded">
id="gsearch-input" <div
class="bg-black rounded" id="ginner"
:class="{ 'search-focused': focused }" tabindex="0"
> class="bg-black rounded"
<div id="ginner" tabindex="0"> :class="{ 'search-focused': focused }"
<SearchSvg /> >
<input <input
id="globalsearch" id="globalsearch"
v-model="search.query" v-model="search.query"
@ -14,6 +14,11 @@
@focus="focused = true" @focus="focused = true"
@blur="focused = false" @blur="focused = false"
/> />
<SearchSvg />
</div>
<div class="buttons rounded bg-black">
<button @click="tabs.switchToQueue"><QueueSvg /></button>
<button @click="tabs.switchToSearch"><SearchSvg /></button>
</div> </div>
</div> </div>
</template> </template>
@ -22,21 +27,38 @@
import { ref } from "vue"; import { ref } from "vue";
import useSearchStore from "../../stores/search"; import useSearchStore from "../../stores/search";
import SearchSvg from "../../assets/icons/search.svg"; import SearchSvg from "../../assets/icons/search.svg";
import QueueSvg from "../../assets/icons/queue.svg";
import useTabStore from "../../stores/tabs";
const search = useSearchStore(); const search = useSearchStore();
const tabs = useTabStore();
const focused = ref(false); const focused = ref(false);
</script> </script>
<style lang="scss"> <style lang="scss">
#gsearch-input { #gsearch-input {
padding: $smaller; display: grid;
grid-template-columns: 1fr 7rem;
gap: 1rem;
.buttons {
display: grid;
grid-auto-flow: column;
overflow: hidden;
button {
padding: 0 $small;
height: 100%;
border-radius: 0;
}
}
#ginner { #ginner {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $smaller; gap: $smaller;
margin-left: $small; padding: 0 1rem;
input { input {
width: 100%; width: 100%;