Merge pull request '[accessibility] feature/context-menu-keyboard' (#1) from feature/context-menu-keyboard into main

Reviewed-on: https://codeberg.org/banaanihillo/Hyperpipe/pulls/1
This commit is contained in:
banaanihillo 2024-04-20 09:23:54 +00:00
commit e1c88a56f2
3 changed files with 4483 additions and 41 deletions

4491
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -21,6 +21,7 @@
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue": "^5.0.4",
"prettier": "^3.2.5", "prettier": "^3.2.5",
"vite": "^5.1.5" "vite": "^5.1.5",
"vite-plugin-pwa": "^0.19.2"
} }
} }

View file

@ -132,30 +132,31 @@ const openSong = el => {
</a> </a>
</span> </span>
<span <button
class="bi bi-three-dots-vertical popup-wrap ign" class="bi bi-three-dots-vertical popup-wrap ign"
@mouseenter="show = true" @mouseenter="show = true"
@mouseleave="show = false"> @mouseleave="show = false"
@click.enter="show ? show = false : show = true">
<Transition name="fade"> <Transition name="fade">
<div v-if="show" class="popup ign"> <div v-if="show" class="popup ign">
<span <button
v-if="playlistId || offlineUri" v-if="playlistId || offlineUri"
class="bi bi-dash-lg clickable ign" class="bi bi-dash-lg clickable ign"
@click="Remove"></span> @click="Remove"></button>
<span <button
class="bi bi-chevron-bar-right clickable ign" class="bi bi-chevron-bar-right clickable ign"
@click="appendSong"></span> @click="appendSong"></button>
<span <button
class="bi bi-collection clickable ign" class="bi bi-collection clickable ign"
@click="showPl = true"></span> @click="showPl = true"></button>
<span <button
class="bi bi-broadcast clickable ign" class="bi bi-broadcast clickable ign"
@click="$emit('nxt-song')"></span> @click="$emit('nxt-song')"></button>
<span class="bi bi-plus-lg clickable ign" @click="addSong"></span> <button class="bi bi-plus-lg clickable ign" @click="addSong"></button>
<span class="bi bi-share clickable ign" @click="Share"></span> <button class="bi bi-share clickable ign" @click="Share"></button>
</div> </div>
</Transition> </Transition>
</span> </button>
</div> </div>
</template> </template>
@ -177,6 +178,9 @@ span.content {
span.bi-three-dots-vertical { span.bi-three-dots-vertical {
margin: 2rem; margin: 2rem;
} }
button.bi-three-dots-vertical {
border: none;
}
.popup { .popup {
line-height: auto; line-height: auto;
height: auto; height: auto;