mirror of
https://github.com/owntone/owntone-server.git
synced 2025-03-13 21:12:56 -04:00
[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:
parent
9556548fc7
commit
523f88cc0b
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -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`
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
|
Loading…
x
Reference in New Issue
Block a user