Browse Source

Update slider styling

Properly implement styling on Firefox.
pull/1/head
TheoryOfNekomata 1 year ago
parent
commit
4a5659ac90
3 changed files with 42 additions and 18 deletions
  1. +40
    -12
      packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx
  2. +0
    -4
      packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/style.module.css
  3. +2
    -2
      packages/web-kitchensink-reactnext/src/pages/categories/number/index.tsx

+ 40
- 12
packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx View File

@@ -4,6 +4,13 @@ import {RenderOptions} from '@tesseract-design/web-option-react';
import clsx from 'clsx';
import styles from './style.module.css';

/*
* Caveat for slider:
*
* Since sliders are not as customizable as other components, especially with orientations, prefer using sliders where
* using horizontal sliders would be as acceptable as vertical sliders and vv.
*/

export type SliderOrientation = 'horizontal' | 'vertical';

type SliderDerivedElement = HTMLInputElement;
@@ -56,7 +63,7 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
slider.setAttribute('orient', orient);
wrapper.dataset[browser] = orient;
wrapper.removeAttribute('data-orient');
grandParent.style.width = '0px';
grandParent.style.width = children ? '2.5em' : '1em';
}

return () => {
@@ -67,7 +74,7 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
slider.removeAttribute('orient');
}
};
}, [ref, orient, browser]);
}, [ref, orient, children, browser]);

React.useEffect(() => {
if (!(typeof ref === 'object' && ref)) {
@@ -126,16 +133,41 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
Array.from(tickMarks).forEach((tickMarkRaw) => {
const tickMark = tickMarkRaw as HTMLElement;
const offset = tickMark.dataset.offset as string;
const tickMarkWrapper = tickMark.children[0] as HTMLElement;
const tickMarkLine = tickMarkWrapper.children[0] as HTMLElement;
const tickMarkLabel = tickMarkLine.nextElementSibling as HTMLElement | null;
if (isNotFirefox) {
tickMark.style.left = offset;
tickMark.style.bottom = '';
tickMarkWrapper.style.translate = '-50%';
tickMarkWrapper.style.flexDirection = 'column';
tickMarkLine.style.width = '1px';
tickMarkLine.style.height = '0.5em';
if (tickMarkLabel) {
tickMarkLabel.style.writingMode = 'initial';
}
} else if (isFirefox && orient === 'horizontal') {
tickMark.style.left = offset;
tickMark.style.bottom = '';
tickMarkWrapper.style.translate = '-50%';
tickMarkWrapper.style.flexDirection = 'column';
tickMarkLine.style.width = '1px';
tickMarkLine.style.height = '0.5em';
if (tickMarkLabel) {
tickMarkLabel.style.writingMode = 'initial';
}
} else {
tickMark.style.bottom = offset;
tickMark.style.left = '';
tickMarkWrapper.style.translate = '0 50%';
tickMarkWrapper.style.flexDirection = 'row';
tickMarkLine.style.width = '0.5em';
tickMarkLine.style.height = '1px';
if (tickMarkLabel) {
tickMarkLabel.style.writingMode = 'sideways-lr';
}
}
console.log(tickMarkWrapper);
});
}
}, [ref, orient, browser]);
@@ -194,9 +226,7 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
)}
/>
{Array.isArray(children) && (
<div className={clsx(
styles['tick-mark-container'],
)}>
<div className="select-none">
<div className="relative w-full h-full">
{children.map((c) => (
<div
@@ -207,17 +237,15 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
)}
data-offset={`${(Number(c.props.value) - Number(min)) / (Number(max) - Number(min)) * 100}%`}
>
{/* TODO fix translateX */}
<div
className="flex flex-col text-xs items-center justify-between translate-x-[-50%] h-full"
className="flex h-full text-xs items-center justify-between"
>
<div
className={clsx(
'w-[1px] h-2',
'bg-current',
)}
className="bg-current"
/>
{c.props.children}
<div>
{c.props.children}
</div>
</div>
</div>
))}


+ 0
- 4
packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/style.module.css View File

@@ -141,10 +141,6 @@
box-shadow: 0 100000.5em 0 100000em rgb(var(--color-tertiary) / 50%);
}

.slider[orient='vertical'] + .tick-mark-container {
flex-direction: row;
}

.slider-wrapper[data-chrome] > input + * {
padding: 0 0.5em;
height: 1.5em;


+ 2
- 2
packages/web-kitchensink-reactnext/src/pages/categories/number/index.tsx View File

@@ -29,7 +29,7 @@ const NumberPage: NextPage = () => {
max={100}
>
<option value={25}>
low
25
</option>
<option value={50} />
</TesseractNumber.Slider>
@@ -41,7 +41,7 @@ const NumberPage: NextPage = () => {
orient="vertical"
>
<option value={25}>
low
日本語
</option>
<option value={50} />
</TesseractNumber.Slider>


Loading…
Cancel
Save