Skip to content

Commit

Permalink
feat: Add right icon to field controls
Browse files Browse the repository at this point in the history
  • Loading branch information
ptbrowne committed Nov 8, 2022
1 parent 038ef2b commit 3143284
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 4 deletions.
9 changes: 9 additions & 0 deletions app/configurator/components/chart-controls/control-tab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@ export const ControlTab = ({
onClick,
checked,
labelId,
rightIcon,
}: {
component?: DimensionMetadataFragment;
value: string;
onClick: (x: string) => void;
labelId: string;
rightIcon?: React.ReactNode;
} & FieldProps) => {
return (
<Box
Expand All @@ -47,6 +49,7 @@ export const ControlTab = ({
}
checked={checked}
optional={!component}
rightIcon={rightIcon}
/>
</ControlTabButton>
</Box>
Expand Down Expand Up @@ -95,12 +98,14 @@ export const AnnotatorTab = ({
onClick,
icon,
label,
rightIcon,
}: {
disabled?: boolean;
onClick: (x: string) => void;
value: string;
icon: IconName;
label: ReactNode;
rightIcon?: ReactNode;
} & FieldProps) => {
return (
<Box
Expand All @@ -119,6 +124,7 @@ export const AnnotatorTab = ({
iconName={icon}
lowerLabel={label}
checked={checked}
rightIcon={rightIcon}
/>
</ControlTabButton>
</Box>
Expand Down Expand Up @@ -238,6 +244,7 @@ export const ControlTabButtonInner = ({
upperLabel,
lowerLabel,
checked,
rightIcon,
optional = false,
isActive = false,
showIsActive = false,
Expand All @@ -250,6 +257,7 @@ export const ControlTabButtonInner = ({
// On / Off indicator
isActive?: boolean;
showIsActive?: boolean;
rightIcon?: React.ReactNode;
}) => {
const classes = useStyles();
return (
Expand Down Expand Up @@ -312,6 +320,7 @@ export const ControlTabButtonInner = ({
<Trans id="controls.option.isActive">On</Trans>
</Box>
) : null}
{rightIcon}
</Flex>
);
};
12 changes: 9 additions & 3 deletions app/configurator/components/chart-controls/section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const useSectionTitleStyles = makeStyles<
collapse ? theme.palette.grey[200] : "transparent",

"& $icon": {
color: theme.palette.grey[900],
color: theme.palette.grey[600],
},
},
},
Expand All @@ -83,7 +83,7 @@ const useSectionTitleStyles = makeStyles<
},
icon: {
justifySelf: "flex-end",
color: theme.palette.grey[600],
color: theme.palette.grey[500],
},
}));

Expand Down Expand Up @@ -226,7 +226,13 @@ export const SectionTitle = ({
</Typography>
{right}
<span className={classes.icon}>
{collapse ? isOpen ? <SvgIcMinus /> : <SvgIcAdd /> : null}
{collapse ? (
isOpen ? (
<SvgIcMinus width={18} height={18} />
) : (
<SvgIcAdd width={18} height={18} />
)
) : null}
</span>
</div>
);
Expand Down
15 changes: 14 additions & 1 deletion app/configurator/components/field.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,21 @@ import { truthy } from "@/domain/types";
import { useTimeFormatLocale } from "@/formatters";
import { DimensionMetadataFragment, TimeUnit } from "@/graphql/query-hooks";
import { IconName } from "@/icons";
import SvgIcEdit from "@/icons/components/IcEdit";
import { useLocale } from "@/locales/use-locale";
import { getPalette } from "@/palettes";

const useFieldEditIconStyles = makeStyles<Theme>((theme) => ({
root: {
color: theme.palette.primary.main,
},
}));

const FieldEditIcon = () => {
const classes = useFieldEditIconStyles();
return <SvgIcEdit width={18} height={18} className={classes.root} />;
};

const useStyles = makeStyles<Theme>((theme) => ({
loadingIndicator: {
color: theme.palette.grey[700],
Expand Down Expand Up @@ -84,6 +96,7 @@ export const ControlTabField = ({
labelId={labelId}
checked={field.checked}
onClick={field.onClick}
rightIcon={<FieldEditIcon />}
/>
);
};
Expand Down Expand Up @@ -444,13 +457,13 @@ export const AnnotatorTabField = ({
const fieldProps = useActiveFieldField({
value,
});

return (
<AnnotatorTab
{...tabProps}
value={`${fieldProps.value}`}
checked={fieldProps.checked}
onClick={fieldProps.onClick}
rightIcon={<FieldEditIcon />}
/>
);
};
Expand Down

0 comments on commit 3143284

Please sign in to comment.