dhis2 · jenniferarnesen · Sep 25, 2024 · Sep 25, 2024 · Dec 5, 2024 · Dec 5, 2024
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-05-10T12:25:45.620Z\n"
-"PO-Revision-Date: 2023-05-10T12:25:45.620Z\n"
+"POT-Creation-Date: 2024-12-04T17:00:46.379Z\n"
+"PO-Revision-Date: 2024-12-04T17:00:46.380Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -478,12 +478,6 @@ msgstr "Yes, remove filters"
 msgid "The dashboard couldn't be made available offline. Try again."
 msgstr "The dashboard couldn't be made available offline. Try again."
 
-msgid "Failed to unstar the dashboard"
-msgstr "Failed to unstar the dashboard"
-
-msgid "Failed to star the dashboard"
-msgstr "Failed to star the dashboard"
-
 msgid "Remove from offline storage"
 msgstr "Remove from offline storage"
 
@@ -548,6 +542,12 @@ msgstr "Cannot unstar this dashboard while offline"
 msgid "Cannot star this dashboard while offline"
 msgstr "Cannot star this dashboard while offline"
 
+msgid "Failed to unstar the dashboard"
+msgstr "Failed to unstar the dashboard"
+
+msgid "Failed to star the dashboard"
+msgstr "Failed to star the dashboard"
+
 msgid "Loading dashboard – {{name}}"
 msgstr "Loading dashboard – {{name}}"
 

diff --git a/src/components/App.js b/src/components/App.js
@@ -43,12 +43,12 @@
            '--headerbar-height',
            `${headerbarHeight}px`
        )
    }, [])

     return (
         systemSettings && (
             <>
-                <CssVariables colors spacers />
+                <CssVariables colors spacers elevations />
                 <Router>
                     <Switch>
                         <Route

diff --git a/src/components/DashboardsBar/Chip.js b/src/components/DashboardsBar/Chip.js
@@ -15,6 +15,10 @@ const Chip = ({ starred, selected, label, dashboardId, onClick }) => {
     const { isConnected: online } = useDhis2ConnectionStatus()
     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
@@ -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>
                     )}

diff --git 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"
       >
         <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>

diff --git a/src/components/DashboardsBar/__tests__/getRowsFromHeight.js b/src/components/DashboardsBar/__tests__/getRowsFromHeight.js
diff --git a/src/components/DashboardsBar/__tests__/getRowsFromHeight.spec.js b/src/components/DashboardsBar/__tests__/getRowsFromHeight.spec.js
@@ -0,0 +1,22 @@
+import { getRowsFromHeight } from '../getRowsFromHeight.js'
+
+test('getRowsFromHeight returns an integer', () => {
+    const res = getRowsFromHeight(100)
+    expect(Number.isInteger(res)).toBeTruthy()
+})
+
+const testCases = [
+    { height: 0, rows: 1 },
+    { height: 36, rows: 1 },
+    { height: 100, rows: 3 },
+    { height: 200, rows: 5 },
+    { height: 300, rows: 8 },
+    { height: 400, rows: 10 },
+    { height: 500, rows: 13 },
+]
+
+testCases.forEach(({ height, rows }) => {
+    test(`getRowsFromHeight returns ${rows} for height ${height}`, () => {
+        expect(getRowsFromHeight(height)).toBe(rows)
+    })
+})
diff --git a/src/components/DashboardsBar/getRowsFromHeight.js b/src/components/DashboardsBar/getRowsFromHeight.js
@@ -1,9 +1,19 @@
-const ROW_HEIGHT = 40
-const PADDING_TOP = 10
-const SHOWMORE_BUTTON_HEIGHT = 21 // 27px - 6px below bottom edge of ctrlbar
+/* ROW_HEIGHT is the height of a chip + the gap between chips.
+ But this isn't correct for the first or last row in the dashboards bar
+    because the gap is only applied between rows, not at the top or bottom.
+    So the first and last row are actually 3px shorter than the other rows, i.e. 35px
+    But in order to keep the calculation simple, we'll just use 38px for all rows, while
+    subtracting 3px from PADDING_TOP (which is actually 6px)
+*/
+const FIRST_ROW_HEIGHT = 35 // 32px chip + 3px gap (only 1/2 of the gap for first row)
+const ROW_HEIGHT = 38 // 32px chip + 6px gap
+const PADDING_TOP = 6
 
 export const getRowsFromHeight = (height) => {
-    return Math.round(
-        (height - SHOWMORE_BUTTON_HEIGHT - PADDING_TOP) / ROW_HEIGHT
-    )
+    if (height <= PADDING_TOP + FIRST_ROW_HEIGHT) {
+        return 1
+    }
+    return 1 + Math.abs(Math.round(
+        (height - PADDING_TOP - FIRST_ROW_HEIGHT) / ROW_HEIGHT
+    ))
 }
diff --git 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
@@ -5,30 +5,28 @@
 .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;
 }
 
 .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,14 +71,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 {
         height: var(--min-rows-height);
     }
 
     .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
@@ -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
@@ -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
@@ -1,16 +1,17 @@
 :root {
-    /* control bar variables */
+    /* dashboards bar variables */
     --user-rows-count: 1;
-    --controlbar-padding: 31px;
-    --row-height: 40px;
+    --dashboardsbar-padding: 6px;
+    --first-row-height: 35px; /* 32px chip height + 6px/2 gap (bottom of chip only) */
+    --row-height: 38px;  /* 32px chip height + 6px gap */
     --min-rows-height: calc(
-        var(--controlbar-padding) + (1 * var(--row-height))
+        var(--dashboardsbar-padding) + (1 * var(--first-row-height))
     );
     --max-rows-height: calc(
-        var(--controlbar-padding) + (10 * var(--row-height))
+        var(--dashboardsbar-padding) + (1 * var(--first-row-height)) + (9 * var(--row-height))
     );
     --user-rows-height: calc(
-        var(--controlbar-padding) + (var(--user-rows-count) * var(--row-height))
+        var(--dashboardsbar-padding) + (1 * var(--first-row-height)) + ((var(--user-rows-count) - 1) * var(--row-height))
     );
     --sm-expanded-controlbar-height: calc(
         (var(--vh, 1vh) * 100) - var(--headerbar-height) - 32px
@@ -32,7 +33,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
@@ -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/edit/styles/ItemGrid.module.css b/src/pages/edit/styles/ItemGrid.module.css
@@ -1,3 +1,4 @@
 .grid {
     margin-top: var(--spacers-dp16);
+    padding-inline: var(--spacers-dp16);
 }
diff --git a/src/pages/edit/styles/TitleBar.module.css b/src/pages/edit/styles/TitleBar.module.css
@@ -1,5 +1,6 @@
 .container {
     background: var(--colors-grey100);
+    padding-inline: var(--spacers-dp16);
 }
 
 .inputWrapper {