variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Styling tweaks to select editor

Browse source
This commit is contained in:
Aria Minaei 2021-07-16 11:17:12 +02:00
parent 997a516f87
commit 022016b574
1 changed files with 31 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
theatre/studio/src/uiComponents/form/BasicSelect.tsx
View file

@ -2,12 +2,30 @@ import {theme} from '@theatre/studio/css'
import {darken, lighten} from 'polished' import {darken, lighten} from 'polished'
import React, {useCallback} from 'react' import React, {useCallback} from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import {CgSelect} from 'react-icons/all'
const Container = styled.div`
width: 100%;
position: relative;
`
const IconContainer = styled.div`
position: absolute;
right: 0px;
top: 0;
bottom: 0;
width: 1.5em;
font-size: 14px;
display: flex;
align-items: center;
color: #6b7280;
`
const Select = styled.select` const Select = styled.select`
background-color: transparent; background-color: transparent;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid transparent; border: 1px solid transparent;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.85);
padding: 1px 6px; padding: 1px 6px;
font: inherit; font: inherit;
outline: none; outline: none;
@ -16,11 +34,6 @@ const Select = styled.select`
height: calc(100% - 4px); height: calc(100% - 4px);
border-radius: 2px; border-radius: 2px;
/** Credit: https://github.com/tailwindlabs/tailwindcss-forms/blob/39946dd5d1c4cd980a3e8fd2a0c597f962fe285e/src/index.js#L86 */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 4px center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
color-adjust: exact; color-adjust: exact;
appearance: none; appearance: none;
@ -44,13 +57,18 @@ const BasicSelect: React.FC<{
[onChange], [onChange],
) )
return ( return (
<Select className={className} value={value} onChange={_onChange}> <Container>
{Object.keys(options).map((key, i) => ( <Select className={className} value={value} onChange={_onChange}>
<option key={'option-' + i} value={key}> {Object.keys(options).map((key, i) => (
{options[key]} <option key={'option-' + i} value={key}>
</option> {options[key]}
))} </option>
</Select> ))}
</Select>
<IconContainer>
<CgSelect />
</IconContainer>
</Container>
) )
} }