MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Settings ui fixes (#5352)

Browse Source 
* Fix tabbed modal icon size

* Fix slider input being unstyled

* Refactor slider component to use ui components and tailwind

* Pnpm fix my beloved

---------

Co-authored-by: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
This commit is contained in:
Arthur
2026-02-11 00:36:36 +01:00
committed by GitHub
parent f22e49e4f5
commit 76ba11d966
2 changed files with 103 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
packages/ui/src/components/base/Slider.vue
View File

@@ -1,48 +1,53 @@
<template> <template>
<div class="root-container"> <div class="flex flex-row items-center w-full">
<div class="slider-component"> <div class="w-full relative">
<div class="slide-container"> <div class="absolute top-0 h-1/2 w-full">
<div class="snap-points-wrapper"> <div
<div class="snap-points"> class="relative inline-block align-middle w-[calc(100%-0.75rem)] h-3 left-[calc(0.75rem/2)]"
<div >
v-for="snapPoint in snapPoints" <div
:key="snapPoint" v-for="snapPoint in snapPoints"
class="snap-point" :key="snapPoint"
:class="{ green: snapPoint <= currentValue, 'opacity-0': disabled }" class="absolute inline-block w-1 h-full rounded-sm -translate-x-1/2"
:style="{ left: ((snapPoint - min) / (max - min)) * 100 + '%' }" :class="{
></div> 'opacity-0': disabled,
</div> }"
</div> :style="{
<input left: ((snapPoint - min) / (max - min)) * 100 + '%',
ref="input" backgroundColor:
v-model="currentValue" snapPoint <= currentValue ? 'var(--color-brand)' : 'var(--color-base)',
type="range" }"
:min="min" ></div>
:max="max"
:step="step"
class="slider"
:class="{
disabled: disabled,
}"
:disabled="disabled"
:style="{
'--current-value': currentValue,
'--min-value': min,
'--max-value': max,
}"
@input="onInputWithSnap(($event.target as HTMLInputElement).value)"
/>
<div class="slider-range">
<span> {{ min }} {{ unit }} </span>
<span> {{ max }} {{ unit }} </span>
</div> </div>
</div> </div>
<input
ref="input"
v-model="currentValue"
type="range"
:min="min"
:max="max"
:step="step"
class="slider relative rounded-sm h-1 w-full p-0 min-h-0 shadow-none outline-none align-middle appearance-none"
:class="{
'opacity-50 cursor-not-allowed': disabled,
}"
:disabled="disabled"
:style="{
'--current-value': currentValue,
'--min-value': min,
'--max-value': max,
}"
@input="onInputWithSnap(($event.target as HTMLInputElement).value)"
/>
<div class="flex flex-row justify-between text-xs m-0">
<span> {{ min }} {{ unit }} </span>
<span> {{ max }} {{ unit }} </span>
</div>
</div> </div>
<input <StyledInput
ref="value" :model-value="String(currentValue)"
:value="currentValue"
type="number" type="number"
class="slider-input" class="w-24 ml-3"
:disabled="disabled" :disabled="disabled"
:min="min" :min="min"
:max="max" :max="max"
@@ -53,7 +58,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, watch } from 'vue'
import StyledInput from './StyledInput.vue'
const emit = defineEmits<{ 'update:modelValue': [number] }>() const emit = defineEmits<{ 'update:modelValue': [number] }>()
@@ -83,6 +90,13 @@ const props = withDefaults(defineProps<Props>(), {
const currentValue = ref(Math.max(props.min, props.modelValue)) const currentValue = ref(Math.max(props.min, props.modelValue))
watch(
() => props.modelValue,
(newValue) => {
currentValue.value = Math.max(props.min, newValue ?? props.min)
},
)
const inputValueValid = (inputValue: number) => { const inputValueValid = (inputValue: number) => {
let newValue = inputValue || props.min let newValue = inputValue || props.min
@@ -115,135 +129,63 @@ const onInput = (value: string) => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.root-container { .slider {
--transition-speed: 0.2s;
@media (prefers-reduced-motion) {
--transition-speed: 0s;
}
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.slider-component,
.slide-container {
width: 100%;
position: relative;
}
.slider-component .slide-container .slider {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
position: relative;
border-radius: var(--radius-sm);
height: 0.25rem;
width: 100%;
padding: 0;
min-height: 0px;
box-shadow: none;
background: linear-gradient( background: linear-gradient(
to right, to right,
var(--color-brand), var(--color-brand) 0%,
var(--color-brand) var(--color-brand)
calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%), calc(
var(--color-base) (var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%
calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%), ),
var(--color-base) 100% var(--color-base)
); calc(
background-size: 100% 100%; (var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%
outline: none; ),
vertical-align: middle; var(--color-base) 100%
} )
100% 100% no-repeat;
.slider-component .slide-container .slider::-webkit-slider-thumb { &::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 0.75rem; width: 0.75rem;
height: 0.75rem;
background: var(--color-brand);
cursor: pointer;
border-radius: 50%;
transition: var(--transition-speed);
}
.slider-component .slide-container .slider::-moz-range-thumb {
border: none;
width: 0.75rem;
height: 0.75rem;
background: var(--color-brand);
cursor: pointer;
border-radius: 50%;
transition: var(--transition-speed);
}
.slider-component .slide-container .slider:hover::-webkit-slider-thumb:not(.disabled) {
width: 1rem;
height: 1rem;
transition: var(--transition-speed);
}
.slider-component .slide-container .slider:hover::-moz-range-thumb:not(.disabled) {
width: 1rem;
height: 1rem;
transition: var(--transition-speed);
}
.slider-component .slide-container .snap-points-wrapper {
position: absolute;
height: 50%;
width: 100%;
.snap-points {
position: relative;
display: inline-block;
vertical-align: middle;
width: calc(100% - 0.75rem);
height: 0.75rem; height: 0.75rem;
background: var(--color-brand);
border-radius: 50%;
transition:
width 0.2s,
height 0.2s;
left: calc(0.75rem / 2); @media (prefers-reduced-motion: reduce) {
transition: none;
.snap-point {
position: absolute;
display: inline-block;
width: 0.25rem;
height: 100%;
border-radius: var(--radius-sm);
background-color: var(--color-base);
transform: translateX(calc(-0.25rem / 2));
&.green {
background-color: var(--color-brand);
}
} }
} }
}
.slider-input { &::-moz-range-thumb {
width: 6rem; border: none;
margin-left: 0.75rem; width: 0.75rem;
} height: 0.75rem;
background: var(--color-brand);
border-radius: 50%;
transition:
width 0.2s,
height 0.2s;
.slider-range { @media (prefers-reduced-motion: reduce) {
display: flex; transition: none;
flex-direction: row; }
justify-content: space-between; }
font-size: 0.75rem;
margin: 0;
}
.disabled { &:hover:not(:disabled)::-webkit-slider-thumb,
opacity: 0.5; &:hover:not(:disabled)::-moz-range-thumb {
cursor: not-allowed; width: 1rem;
height: 1rem;
}
&:disabled {
pointer-events: none;
}
} }
</style> </style>

2
packages/ui/src/components/modal/TabbedModal.vue
View File

@@ -43,7 +43,7 @@ defineExpose({ selectedTab, setTab })
:class="`flex gap-2 items-center text-left rounded-xl px-4 py-2 border-none text-nowrap font-semibold cursor-pointer active:scale-[0.97] transition-all ${selectedTab === index ? 'bg-button-bgSelected text-button-textSelected' : 'bg-transparent text-button-text hover:bg-button-bg hover:text-contrast'}`" :class="`flex gap-2 items-center text-left rounded-xl px-4 py-2 border-none text-nowrap font-semibold cursor-pointer active:scale-[0.97] transition-all ${selectedTab === index ? 'bg-button-bgSelected text-button-textSelected' : 'bg-transparent text-button-text hover:bg-button-bg hover:text-contrast'}`"
@click="() => setTab(index)" @click="() => setTab(index)"
> >
<component :is="tab.icon" class="w-4 h-4" /> <component :is="tab.icon" class="w-4 h-4 flex-shrink-0" />
<span>{{ formatMessage(tab.name) }}</span> <span>{{ formatMessage(tab.name) }}</span>
<span <span
v-if="tab.badge" v-if="tab.badge"