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

Jump to bottom

Settings: Metric Configuration: Metric Details & Breakdowns (2/n) #66

Merged
merged 9 commits into from
Oct 13, 2022
Merged

Settings: Metric Configuration: Metric Details & Breakdowns (2/n) #66

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1147e91
Initial work on metric config refactor in settings
Oct 6, 2022
c8fca33
Continue iterating on refactor up to the breakdown page
Oct 6, 2022
dc68e9d
Styling adjustment
Oct 6, 2022
73c22b4
Change MetricView to MetricConfiguration and update all imports - rem…
Oct 7, 2022
7887ffb
Refactor disaggregations to use checkboxes and remove toggle switch
Oct 11, 2022
9b7f401
Add definitions panel, add icon
Oct 11, 2022
e026f55
Style clean up - comments
Oct 11, 2022
e0d1884
Clean up
Oct 11, 2022
5345d48
Feedback: reduce height in metric boxes, only use filteredMetricSetti…
Oct 11, 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: 1 addition & 2 deletions publisher/src/components/Forms/BinaryRadioButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,8 @@ export const RadioButtonLabel = styled.label<{
display: flex;
justify-content: center;
align-items: center;
background: ${palette.highlight.grey1};
padding: 16px 24px;
border: 1px solid ${palette.highlight.grey3};
border: 1px solid ${palette.highlight.grey4};
border-radius: 2px;
transition: 0.2s ease;

Expand Down
121 changes: 115 additions & 6 deletions ...onents/MetricsView/MetricsView.styles.tsx → ...figuration/MetricConfiguration.styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,28 @@ export const MetricNameBadgeWrapper = styled.div`
align-items: center;
`;

export const Metric = styled.div`
width: 100%;
display: flex;
gap: 20px;
align-items: center;
border-bottom: 1px solid ${palette.solid.darkgrey};
padding-bottom: 8px;
padding-right: 50px;
position: relative;

&:hover {
cursor: pointer;
}

&:hover:after {
content: "➝";
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using this arrow for now because it's much easier to implement.

position: absolute;
${typography.sizeCSS.title}
right: 0;
}
`;

type MetricNameProps = { isTitle?: boolean };

export const MetricName = styled.div<MetricNameProps>`
Expand All @@ -123,17 +145,21 @@ export const MetricDetailsDisplay = styled.div`
`;

export const MetricOnOffWrapper = styled.div`
margin-bottom: 49px;
margin-bottom: 24px;
`;

export const Header = styled.div`
${typography.sizeCSS.medium};
margin-bottom: 16px;
margin-bottom: 8px;
`;

export const BreakdownHeader = styled(Header)`
padding-top: 24px;
border-top: 1px solid ${palette.highlight.grey5};
`;

export const Subheader = styled.div`
${typography.sizeCSS.normal};
color: ${palette.highlight.grey9};
margin-bottom: 9px;
`;

Expand Down Expand Up @@ -181,15 +207,36 @@ export const DisaggregationName = styled.div<{ enabled?: boolean }>`
enabled ? palette.solid.darkgrey : palette.highlight.grey8};
`;

export const DisaggregationTab = styled.div`
display: flex;
justify-content: center;
align-items: center;

span {
padding-right: 8px;
}
`;

export const Dimension = styled.div<{ enabled?: boolean }>`
${typography.sizeCSS.medium};
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dashed ${palette.highlight.grey9};
gap: 12px;
padding: 15px 0;
border-bottom: 1px solid ${palette.highlight.grey4};
position: relative;

&:hover {
cursor: pointer;
}

&:hover::before {
content: "➝";
position: absolute;
right: 0;
${typography.sizeCSS.title}
}

&:last-child {
border-bottom: none;
}
Expand Down Expand Up @@ -220,6 +267,41 @@ export const DimensionTitle = styled.div<{ enabled?: boolean }>`
enabled ? palette.solid.darkgrey : palette.highlight.grey8};
`;

export const CheckboxWrapper = styled.div`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps in the future we'll put components such as checkboxes, forms, buttons etc in something like a shared primitives components directory? Doesn't have to be the focus now.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah - when things feel less variable, I think there is plenty of work we can do with the styled components to reorganize and put into a shared library.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah doesn't have to be for the current metric settings work, but perhaps for a new page / feature we can discuss organizing components and try putting new general components into the shared directory?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Absolutely!!! Would also love to at some point do a sweep and merger of all our current "finalized" primitives to the new shared directory.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love this idea! Maybe we can make some time for this at the end of this sprint

display: flex;
position: relative;
`;

export const Checkbox = styled.input`
appearance: none;
width: 20px;
height: 20px;
background: transparent;
border: 1px solid ${palette.highlight.grey6};
border-radius: 100%;

&:hover {
cursor: pointer;
}

&:checked {
border: 1px solid transparent;
}

&:checked + img {
display: block;
}
`;

export const BlueCheckIcon = styled.img<{ enabled?: boolean }>`
width: 20px;
display: none;
position: absolute;
top: 0;
left: 0;
z-index: -1;
`;

export const MetricConfigurationContainer = styled.div`
display: block;
`;
Expand Down Expand Up @@ -350,4 +432,31 @@ export const MetricConfigurationDisplay = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 1 50%;
`;

export const MetricConfigurationWrapper = styled.div`
width: 100%;
display: flex;
justify-content: space-between;
gap: 126px;
`;

export const DefinitionsDisplay = styled.div`
display: flex;
flex: 1 1 50%;
padding-top: 44px;
`;

export const NoDefinitionsSelected = styled.div`
width: 100%;
height: fit-content;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 59px;
border: 1px solid ${palette.highlight.grey5};
color: ${palette.highlight.grey12};
text-align: center;
`;
Loading