[web] Change cursor visuals when no operation is allowed on slider

The default cursor of the browser is now overridden by another icon from Material Design Icons.
This commit is contained in:
Alain Nussbaumer 2023-06-29 19:04:35 +02:00
parent 9556548fc7
commit 523f88cc0b
6 changed files with 37 additions and 21 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -26,7 +26,10 @@
:class="{ 'is-inactive': !output.selected }"
max="100"
type="range"
:style="{ '--ratio': volume / 100 }"
:style="{
'--ratio': volume / 100,
'--cursor': $filters.cursor(this.cursor)
}"
@change="change_volume"
/>
</div>
@ -37,6 +40,7 @@
</template>
<script>
import { mdiCancel } from '@mdi/js'
import webapi from '@/webapi'
export default {
@ -46,7 +50,8 @@ export default {
data() {
return {
volume: this.output.selected ? this.output.volume : 0
volume: this.output.selected ? this.output.volume : 0,
cursor: mdiCancel
}
},

View File

@ -66,5 +66,11 @@ export const filters = {
return ''
}
return t('filter.channels', { value })
},
cursor(path, size = 20) {
const viewbox = 24
const center = size / 2
return `url(\"data:image/svg+xml,%3Csvg width='${size}' height='${size}' viewBox='0 0 ${viewbox} ${viewbox}' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='${path}'/%3E%3C/svg%3E\") ${center} ${center}, auto`
}
}

View File

@ -281,7 +281,7 @@ input[type='range'].slider {
@include track;
}
&.is-inactive {
cursor: not-allowed;
cursor: var(--cursor, not-allowed);
&::-webkit-slider-thumb {
box-sizing: border-box;
background-color: $light;

View File

@ -15,7 +15,10 @@
type="range"
class="slider mt-5"
:class="{ 'is-inactive': is_live }"
:style="{ '--ratio': track_progress_ratio }"
:style="{
'--ratio': track_progress_ratio,
'--cursor': $filters.cursor(this.cursor)
}"
:disabled="is_live"
@change="seek"
@mousedown="start_dragging"
@ -55,8 +58,9 @@
</template>
<script>
import ModalDialogQueueItem from '@/components/ModalDialogQueueItem.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import { mdiCancel } from '@mdi/js'
import ModalDialogQueueItem from '@/components/ModalDialogQueueItem.vue'
import webapi from '@/webapi'
import * as types from '@/store/mutation_types'
@ -71,6 +75,7 @@ export default {
data() {
return {
cursor: mdiCancel,
INTERVAL,
interval_id: 0,
is_dragged: false,