MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui): disabled interactive elements keep default cursor

This commit is contained in:
upsiflu 2025-03-13 21:32:59 +01:00
parent c8fa78ef28
commit 6c272500ec
4 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/components/ui/Button.vue
View File

@ -217,7 +217,10 @@ onMounted(() => {
white-space: nowrap; white-space: nowrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
cursor: pointer;
&:not([disabled]) {
cursor: pointer;
}
padding: calc(var(--padding) / 2 - var(--shift-by)) var(--padding) calc(var(--padding) / 2 + var(--shift-by)) var(--padding); padding: calc(var(--padding) / 2 - var(--shift-by)) var(--padding) calc(var(--padding) / 2 + var(--shift-by)) var(--padding);
&.is-icon-only { &.is-icon-only {

4
front/src/components/ui/Link.vue
View File

@ -128,7 +128,9 @@ onMounted(() => {
// Decoration // Decoration
cursor: pointer; &:not([disabled]) {
cursor: pointer;
}
transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale)); transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale));
transition:background-color .2s, border-color .3s; transition:background-color .2s, border-color .3s;

13
front/src/style/colors.scss
View File

@ -533,6 +533,9 @@
&:hover { &:hover {
color:var(--link-hover-color); color:var(--link-hover-color);
} }
&[disabled] {
cursor: default;
}
} }
// Fallback for `active` indicators (pressed) // Fallback for `active` indicators (pressed)
@ -570,9 +573,9 @@
border: 1px solid var(--background-color); border: 1px solid var(--background-color);
&.interactive { &.interactive {
&:hover:not(:has(.interactive:hover)) { &:hover:not(:has(.interactive:hover)):not([disabled]) {
color:var(--hover-color, var(--color)); color: var(--hover-color, var(--color));
background-color:var(--hover-background-color); background-color: var(--hover-background-color);
border-color: var(--hover-background-color); border-color: var(--hover-background-color);
} }
&[aria-pressed=true] { &[aria-pressed=true] {
@ -599,7 +602,7 @@
border: 1px solid transparent; border: 1px solid transparent;
&.interactive { &.interactive {
&:hover:not(:has(.interactive:hover)) { &:hover:not(:has(.interactive:hover)):not([disabled]) {
color: var(--hover-color, var(--color)); color: var(--hover-color, var(--color));
background-color: var(--hover-background-color); background-color: var(--hover-background-color);
border-color: var(--hover-background-color); border-color: var(--hover-background-color);
@ -634,7 +637,7 @@
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
&.interactive, button { &.interactive, button {
&:hover { &:hover:not([disabled]) {
color:var(--hover-color, var(--color)); color:var(--hover-color, var(--color));
border-color: var(--hover-border-color); border-color: var(--hover-border-color);
} }

1
front/src/ui/components/Sidebar.vue
View File

@ -309,6 +309,7 @@ const isOpen = ref(false)
thin-font thin-font
icon="bi-heart" icon="bi-heart"
thick-when-active thick-when-active
:disabled="!store.state.auth.authenticated"
> >
{{ t('components.Sidebar.link.favorites') }} {{ t('components.Sidebar.link.favorites') }}
</Link> </Link>