-
Notifications
You must be signed in to change notification settings - Fork 0
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.
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
Settings: Metric Configuration: Metric Details & Breakdowns (2/n) #66
Changes from 8 commits
1147e91
c8fca33
dc68e9d
73c22b4
7887ffb
9b7f401
e026f55
e0d1884
5345d48
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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: "➝"; | ||
position: absolute; | ||
${typography.sizeCSS.title} | ||
right: 0; | ||
} | ||
`; | ||
|
||
type MetricNameProps = { isTitle?: boolean }; | ||
|
||
export const MetricName = styled.div<MetricNameProps>` | ||
|
@@ -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; | ||
`; | ||
|
||
|
@@ -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; | ||
} | ||
|
@@ -220,6 +267,41 @@ export const DimensionTitle = styled.div<{ enabled?: boolean }>` | |
enabled ? palette.solid.darkgrey : palette.highlight.grey8}; | ||
`; | ||
|
||
export const CheckboxWrapper = styled.div` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; | ||
`; | ||
|
@@ -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; | ||
`; |
There was a problem hiding this comment.
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.