mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-10-17 23:52:00 +02:00
82 lines
3.8 KiB
Vue
82 lines
3.8 KiB
Vue
|
<template>
|
||
|
|
<button class="icon-btn rounded-md bg-primary border border-gray-600 flex items-center justify-center h-9 w-9 relative" @click="clickBtn">
|
||
|
|
<div class="w-5 h-5 text-white relative">
|
||
|
|
<svg v-if="isRead" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />
|
||
|
|
</svg>
|
||
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-7 19.6l-7-4.66V3h14v12.93l-7 4.67zm-2.01-7.42l-2.58-2.59L6 12l4 4 8-8-1.42-1.42z" />
|
||
|
|
</svg>
|
||
|
|
<!-- <svg v-if="!isRead" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 482.204 482.204" xml:space="preserve" fill="currentColor">
|
||
|
|
<path
|
||
|
|
d="M83.127,344.477c54.602,1.063,101.919,9.228,136.837,23.613c0.596,0.244,1.227,0.366,1.852,0.366
|
||
|
|
c0.95,0,1.895-0.279,2.706-0.822c1.349-0.902,2.158-2.418,2.158-4.041l0.019-261.017c0-1.992-1.215-3.783-3.066-4.519
|
||
|
|
L85.019,42.899c-1.496-0.596-3.193-0.411-4.527,0.494c-1.334,0.906-2.133,2.413-2.133,4.025v292.197
|
||
|
|
C78.359,342.264,80.479,344.425,83.127,344.477z"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
d="M480.244,89.256c-1.231-0.917-2.824-1.198-4.297-0.759l-49.025,14.657
|
||
|
|
c-2.06,0.616-3.471,2.51-3.471,4.659v252.151c0,0,0.218,3.978-3.97,3.978c-4.796,0-7.946,0-7.946,0
|
||
|
|
c-39.549,0-113.045,4.105-160.93,31.6l-9.504,5.442l-9.503-5.442c-47.886-27.494-121.381-31.6-160.93-31.6c0,0-8.099,0-10.142,0
|
||
|
|
c-1.891,0-1.775-2.272-1.775-2.271V107.813c0-2.149-1.411-4.043-3.47-4.659L6.256,88.497c-1.473-0.439-3.066-0.158-4.298,0.759
|
||
|
|
S0,91.619,0,93.155v305.069c0,1.372,0.581,2.681,1.597,3.604c1.017,0.921,2.375,1.372,3.741,1.236
|
||
|
|
c14.571-1.429,37.351-3.131,63.124-3.131c56.606,0,102.097,8.266,131.576,23.913c4.331,2.272,29.441,15.803,41.065,15.803
|
||
|
|
c11.624,0,36.733-13.53,41.063-15.803c29.48-15.647,74.971-23.913,131.577-23.913c25.771,0,48.553,1.702,63.123,3.131
|
||
|
|
c1.367,0.136,2.725-0.315,3.742-1.236c1.016-0.923,1.596-2.231,1.596-3.604V93.155C482.203,91.619,481.476,90.173,480.244,89.256z
|
||
|
|
"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
d="M257.679,367.634c0.812,0.543,1.757,0.822,2.706,0.822c0.626,0,1.256-0.122,1.853-0.366
|
||
|
|
c34.917-14.386,82.235-22.551,136.837-23.613c2.648-0.052,4.769-2.213,4.769-4.861V47.418c0-1.613-0.799-3.12-2.133-4.025
|
||
|
|
c-1.334-0.904-3.031-1.09-4.528-0.494L258.569,98.057c-1.851,0.736-3.065,2.527-3.065,4.519l0.019,261.017
|
||
|
|
C255.521,365.216,256.331,366.732,257.679,367.634z"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<svg v-else viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M19 2H6c-1.206 0-3 .799-3 3v14c0 2.201 1.794 3 3 3h15v-2H6.012C5.55 19.988 5 19.806 5 19c0-.101.009-.191.024-.273.112-.576.584-.717.988-.727H21V4a2 2 0 0 0-2-2zm0 9-2-1-2 1V4h4v7z" /></svg> -->
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
isRead: Boolean,
|
||
|
|
disabled: Boolean
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {}
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
methods: {
|
||
|
|
clickBtn(e) {
|
||
|
|
if (this.disabled) {
|
||
|
|
e.preventDefault()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.$emit('click')
|
||
|
|
e.stopPropagation()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
button.icon-btn::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 6px;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(255, 255, 255, 0);
|
||
|
|
transition: all 0.1s ease-in-out;
|
||
|
|
}
|
||
|
|
button.icon-btn:hover:not(:disabled)::before {
|
||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
||
|
|
}
|
||
|
|
button.icon-btn:disabled::before {
|
||
|
|
background-color: rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
</style>
|