Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Design issues #647

Merged
merged 9 commits into from
Aug 23, 2022
Merged

fix: Design issues #647

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1071c16
feat: Introduce gap prop to ControlSectionContent
bprusinowski Aug 23, 2022
4ef79f5
fix: Use correct gaps in ControlSectionContents
bprusinowski Aug 23, 2022
1b6940c
fix: Label margin
bprusinowski Aug 23, 2022
b6e9361
feat: Make use of disabled prop
bprusinowski Aug 23, 2022
fdc39ab
chore: Remove unused
bprusinowski Aug 23, 2022
f8db278
chore: Remove unnecessary Stack
bprusinowski Aug 23, 2022
604bb52
perf: useEvent instead of useCallback
bprusinowski Aug 23, 2022
1411cb1
refactor: useStyles instead of sx
bprusinowski Aug 23, 2022
e1706b1
fix: Spacing issue with remove button
bprusinowski Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/components/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ export const Input = ({
} & FieldProps) => (
<Box sx={{ fontSize: "1rem", pb: 2 }}>
{label && name && (
<Label htmlFor={name} smaller>
<Label htmlFor={name} smaller sx={{ mb: 1 }}>
{label}
</Label>
)}
Expand All @@ -321,6 +321,7 @@ export const Input = ({
color="secondary"
name={name}
value={value}
disabled={disabled}
onChange={onChange}
sx={{
borderColor: "grey.500",
Expand Down
2 changes: 1 addition & 1 deletion app/configurator/components/chart-annotations-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const ChartAnnotationsSelector = ({
<SectionTitle iconName={getIconName(state.activeField)}>
{state.activeField && getFieldLabel(state.activeField)}
</SectionTitle>
<ControlSectionContent>
<ControlSectionContent gap="none">
{state.activeField &&
orderedLocales.map((locale) => (
<Box
Expand Down
2 changes: 1 addition & 1 deletion app/configurator/components/chart-annotator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const ChartAnnotator = ({
<SectionTitle titleId="controls-design">
<Trans id="controls.section.description">Annotate</Trans>
</SectionTitle>
<ControlSectionContent px="small">
<ControlSectionContent px="small" gap="none">
<AnnotatorTabField
value={"title"}
icon="text"
Expand Down
1 change: 1 addition & 0 deletions app/configurator/components/chart-configurator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -553,6 +553,7 @@ export const ChartConfigurator = ({
</SectionTitle>
<ControlSectionContent
px="small"
gap="none"
role="tablist"
aria-labelledby="controls-design"
>
Expand Down
8 changes: 7 additions & 1 deletion app/configurator/components/chart-controls/section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,18 @@ export const ControlSectionContent = ({
role,
ariaLabelledBy,
children,
gap = "default",
px,
sx,
}: {
component?: ElementType;
role?: string;
ariaLabelledBy?: string;
children: ReactNode;
// large for specific purposes, e.g. base layer map options
// default for right panel options
// none for left panel options
gap?: "large" | "default" | "none";
px?: "small" | "default";
sx?: BoxProps["sx"];
}) => {
Expand All @@ -65,6 +70,7 @@ export const ControlSectionContent = ({
sx={{
display: "flex",
flexDirection: "column",
gap: gap === "large" ? 3 : gap === "default" ? 2 : 0,
px: px === "small" ? 2 : 4,
pb: 4,
...sx,
Expand Down Expand Up @@ -122,7 +128,7 @@ export const ControlSectionSkeleton = ({
sx?: React.ComponentProps<typeof ControlSection>["sx"];
}) => (
<ControlSection sx={{ mt: 2, ...sx }}>
<ControlSectionContent px="small">
<ControlSectionContent px="small" gap="none">
<Typography variant="h1">
<Skeleton sx={{ bgcolor: "grey.300" }} />
</Typography>{" "}
Expand Down
10 changes: 5 additions & 5 deletions app/configurator/components/chart-options-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ const EncodingOptionsPanel = ({
<SectionTitle iconName={getIconName(encoding.field)}>
{getFieldLabel(encoding.field)}
</SectionTitle>
<ControlSectionContent>
<ControlSectionContent gap="none">
<ChartFieldField
field={encoding.field}
label={getFieldLabelHint[encoding.field]}
Expand Down Expand Up @@ -296,7 +296,7 @@ const EncodingOptionsPanel = ({
Show additional information
</Trans>
</SectionTitle>
<ControlSectionContent component="fieldset">
<ControlSectionContent component="fieldset" gap="none">
<ChartOptionCheckboxField
path="showStandardError"
field={encoding.field}
Expand All @@ -314,7 +314,7 @@ const EncodingOptionsPanel = ({
<SectionTitle disabled={!component} iconName="filter">
<Trans id="controls.section.filter">Filter</Trans>
</SectionTitle>
<ControlSectionContent component="fieldset">
<ControlSectionContent component="fieldset" gap="none">
<legend style={{ display: "none" }}>
<Trans id="controls.section.filter">Filter</Trans>
</legend>
Expand Down Expand Up @@ -451,7 +451,7 @@ const ChartFieldSorting = ({
<SectionTitle disabled={disabled} iconName="sort">
<Trans id="controls.section.sorting">Sort</Trans>
</SectionTitle>
<ControlSectionContent component="fieldset">
<ControlSectionContent component="fieldset" gap="none">
<Box>
<Select
id="sort-by"
Expand Down Expand Up @@ -564,7 +564,7 @@ const ChartImputationType = ({
<SectionTitle disabled={disabled} iconName="info">
<Trans id="controls.section.imputation">Missing values</Trans>
</SectionTitle>
<ControlSectionContent component="fieldset">
<ControlSectionContent component="fieldset" gap="none">
{!disabled && (
<Box mb={5}>
<Trans id="controls.section.imputation.explanation">
Expand Down
1 change: 0 additions & 1 deletion app/configurator/components/field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,7 +439,6 @@ export const MetaInputField = ({
locale,
value,
disabled,
...props
}: {
label: string | ReactNode;
metaKey: string;
Expand Down
6 changes: 3 additions & 3 deletions app/configurator/interactive-filters/interactive-filters-config-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const InteractiveFiltersOptions = ({
return (
<ControlSection>
<SectionTitle iconName="segments">{component?.label}</SectionTitle>
<ControlSectionContent>
<ControlSectionContent gap="none">
<InteractiveFiltersToggle
label={t({
id: "controls.interactiveFilters.legend.toggleInteractiveLegend",
Expand All @@ -92,7 +92,7 @@ export const InteractiveFiltersOptions = ({
return (
<ControlSection>
<SectionTitle iconName="time">{component?.label}</SectionTitle>
<ControlSectionContent>
<ControlSectionContent gap="none">
<InteractiveTimeFilterOptions state={state} />
</ControlSectionContent>
</ControlSection>
Expand All @@ -105,7 +105,7 @@ export const InteractiveFiltersOptions = ({
Data filters
</Trans>
</SectionTitle>
<ControlSectionContent>
<ControlSectionContent gap="none">
<InteractiveDataFilterOptions state={state} />
</ControlSectionContent>
</ControlSection>
Expand Down
2 changes: 1 addition & 1 deletion app/configurator/interactive-filters/interactive-filters-configurator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export const InteractiveFiltersConfigurator = ({
Interactive Filters
</Trans>
</SectionTitle>
<ControlSectionContent px="small">
<ControlSectionContent px="small" gap="none">
{/* Time */}
{timeDimension &&
timeDimension.__typename === "TemporalDimension" &&
Expand Down
2 changes: 1 addition & 1 deletion app/configurator/map/map-chart-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const BaseLayerSettings = memo(() => {
<SectionTitle iconName="mapMaptype">
<Trans id="chart.map.layers.base">Map Display</Trans>
</SectionTitle>
<ControlSectionContent>
<ControlSectionContent gap="large">
<ChartOptionCheckboxField
label={t({
id: "chart.map.layers.base.show",
Expand Down
3 changes: 2 additions & 1 deletion app/configurator/table/table-chart-configurator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export const ChartConfiguratorTable = ({
<SectionTitle titleId="controls-design">
<Trans id="controls.select.chart.type">Chart Type</Trans>
</SectionTitle>
<ControlSectionContent px="small">
<ControlSectionContent px="small" gap="none">
<ChartTypeSelector showHelp={false} state={state} sx={{ mt: 2 }} />
</ControlSectionContent>
<Divider />
Expand All @@ -131,6 +131,7 @@ export const ChartConfiguratorTable = ({
</SectionTitle>
<ControlSectionContent
px="small"
gap="none"
role="tablist"
aria-labelledby="controls-settings"
>
Expand Down
117 changes: 57 additions & 60 deletions app/configurator/table/table-chart-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { t, Trans } from "@lingui/macro";
import { Stack } from "@mui/material";
import get from "lodash/get";
import React, { ChangeEvent, useCallback, useEffect, useRef } from "react";

Expand Down Expand Up @@ -240,67 +239,65 @@ export const TableColumnOptions = ({
<Trans id="controls.section.columnstyle">Column Style</Trans>
</SectionTitle>
<ControlSectionContent>
<Stack spacing={2}>
<ChartOptionSelectField<ColumnStyle>
id="columnStyle"
label={t({
id: "controls.select.columnStyle",
message: "Column Style",
})}
options={columnStyleOptions}
getValue={(type) => {
switch (type) {
case "text":
return {
type: "text",
textStyle: "regular",
textColor: "#333",
columnColor: "#fff",
};
case "category":
return {
type: "category",
textStyle: "regular",
<ChartOptionSelectField<ColumnStyle>
id="columnStyle"
label={t({
id: "controls.select.columnStyle",
message: "Column Style",
})}
options={columnStyleOptions}
getValue={(type) => {
switch (type) {
case "text":
return {
type: "text",
textStyle: "regular",
textColor: "#333",
columnColor: "#fff",
};
case "category":
return {
type: "category",
textStyle: "regular",
palette: getDefaultCategoricalPalette().value,
colorMapping: mapValueIrisToColor({
palette: getDefaultCategoricalPalette().value,
colorMapping: mapValueIrisToColor({
palette: getDefaultCategoricalPalette().value,
dimensionValues: (
component as DimensionMetaDataFragment
)?.values,
}),
};
case "heatmap":
return {
type: "heatmap",
textStyle: "regular",
palette: getDefaultDivergingSteppedPalette().value,
};
case "bar":
return {
type: "bar",
textStyle: "regular",
barColorPositive:
getDefaultCategoricalPalette().colors[0],
barColorNegative:
getDefaultCategoricalPalette().colors[1],
barColorBackground: "#ccc",
barShowBackground: false,
};
default:
return undefined;
}
}}
getKey={(d) => d.type}
field={activeField}
path="columnStyle"
/>
dimensionValues: (
component as DimensionMetaDataFragment
)?.values,
}),
};
case "heatmap":
return {
type: "heatmap",
textStyle: "regular",
palette: getDefaultDivergingSteppedPalette().value,
};
case "bar":
return {
type: "bar",
textStyle: "regular",
barColorPositive:
getDefaultCategoricalPalette().colors[0],
barColorNegative:
getDefaultCategoricalPalette().colors[1],
barColorBackground: "#ccc",
barShowBackground: false,
};
default:
return undefined;
}
}}
getKey={(d) => d.type}
field={activeField}
path="columnStyle"
/>

<ColumnStyleSubOptions
chartConfig={chartConfig}
activeField={activeField}
component={component as DimensionMetaDataFragment}
/>
</Stack>
<ColumnStyleSubOptions
chartConfig={chartConfig}
activeField={activeField}
component={component as DimensionMetaDataFragment}
/>
</ControlSectionContent>
</ControlSection>
)}
Expand Down
Loading