feat: dashboard bar, title bar redesign

dhis2 · Jan 23, 2023 · 3464175 · 3464175
1 parent b050c41
commit 3464175
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 39 deletions.
diff --git a/src/components/DashboardsBar/ShowMoreButton.js b/src/components/DashboardsBar/ShowMoreButton.js
@@ -1,8 +1,8 @@
 import i18n from '@dhis2/d2-i18n'
-import { Tooltip } from '@dhis2/ui'
+import { Tooltip, IconChevronDown24, IconChevronUp24 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
-import { ChevronDown, ChevronUp } from './assets/icons.js'
+// import { IconChevronDown24, ChevronUp } from './assets/icons.js'
 import classes from './styles/ShowMoreButton.module.css'
 
 const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
@@ -31,7 +31,7 @@ const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
         <div className={classes.container} ref={containerRef}>
             {disabled ? (
                 <div className={classes.disabled}>
-                    <ChevronDown />
+                    <IconChevronDown24 />
                 </div>
             ) : (
                 <Tooltip
@@ -51,9 +51,9 @@ const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
                             onMouseOut={onMouseOut}
                         >
                             {dashboardBarIsExpanded ? (
-                                <ChevronUp />
+                                <IconChevronUp24 />
                             ) : (
-                                <ChevronDown />
+                                <IconChevronDown24 />
                             )}
                         </button>
                     )}

diff --git a/src/components/DashboardsBar/styles/DashboardsBar.module.css b/src/components/DashboardsBar/styles/DashboardsBar.module.css
@@ -6,21 +6,21 @@
     position: relative;
     background-color: var(--colors-white);
     border-bottom: 1px solid var(--colors-grey400);
-    box-shadow: 0 2px 6px rgba(33, 41, 52, 0.1);
+    box-shadow: 0 -2px 4px rgba(33, 41, 52, 0.02) inset;
     overflow: hidden;
     box-sizing: border-box;
     flex: none;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: space-between;
     height: var(--user-rows-height);
     width: 100%;
     z-index: 1;
+    padding: var(--spacers-dp8);
 }
 
 .content {
-    padding: 10px 6px 0 6px;
     overflow: hidden;
-    margin-bottom: 21px; /* to make space for the show more button */
 }
 
 .expanded .content {

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,50 @@
 .container {
-    text-align: center;
-    flex: none;
-    height: 21px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
+    display: flex;
+    align-items: center;
+    width: 32px;
+    height: 40px;
+    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,7 +1,7 @@
 :root {
     /* control bar variables */
     --user-rows-count: 1;
-    --controlbar-padding: 31px;
+    --controlbar-padding: 16px;
     --row-height: 40px;
     --min-rows-height: calc(
         var(--controlbar-padding) + (1 * var(--row-height))
@@ -36,7 +36,7 @@ body {
 }
 
 .app-shell-app {
-    overflow: hidden !important;
+    /* overflow: hidden !important; */
     display: flex;
     flex-direction: column;
 }

diff --git a/src/components/styles/DashboardContainer.module.css b/src/components/styles/DashboardContainer.module.css
@@ -1,9 +1,9 @@
 .container {
     background-color: var(--colors-grey200);
-    padding-left: var(--spacers-dp16);
-    padding-right: var(--spacers-dp16);
+    /* padding-left: var(--spacers-dp16); */
+    /* padding-right: var(--spacers-dp16); */
     padding-bottom: var(--spacers-dp24);
-    overflow: auto;
+    /* overflow: auto; */
 }
 
 @media only screen and (max-height: 480px) {

diff --git a/src/pages/view/FilterBar/styles/FilterBadge.module.css b/src/pages/view/FilterBar/styles/FilterBadge.module.css
@@ -1,12 +1,11 @@
 .container {
-    margin: 2px;
-    padding: 0 var(--spacers-dp16);
-    border-radius: 4px;
+    padding: var(--spacers-dp8);
+    border-radius: 5px;
     color: var(--colors-white);
-    background-color: #212934;
-    height: 36px;
+    background-color: var(--colors-grey900);
     display: flex;
     align-items: center;
+    gap: var(--spacers-dp12);
 }
 
 .badge {
@@ -28,7 +27,6 @@
     padding: 0;
     font-size: 12px;
     text-decoration: underline;
-    margin-left: var(--spacers-dp24);
     cursor: pointer;
 }
 

diff --git 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-dp8);
-    z-index: 7;
-    margin-top: var(--spacers-dp4);
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
+    gap: var(--spacers-dp4);
 }
diff --git a/src/pages/view/TitleBar/ActionsBar.js b/src/pages/view/TitleBar/ActionsBar.js
@@ -26,6 +26,7 @@ import { sGetNamedItemFilters } from '../../../reducers/itemFilters.js'
 import { sGetSelected } from '../../../reducers/selected.js'
 import { sGetShowDescription } from '../../../reducers/showDescription.js'
 import { ROUTE_START_PATH } from '../../start/index.js'
+import FilterBar from '../FilterBar/FilterBar.js'
 import { apiStarDashboard } from './apiStarDashboard.js'
 import FilterSelector from './FilterSelector.js'
 import StarDashboardButton from './StarDashboardButton.js'
@@ -226,6 +227,7 @@ const ViewActions = ({
     return (
         <>
             <div className={classes.actions}>
+                <FilterBar />
                 <StarDashboardButton
                     starred={starred}
                     onClick={onToggleStarredDashboard}

diff --git a/src/pages/view/TitleBar/styles/TitleBar.module.css b/src/pages/view/TitleBar/styles/TitleBar.module.css
@@ -1,5 +1,11 @@
 .container {
-    margin-top: var(--spacers-dp12);
+    /* margin-top: var(--spacers-dp12); */
+    background: var(--colors-white);
+    border-bottom: 1px solid var(--colors-grey300);
+    padding: var(--spacers-dp12) var(--spacers-dp16) var(--spacers-dp8);
+    position: sticky;
+    top: 0;
+    z-index: 10;
 }
 
 .titleBar {
@@ -11,7 +17,7 @@
 
 .title {
     position: relative;
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 500;
     color: var(--colors-grey900);
     user-select: text;

diff --git 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,7 +150,6 @@ const ViewDashboard = (props) => {
         ) : (
             <>
                 <TitleBar />
-                <FilterBar />
                 <ItemGrid />
             </>
         )

diff --git a/src/pages/view/styles/ItemGrid.module.css b/src/pages/view/styles/ItemGrid.module.css
@@ -1,3 +1,4 @@
 .grid {
-    margin-top: var(--spacers-dp12);
+    margin-top: var(--spacers-dp8);
+    padding: 0 var(--spacers-dp16);
 }