Fixed ui
This commit is contained in:
parent
307f624015
commit
f1efb38dd4
2 changed files with 175 additions and 3 deletions
|
|
@ -4,10 +4,84 @@
|
|||
|
||||
.section
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-direction: row
|
||||
align-items: flex-start
|
||||
padding: 2rem
|
||||
border: 2px solid color.adjust(vars.$background, $lightness: 6%)
|
||||
border: vars.$componentBorder
|
||||
border-radius: vars.$borderRadius
|
||||
background-color: vars.$componentBackground
|
||||
color: #ffffff
|
||||
gap: 2rem
|
||||
|
||||
&__input
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: flex-start
|
||||
gap: 1rem
|
||||
|
||||
&__presets
|
||||
display: flex
|
||||
flex-direction: row
|
||||
gap: 0.25rem
|
||||
|
||||
&__selector
|
||||
margin: 2rem 0 0 0
|
||||
|
||||
&__root
|
||||
// position: relative
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
user-select: none
|
||||
touch-action: none
|
||||
|
||||
&__background
|
||||
position: relative
|
||||
border-radius: 6px
|
||||
height: 15.75rem
|
||||
width: 18.85rem
|
||||
|
||||
&__thumb
|
||||
display: block
|
||||
width: 16px
|
||||
height: 16px
|
||||
border-radius: 9999px
|
||||
border: 2px solid #fff
|
||||
background: var(--kb-color-current)
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
|
||||
&__results
|
||||
@extend .section__input
|
||||
|
||||
// .ColorAreaRoot
|
||||
// position: relative
|
||||
// display: flex
|
||||
// flex-direction: column
|
||||
// align-items: center
|
||||
// user-select: none
|
||||
// touch-action: none
|
||||
// width: 200px
|
||||
|
||||
// .ColorAreaBackground
|
||||
// position: relative
|
||||
// border-radius: 6px
|
||||
// height: 150px
|
||||
// width: 150px
|
||||
|
||||
// .ColorAreaThumb
|
||||
// display: block
|
||||
// width: 16px
|
||||
// height: 16px
|
||||
// border-radius: 9999px
|
||||
// border: 2px solid #fff
|
||||
// background: var(--kb-color-current)
|
||||
|
||||
// &:focus
|
||||
// outline: none
|
||||
|
||||
.ColorArealLabel
|
||||
font-size: 14px
|
||||
font-weight: 500
|
||||
user-select: none
|
||||
|
|
|
|||
|
|
@ -1,10 +1,108 @@
|
|||
import './ColorConverterComponent.sass'
|
||||
import ColorSwatch from '../../ColorSwatch/ColorSwatch';
|
||||
import MiniCard from '../../MiniCard/MiniCard';
|
||||
import Alert from '../../Alert/Alert.tsx'
|
||||
import { createSignal, onMount } from "solid-js"
|
||||
import { colord, extend, random } from 'colord';
|
||||
import cmykPlugin from "colord/plugins/cmyk";
|
||||
import namesPlugin from "colord/plugins/names";
|
||||
import hwbPlugin from "colord/plugins/hwb";
|
||||
import { ColorArea } from "@kobalte/core/color-area";
|
||||
import { parseColor } from "@kobalte/core/colors";
|
||||
|
||||
extend([cmykPlugin, namesPlugin, hwbPlugin]);
|
||||
|
||||
export default () => {
|
||||
const [color, setColor] = createSignal(parseColor("#ffffff"))
|
||||
const [presetOne, setPresetOne] = createSignal("")
|
||||
const [presetTwo, setPresetTwo] = createSignal("")
|
||||
const [presetThree, setPresetThree] = createSignal("")
|
||||
const [presetFour, setPresetFour] = createSignal("")
|
||||
const [presetFive, setPresetFive] = createSignal("")
|
||||
const [presetSix, setPresetSix] = createSignal("")
|
||||
const [copiedText, setCopiedText] = createSignal('')
|
||||
|
||||
const hex = () => colord(color().toString()).toHex().toUpperCase()
|
||||
const rgb = () => colord(color().toString()).toRgbString().toUpperCase()
|
||||
const hsl = () => colord(color().toString()).toHslString().toUpperCase()
|
||||
const cmyk = () => colord(color().toString()).toCmykString().substring(7).toUpperCase()
|
||||
const hwb = () => colord(color().toString()).toHwbString().toUpperCase()
|
||||
|
||||
const randomColor = () => colord(random().toHex()).toHex()
|
||||
|
||||
const setPresets = () => {
|
||||
setPresetOne(randomColor())
|
||||
setPresetTwo(randomColor())
|
||||
setPresetThree(randomColor())
|
||||
setPresetFour(randomColor())
|
||||
setPresetFive(randomColor())
|
||||
setPresetSix(randomColor())
|
||||
}
|
||||
|
||||
const copyToClipboard = async (text: string, alertType: string) => {
|
||||
try {
|
||||
navigator.clipboard.writeText(text)
|
||||
setCopiedText(alertType)
|
||||
setTimeout(() => setCopiedText(''), 2000)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => setPresets());
|
||||
|
||||
|
||||
const switchColor = (color: string) => {
|
||||
setColor(parseColor(color))
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<section class='section'><h1>hello</h1></section>
|
||||
<section class='section'>
|
||||
<div class='section__input'>
|
||||
<span>Color Sample</span>
|
||||
<ColorSwatch color={color().toString()} height={3} width={19.25} />
|
||||
|
||||
<span>Random Presets</span>
|
||||
<div class='section__input__presets'>
|
||||
<ColorSwatch color={presetOne()} height={3} width={3} isPreset onClick={() => switchColor(presetOne())} />
|
||||
<ColorSwatch color={presetTwo()} height={3} width={3} isPreset onClick={() => switchColor(presetTwo())} />
|
||||
<ColorSwatch color={presetThree()} height={3} width={3} isPreset onClick={() => switchColor(presetThree())} />
|
||||
<ColorSwatch color={presetFour()} height={3} width={3} isPreset onClick={() => switchColor(presetFour())} />
|
||||
<ColorSwatch color={presetFive()} height={3} width={3} isPreset onClick={() => switchColor(presetFive())} />
|
||||
<ColorSwatch color={presetSix()} height={3} width={3} isPreset onClick={() => switchColor(presetSix())} />
|
||||
</div>
|
||||
|
||||
<div class='section__input__selector' >
|
||||
<ColorArea class="section__input__selector__root" value={color()} onChange={setColor} >
|
||||
<ColorArea.Background class="section__input__selector__background" >
|
||||
<ColorArea.Thumb class="section__input__selector__thumb">
|
||||
<ColorArea.HiddenInputX />
|
||||
<ColorArea.HiddenInputY />
|
||||
</ColorArea.Thumb>
|
||||
</ColorArea.Background>
|
||||
</ColorArea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='section__results'>
|
||||
<MiniCard text="Hex" content={hex()} onClick={() => copyToClipboard(hex(), 'Hex')} />
|
||||
<Alert for="Hex" trigger={copiedText() === 'Hex'} />
|
||||
|
||||
<MiniCard text="RGB" content={rgb()} onClick={() => copyToClipboard(rgb(), 'RGB')} />
|
||||
<Alert for="RGB" trigger={copiedText() === 'RGB'} />
|
||||
|
||||
<MiniCard text="HSL" content={hsl()} onClick={() => copyToClipboard(hsl(), 'HSL')} />
|
||||
<Alert for="HSL" trigger={copiedText() === 'HSL'} />
|
||||
|
||||
<MiniCard text="CMYK" content={cmyk().toString()} onClick={() => copyToClipboard(cmyk(), 'CMYK')} />
|
||||
<Alert for="CMYK" trigger={copiedText() === 'CMYK'} />
|
||||
|
||||
<MiniCard text="HWB" content={hwb().toString()} onClick={() => copyToClipboard(hwb(), 'HWB')} />
|
||||
<Alert for="HWB" trigger={copiedText() === 'HWB'} />
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue