feat: dashboard view mode design changes

src/components/App.js

@@ -43,12 +43,12 @@
             '--headerbar-height',
             `${headerbarHeight}px`
         )
     }, [])
 
     return (
         systemSettings && (
             <>
-                <CssVariables colors spacers />
+                <CssVariables colors spacers elevations />
                 <Router>
                     <Switch>
                         <Route

src/components/DashboardsBar/Chip.js

@@ -16,6 +16,10 @@ const Chip = ({ starred, selected, label, dashboardId, onClick }) => {
     const engine = useDataEngine()
     const chipProps = {
         selected,
+        marginLeft: 0,
+        marginRight: 0,
+        marginTop: 0,
+        marginBottom: 0,
     }
 
     if (starred) {

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 }) => {
         <div className={classes.container} ref={containerRef}>
             {disabled ? (
                 <div className={classes.disabled}>
-                    <ChevronDown />
+                    <IconChevronDown24 />
                 </div>
             ) : (
                 <Tooltip
@@ -51,9 +50,9 @@ const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
                             onMouseOut={onMouseOut}
                         >
                             {dashboardBarIsExpanded ? (
-                                <ChevronUp />
+                                <IconChevronUp24 />
                             ) : (
-                                <ChevronDown />
+                                <IconChevronDown24 />
                             )}
                         </button>
                     )}

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"
       >
         <path
-          d="m11.29289 15.7071c.39053.3905 1.02369.3905 1.41422 0l4.99999-4.99999c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0l-4.2929 4.2929-4.29289-4.2929c-.39053-.39052-1.02369-.39052-1.41422 0-.39052.39053-.39052 1.02369 0 1.41422z"
-          fill="#a0adba"
+          d="M11.293 15.707a1 1 0 001.414 0l5-5a1 1 0 00-1.414-1.414L12 13.586 7.707 9.293a1 1 0 00-1.414 1.414z"
+          fill="currentColor"
         />
       </svg>
     </button>
@@ -43,8 +43,8 @@ exports[`ShowMoreButton renders correctly when not at maxHeight 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="m11.29289 15.7071c.39053.3905 1.02369.3905 1.41422 0l4.99999-4.99999c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0l-4.2929 4.2929-4.29289-4.2929c-.39053-.39052-1.02369-.39052-1.41422 0-.39052.39053-.39052 1.02369 0 1.41422z"
-          fill="#a0adba"
+          d="M11.293 15.707a1 1 0 001.414 0l5-5a1 1 0 00-1.414-1.414L12 13.586 7.707 9.293a1 1 0 00-1.414 1.414z"
+          fill="currentColor"
         />
       </svg>
     </button>

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(

src/components/DashboardsBar/styles/Content.module.css

@@ -9,13 +9,12 @@
 .controlsLarge {
     display: inline-flex;
     position: relative;
-    inset-block-start: 5px;
 }
 
 .buttonPadding {
-    padding-block-start: 2px;
+    padding-block-start: 0;
     padding-block-end: 0;
-    padding-inline-start: var(--spacers-dp8);
+    padding-inline-start: 0;
     padding-inline-end: var(--spacers-dp8);
     display: inline-flex;
 }
@@ -26,7 +25,10 @@
 }
 
 .chipsContainer {
-    min-block-size: 40px;
+    min-block-size: 48px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
 }
 
 @media only screen and (max-width: 480px) {
@@ -47,10 +49,6 @@
         display: flex;
         overflow-x: auto;
         overflow-y: hidden;
-        padding-block-start: var(--spacers-dp4);
-        padding-block-end: var(--spacers-dp4);
-        padding-inline-start: var(--spacers-dp4);
-        padding-inline-end: 0;
     }
 
     .container.expanded {
@@ -67,12 +65,6 @@
         inline-size: 100%;
     }
 
-    .chipsContainer {
-        margin-block-end: -4px;
-        padding-inline-end: 2px;
-        min-block-size: 0;
-    }
-
     .expanded .chipsContainer {
         overflow-x: hidden;
         overflow-y: auto;

src/components/DashboardsBar/styles/DashboardsBar.module.css

@@ -5,33 +5,31 @@
 .container {
     position: relative;
     background-color: var(--colors-white);
-    box-shadow: rgba(0, 0, 0, 0.2) 0 0 6px 3px;
+    border-block-end: 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-block-start: 6px;
+    padding-block-end: 6px;
+    padding-inline-start: 6px;
+    padding-inline-end: 6px;
     block-size: var(--user-rows-height);
     inline-size: 100%;
     z-index: 1;
 }
 
-.content {
-    padding-block-start: 10px;
-    padding-block-end: 0;
-    padding-inline-start: 6px;
-    padding-inline-end: 6px;
-    overflow: hidden;
-    margin-block-end: 21px; /* to make space for the show more button */
-}
-
 .expanded .content {
     overflow-y: auto;
 }
 
 .expanded .container {
     block-size: var(--max-rows-height);
     z-index: 1999;
+    box-shadow: var(--elevations-e400);
 }
 
 .spacer {
@@ -60,6 +58,7 @@
 
     .collapsed .content {
         flex-wrap: nowrap;
+        overflow-x: scroll;
     }
 
     .expanded .content {
@@ -75,14 +74,17 @@
 
 /* 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 {
         block-size: var(--min-rows-height);
     }
 
     .expanded .container {
         position: absolute;
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         block-size: var(--sm-expanded-controlbar-height);
     }
 

src/components/DashboardsBar/styles/DragHandle.module.css

@@ -14,7 +14,7 @@
     inset-block-end: 0;
     block-size: 3px;
     inline-size: 100%;
-    background: var(--colors-white);
+    background: transparent;
 }
 
 .draghandle:hover:after {

src/components/DashboardsBar/styles/ShowMoreButton.module.css

@@ -1,32 +1,49 @@
 .container {
-    text-align: center;
-    flex: none;
-    block-size: 21px;
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inline-size: 100%;
+    display: flex;
+    align-items: center;
+    inline-size: 32px;
+    flex-shrink: 0;
 }
 
 .showMore {
     cursor: pointer;
     border: none;
-    background-color: transparent;
+    border-radius: 3px;
+    background: transparent;
     padding: 0px;
     inline-size: 100%;
-    block-size: 21px;
+    block-size: 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;
 }
 

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 {

src/components/styles/DashboardContainer.module.css

@@ -1,7 +1,5 @@
 .container {
-    background-color: #f4f6f8;
-    padding-inline-start: var(--spacers-dp16);
-    padding-inline-end: var(--spacers-dp16);
+    background-color: var(--colors-grey200);
     padding-block-end: var(--spacers-dp24);
     overflow: auto;
 }

src/pages/view/FilterBar/styles/FilterBadge.module.css

@@ -1,13 +1,12 @@
 .container {
-    margin: 2px;
     padding-block-start: 0;
     padding-block-end: 0;
-    padding-inline-start: var(--spacers-dp16);
-    padding-inline-end: var(--spacers-dp16);
+    padding-inline-start: var(--spacers-dp12);
+    padding-inline-end: var(--spacers-dp12);
     border-radius: 4px;
     color: var(--colors-white);
     background-color: #212934;
-    block-size: 36px;
+    block-size: 28px;
     display: flex;
     align-items: center;
 }

src/pages/view/FilterBar/styles/FilterBar.module.css

@@ -1,9 +1,6 @@
 .bar {
-    position: sticky;
-    inset-block-start: var(--spacers-dp12);
-    z-index: 7;
-    margin-block-start: var(--spacers-dp8);
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     flex-wrap: wrap;
+    gap: var(--spacers-dp4);
 }

src/pages/view/TitleBar/ActionsBar.js

@@ -9,7 +9,7 @@ import {
     Button,
     FlyoutMenu,
     colors,
-    IconMore24,
+    IconMore16,
     SharingDialog,
 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -32,7 +32,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 = ({
@@ -215,11 +214,12 @@ const ViewActions = ({
     const getMoreButton = (className, useSmall) => (
         <DropdownButton
             className={className}
-            small={useSmall}
+            small
+            secondary
             open={useSmall ? moreOptionsSmallIsOpen : moreOptionsIsOpen}
             disabledWhenOffline={false}
             onClick={() => toggleMoreOptions(useSmall)}
-            icon={<IconMore24 color={colors.grey700} />}
+            icon={<IconMore16 color={colors.grey700} />}
             component={getMoreMenu()}
         >
             {i18n.t('More')}
@@ -229,14 +229,13 @@ const ViewActions = ({
     return (
         <>
             <div className={classes.actions}>
-                <StarDashboardButton
-                    starred={starred}
-                    onClick={onToggleStarredDashboard}
-                />
+                {/* TODO: move star functionality to TitleBar.js */}
                 <div className={classes.strip}>
                     {userAccess.update ? (
                         <OfflineTooltip>
                             <Button
+                                small
+                                secondary
                                 disabled={offline}
                                 className={classes.editButton}
                                 onClick={() => setRedirectUrl(`${id}/edit`)}
@@ -248,6 +247,8 @@ const ViewActions = ({
                     {userAccess.manage ? (
                         <OfflineTooltip>
                             <Button
+                                small
+                                secondary
                                 disabled={offline}
                                 className={classes.shareButton}
                                 onClick={onToggleSharingDialog}