TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-05 04:53:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

attach context menu to options icon

Browse Source
This commit is contained in:
geoffrey45
2022-06-24 19:52:14 +03:00
parent 8e488c063b
commit a7fcb7f825
1 changed files with 35 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/shared/SongItem.vue
+35 -21
View File
@@ -53,9 +53,18 @@
</router-link> </router-link>
<div class="song-duration"> <div class="song-duration">
<div class="text">{{ formatSeconds(props.song.length) }}</div> <div class="text">{{ formatSeconds(props.song.length) }}</div>
<div class="options-icon circular"> </div>
<OptionSvg /> <div
</div> class="options-icon circular"
:class="{ options_button_clicked }"
@click="
(e) => {
showContextMenu(e);
options_button_clicked = true;
}
"
>
<OptionSvg />
</div> </div>
</div> </div>
</template> </template>
@@ -77,6 +86,7 @@ const contextStore = useContextStore();
const context_on = ref(false); const context_on = ref(false);
const imguri = paths.images.thumb; const imguri = paths.images.thumb;
const options_button_clicked = ref(false);
const showContextMenu = (e: Event) => { const showContextMenu = (e: Event) => {
e.preventDefault(); e.preventDefault();
@@ -90,6 +100,7 @@ const showContextMenu = (e: Event) => {
contextStore.$subscribe((mutation, state) => { contextStore.$subscribe((mutation, state) => {
if (!state.visible) { if (!state.visible) {
context_on.value = false; context_on.value = false;
options_button_clicked.value = false;
} }
}); });
}; };
@@ -114,7 +125,7 @@ function emitUpdate(track: Track) {
.songlist-item { .songlist-item {
display: grid; display: grid;
align-items: center; align-items: center;
grid-template-columns: 1.5rem 1.5fr 1fr 1.5fr 0.25fr; grid-template-columns: 1.5rem 1.5fr 1fr 1.5fr 0.25fr 2.5rem;
height: 3.75rem; height: 3.75rem;
text-align: left; text-align: left;
gap: $small; gap: $small;
@@ -122,11 +133,11 @@ function emitUpdate(track: Track) {
-moz-user-select: none; -moz-user-select: none;
@include tablet-landscape { @include tablet-landscape {
grid-template-columns: 1.5rem 1.5fr 1fr 1.5fr; grid-template-columns: 1.5rem 1.5fr 1fr 1.5fr 2.5rem;
} }
@include tablet-portrait { @include tablet-portrait {
grid-template-columns: 1.5rem 1.5fr 1fr; grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem;
} }
&:hover { &:hover {
@@ -139,7 +150,7 @@ function emitUpdate(track: Track) {
.song-duration { .song-duration {
@include tablet-landscape { @include tablet-landscape {
display: none; display: none !important;
} }
} }
@@ -183,11 +194,18 @@ function emitUpdate(track: Track) {
.song-duration { .song-duration {
font-size: 0.9rem; font-size: 0.9rem;
width: 5rem !important; width: 5rem !important;
text-align: right;
}
.options-icon {
opacity: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $smaller; justify-content: center;
opacity: 1; aspect-ratio: 1;
transition: all 0.2s ease-in; width: 2rem;
margin-right: 1rem;
svg { svg {
transition: all 0.2s ease-in; transition: all 0.2s ease-in;
@@ -199,20 +217,16 @@ function emitUpdate(track: Track) {
} }
} }
.options-icon { &:hover {
opacity: 0; background-color: $gray5;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
aspect-ratio: 1;
&:hover {
background-color: $gray5;
}
} }
} }
.options_button_clicked {
background-color: $gray5;
opacity: 1;
}
.flex { .flex {
position: relative; position: relative;
padding-left: 4rem; padding-left: 4rem;