Skip to content

Commit

Permalink
fix: update dimension chip style
Browse files Browse the repository at this point in the history
  • Loading branch information
@cooper-joe
cooper-joe committed Dec 15, 2023
1 parent 0921861 commit 01ef812
Show file tree
Hide file tree
Showing 9 changed files with 172 additions and 171 deletions.
57 changes: 16 additions & 41 deletions src/assets/DynamicDimensionIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,24 @@ import React from 'react'
const DynamicDimensionIcon = () => {
return (
<svg
width="16px"
height="16px"
viewBox="0 0 16 16"
version="1.1"
width="16"
height="16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g
id="Exp"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<g id="Artboard" transform="translate(-80.000000, -9.000000)">
<g
id="icon_dimension_new"
transform="translate(80.000000, 9.000000)"
>
<rect id="frame" x="0" y="0" width="16" height="16" />
<g
id="module"
transform="translate(4.000000, 4.000000)"
stroke="#000000"
strokeLinecap="round"
strokeLinejoin="round"
>
<path
d="M0.33209728,1.1742111 L3.16308174,0.0641666694 C3.37911767,-0.0213888898 3.61963794,-0.0213888898 3.83567387,0.0641666694 L6.66665833,1.1742111 C6.87300668,1.26220739 7.00497003,1.467 6.99984343,1.69127776 L6.99984343,5.30887771 C7.00517859,5.53285411 6.87376309,5.73756106 6.66790272,5.82594437 L3.83691826,6.93629991 C3.62076407,7.02123336 3.38048032,7.02123336 3.16432613,6.93629991 L0.333341668,5.82594437 C0.126993317,5.73794808 -0.00497002591,5.53315547 0.000156574133,5.30887771 L0.000156574133,1.69127776 C-0.00517858533,1.46730136 0.126236906,1.26259441 0.33209728,1.1742111 Z"
id="Shape"
/>
<path
d="M3.5,2.72795833 L0.322,1.48195833"
id="Shape"
/>
<path
d="M3.5,2.72795833 L6.678,1.48195833"
id="Shape"
/>
<path d="M3.5,6.78125 L3.5,2.72795833" id="Shape" />
</g>
</g>
</g>
</g>
<path
clipRule="evenodd"
d="m4.832 5.674 2.831-1.11a.913.913 0 0 1 .673 0l2.83 1.11a.548.548 0 0 1 .334.517V9.81a.548.548 0 0 1-.332.517l-2.831 1.11a.92.92 0 0 1-.673 0l-2.83-1.11a.548.548 0 0 1-.334-.517V6.19a.548.548 0 0 1 .332-.517Z"
stroke="#212934"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 7.228 4.822 5.982M8 7.228l3.178-1.246M8 11.281V7.228"
stroke="#212934"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
Expand Down
114 changes: 66 additions & 48 deletions src/components/DimensionsPanel/List/DimensionItem.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { IconLock16 } from '@dhis2/ui'
import { CssVariables } from '@dhis2/ui'
import cx from 'classnames'
import PropTypes from 'prop-types'
import React, { Component, createRef } from 'react'
import DynamicDimensionIcon from '../../../assets/DynamicDimensionIcon.js'
Expand All @@ -8,7 +9,7 @@ import {
} from '../../../modules/predefinedDimensions.js'
import OptionsButton from './OptionsButton.js'
import RecommendedIcon from './RecommendedIcon.js'
import styles from './styles/DimensionItem.style.js'
import style from './styles/DimensionItem.module.css'

class DimensionItem extends Component {
state = { mouseOver: false }
Expand All @@ -27,7 +28,7 @@ class DimensionItem extends Component {
getDimensionIcon = () => {
const Icon = getPredefinedDimensionProp(this.props.id, 'icon')
return Icon ? (
<Icon className="fixed-dimension-icon" />
<Icon className={style.fixedDimensionIcon} />
) : (
<DynamicDimensionIcon className="dynamic-dimension-icon" />
)
Expand Down Expand Up @@ -58,6 +59,22 @@ class DimensionItem extends Component {

const optionsRef = createRef()

const LockIcon = (
<svg
width="7"
height="9"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.5 1A1.5 1.5 0 0 0 2 2.5V3h3v-.5A1.5 1.5 0 0 0 3.5 1ZM1 2.5V3H0v6h7V3H6v-.5a2.5 2.5 0 0 0-5 0ZM1 8V4h5v4H1Zm3-1V5H3v2h1Z"
fill="none"
/>
</svg>
)

const onLabelClick = () => {
if (
!isDeactivated &&
Expand All @@ -68,56 +85,57 @@ class DimensionItem extends Component {
}

return (
<li
onMouseOver={this.onMouseOver}
onMouseLeave={this.onMouseExit}
ref={innerRef}
className={`
item
${!isDeactivated ? `clickable` : `deactivated`}
${isSelected && !isDeactivated ? `selected` : ``}
`}
data-test={dataTest}
onClick={onLabelClick}
{...rest}
>
<div
className={`
label
${isDeactivated ? `label-deactivated` : ``}
`}
tabIndex={0}
data-test={`${dataTest}-button-${id}`}
<>
<CssVariables colors />
<li
onMouseOver={this.onMouseOver}
onMouseLeave={this.onMouseExit}
ref={innerRef}
className={cx(style.item, {
[style.deactivated]: isDeactivated,
[style.selected]: isSelected && !isDeactivated,
})}
data-test={dataTest}
onClick={onLabelClick}
{...rest}
>
<div className="icon-wrapper">{Icon}</div>
<div className="label-wrapper">
{Label}
<RecommendedIcon
isRecommended={isRecommended}
dataTest={`${dataTest}-recommended-icon`}
/>
</div>
{isLocked && (
<div className="lock-wrapper">
<IconLock16 />
</div>
)}
</div>
{onOptionsClick ? (
<div
className="options-wrapper"
ref={optionsRef}
data-test={`${dataTest}-menu-${id}`}
className={style.label}
tabIndex={0}
data-test={`${dataTest}-button-${id}`}
>
{this.state.mouseOver && !isDeactivated && !isLocked ? (
<OptionsButton
onClick={this.onOptionsClick(id, optionsRef)}
<div className={style.iconWrapper}>{Icon}</div>
<div className={style.labelWrapper}>
<span className={style.labelText}>{Label}</span>
<RecommendedIcon
isRecommended={isRecommended}
dataTest={`${dataTest}-recommended-icon`}
/>
) : null}
</div>
</div>
) : null}
<style jsx>{styles}</style>
</li>
{onOptionsClick ? (
<div
className={style.optionsWrapper}
ref={optionsRef}
data-test={`${dataTest}-menu-${id}`}
>
{this.state.mouseOver &&
!isDeactivated &&
!isLocked ? (
<OptionsButton
onClick={this.onOptionsClick(
id,
optionsRef
)}
/>
) : null}
</div>
) : null}
{isLocked && (
<div className={style.lockWrapper}>{LockIcon}</div>
)}
</li>
</>
)
}
}
Expand Down
5 changes: 3 additions & 2 deletions src/components/DimensionsPanel/List/OptionsButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,11 @@ const OptionsButton = ({ onClick }) => (
background: none;
outline: none;
cursor: pointer;
border-radius: 4px;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
}
button:hover {
background-color: rgba(0, 0, 0, 0.12);
background-color: rgba(0, 0, 0, 0.09);
}
`}
</style>
Expand Down
1 change: 0 additions & 1 deletion src/components/DimensionsPanel/List/RecommendedIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ const RecommendedIcon = ({ isRecommended, dataTest }) =>
<Tooltip
content={i18n.t('Dimension recommended with selected data')}
placement="bottom"
maxWidth={160}
>
<div style={styles.recommendedIcon} data-test={dataTest} />
</Tooltip>
Expand Down
79 changes: 79 additions & 0 deletions src/components/DimensionsPanel/List/styles/DimensionItem.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
.item {
color: var(--colors-grey900);
background-color: transparent;
fill: var(--colors-grey800);
display: flex;
outline: none;
justify-content: space-between;
padding: 0 0 0 4px;
margin: 0;
border-radius: 2px;
cursor: pointer;
min-height: 22px;
border: 1px solid transparent;
}

.item:not(.deactivated):not(.dragging):hover {
background-color: var(--colors-grey100);
border-color: var(--colors-grey400);
}

.label {
display: flex;
align-items: center;
}
.labelWrapper {
display: flex;
align-items: center;
}
.labelText {
font-size: 13px;
line-height: 15px;
margin-top: 1px;
}

.iconWrapper {
width: 16px;
height: 16px;
margin: 2px 4px 0 0;
flex: 0 0 auto;
align-self: flex-start;
}

.item.deactivated {
opacity: 0.5;
cursor: not-allowed;
}
.item.selected {
background-color: var(--colors-teal100);
border: 1px solid var(--colors-teal200);
color: var(--colors-teal900);
fill: var(--colors-teal800);
font-weight: 400;
}
.item.selected:not(.deactivated):hover {
background: #cdeae8;
border-color: #93c4bf;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.optionsWrapper {
width: 20px;
height: 20px;
}

.lockWrapper svg path {
fill: var(--colors-grey800);
}
.lockWrapper {
background: var(--colors-grey300);
height: 20px;
padding: 0 1px 0 2px;
display: flex;
align-items: center;
justify-content: center;
}

.item.selected .lockWrapper svg path {
fill: var(--colors-teal900);
}
74 changes: 0 additions & 74 deletions src/components/DimensionsPanel/List/styles/DimensionItem.style.js
View file

This file was deleted.

Loading

0 comments on commit 01ef812

Please sign in to comment.