From 89dc0d50c1aa12bf7916ab9d9385a765ba26b03e Mon Sep 17 00:00:00 2001 From: Joseph John Aas Cooper Date: Wed, 25 Sep 2024 12:35:11 +0200 Subject: [PATCH 1/3] feat: view mode design changes --- src/components/App.js | 2 +- src/components/DashboardsBar/Chip.js | 4 ++ .../DashboardsBar/ShowMoreButton.js | 9 ++- .../DashboardsBar/getRowsFromHeight.js | 6 +- .../DashboardsBar/styles/Content.module.css | 15 ++--- .../styles/DashboardsBar.module.css | 20 +++--- .../styles/DragHandle.module.css | 2 +- .../styles/ShowMoreButton.module.css | 35 +++++++--- src/components/styles/App.css | 6 +- .../styles/DashboardContainer.module.css | 4 +- .../FilterBar/styles/FilterBadge.module.css | 5 +- .../FilterBar/styles/FilterBar.module.css | 7 +- src/pages/view/TitleBar/ActionsBar.js | 17 ++--- src/pages/view/TitleBar/FilterSelector.js | 6 +- .../view/TitleBar/StarDashboardButton.js | 11 ++-- src/pages/view/TitleBar/TitleBar.js | 50 ++++++++++---- .../TitleBar/styles/ActionsBar.module.css | 9 +-- .../TitleBar/styles/Description.module.css | 9 +-- .../TitleBar/styles/LastUpdatedTag.module.css | 2 +- .../styles/StarDashboardButton.module.css | 30 +++++++-- .../view/TitleBar/styles/TitleBar.module.css | 66 ++++++++++++++++--- src/pages/view/ViewDashboard.js | 6 +- .../view/styles/ViewDashboard.module.css | 4 ++ 23 files changed, 216 insertions(+), 109 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index 38f1c4c6e..16f93d6a7 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -48,7 +48,7 @@ const App = (props) => { return ( systemSettings && ( <> - + { const { online } = useOnlineStatus() const chipProps = { selected, + marginLeft: 0, + marginRight: 0, + marginTop: 0, + marginBottom: 0, } if (starred) { diff --git a/src/components/DashboardsBar/ShowMoreButton.js b/src/components/DashboardsBar/ShowMoreButton.js index b62bd5307..19e9e49b7 100644 --- a/src/components/DashboardsBar/ShowMoreButton.js +++ b/src/components/DashboardsBar/ShowMoreButton.js @@ -1,8 +1,7 @@ import i18n from '@dhis2/d2-i18n' -import { Tooltip } from '@dhis2/ui' +import { IconChevronDown24, IconChevronUp24, Tooltip } from '@dhis2/ui' import PropTypes from 'prop-types' import React, { useRef } from 'react' -import { ChevronDown, ChevronUp } from './assets/icons.js' import classes from './styles/ShowMoreButton.module.css' const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => { @@ -31,7 +30,7 @@ const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
{disabled ? (
- +
) : ( { onMouseOut={onMouseOut} > {dashboardBarIsExpanded ? ( - + ) : ( - + )} )} diff --git a/src/components/DashboardsBar/getRowsFromHeight.js b/src/components/DashboardsBar/getRowsFromHeight.js index b9c6246b9..f50e477b2 100644 --- a/src/components/DashboardsBar/getRowsFromHeight.js +++ b/src/components/DashboardsBar/getRowsFromHeight.js @@ -1,6 +1,6 @@ -const ROW_HEIGHT = 40 -const PADDING_TOP = 10 -const SHOWMORE_BUTTON_HEIGHT = 21 // 27px - 6px below bottom edge of ctrlbar +const ROW_HEIGHT = 32 +const PADDING_TOP = 6 +const SHOWMORE_BUTTON_HEIGHT = 0 // No longer shown under the chip area export const getRowsFromHeight = (height) => { return Math.round( diff --git a/src/components/DashboardsBar/styles/Content.module.css b/src/components/DashboardsBar/styles/Content.module.css index 7016faa15..1ef347597 100644 --- a/src/components/DashboardsBar/styles/Content.module.css +++ b/src/components/DashboardsBar/styles/Content.module.css @@ -9,11 +9,10 @@ .controlsLarge { display: inline-flex; position: relative; - top: 5px; } .buttonPadding { - padding: 2px var(--spacers-dp8) 0 var(--spacers-dp8); + padding: 0 var(--spacers-dp8) 0 0; display: inline-flex; } @@ -23,7 +22,10 @@ } .chipsContainer { - min-height: 40px; + min-height: 48px; + display: flex; + flex-wrap: wrap; + gap: 6px; } @media only screen and (max-width: 480px) { @@ -44,7 +46,6 @@ display: flex; overflow-x: auto; overflow-y: hidden; - padding: var(--spacers-dp4) 0 var(--spacers-dp4) var(--spacers-dp4); } .container.expanded { @@ -61,12 +62,6 @@ width: 100%; } - .chipsContainer { - margin-bottom: -4px; - padding-right: 2px; - min-height: 0; - } - .expanded .chipsContainer { overflow-x: hidden; overflow-y: auto; diff --git a/src/components/DashboardsBar/styles/DashboardsBar.module.css b/src/components/DashboardsBar/styles/DashboardsBar.module.css index a37fd005c..f4a1a4c4b 100644 --- a/src/components/DashboardsBar/styles/DashboardsBar.module.css +++ b/src/components/DashboardsBar/styles/DashboardsBar.module.css @@ -5,23 +5,20 @@ .container { position: relative; background-color: var(--colors-white); - box-shadow: rgba(0, 0, 0, 0.2) 0 0 6px 3px; + border-bottom: 1px solid var(--colors-grey300); overflow: hidden; box-sizing: border-box; flex: none; display: flex; - flex-direction: column; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + padding: 6px; height: var(--user-rows-height); width: 100%; z-index: 1; } -.content { - padding: 10px 6px 0 6px; - overflow: hidden; - margin-bottom: 21px; /* to make space for the show more button */ -} - .expanded .content { overflow-y: auto; } @@ -29,6 +26,7 @@ .expanded .container { height: var(--max-rows-height); z-index: 1999; + box-shadow: var(--elevations-e400); } .spacer { @@ -57,6 +55,7 @@ .collapsed .content { flex-wrap: nowrap; + overflow-x: scroll; } .expanded .content { @@ -72,6 +71,9 @@ /* phone LANDSCAPE MODE or small screen */ @media only screen and (max-height: 480px), only screen and (max-width: 480px) { + .container { + padding: 6px 0 6px 6px; + } .collapsed .container { height: var(--min-rows-height); } @@ -79,7 +81,7 @@ .expanded .container { position: absolute; display: flex; - flex-direction: column; + flex-direction: row; height: var(--sm-expanded-controlbar-height); } diff --git a/src/components/DashboardsBar/styles/DragHandle.module.css b/src/components/DashboardsBar/styles/DragHandle.module.css index 7f8903509..0d188bab4 100644 --- a/src/components/DashboardsBar/styles/DragHandle.module.css +++ b/src/components/DashboardsBar/styles/DragHandle.module.css @@ -14,7 +14,7 @@ bottom: 0; height: 3px; width: 100%; - background: var(--colors-white); + background: transparent; } .draghandle:hover:after { diff --git a/src/components/DashboardsBar/styles/ShowMoreButton.module.css b/src/components/DashboardsBar/styles/ShowMoreButton.module.css index 42abc2065..b7e59505b 100644 --- a/src/components/DashboardsBar/styles/ShowMoreButton.module.css +++ b/src/components/DashboardsBar/styles/ShowMoreButton.module.css @@ -1,32 +1,49 @@ .container { - text-align: center; - flex: none; - height: 21px; - position: absolute; - bottom: 0; - left: 0; - width: 100%; + display: flex; + align-items: center; + width: 32px; + flex-shrink: 0; } .showMore { cursor: pointer; border: none; - background-color: transparent; + border-radius: 3px; + background: transparent; padding: 0px; width: 100%; - height: 21px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; +} + +.showMore svg { + color: var(--colors-grey600); } .showMore:hover { background: var(--colors-grey200); transition: background 0.2s 0.1s; } +.showMore:hover svg { + color: var(--colors-grey800); +} + .showMore:active { background: var(--colors-grey300); transition: none; } +.showMore:active svg { + color: var(--colors-grey900); +} +/*focus-visible backwards compatibility for safari: https://css-tricks.com/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders/*/ .showMore:focus { + outline: 3px solid var(--theme-focus); + outline-offset: -3px; +} +.showMore:focus:not(:focus-visible) { outline: none; } diff --git a/src/components/styles/App.css b/src/components/styles/App.css index fd012ae29..faca0100b 100644 --- a/src/components/styles/App.css +++ b/src/components/styles/App.css @@ -1,8 +1,8 @@ :root { /* control bar variables */ --user-rows-count: 1; - --controlbar-padding: 31px; - --row-height: 40px; + --controlbar-padding: 8px; + --row-height: 36px; --min-rows-height: calc( var(--controlbar-padding) + (1 * var(--row-height)) ); @@ -32,7 +32,7 @@ body { margin: 0; padding: 0; font-family: sans-serif; - background-color: #f4f6f8; + background-color: var(--colors-grey200); } .app-shell-app { diff --git a/src/components/styles/DashboardContainer.module.css b/src/components/styles/DashboardContainer.module.css index e4d28d6b1..4002e3043 100644 --- a/src/components/styles/DashboardContainer.module.css +++ b/src/components/styles/DashboardContainer.module.css @@ -1,7 +1,5 @@ .container { - background-color: #f4f6f8; - padding-left: var(--spacers-dp16); - padding-right: var(--spacers-dp16); + background-color: var(--colors-grey200); padding-bottom: var(--spacers-dp24); overflow: auto; } diff --git a/src/pages/view/FilterBar/styles/FilterBadge.module.css b/src/pages/view/FilterBar/styles/FilterBadge.module.css index b64ca1311..08d5eda9f 100644 --- a/src/pages/view/FilterBar/styles/FilterBadge.module.css +++ b/src/pages/view/FilterBar/styles/FilterBadge.module.css @@ -1,10 +1,9 @@ .container { - margin: 2px; - padding: 0 var(--spacers-dp16); + padding: 0 var(--spacers-dp12); border-radius: 4px; color: var(--colors-white); background-color: #212934; - height: 36px; + height: 28px; display: flex; align-items: center; } diff --git a/src/pages/view/FilterBar/styles/FilterBar.module.css b/src/pages/view/FilterBar/styles/FilterBar.module.css index d6f1cc2a9..8707bdd4c 100644 --- a/src/pages/view/FilterBar/styles/FilterBar.module.css +++ b/src/pages/view/FilterBar/styles/FilterBar.module.css @@ -1,9 +1,6 @@ .bar { - position: sticky; - top: var(--spacers-dp12); - z-index: 7; - margin-top: var(--spacers-dp8); display: flex; - justify-content: center; + justify-content: flex-end; flex-wrap: wrap; + gap: var(--spacers-dp4); } diff --git a/src/pages/view/TitleBar/ActionsBar.js b/src/pages/view/TitleBar/ActionsBar.js index 44256fd74..cd58d43b9 100644 --- a/src/pages/view/TitleBar/ActionsBar.js +++ b/src/pages/view/TitleBar/ActionsBar.js @@ -5,7 +5,7 @@ import { Button, FlyoutMenu, colors, - IconMore24, + IconMore16, SharingDialog, } from '@dhis2/ui' import PropTypes from 'prop-types' @@ -28,7 +28,6 @@ import { sGetShowDescription } from '../../../reducers/showDescription.js' import { ROUTE_START_PATH } from '../../start/index.js' import { apiStarDashboard } from './apiStarDashboard.js' import FilterSelector from './FilterSelector.js' -import StarDashboardButton from './StarDashboardButton.js' import classes from './styles/ActionsBar.module.css' const ViewActions = ({ @@ -211,11 +210,12 @@ const ViewActions = ({ const getMoreButton = (className, useSmall) => ( toggleMoreOptions(useSmall)} - icon={} + icon={} component={getMoreMenu()} > {i18n.t('More')} @@ -225,14 +225,13 @@ const ViewActions = ({ return ( <>
- + {/* TODO: move star functionality to TitleBar.js */}
{userAccess.update ? (
) diff --git a/src/pages/view/TitleBar/TitleBar.js b/src/pages/view/TitleBar/TitleBar.js index 04d90b7cf..c994e3bc3 100644 --- a/src/pages/view/TitleBar/TitleBar.js +++ b/src/pages/view/TitleBar/TitleBar.js @@ -3,9 +3,11 @@ import React from 'react' import { connect } from 'react-redux' import { sGetSelected } from '../../../reducers/selected.js' import { sGetShowDescription } from '../../../reducers/showDescription.js' +import FilterBar from '../FilterBar/FilterBar.js' import ActionsBar from './ActionsBar.js' import Description from './Description.js' import LastUpdatedTag from './LastUpdatedTag.js' +import StarDashboardButton from './StarDashboardButton.js' import classes from './styles/TitleBar.module.css' const ViewTitleBar = ({ @@ -15,21 +17,41 @@ const ViewTitleBar = ({ showDescription, }) => { return ( -
-
- - {displayName} - - + <> +
+
+
+
+ + {displayName} + + {/* Todo: Re-add starring functionality */} + +
+
+
+ +
+
+ {} +
+ +
+
+
- {showDescription && ( - - )} - {} -
+
+
+ {} +
+ {showDescription && ( + + )} +
+ ) } diff --git a/src/pages/view/TitleBar/styles/ActionsBar.module.css b/src/pages/view/TitleBar/styles/ActionsBar.module.css index a7005736e..cd4dc64e0 100644 --- a/src/pages/view/TitleBar/styles/ActionsBar.module.css +++ b/src/pages/view/TitleBar/styles/ActionsBar.module.css @@ -1,16 +1,13 @@ .actions { display: flex; align-items: center; - margin-left: 8px; + gap: var(--spacers-dp4); } .strip { display: flex; - margin-left: var(--spacers-dp8); -} - -.strip > * { - margin-left: var(--spacers-dp8); + flex-shrink: 0; + gap: var(--spacers-dp4); } .strip .moreButtonSmall { diff --git a/src/pages/view/TitleBar/styles/Description.module.css b/src/pages/view/TitleBar/styles/Description.module.css index 7e15b5100..f24e67c26 100644 --- a/src/pages/view/TitleBar/styles/Description.module.css +++ b/src/pages/view/TitleBar/styles/Description.module.css @@ -1,13 +1,14 @@ .desc { - color: var(--colors-grey700); + color: var(--colors-grey800); } .noDesc { - color: #888; + color: var(--colors-grey600); } .descContainer { + margin-block-start: var(--spacers-dp8); + padding: 0 var(--spacers-dp16); font-size: 14px; - padding-top: 5px; - padding-bottom: 5px; + line-height: 18px; } diff --git a/src/pages/view/TitleBar/styles/LastUpdatedTag.module.css b/src/pages/view/TitleBar/styles/LastUpdatedTag.module.css index 53eac8a04..00e7d731c 100644 --- a/src/pages/view/TitleBar/styles/LastUpdatedTag.module.css +++ b/src/pages/view/TitleBar/styles/LastUpdatedTag.module.css @@ -1,3 +1,3 @@ .lastUpdatedTag { - margin-top: var(--spacers-dp8); + margin-top: 0; } diff --git a/src/pages/view/TitleBar/styles/StarDashboardButton.module.css b/src/pages/view/TitleBar/styles/StarDashboardButton.module.css index e4933be01..63eac07ef 100644 --- a/src/pages/view/TitleBar/styles/StarDashboardButton.module.css +++ b/src/pages/view/TitleBar/styles/StarDashboardButton.module.css @@ -1,13 +1,33 @@ .star { - margin: 0 0 0 var(--spacers-dp4); - padding: 0; - border: none; - position: relative; - top: 1px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 3px; + padding: 4px; background: transparent; + border: none; outline: none; cursor: pointer; + position: relative; + top: 2px; } .star:disabled { cursor: not-allowed; } +.star:hover { + background: var(--colors-grey300); +} +.starIcon { + width: 16px; + height: 16px; + display: block; +} +.starIcon svg { + color: var(--colors-grey700); +} +.star:hover .starIcon svg { + color: var(--colors-grey800); +} +.star:active .starIcon svg { + color: var(--colors-grey900); +} diff --git a/src/pages/view/TitleBar/styles/TitleBar.module.css b/src/pages/view/TitleBar/styles/TitleBar.module.css index e58ed4cb9..a73a033e2 100644 --- a/src/pages/view/TitleBar/styles/TitleBar.module.css +++ b/src/pages/view/TitleBar/styles/TitleBar.module.css @@ -1,26 +1,74 @@ .container { - margin-top: var(--spacers-dp12); + background: var(--colors-white); + border-bottom: 1px solid var(--colors-grey400); + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + padding: 6px var(--spacers-dp4) 6px var(--spacers-dp8); + position: sticky; + top: 0px; + z-index: 10; } .titleBar { display: flex; align-items: flex-start; - position: relative; + justify-content: space-between; + gap: var(--spacers-dp4); +} + +.infoWrap { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--spacers-dp4); + flex-shrink: 1; + flex-wrap: wrap; +} + +.titleWrap { + display: inline; + align-items: center; + gap: var(--spacers-dp4); } .title { - position: relative; - font-size: 21px; + font-size: 16px; + line-height: 19px; font-weight: 500; - color: var(--colors-black); - min-width: 50px; + color: var(--colors-grey900); cursor: default; user-select: text; - top: 7px; + margin-right: var(--spacers-dp4); +} + +.detailWrap { + display: flex; + align-items: center; + justify-content: flex-end; + flex-shrink: 1; + flex-wrap: wrap-reverse; + gap: var(--spacers-dp4); +} + +.innerDetails { + display: flex; + align-items: center; + justify-content: flex-end; + flex-shrink: 0.5; + flex-wrap: wrap; + gap: var(--spacers-dp4); +} + +.inlineLastUpdated { + display: none; } @media only screen and (max-width: 480px) { - .title { - top: 3px; + .inlineLastUpdated { + display: block; + margin: var(--spacers-dp8) 0 0 var(--spacers-dp12); + } + + .groupedLastUpdated { + display: none; } } diff --git a/src/pages/view/ViewDashboard.js b/src/pages/view/ViewDashboard.js index fb3308c32..be09671f7 100644 --- a/src/pages/view/ViewDashboard.js +++ b/src/pages/view/ViewDashboard.js @@ -24,7 +24,6 @@ import { sGetDashboardById } from '../../reducers/dashboards.js' import { sGetPassiveViewRegistered } from '../../reducers/passiveViewRegistered.js' import { sGetSelectedId } from '../../reducers/selected.js' import { ROUTE_START_PATH } from '../start/index.js' -import FilterBar from './FilterBar/FilterBar.js' import ItemGrid from './ItemGrid.js' import classes from './styles/ViewDashboard.module.css' import TitleBar from './TitleBar/TitleBar.js' @@ -151,8 +150,9 @@ const ViewDashboard = (props) => { ) : ( <> - - +
+ +
) } diff --git a/src/pages/view/styles/ViewDashboard.module.css b/src/pages/view/styles/ViewDashboard.module.css index a918b39e1..368c15b86 100644 --- a/src/pages/view/styles/ViewDashboard.module.css +++ b/src/pages/view/styles/ViewDashboard.module.css @@ -15,6 +15,10 @@ display: none; } +.contentGrid { + padding: 0 var(--spacers-dp16); +} + @media only screen and (max-height: 480px), only screen and (max-width: 480px) { .cover { display: block; From 46c77df553ec55e852c41a7f29d41325c5a8ea7b Mon Sep 17 00:00:00 2001 From: Joseph John Aas Cooper Date: Wed, 25 Sep 2024 12:45:59 +0200 Subject: [PATCH 2/3] chore: update snapshots --- .../__snapshots__/ShowMoreButton.spec.js.snap | 8 ++++---- .../__snapshots__/ViewDashboard.spec.js.snap | 11 ++++++----- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.js.snap b/src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.js.snap index be3243aff..b336c9f1f 100644 --- a/src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.js.snap +++ b/src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.js.snap @@ -17,8 +17,8 @@ exports[`ShowMoreButton renders correctly when at maxHeight 1`] = ` xmlns="http://www.w3.org/2000/svg" > @@ -43,8 +43,8 @@ exports[`ShowMoreButton renders correctly when not at maxHeight 1`] = ` xmlns="http://www.w3.org/2000/svg" > diff --git a/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap b/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap index 0f1515cf9..c6e0ac5ce 100644 --- a/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap +++ b/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap @@ -17,11 +17,12 @@ exports[`ViewDashboard renders dashboard 1`] = `
TitleBar
-
- MockFilterBar -
-
- MockItemGrid +
+
+ MockItemGrid +
From 0e179d8259c68b22f7e09ff168a363f245529525 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Fri, 27 Sep 2024 08:54:43 +0200 Subject: [PATCH 3/3] fix: a few merge fixes --- src/pages/view/TitleBar/styles/Description.module.css | 1 - src/pages/view/TitleBar/styles/TitleBar.module.css | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/view/TitleBar/styles/Description.module.css b/src/pages/view/TitleBar/styles/Description.module.css index 9a88493e6..28e70f982 100644 --- a/src/pages/view/TitleBar/styles/Description.module.css +++ b/src/pages/view/TitleBar/styles/Description.module.css @@ -8,7 +8,6 @@ .descContainer { margin-block-start: var(--spacers-dp8); - padding: 0 var(--spacers-dp16); font-size: 14px; line-height: 18px; padding-block-start: 0; diff --git a/src/pages/view/TitleBar/styles/TitleBar.module.css b/src/pages/view/TitleBar/styles/TitleBar.module.css index ebf35c312..ff96fd2a1 100644 --- a/src/pages/view/TitleBar/styles/TitleBar.module.css +++ b/src/pages/view/TitleBar/styles/TitleBar.module.css @@ -4,8 +4,8 @@ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); padding-block-start: 6px; padding-block-end: 6px; - padding-inline-start: var(--spacers-dp4); - padding-inline-end: var(--spacers-dp8); + padding-inline-start: var(--spacers-dp8); + padding-inline-end: var(--spacers-dp4); position: sticky; inset-block-start: 0px; z-index: 10;