mirrors/Hyperpipe
1
0
Fork 0
mirror of https://codeberg.org/Hyperpipe/Hyperpipe synced 2025-06-27 20:58:01 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add optional clickable animation to .bi

Browse source
This commit is contained in:
Denevola 2022-09-24 02:39:38 +09:00
parent 0c5b358ddc
commit b9d84f2534
7 changed files with 30 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/assets/base.css
View file

@ -200,6 +200,15 @@ button {
.bi[data-active='true'] {
color: var(--color-foreground);
}
.bi.clickable::before {
border-radius: 50%;
transition: background-color 0.1s ease, box-shadow 0.1s ease;
}
.bi.clickable:active::before {
background-color: var(--color-border);
box-shadow: 0 0 0 0.5rem var(--color-border);
}
.caps {
text-transform: capitalize;

2
src/components/Btn.vue
View file

@ -4,7 +4,7 @@ defineEmits(['click']);
</script>
<template>
<button :class="'bi bi-' + (ico ? ico : 'play')" @click="$emit('click')">
<button :class="'bi clickable bi-' + (ico ? ico : 'play')" @click="$emit('click')">
<slot name="menu"></slot>
</button>
</template>

2
src/components/Modal.vue
View file

@ -20,7 +20,7 @@ watch(show, n => {
<template>
<Transition name="fade">
<div class="modal" v-if="show">
<span class="bi bi-x-lg modal-close" @click="show = false"></span>
<span class="bi bi-x-lg clickable modal-close" @click="show = false"></span>
<div class="modal-box">
<div class="modal-title">{{ title }}</div>
<div class="modal-content">

8
src/components/NavBar.vue
View file

@ -43,19 +43,19 @@ function set(page) {
<div class="wrap">
<span
class="nav-ico bi bi-house"
class="nav-ico bi bi-house clickable"
:data-active="nav.state.page == 'home'"
@click="set('home')"></span>
<span
class="nav-ico bi bi-compass"
class="nav-ico bi bi-compass clickable"
:data-active="nav.state.page == 'explore'"
@click="set('explore')"></span>
<span
class="nav-ico bi bi-collection"
class="nav-ico bi bi-collection clickable"
:data-active="nav.state.page == 'library'"
@click="set('library')"></span>
<span
class="nav-ico bi bi-gear"
class="nav-ico bi bi-gear clickable"
:data-active="nav.state.page == 'prefs'"
@click="set('prefs')"></span>
</div>

6
src/components/Search.vue
View file

@ -141,10 +141,10 @@ onUpdated(() => {
<template #menu>
<Transition name="fade">
<div v-if="albumMenu" class="alb popup">
<button class="bi bi-bookmark-plus" @click="saveAlbum"></button>
<button class="bi bi-bookmark-plus clickable" @click="saveAlbum"></button>
<button
class="bi bi-plus-lg"
class="bi bi-plus-lg clickable"
@click="
data.state.urls.push(
...results.items.songs.items.map(i => ({
@ -155,7 +155,7 @@ onUpdated(() => {
)
"></button>
<button class="bi bi-shuffle" @click="shuffleAdd"></button>
<button class="bi bi-shuffle clickable" @click="shuffleAdd"></button>
</div>
</Transition>
</template>

6
src/components/SongItem.vue
View file

@ -117,12 +117,12 @@ onMounted(() => {
<!-- TODO: Check if user is admin -->
<span
v-if="useStore().auth && playlistId"
class="bi bi-dash-lg ign"
class="bi bi-dash-lg clickable ign"
@click="Remove"></span>
<span class="bi bi-plus-lg ign" @click="addSong"></span>
<span class="bi bi-plus-lg clickable ign" @click="addSong"></span>
<span class="bi bi-share ign" @click="Share"></span>
<span class="bi bi-share clickable ign" @click="Share"></span>
</div>
</Transition>
</span>

18
src/components/StatusBar.vue
View file

@ -144,7 +144,7 @@ async function Like() {
<button
id="btn-play-pause"
aria-label="Play or Pause"
class="bi"
class="bi clickable"
:class="'bi-' + player.state.status"
@click="player.toggle('play')"></button>
@ -167,7 +167,7 @@ async function Like() {
id="vol-btn"
aria-label="Volume Buttons"
@click="showme.vol = !showme.vol"
class="popup-wrap bi bi-volume-up">
class="popup-wrap bi bi-volume-up clickable">
<Transition name="fade">
<div v-if="showme.vol" id="vol" class="popup">
<input
@ -182,7 +182,7 @@ async function Like() {
</Transition>
</button>
<button
class="bi bi-three-dots"
class="bi bi-three-dots clickable"
aria-label="More Controls"
@click="
showme.menu = !showme.menu;
@ -194,7 +194,7 @@ async function Like() {
<div id="menu" v-if="showme.menu" class="popup">
<button
id="info-btn"
class="bi bi-info-circle"
class="bi bi-info-circle clickable"
aria-label="Show Information About Song"
:data-active="player.state.info"
@click="player.toggle('info')"></button>
@ -203,7 +203,7 @@ async function Like() {
v-if="store.auth"
id="like-btn"
title="Add song to favorites"
class="bi blink"
class="bi blink clickable"
:class="data.state.url == liked ? 'bi-heart-fill' : 'bi-heart'"
:data-active="data.state.url == liked"
:data-loading="liking"
@ -213,20 +213,20 @@ async function Like() {
id="addToPlaylist"
title="Add Current Song to a Playlist"
aria-label="Add Current Song to a Playlist"
class="bi bi-collection"
class="bi bi-collection clickable"
@click="List"></button>
<button
id="list-btn"
title="Current Playlist"
aria-label="Current Playlist"
class="bi bi-music-note-list"
class="bi bi-music-note-list clickable"
:data-active="player.state.playlist"
@click="player.toggle('playlist')"></button>
<button
id="btn-lyrics"
class="bi bi-file-music"
class="bi bi-file-music clickable"
:data-active="player.state.lyrics"
@click="player.toggle('lyrics')"></button>
@ -234,7 +234,7 @@ async function Like() {
id="loop-btn"
title="Loop"
aria-label="Loop"
class="bi"
class="bi clickable"
:class="player.state.loop < 2 ? 'bi-repeat' : 'bi-repeat-1'"
:data-active="player.state.loop > 0"
@click="