From 01ef812e1caeb71890241d85f8a74a14878d8c4e Mon Sep 17 00:00:00 2001 From: Joseph John Aas Cooper Date: Fri, 15 Dec 2023 15:24:22 +0100 Subject: [PATCH] fix: update dimension chip style --- src/assets/DynamicDimensionIcon.js | 57 +++------ .../DimensionsPanel/List/DimensionItem.js | 114 ++++++++++-------- .../DimensionsPanel/List/OptionsButton.js | 5 +- .../DimensionsPanel/List/RecommendedIcon.js | 1 - .../List/styles/DimensionItem.module.css | 79 ++++++++++++ .../List/styles/DimensionItem.style.js | 74 ------------ .../List/styles/DimensionList.style.js | 3 + .../List/styles/RecommendedIcon.style.js | 8 +- .../styles/DimensionsPanel.style.js | 2 +- 9 files changed, 172 insertions(+), 171 deletions(-) create mode 100644 src/components/DimensionsPanel/List/styles/DimensionItem.module.css delete mode 100644 src/components/DimensionsPanel/List/styles/DimensionItem.style.js diff --git a/src/assets/DynamicDimensionIcon.js b/src/assets/DynamicDimensionIcon.js index 83d6c678d..8fbeb84ab 100644 --- a/src/assets/DynamicDimensionIcon.js +++ b/src/assets/DynamicDimensionIcon.js @@ -3,49 +3,24 @@ import React from 'react' const DynamicDimensionIcon = () => { return ( - - - - - - - - - - - - - + + ) } diff --git a/src/components/DimensionsPanel/List/DimensionItem.js b/src/components/DimensionsPanel/List/DimensionItem.js index 0fd402b80..a4088a8f8 100644 --- a/src/components/DimensionsPanel/List/DimensionItem.js +++ b/src/components/DimensionsPanel/List/DimensionItem.js @@ -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' @@ -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 } @@ -27,7 +28,7 @@ class DimensionItem extends Component { getDimensionIcon = () => { const Icon = getPredefinedDimensionProp(this.props.id, 'icon') return Icon ? ( - + ) : ( ) @@ -58,6 +59,22 @@ class DimensionItem extends Component { const optionsRef = createRef() + const LockIcon = ( + + + + ) + const onLabelClick = () => { if ( !isDeactivated && @@ -68,56 +85,57 @@ class DimensionItem extends Component { } return ( -
  • -
    + +
  • -
    {Icon}
    -
    - {Label} - -
    - {isLocked && ( -
    - -
    - )} - - {onOptionsClick ? (
    - {this.state.mouseOver && !isDeactivated && !isLocked ? ( - {Icon}
    +
    + {Label} + - ) : null} +
    - ) : null} - -
    • + {onOptionsClick ? ( +
    + {this.state.mouseOver && + !isDeactivated && + !isLocked ? ( + + ) : null} +
    + ) : null} + {isLocked && ( +
    {LockIcon}
    + )} + + ) } } diff --git a/src/components/DimensionsPanel/List/OptionsButton.js b/src/components/DimensionsPanel/List/OptionsButton.js index 202bada66..b7200ddcf 100644 --- a/src/components/DimensionsPanel/List/OptionsButton.js +++ b/src/components/DimensionsPanel/List/OptionsButton.js @@ -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); } `} diff --git a/src/components/DimensionsPanel/List/RecommendedIcon.js b/src/components/DimensionsPanel/List/RecommendedIcon.js index 3a8b75dc9..12609d3a7 100644 --- a/src/components/DimensionsPanel/List/RecommendedIcon.js +++ b/src/components/DimensionsPanel/List/RecommendedIcon.js @@ -9,7 +9,6 @@ const RecommendedIcon = ({ isRecommended, dataTest }) =>
    diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.module.css b/src/components/DimensionsPanel/List/styles/DimensionItem.module.css new file mode 100644 index 000000000..b89b36275 --- /dev/null +++ b/src/components/DimensionsPanel/List/styles/DimensionItem.module.css @@ -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); +} diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js deleted file mode 100644 index 632be2ac5..000000000 --- a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js +++ /dev/null @@ -1,74 +0,0 @@ -import { colors, theme } from '@dhis2/ui' -import css from 'styled-jsx/css' - -export default css` - .label { - display: flex; - outline: none; - color: ${colors.grey900}; - user-select: none; - word-break: break-word; - font-size: 14px; - } - .label-wrapper { - padding: 2px 5px 2px 0; - } - .item { - display: flex; - min-height: 24px; - margin-top: 3px; - margin-bottom: 3px; - align-items: center; - border-radius: 2px; - } - .item:hover { - background-color: ${colors.grey200}; - } - .item:active { - background-color: ${colors.grey300}; - } - .deactivated { - color: ${colors.grey500}; - } - .deactivated:hover { - background-color: transparent; - cursor: not-allowed; - } - .label-deactivated { - color: ${colors.grey500}; - } - .clickable { - cursor: pointer; - } - .selected { - background-color: ${theme.secondary100}; - font-weight: 500; - } - .selected:hover { - background-color: ${theme.secondary200}; - } - .fixed-dimension-icon { - padding-left: 6px; - padding-bottom: 2px; - } - .dynamic-dimension-icon { - padding-left: 9px; - padding-right: 9px; - } - .icon-wrapper { - display: flex; - flex-direction: column; - padding: 3px 8px 0 8px; - } - .lock-wrapper { - display: flex; - align-items: center; - color: ${colors.grey600}; - } - .options-wrapper { - position: relative; - left: 5px; - width: 20px; - height: 20px; - } -` diff --git a/src/components/DimensionsPanel/List/styles/DimensionList.style.js b/src/components/DimensionsPanel/List/styles/DimensionList.style.js index 571e7e7ef..a7d4e7ded 100644 --- a/src/components/DimensionsPanel/List/styles/DimensionList.style.js +++ b/src/components/DimensionsPanel/List/styles/DimensionList.style.js @@ -22,6 +22,9 @@ export default css` .list { margin: 0; padding: 0; + display: flex; + flex-direction: column; + gap: 4px; } .header { text-transform: uppercase; diff --git a/src/components/DimensionsPanel/List/styles/RecommendedIcon.style.js b/src/components/DimensionsPanel/List/styles/RecommendedIcon.style.js index af7fa2d8b..66a385268 100644 --- a/src/components/DimensionsPanel/List/styles/RecommendedIcon.style.js +++ b/src/components/DimensionsPanel/List/styles/RecommendedIcon.style.js @@ -2,11 +2,11 @@ import { theme } from '@dhis2/ui' export const styles = { recommendedIcon: { - backgroundColor: theme.secondary300, - height: '8px', - width: '8px', + backgroundColor: theme.secondary400, + height: '6px', + width: '6px', borderRadius: '4px', - marginLeft: '5px', + marginLeft: '6px', display: 'inline-block', cursor: 'pointer', }, diff --git a/src/components/DimensionsPanel/styles/DimensionsPanel.style.js b/src/components/DimensionsPanel/styles/DimensionsPanel.style.js index 8bf0b3294..d6f6b4e10 100644 --- a/src/components/DimensionsPanel/styles/DimensionsPanel.style.js +++ b/src/components/DimensionsPanel/styles/DimensionsPanel.style.js @@ -5,7 +5,7 @@ export const styles = { height: '100%', display: 'flex', flexDirection: 'column', - backgroundColor: colors.grey050, + backgroundColor: colors.white, padding: '8px', overflow: 'hidden', },