TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-03 20:13:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add queue action buttons

Browse Source
This commit is contained in:
geoffrey45
2022-08-02 13:37:22 +03:00
parent b070601d4d
commit 6fffebdf08
5 changed files with 63 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/icons/sdcard.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.31543 23.1816H18.6758C20.5566 23.1816 21.5322 22.1973 21.5322 20.2988V7.03613C21.5322 5.14648 20.5566 4.15332 18.6758 4.15332H12.9453C12.04 4.15332 11.416 4.39062 10.8447 4.9707L7.21484 8.60938C6.66992 9.1543 6.45898 9.70801 6.45898 10.6396V20.2988C6.45898 22.1885 7.43457 23.1816 9.31543 23.1816ZM9.45605 21.459C8.60352 21.459 8.18164 21.0107 8.18164 20.1934V10.71C8.18164 10.1387 8.2959 9.81348 8.59473 9.50586L11.6709 6.41211C12.0312 6.04297 12.4268 5.87598 12.9805 5.87598H18.5264C19.3789 5.87598 19.8096 6.33301 19.8096 7.1416V20.1934C19.8096 21.0107 19.3789 21.459 18.5352 21.459H9.45605ZM11.9082 8.06445V10.7627C11.9082 11.0879 12.1719 11.3516 12.4971 11.3516C12.8223 11.3516 13.0859 11.0879 13.0859 10.7627V8.06445C13.0859 7.73047 12.8311 7.47559 12.4971 7.47559C12.1719 7.47559 11.9082 7.73926 11.9082 8.06445ZM13.7012 8.06445V10.7627C13.7012 11.0879 13.9736 11.3516 14.3076 11.3516C14.624 11.3516 14.8877 11.0879 14.8877 10.7627V8.06445C14.8877 7.73926 14.6328 7.47559 14.3076 7.47559C13.9736 7.47559 13.7012 7.73926 13.7012 8.06445ZM15.5205 8.06445V10.7627C15.5205 11.0879 15.7842 11.3516 16.1094 11.3516C16.4258 11.3516 16.6895 11.0879 16.6895 10.7627V8.06445C16.6895 7.73047 16.4346 7.47559 16.1094 7.47559C15.7754 7.47559 15.5205 7.73926 15.5205 8.06445ZM17.3311 8.06445V10.7539C17.3311 11.0879 17.5947 11.3516 17.9199 11.3516C18.2451 11.3516 18.5 11.0879 18.5 10.7539V8.06445C18.5 7.73047 18.2451 7.47559 17.9199 7.47559C17.5859 7.47559 17.3311 7.73926 17.3311 8.06445Z" fill="#F2F2F2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/assets/icons/shuffle.svg
+2 -3
View File
@@ -1,4 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1666 14.1667H12.8675L4.78413 5.2725C4.70599 5.18663 4.61077 5.11803 4.50458 5.0711C4.39839 5.02418 4.28356 4.99996 4.16746 5H1.66663V6.66667H3.79913L7.20746 10.4167L3.79913 14.1675H1.66663V15.8342H4.16746C4.28356 15.8342 4.39839 15.81 4.50458 15.7631C4.61077 15.7161 4.70599 15.6475 4.78413 15.5617L8.33329 11.6558L11.8825 15.5608C11.9606 15.6467 12.0558 15.7153 12.162 15.7622C12.2682 15.8092 12.383 15.8334 12.4991 15.8333H14.1666V18.3333L18.3333 15L14.1666 11.6667V14.1667V14.1667Z" fill="white"/>
<path d="M12.8675 6.66667H14.1666V9.16667L18.3333 5.885L14.1666 2.5V5H12.4991C12.383 4.99996 12.2682 5.02418 12.162 5.0711C12.0558 5.11803 11.9606 5.18663 11.8825 5.2725L9.07581 8.36167L10.3091 9.48333L12.8675 6.66667Z" fill="white"/>
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.5498 18.3389C3.5498 18.8486 3.94531 19.209 4.49023 19.209H6.55566C8.06738 19.209 8.95508 18.7695 9.99219 17.5479L12.1191 15.0166L14.2197 17.5039C15.2832 18.7695 16.2852 19.209 17.7969 19.209H19.5547V21.3271C19.5547 21.749 19.8096 21.9951 20.2314 21.9951C20.4248 21.9951 20.6006 21.9248 20.75 21.8105L24.1953 18.9365C24.5293 18.6641 24.5293 18.2422 24.1953 17.9521L20.75 15.0781C20.6006 14.9551 20.4248 14.8936 20.2314 14.8936C19.8096 14.8936 19.5547 15.1309 19.5547 15.5615V17.46H17.8496C16.8125 17.46 16.1357 17.1172 15.3887 16.2207L13.2441 13.6807L15.3975 11.1318C16.1621 10.2266 16.7773 9.90137 17.7969 9.90137H19.5547V11.835C19.5547 12.2568 19.8096 12.5029 20.2314 12.5029C20.4248 12.5029 20.6006 12.4326 20.75 12.3184L24.1953 9.44434C24.5293 9.17188 24.5293 8.75 24.1953 8.45996L20.75 5.58594C20.6006 5.46289 20.4248 5.40137 20.2314 5.40137C19.8096 5.40137 19.5547 5.63867 19.5547 6.06934V8.14355H17.8057C16.2412 8.14355 15.2832 8.57422 14.167 9.91016L12.1191 12.3447L9.99219 9.81348C8.95508 8.5918 8.00586 8.15234 6.50293 8.15234H4.49023C3.94531 8.15234 3.5498 8.5127 3.5498 9.02246C3.5498 9.53223 3.94531 9.90137 4.49023 9.90137H6.43262C7.41699 9.90137 8.10254 10.2441 8.8584 11.1406L10.9941 13.6807L8.8584 16.2207C8.10254 17.1172 7.46973 17.46 6.49414 17.46H4.49023C3.94531 17.46 3.5498 17.8291 3.5498 18.3389Z" fill="#F2F2F2"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 852 B

After

Width:  |  Height:  |  Size: 1.4 KiB

src/assets/scss/Global/basic.scss
+11
View File
@@ -50,6 +50,17 @@ a {
color: #fff;
}
button {
border: none;
font-size: 0.9rem !important;
color: inherit;
border-radius: $small;
display: flex;
align-items: center;
justify-content: center;
height: 2rem;
}
.separator {
border-top: 0.1px $separator solid;
color: transparent;
src/components/LeftSidebar/Navigation.vue
-2
View File
@@ -70,8 +70,6 @@ const menus = [
}
svg {
width: 2rem;
height: 2rem;
margin: 0 $small 0 $small;
border-radius: $small;
}
src/components/RightSideBar/Queue.vue
+47 -18
View File
@@ -2,18 +2,24 @@
<div class="up-next">
<div class="r-grid">
<UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
<div class="queue-actions rounded bg-black">
<div class="left">
<button class="clear-queue action">Clear</button>
<button class="shuffle-queue action">Shuffle</button>
<button class="shuffle-queue action">Shuffle</button>
<button class="shuffle-queue action">Go to Mix</button>
</div>
<div class="right">
<button class="shuffle-queue action">Save as Playlist</button>
</div>
</div>
<div class="scrollable-r bg-black rounded">
<div class="queue-actions">
<div class="left">
<button class="clear-queue action">
<ClearSvg />
<span>Clear</span>
</button>
<button class="shuffle-queue action">
<SaveAsPlaylistSvg />
<span> Save As Playlist </span>
</button>
</div>
<div class="right">
<button class="more-action action">
<MoreSvg />
</button>
</div>
</div>
<div
class="inner"
@mouseenter="setMouseOver(true)"
@@ -41,6 +47,10 @@ import PlayingFrom from "./Queue/playingFrom.vue";
import UpNext from "./Queue/upNext.vue";
import { onUpdated, ref } from "vue";
import { focusElem } from "@/composables/perks";
import ClearSvg from "../../assets/icons/delete.svg";
import ShuffleSvg from "../../assets/icons/shuffle.svg";
import SaveAsPlaylistSvg from "../../assets/icons/sdcard.svg";
import MoreSvg from "../../assets/icons/more.svg";
const queue = useQStore();
const mouseover = ref(false);
@@ -70,31 +80,50 @@ onUpdated(() => {
position: relative;
height: 100%;
display: grid;
grid-template-rows: max-content max-content 1fr max-content;
grid-template-rows: max-content 1fr max-content;
gap: $small;
.left {
display: flex;
gap: $small;
}
.queue-actions {
display: flex;
justify-content: space-between;
gap: $small;
padding: $small;
margin-bottom: -1.25rem;
margin-top: $small;
.action {
background-color: $accent;
padding: $smaller;
border-radius: $smaller;
font-size: 0.8rem;
padding: inherit 1rem;
padding-right: $small;
background-image: linear-gradient(70deg, $gray3, $gray2);
svg {
transform: scale(0.8);
}
}
.more-action {
padding-right: $smaller;
svg {
transform: scale(1.25);
}
}
}
.scrollable-r {
height: 100%;
padding: $small 0 $small $small;
padding: $small;
overflow: hidden;
display: grid;
grid-template-rows: max-content 1fr;
gap: $medium;
.inner {
height: 100%;
margin-right: -$small;
overflow: scroll;
margin-top: 1rem;
padding-right: $small;