mirror of
https://github.com/Unleash/unleash.git
synced 2025-06-27 01:19:00 +02:00
1 3634/new icons 2 (#9851)
Adds new icons for the constraint operator buttons (equals and case sensitive). <img width="398" alt="image" src="https://github.com/user-attachments/assets/2bd2a20f-700b-489a-b7d3-e6e26d80c316" /> <img width="442" alt="image" src="https://github.com/user-attachments/assets/e5cca824-d8c0-4ea4-b137-c7c1eae642cc" /> The icons are all 24x24, so using them for buttons is pretty easy. There is one caveat: The heights are very subtly off (~1.25 px) when the buttons wrap and end up on a line without the input field, but it's really not noticeable. In this screenie, the Aa button has is a tiny bit smaller than the items on the row above: <img width="328" alt="image" src="https://github.com/user-attachments/assets/d89e2a01-9274-4d6f-b203-1fc3d487543f" />
This commit is contained in:
Thomas Heartman
GitHub
parent
5c894c78be
commit
b8c50e6ed2
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="none"><path fill="#9F9FA1" d="m2.6 10.45-.725 2.025a.696.696 0 0 1-.275.388.776.776 0 0 1-.45.137.788.788 0 0 1-.675-.35.76.76 0 0 1-.1-.75l3.15-8.35a.91.91 0 0 1 .3-.4A.77.77 0 0 1 4.3 3h.65a.77.77 0 0 1 .475.15.91.91 0 0 1 .3.4l3.15 8.375c.1.267.07.512-.088.737a.765.765 0 0 1-.662.338.77.77 0 0 1-.475-.15.91.91 0 0 1-.3-.4l-.7-2H2.6ZM3.125 9h3l-1.45-4.15h-.1L3.125 9Zm9.225 4.275c-.817 0-1.459-.213-1.925-.638-.467-.425-.7-1.004-.7-1.737 0-.7.27-1.27.812-1.713.542-.441 1.238-.662 2.088-.662.383 0 .737.03 1.062.088.325.058.604.154.838.287v-.35c0-.45-.155-.808-.463-1.075-.308-.267-.73-.4-1.262-.4a2.238 2.238 0 0 0-1.325.425.938.938 0 0 1-.5.2.687.687 0 0 1-.5-.15.658.658 0 0 1-.263-.438.521.521 0 0 1 .163-.462c.316-.283.675-.5 1.075-.65a3.9 3.9 0 0 1 1.375-.225c1.033 0 1.825.246 2.375.737.55.492.825 1.205.825 2.138v3.8c0 .2-.071.37-.213.513a.698.698 0 0 1-.512.212.72.72 0 0 1-.525-.225.72.72 0 0 1-.225-.525V12.2h-.075a2.285 2.285 0 0 1-.875.788 2.658 2.658 0 0 1-1.25.287Zm.25-1.25c.533 0 .987-.188 1.362-.563.375-.374.563-.829.563-1.362a2.848 2.848 0 0 0-.8-.3c-.3-.067-.575-.1-.825-.1-.534 0-.942.104-1.225.313-.284.208-.425.504-.425.887 0 .333.125.604.375.813.25.208.575.312.975.312Z"/><rect width="1" height="18.374" x="11.885" y=".531" fill="#6E6E70" rx=".5" transform="rotate(32.071 11.885 .531)"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#9F9FA1" d="m6.324 14.25-.739 1.971a.68.68 0 0 1-.28.378.816.816 0 0 1-.458.133.814.814 0 0 1-.688-.34.713.713 0 0 1-.102-.73l3.21-8.127a.89.89 0 0 1 .305-.389A.809.809 0 0 1 8.056 7h.662c.187 0 .348.049.484.146a.89.89 0 0 1 .305.39l3.21 8.15a.705.705 0 0 1-.09.718.79.79 0 0 1-.675.328.809.809 0 0 1-.484-.146.89.89 0 0 1-.305-.389l-.713-1.946H6.324Zm.535-1.41h3.056L8.438 8.8h-.102l-1.477 4.04ZM16.256 17c-.832 0-1.485-.207-1.96-.62-.476-.414-.714-.978-.714-1.691 0-.682.276-1.237.828-1.667.552-.43 1.26-.645 2.126-.645.39 0 .752.028 1.083.085.33.057.615.15.853.28v-.34c0-.438-.157-.787-.471-1.047-.314-.26-.743-.39-1.286-.39a2.377 2.377 0 0 0-1.35.415.981.981 0 0 1-.51.194.723.723 0 0 1-.509-.146.636.636 0 0 1-.267-.426.494.494 0 0 1 .165-.45 3.474 3.474 0 0 1 1.095-.632 4.141 4.141 0 0 1 1.401-.22c1.053 0 1.86.24 2.42.719.56.478.84 1.171.84 2.08v3.698c0 .195-.072.361-.216.499a.729.729 0 0 1-.523.207.75.75 0 0 1-.534-.22.686.686 0 0 1-.23-.51v-.22h-.076c-.22.325-.518.58-.891.767-.374.187-.798.28-1.274.28Zm.255-1.216c.543 0 1.006-.183 1.388-.548.382-.365.573-.807.573-1.326a2.985 2.985 0 0 0-.815-.292 4.071 4.071 0 0 0-.84-.097c-.544 0-.96.101-1.248.304-.289.203-.433.49-.433.864 0 .324.127.588.382.79.254.203.585.305.993.305Z"/><rect width="1" height="15.9" x="15.442" y="5" fill="#6E6E70" rx=".5" transform="rotate(32.071 15.442 5)"/></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
@ -1 +1 @@
|
||||
<svg width="17" height="11" fill="#000"><path d="m2.602 7.45-.725 2.025a.696.696 0 0 1-.275.388.776.776 0 0 1-.45.137.788.788 0 0 1-.675-.35.76.76 0 0 1-.1-.75L3.527.55a.91.91 0 0 1 .3-.4.77.77 0 0 1 .475-.15h.65a.77.77 0 0 1 .475.15.91.91 0 0 1 .3.4l3.15 8.375c.1.267.07.512-.088.737a.765.765 0 0 1-.662.338.77.77 0 0 1-.475-.15.91.91 0 0 1-.3-.4l-.7-2h-4.05ZM3.127 6h3l-1.45-4.15h-.1L3.127 6Zm9.225 4.275c-.817 0-1.459-.213-1.925-.638-.467-.425-.7-1.004-.7-1.737 0-.7.27-1.27.812-1.713.542-.441 1.238-.662 2.088-.662.383 0 .737.03 1.062.087.325.059.604.155.838.288v-.35c0-.45-.155-.808-.463-1.075-.308-.267-.73-.4-1.262-.4a2.238 2.238 0 0 0-1.325.425.938.938 0 0 1-.5.2.687.687 0 0 1-.5-.15.658.658 0 0 1-.263-.438.521.521 0 0 1 .163-.462c.316-.283.675-.5 1.075-.65a3.9 3.9 0 0 1 1.375-.225c1.033 0 1.825.246 2.375.738.55.491.825 1.204.825 2.137v3.8c0 .2-.071.37-.213.513a.698.698 0 0 1-.512.212.72.72 0 0 1-.525-.225.72.72 0 0 1-.225-.525V9.2h-.075a2.285 2.285 0 0 1-.875.788 2.658 2.658 0 0 1-1.25.287Zm.25-1.25c.533 0 .987-.188 1.362-.563.375-.374.563-.829.563-1.362a2.849 2.849 0 0 0-.8-.3c-.3-.067-.575-.1-.825-.1-.534 0-.942.104-1.225.313-.284.208-.425.504-.425.887 0 .333.125.604.375.813.25.208.575.312.975.312Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#6C65E5" d="m6.324 14.25-.739 1.971a.68.68 0 0 1-.28.378.816.816 0 0 1-.458.133.814.814 0 0 1-.688-.34.713.713 0 0 1-.102-.73l3.21-8.127a.89.89 0 0 1 .305-.389A.809.809 0 0 1 8.056 7h.662c.187 0 .348.049.484.146a.89.89 0 0 1 .305.39l3.21 8.15a.705.705 0 0 1-.09.718.79.79 0 0 1-.675.328.809.809 0 0 1-.484-.146.89.89 0 0 1-.305-.389l-.713-1.946H6.324Zm.535-1.41h3.056L8.438 8.8h-.102l-1.477 4.04ZM16.256 17c-.832 0-1.485-.207-1.96-.62-.476-.414-.714-.978-.714-1.691 0-.682.276-1.237.828-1.667.552-.43 1.26-.645 2.126-.645.39 0 .752.028 1.083.085.33.057.615.15.853.28v-.34c0-.438-.157-.787-.471-1.047-.314-.26-.743-.39-1.286-.39a2.377 2.377 0 0 0-1.35.415.981.981 0 0 1-.51.194.723.723 0 0 1-.509-.146.636.636 0 0 1-.267-.426.494.494 0 0 1 .165-.45 3.474 3.474 0 0 1 1.095-.632 4.141 4.141 0 0 1 1.401-.22c1.053 0 1.86.24 2.42.719.56.478.84 1.171.84 2.08v3.698c0 .195-.072.361-.216.499a.729.729 0 0 1-.523.207.75.75 0 0 1-.534-.22.686.686 0 0 1-.23-.51v-.22h-.076c-.22.325-.518.58-.891.767-.374.187-.798.28-1.274.28Zm.255-1.216c.543 0 1.006-.183 1.388-.548.382-.365.573-.807.573-1.326a2.985 2.985 0 0 0-.815-.292 4.071 4.071 0 0 0-.84-.097c-.544 0-.96.101-1.248.304-.289.203-.433.49-.433.864 0 .324.127.588.382.79.254.203.585.305.993.305Z"/></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.3 KiB |
1
frontend/src/assets/icons/constraint-equals.svg
Normal file
1
frontend/src/assets/icons/constraint-equals.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#615BC2" d="M6.29 11.887V10.48h4.581v1.407H6.29Zm0 2.343v-1.406h4.581v1.406H6.29Zm7.147-2.343V10.48h4.583v1.407h-4.582Zm0 2.343v-1.406h4.583v1.406h-4.582Z"/></svg>
|
||||
|
After Width: | Height: | Size: 251 B |
1
frontend/src/assets/icons/constraint-not-equals.svg
Normal file
1
frontend/src/assets/icons/constraint-not-equals.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#9F9FA1" d="M9.29 11.887V10.48h4.581v1.407H9.29Zm0 2.343v-1.406h4.581v1.406H9.29Z"/><rect width="1" height="18.374" x="16.453" y="3.949" fill="#6E6E70" rx=".5" transform="rotate(32.071 16.453 3.95)"/></svg>
|
||||
|
After Width: | Height: | Size: 294 B |
@ -26,6 +26,8 @@ import { ReactComponent as CaseInsensitiveIcon } from 'assets/icons/case-insensi
|
||||
import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
|
||||
import { AddValuesWidget } from './AddValuesWidget';
|
||||
import { ResolveInput } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput';
|
||||
import { ReactComponent as EqualsIcon } from 'assets/icons/constraint-equals.svg';
|
||||
import { ReactComponent as NotEqualsIcon } from 'assets/icons/constraint-not-equals.svg';
|
||||
|
||||
const Container = styled('article')(({ theme }) => ({
|
||||
'--padding': theme.spacing(2),
|
||||
@ -99,12 +101,9 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
|
||||
}));
|
||||
|
||||
const StyledButton = styled('button')(({ theme }) => ({
|
||||
// todo (`addEditStrategy`): this is pretty rough, but it needs to be the
|
||||
// same height as the input fields, which are 27.25 px at the moment.
|
||||
// Consider editing this when we get new icons for the buttons. There may be
|
||||
// a better solution.
|
||||
height: `calc(${theme.typography.body1.fontSize} + ${theme.spacing(1.5)})`,
|
||||
width: '5ch',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
padding: 0,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
fontSize: theme.fontSizes.smallerBody,
|
||||
background: theme.palette.secondary.light,
|
||||
@ -117,6 +116,21 @@ const StyledButton = styled('button')(({ theme }) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledEqualsIcon = styled(EqualsIcon)(({ theme }) => ({
|
||||
path: {
|
||||
fill: 'currentcolor',
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledNotEqualsIcon = styled(NotEqualsIcon)(({ theme }) => ({
|
||||
path: {
|
||||
fill: theme.palette.text.disabled,
|
||||
},
|
||||
rect: {
|
||||
fill: theme.palette.text.secondary,
|
||||
},
|
||||
}));
|
||||
|
||||
const ButtonPlaceholder = styled('div')(({ theme }) => ({
|
||||
// this is a trick that lets us use absolute positioning for the button so
|
||||
// that it can go over the operator context fields when necessary (narrow
|
||||
@ -279,7 +293,17 @@ export const EditableConstraint: FC<Props> = ({
|
||||
type='button'
|
||||
onClick={toggleInvertedOperator}
|
||||
>
|
||||
{localConstraint.inverted ? 'aint' : 'is'}
|
||||
{localConstraint.inverted ? (
|
||||
<StyledNotEqualsIcon aria-label='The constraint operator is exclusive.' />
|
||||
) : (
|
||||
<StyledEqualsIcon aria-label='The constraint operator is inclusive.' />
|
||||
)}
|
||||
<ScreenReaderOnly>
|
||||
Make the selected operator
|
||||
{localConstraint.inverted
|
||||
? ' inclusive'
|
||||
: ' exclusive'}
|
||||
</ScreenReaderOnly>
|
||||
</StyledButton>
|
||||
|
||||
<ConstraintOperatorSelect
|
||||
@ -290,7 +314,7 @@ export const EditableConstraint: FC<Props> = ({
|
||||
/>
|
||||
|
||||
{showCaseSensitiveButton ? (
|
||||
<CaseButton
|
||||
<StyledButton
|
||||
type='button'
|
||||
onClick={toggleCaseSensitivity}
|
||||
>
|
||||
@ -306,7 +330,7 @@ export const EditableConstraint: FC<Props> = ({
|
||||
: ' not '}
|
||||
case sensitive
|
||||
</ScreenReaderOnly>
|
||||
</CaseButton>
|
||||
</StyledButton>
|
||||
) : null}
|
||||
</OperatorOptions>
|
||||
</ConstraintOptions>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user