forked from DebaucheryLibrarian/traxxx
Improved actor filter layout and behavior.
This commit is contained in:
DebaucheryLibrarian
parent
74e33303ed
commit
21ec821b8c
|
|
@ -66,21 +66,30 @@
|
|||
|
||||
<template v-slot:tooltip>
|
||||
<div class="filter-section boobsize">
|
||||
<label class="filter-label off">Size ({{ boobSize[0] }} - {{ boobSize[1] }})</label>
|
||||
<label class="filter-label off noselect">
|
||||
<span class="label">
|
||||
<Checkbox
|
||||
:checked="boobSizeRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('boobSizeRequired', checked)"
|
||||
/>Size
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="boobSizeRequired"
|
||||
class="label-values"
|
||||
>({{ boobSize[0] }} - {{ boobSize[1] }})</span>
|
||||
</label>
|
||||
|
||||
<span class="filter-split">
|
||||
<Checkbox
|
||||
:checked="boobSizeRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('boobSizeRequired', checked)"
|
||||
/>
|
||||
|
||||
<Range
|
||||
:min="0"
|
||||
:max="boobSizes.length - 1"
|
||||
:value="boobSize"
|
||||
:values="boobSizes"
|
||||
:disabled="!boobSizeRequired"
|
||||
:allow-enable="true"
|
||||
@enable="boobSizeRequired = true"
|
||||
@input="(sizeRange) => updateValue('boobSize', sizeRange, false)"
|
||||
@change="(sizeRange) => updateValue('boobSize', sizeRange, true)"
|
||||
>
|
||||
|
|
@ -96,7 +105,7 @@
|
|||
</div>
|
||||
|
||||
<div class="filter-section">
|
||||
<label class="filter-label">Enhanced</label>
|
||||
<span class="filter-label">Enhanced</span>
|
||||
|
||||
<span
|
||||
:class="{ [['off', 'default', 'on'][naturalBoobs]]: true }"
|
||||
|
|
@ -105,7 +114,7 @@
|
|||
<span
|
||||
class="toggle-label off"
|
||||
@click="updateValue('naturalBoobs', 0)"
|
||||
>no</span>
|
||||
><Icon icon="leaf" /></span>
|
||||
|
||||
<input
|
||||
v-model="naturalBoobs"
|
||||
|
|
@ -119,7 +128,7 @@
|
|||
<span
|
||||
class="toggle-label on"
|
||||
@click="updateValue('naturalBoobs', 2)"
|
||||
>yes</span>
|
||||
><Icon icon="magic-wand2" /></span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -132,49 +141,67 @@
|
|||
|
||||
<template v-slot:tooltip>
|
||||
<div class="filter-section">
|
||||
<label class="filter-label off">Height ({{ height[0] }} - {{ height[1] }} cm)</label>
|
||||
<label class="filter-label noselect">
|
||||
<span class="label">
|
||||
<Checkbox
|
||||
:checked="heightRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('heightRequired', checked)"
|
||||
/>Height
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="heightRequired"
|
||||
class="label-values"
|
||||
>({{ height[0] }} - {{ height[1] }} cm)</span>
|
||||
</label>
|
||||
|
||||
<span class="filter-split">
|
||||
<Checkbox
|
||||
:checked="heightRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('heightRequired', checked)"
|
||||
/>
|
||||
|
||||
<Range
|
||||
:min="50"
|
||||
:max="250"
|
||||
:value="height"
|
||||
:disabled="!heightRequired"
|
||||
:allow-enable="true"
|
||||
@enable="heightRequired = true"
|
||||
@input="(heightRange) => updateValue('height', heightRange, false)"
|
||||
@change="(heightRange) => updateValue('height', heightRange, true)"
|
||||
>
|
||||
<template v-slot:start><Icon icon="shorts" /></template>
|
||||
<template v-slot:end><Icon icon="pants" /></template>
|
||||
<template v-slot:start><Icon icon="height-short" /></template>
|
||||
<template v-slot:end><Icon icon="height" /></template>
|
||||
</Range>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-section">
|
||||
<label class="filter-label off">Weight ({{ weight[0] }} - {{ weight[1] }} kg)</label>
|
||||
<label class="filter-label noselect">
|
||||
<span class="label">
|
||||
<Checkbox
|
||||
:checked="weightRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('weightRequired', checked)"
|
||||
/>Weight
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="weightRequired"
|
||||
class="label-values"
|
||||
>({{ weight[0] }} - {{ weight[1] }} kg)</span>
|
||||
</label>
|
||||
|
||||
<span class="filter-split">
|
||||
<Checkbox
|
||||
:checked="weightRequired"
|
||||
class="checkbox"
|
||||
@change="(checked) => updateValue('weightRequired', checked)"
|
||||
/>
|
||||
|
||||
<Range
|
||||
:min="30"
|
||||
:max="200"
|
||||
:value="weight"
|
||||
:disabled="!weightRequired"
|
||||
:allow-enable="true"
|
||||
@enable="weightRequired = true"
|
||||
@input="(weightRange) => updateValue('weight', weightRange, false)"
|
||||
@change="(weightRange) => updateValue('weight', weightRange, true)"
|
||||
>
|
||||
<template v-slot:start><Icon icon="user6" /></template>
|
||||
<template v-slot:end><Icon icon="user3" /></template>
|
||||
<template v-slot:start><Icon icon="meter-slow" /></template>
|
||||
<template v-slot:end><Icon icon="meter-fast" /></template>
|
||||
</Range>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -459,30 +486,38 @@ export default {
|
|||
.filter-section {
|
||||
width: 15rem;
|
||||
max-width: 100%;
|
||||
border-bottom: solid 1px var(--darken-hint);
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 .5rem;
|
||||
margin: .5rem 0 0 0;
|
||||
justify-content: space-between;
|
||||
padding: .75rem .5rem .5rem .5rem;
|
||||
color: var(--darken);
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
|
||||
.label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin: 0 .75rem 0 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.label-values {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.filter-split {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.checkbox {
|
||||
display: inline-block;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-container,
|
||||
|
|
@ -495,6 +530,10 @@ export default {
|
|||
&.on {
|
||||
.toggle-label.on {
|
||||
color: var(--enabled);
|
||||
|
||||
.icon {
|
||||
fill: var(--enabled);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
|
|
@ -513,6 +552,10 @@ export default {
|
|||
&.off {
|
||||
.toggle-label.off {
|
||||
color: var(--disabled);
|
||||
|
||||
.icon {
|
||||
fill: var(--disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
|
|
@ -530,7 +573,10 @@ export default {
|
|||
}
|
||||
|
||||
.toggle-label {
|
||||
width: 1.5rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
min-width: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
padding: 0 .5rem;
|
||||
color: var(--darken);
|
||||
font-weight: bold;
|
||||
|
|
@ -540,20 +586,33 @@ export default {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--darken);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
&.on {
|
||||
color: var(--enabled);
|
||||
|
||||
.icon {
|
||||
fill: var(--enabled);
|
||||
}
|
||||
}
|
||||
|
||||
&.off {
|
||||
color: var(--disabled);
|
||||
|
||||
.icon {
|
||||
fill: var(--disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
height: 1.25rem;
|
||||
appearance: none;
|
||||
|
|
|
|||
|
|
@ -52,6 +52,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
function minValue() {
|
||||
return Math.min(this.valueA, this.valueB);
|
||||
}
|
||||
|
|
@ -78,20 +80,32 @@ function emit(type = 'change') {
|
|||
}
|
||||
|
||||
function setNearest(event) {
|
||||
if (!this.disabled) {
|
||||
const closestValue = Math.round((event.offsetX / event.target.getBoundingClientRect().width) * this.max);
|
||||
const closestSlider = Math.abs(this.valueA - closestValue) < Math.abs(this.valueB - closestValue) ? 'valueA' : 'valueB';
|
||||
|
||||
this[closestSlider] = closestValue;
|
||||
this.emit();
|
||||
if (this.allowEnable) {
|
||||
this.emit('enable');
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
if (!this.disabled) {
|
||||
const closestValue = Math.ceil((event.offsetX / event.target.getBoundingClientRect().width) * (this.max - this.min)) + this.min;
|
||||
const closestSlider = Math.abs(this.valueA - closestValue) < Math.abs(this.valueB - closestValue) ? 'valueA' : 'valueB';
|
||||
|
||||
this[closestSlider] = closestValue;
|
||||
this.emit();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setValue(prop, value) {
|
||||
if (!this.disabled) {
|
||||
this[prop] = value;
|
||||
this.emit();
|
||||
if (this.allowEnable) {
|
||||
this.emit('enable');
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
if (!this.disabled) {
|
||||
this[prop] = value;
|
||||
this.emit();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
@ -116,8 +130,12 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
allowEnable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['change', 'input'],
|
||||
emits: ['change', 'input', 'enable'],
|
||||
data() {
|
||||
if (this.values) {
|
||||
return {
|
||||
|
|
@ -213,8 +231,8 @@ export default {
|
|||
}
|
||||
|
||||
::v-deep(.icon) {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
fill: var(--shadow);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ async function calculate() {
|
|||
|
||||
const { tooltipX, arrowOffset } = this.getX(triggerBoundary, tooltipBoundary);
|
||||
|
||||
this.tooltipY = triggerBoundary.top + triggerBoundary.height;
|
||||
this.tooltipY = triggerBoundary.top + triggerBoundary.height + 5;
|
||||
this.tooltipX = tooltipX;
|
||||
this.arrowOffset = arrowOffset;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>enlarge</title>
|
||||
<path d="M2 5h-2v-4c0-0.552 0.448-1 1-1h4v2h-3v3z"></path>
|
||||
<path d="M16 5h-2v-3h-3v-2h4c0.552 0 1 0.448 1 1v4z"></path>
|
||||
<path d="M15 16h-4v-2h3v-3h2v4c0 0.552-0.448 1-1 1z"></path>
|
||||
<path d="M5 16h-4c-0.552 0-1-0.448-1-1v-4h2v3h3v2z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 402 B |
|
|
@ -0,0 +1,8 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>enlarge4</title>
|
||||
<path d="M16 5.5v-5.5h-5.5z"></path>
|
||||
<path d="M5.5 0h-5.5v5.5z"></path>
|
||||
<path d="M16 16v-5.5l-5.5 5.5z"></path>
|
||||
<path d="M0 16h5.5l-5.5-5.5z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 312 B |
|
|
@ -0,0 +1,5 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>pants</title>
|
||||
<path d="M12.968 0h-10.936l-1.067 16h4.966l1.568-10.617 1.568 10.617h4.966l-1.067-16zM4 2h-1v-1h1v1zM7 2h-2v-1h2v1zM10 2h-2v-1h2v1zM12 2h-1v-1h1v1z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 316 B |
|
|
@ -0,0 +1,8 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>shrink</title>
|
||||
<path d="M3 0h2v4c0 0.552-0.448 1-1 1h-4v-2h3v-3z"></path>
|
||||
<path d="M11 0h2v3h3v2h-4c-0.552 0-1-0.448-1-1v-4z"></path>
|
||||
<path d="M12 11h4v2h-3v3h-2v-4c0-0.552 0.448-1 1-1z"></path>
|
||||
<path d="M0 11h4c0.552 0 1 0.448 1 1v4h-2v-3h-3v-2z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 401 B |
|
|
@ -0,0 +1,8 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>shrink4</title>
|
||||
<path d="M10 0.5v5.5h5.5z"></path>
|
||||
<path d="M0.5 6h5.5v-5.5z"></path>
|
||||
<path d="M10 10v5.5l5.5-5.5z"></path>
|
||||
<path d="M6 10h-5.5l5.5 5.5z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 307 B |
|
|
@ -0,0 +1,5 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>syringe</title>
|
||||
<path d="M15.5 6l0.5-2-4-4-2 0.5 0.985 0.985-1.631 1.631-2.235-2.235-1.237 1.237 1.506 1.506c-0.033 0.025-0.064 0.053-0.094 0.083l-5.586 5.586c-0.389 0.389-0.389 1.025 0 1.414l0.293 0.293v1l0.646 0.646-2.646 2.646 0.707 0.707 2.646-2.646 0.646 0.646h1l0.293 0.293c0.194 0.194 0.451 0.292 0.707 0.292s0.513-0.097 0.707-0.292l5.586-5.586c0.030-0.030 0.057-0.062 0.083-0.094l1.506 1.506 1.237-1.237-2.235-2.235 1.631-1.631 0.985 0.985zM3.854 8.383l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM7.367 12.396l-0.471 0.471-3.541-3.984 0.029-0.029 3.984 3.541zM4.354 7.883l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM4.854 7.383l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM5.354 6.883l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM5.854 6.383l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM6.354 5.883l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM6.854 5.383l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM7.354 4.883l0.029-0.029 3.984 3.541-0.471 0.471-3.541-3.984zM6 13.71c-0.024 0-0.059-0.006-0.088-0.035l-3.586-3.586c-0.029-0.029-0.035-0.064-0.035-0.088s0.006-0.059 0.035-0.088l0.057-0.057 3.984 3.541-0.279 0.279c-0.029 0.029-0.064 0.035-0.088 0.035zM6.396 13.367l-3.541-3.984 0.029-0.029 3.984 3.541-0.471 0.471zM11.674 8.088l-0.279 0.279-3.541-3.984 0.057-0.057c0.029-0.029 0.064-0.035 0.088-0.035s0.059 0.006 0.088 0.035l3.586 3.586c0.047 0.047 0.047 0.13 0 0.177zM12.354 6.116l-2.47-2.47 1.631-1.631 2.47 2.47-1.631 1.631z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in New Issue