{this.state.initialLoadIsComplete && (
diff --git a/src/components/DimensionsPanel/DndDimensionsPanel.jsx b/src/components/DimensionsPanel/DndDimensionsPanel.jsx
index 545cbae6d5..1463ce3827 100644
--- a/src/components/DimensionsPanel/DndDimensionsPanel.jsx
+++ b/src/components/DimensionsPanel/DndDimensionsPanel.jsx
@@ -1,5 +1,6 @@
-import { DimensionFilter } from '@dhis2/analytics'
import i18n from '@dhis2/d2-i18n'
+import { InputField } from '@dhis2/ui'
+import { IconSearch16 } from '@dhis2/ui-icons'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { default as DndDimensionList } from './DndDimensionList.jsx'
@@ -20,13 +21,17 @@ export class DndDimensionsPanel extends Component {
return (
-
+ value.length
+ ? this.onFilterTextChange(value)
+ : this.onClearFilter()
+ }
+ dense
type="search"
+ prefixIcon={}
dataTest="dimensions-panel-filter"
/>
diff --git a/src/components/DimensionsPanel/styles/DimensionsPanel.style.js b/src/components/DimensionsPanel/styles/DimensionsPanel.style.js
index 2216436a4c..277d873ea3 100644
--- a/src/components/DimensionsPanel/styles/DimensionsPanel.style.js
+++ b/src/components/DimensionsPanel/styles/DimensionsPanel.style.js
@@ -1,7 +1,11 @@
export const styles = {
divContainer: {
- height: '100%',
+ height: '99%',
display: 'flex',
flexDirection: 'column',
+ margin: '4px',
+ borderRadius: '5px',
+ overflow: 'hidden',
+ border: '1px solid var(--colors-grey400)',
},
}
diff --git a/src/components/DimensionsPanel/styles/DndDimensionList.module.css b/src/components/DimensionsPanel/styles/DndDimensionList.module.css
index d57f26d2b1..9844c36e87 100644
--- a/src/components/DimensionsPanel/styles/DndDimensionList.module.css
+++ b/src/components/DimensionsPanel/styles/DndDimensionList.module.css
@@ -9,11 +9,11 @@
inline-size: 100%;
block-size: 100%;
overflow: auto;
+ scrollbar-width: thin;
+ scrollbar-color: #c7cfd6 transparent;
margin-block-start: 0px;
- padding: var(--spacers-dp8);
+ padding: 0 var(--spacers-dp8);
background: var(--colors-white);
- border-block-start: 1px solid var(--colors-grey300);
- border-block-end: 1px solid var(--colors-grey300);
}
.list {
@@ -28,8 +28,8 @@
text-transform: uppercase;
font-size: 11px;
color: var(--colors-grey600);
- margin-block-start: 0;
- margin-block-end: var(--spacers-dp8);
+ margin-block-start: var(--spacers-dp4);
+ margin-block-end: var(--spacers-dp4);
margin-inline-start: 0;
margin-inline-end: 0;
letter-spacing: 0.3px;
diff --git a/src/components/DimensionsPanel/styles/DndDimensionsPanel.module.css b/src/components/DimensionsPanel/styles/DndDimensionsPanel.module.css
index 1adc0f539a..111dbeaed3 100644
--- a/src/components/DimensionsPanel/styles/DndDimensionsPanel.module.css
+++ b/src/components/DimensionsPanel/styles/DndDimensionsPanel.module.css
@@ -2,17 +2,26 @@
block-size: 100%;
display: flex;
flex-direction: column;
- background-color: var(--colors-grey100);
- border-inline-end: 1px solid var(--colors-grey400);
- box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.03);
padding: 0;
overflow: hidden;
}
.filter {
- padding-block-start: var(--spacers-dp8);
- padding-block-end: 0;
- padding-inline-start: var(--spacers-dp8);
- padding-inline-end: var(--spacers-dp8);
+ padding-block-start: 6px;
+ padding-block-end: 8px;
+ padding-inline-start: 6px;
+ padding-inline-end: 6px;
background: var(--colors-white);
}
+
+.filter input {
+ font-size: 13px;
+ line-height: 16px;
+ font-weight: 400;
+ border-color: var(--colors-grey300);
+ height: 30px;
+}
+
+.filter input::placeholder {
+ color: var(--colors-grey600);
+}
diff --git a/src/components/Layout/DefaultLayout/styles/DefaultAxis.module.css b/src/components/Layout/DefaultLayout/styles/DefaultAxis.module.css
index fff6bf53ff..43b087c7ac 100644
--- a/src/components/Layout/DefaultLayout/styles/DefaultAxis.module.css
+++ b/src/components/Layout/DefaultLayout/styles/DefaultAxis.module.css
@@ -1,6 +1,8 @@
.content {
inline-size: 100%;
display: flex;
+ gap: 4px;
+ padding-block-start: 2px;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
diff --git a/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js b/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js
index 73b8dce7ae..a7b4e4e15b 100644
--- a/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js
+++ b/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js
@@ -4,6 +4,7 @@ import * as layoutStyle from '../../styles/style.js'
export default {
axisContainer: {
display: 'flex',
+ flexDirection: 'column',
backgroundColor: layoutStyle.AXIS_BACKGROUND_COLOR,
borderColor: layoutStyle.AXIS_BORDER_COLOR,
borderStyle: layoutStyle.AXIS_BORDER_STYLE,
@@ -17,10 +18,11 @@ export default {
minWidth: 55,
maxWidth: 55,
padding: '2px 0px 0px 0px',
- fontSize: 11,
- color: colors.grey700,
+ fontSize: 10,
+ color: colors.grey600,
userSelect: 'none',
- letterSpacing: '0.2px',
+ fontFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace`,
+ textTransform: 'uppercase',
},
}
// TODO: Refactor this file and all other affected files (DefaultLayout + everything in ../../styles/) to css modules
diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
index b61f2425ae..daff60df19 100644
--- a/src/components/Layout/Layout.jsx
+++ b/src/components/Layout/Layout.jsx
@@ -6,11 +6,16 @@ import {
LAYOUT_TYPE_SCATTER,
LAYOUT_TYPE_OUTLIER_TABLE,
getLayoutTypeByVisType,
+ UpdateButton,
} from '@dhis2/analytics'
import PropTypes from 'prop-types'
import React from 'react'
import { connect } from 'react-redux'
import { sGetUiType } from '../../reducers/ui.js'
+import UpdateVisualizationContainer from '../UpdateButton/UpdateVisualizationContainer.js'
+import VisualizationOptionsManager from '../VisualizationOptions/VisualizationOptionsManager.jsx'
+import { VisualizationTypeSelector } from '../VisualizationTypeSelector/VisualizationTypeSelector.jsx'
+import styles from './Layout.module.css'
import DefaultLayout from './DefaultLayout/DefaultLayout.jsx'
import OutlierTableLayout from './OutlierTable/OutlierTableLayout.jsx'
import PieLayout from './PieLayout/PieLayout.jsx'
@@ -31,7 +36,24 @@ const Layout = ({ visType }) => {
const layoutType = getLayoutTypeByVisType(visType)
const LayoutComponent = componentMap[layoutType]
- return
+ return (
+
+
+
+ (
+
+ )}
+ />
+
+
+
+
+
+
+
+
+ )
}
Layout.propTypes = {
diff --git a/src/components/Layout/Layout.module.css b/src/components/Layout/Layout.module.css
new file mode 100644
index 0000000000..c0add434dc
--- /dev/null
+++ b/src/components/Layout/Layout.module.css
@@ -0,0 +1,32 @@
+.layout {
+ margin: 4px 4px 4px 0;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid var(--colors-grey400);
+ border-radius: 5px;
+ background-color: var(--colors-white);
+}
+
+.topBar {
+ display: flex;
+ align-items: stretch;
+ background-color: var(--colors-white);
+ border-radius: 5px 5px 0 0;
+}
+
+.topBar > button,
+.topBar > div > button {
+ border-radius: 0;
+}
+
+.updateButtonWrapper {
+ display: flex;
+ /* border-right: 1px solid var(--colors-grey300); */
+ margin-inline-end: 4px;
+}
+
+.content {
+ flex: 1;
+ overflow: hidden;
+ border-radius: 0 0 5px 5px;
+}
diff --git a/src/components/Layout/styles/Chip.module.css b/src/components/Layout/styles/Chip.module.css
index c6e200bf5e..859b288106 100644
--- a/src/components/Layout/styles/Chip.module.css
+++ b/src/components/Layout/styles/Chip.module.css
@@ -13,7 +13,6 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- margin: 2px;
border-radius: 2px;
border: 1px solid var(--colors-teal200);
}
diff --git a/src/components/Layout/styles/style.js b/src/components/Layout/styles/style.js
index ff4a2f6257..67cd23315e 100644
--- a/src/components/Layout/styles/style.js
+++ b/src/components/Layout/styles/style.js
@@ -8,5 +8,5 @@ export const AXIS_PADDING = '4px 4px 4px 6px'
export const AXIS_LABEL_PADDING = '2px 0px 0px 4px'
export const AXIS_BORDER_COLOR = colors.grey300
export const AXIS_BORDER_STYLE = 'solid'
-export const AXIS_BORDER_WIDTH = '0px 0px 1px 1px'
+export const AXIS_BORDER_WIDTH = '1px 0px 0px 1px'
export const AXIS_BACKGROUND_COLOR = colors.white
diff --git a/src/components/MenuBar/InterpretationsButton.jsx b/src/components/MenuBar/InterpretationsButton.jsx
index 41fd8b3203..1e906cee21 100644
--- a/src/components/MenuBar/InterpretationsButton.jsx
+++ b/src/components/MenuBar/InterpretationsButton.jsx
@@ -1,9 +1,38 @@
-import { InterpretationsAndDetailsToggler } from '@dhis2/analytics'
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { acToggleUiRightSidebarOpen } from '../../actions/ui.js'
import { sGetCurrent } from '../../reducers/current.js'
import { sGetUiRightSidebarOpen } from '../../reducers/ui.js'
+import styles from './MenuBar.module.css'
+
+const OpenIcon = () => (
+
+)
+
+const CloseIcon = () => (
+
+)
export const InterpretationsButton = () => {
const isShowing = useSelector(sGetUiRightSidebarOpen)
@@ -15,10 +44,12 @@ export const InterpretationsButton = () => {
}
return (
-
+ >
+ {isShowing ?
:
}
+
)
}
diff --git a/src/components/MenuBar/MenuBar.jsx b/src/components/MenuBar/MenuBar.jsx
index dae5d1f566..b0dbda950a 100644
--- a/src/components/MenuBar/MenuBar.jsx
+++ b/src/components/MenuBar/MenuBar.jsx
@@ -1,14 +1,16 @@
import {
FileMenu,
HoverMenuBar,
- UpdateButton,
+ OpenFileDialog,
+ SaveAsDialog,
VIS_TYPE_GROUP_ALL,
VIS_TYPE_GROUP_CHARTS,
useCachedDataQuery,
} from '@dhis2/analytics'
import i18n from '@dhis2/d2-i18n'
+import { IconAdd16, IconFolderOpen16, IconSave16 } from '@dhis2/ui'
import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useState } from 'react'
import { connect } from 'react-redux'
import * as fromActions from '../../actions/index.js'
import { getErrorVariantByStatusCode } from '../../modules/error.js'
@@ -23,9 +25,9 @@ import {
import { sGetCurrent } from '../../reducers/current.js'
import { sGetVisualization } from '../../reducers/visualization.js'
import { ToolbarDownloadDropdown } from '../DownloadMenu/ToolbarDownloadDropdown.jsx'
-import UpdateVisualizationContainer from '../UpdateButton/UpdateVisualizationContainer.js'
-import VisualizationOptionsManager from '../VisualizationOptions/VisualizationOptionsManager.jsx'
+import { TitleBar } from '../TitleBar/TitleBar.jsx'
import { InterpretationsButton } from './InterpretationsButton.jsx'
+import styles from './MenuBar.module.css'
const onOpen = (id) => {
const path = `/${id}`
@@ -55,7 +57,8 @@ const getOnDelete = (props) => () => props.onDeleteVisualization()
const getOnError = (props) => (error) => props.onError(error)
-const UnconnectedMenuBar = ({ dataTest, onFileMenuAction, ...props }) => {
+const UnconnectedMenuBar = ({ onFileMenuAction, ...props }) => {
+ const [dialog, setDialog] = useState(null)
const { currentUser } = useCachedDataQuery()
const filterVisTypesByVersion = useVisTypesFilterByVersion()
@@ -68,16 +71,39 @@ const UnconnectedMenuBar = ({ dataTest, onFileMenuAction, ...props }) => {
})),
]
+ const canSave = [STATE_UNSAVED, STATE_DIRTY].includes(
+ getVisualizationState(props.visualization, props.current)
+ )
+
+ const onSaveClick = () => {
+ if (props.current?.id) {
+ getOnSave(props)()
+ } else {
+ setDialog('saveas')
+ }
+ }
+
return (
<>
-
(
-
- )}
- />
+
+
+
{
onDelete={getOnDelete(props)}
onError={getOnError(props)}
/>
-
-
+
+
+ {dialog === 'open' && (
+ setDialog(null)}
+ onFileSelect={(id) => {
+ onOpen(id)
+ setDialog(null)
+ }}
+ onNew={() => {
+ onNew()
+ setDialog(null)
+ }}
+ />
+ )}
+ {dialog === 'saveas' && (
+ {
+ getOnSaveAs(props)(details)
+ setDialog(null)
+ }}
+ onClose={() => setDialog(null)}
+ />
+ )}
)
}
@@ -114,7 +169,6 @@ const UnconnectedMenuBar = ({ dataTest, onFileMenuAction, ...props }) => {
UnconnectedMenuBar.propTypes = {
apiObjectName: PropTypes.string,
current: PropTypes.object,
- dataTest: PropTypes.string,
visualization: PropTypes.object,
onFileMenuAction: PropTypes.func,
}
diff --git a/src/components/MenuBar/MenuBar.module.css b/src/components/MenuBar/MenuBar.module.css
new file mode 100644
index 0000000000..698c386d04
--- /dev/null
+++ b/src/components/MenuBar/MenuBar.module.css
@@ -0,0 +1,105 @@
+.menuButton {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 4px 8px;
+ border: none;
+ border-radius: 3px;
+ background: #fff;
+ color: #212934;
+ font-size: 13px;
+ line-height: 16px;
+ cursor: pointer;
+ white-space: nowrap;
+ user-select: none;
+ transition: background-color 0.15s, border-color 0.15s;
+}
+
+.menuButton:hover {
+ background: #f3f5f7;
+ border-color: transparent;
+}
+
+.menuButton:active {
+ background: #e8edf2;
+}
+
+.menuButton:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.menuButton:disabled:hover {
+ background: #fff;
+ border-color: transparent;
+}
+
+.menuButton svg {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+}
+
+:global([data-test='dhis2-analytics-toolbar']) {
+ height: 36px !important;
+ min-height: 36px !important;
+}
+
+:global([data-test='dhis2-analytics-hovermenubar']) {
+ position: relative;
+ margin-inline-start: 8px;
+ padding-inline-start: 8px;
+}
+
+:global([data-test='dhis2-analytics-hovermenubar'])::before {
+ content: '';
+ position: absolute;
+ inset-inline-start: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ height: 20px;
+ width: 1px;
+ background: var(--colors-grey300);
+}
+
+:global([data-test='dhis2-analytics-hovermenubar']) > button {
+ font-size: 13px;
+}
+
+.iconButton {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 4px;
+ margin: 4px;
+ border: none;
+ border-radius: 3px;
+ background: none;
+ color: #4a5768;
+ cursor: pointer;
+ margin-inline-start: auto;
+ transition: background-color 0.15s;
+}
+
+.iconButton:hover {
+ background: #f3f5f7;
+}
+
+.iconButton:active {
+ background: #e8edf2;
+}
+
+.iconButton:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.iconButton:disabled:hover {
+ background: none;
+}
+
+.iconButton svg {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+}
diff --git a/src/components/TitleBar/styles/TitleBar.style.js b/src/components/TitleBar/styles/TitleBar.style.js
index a6fe0af69e..dc55530e53 100644
--- a/src/components/TitleBar/styles/TitleBar.style.js
+++ b/src/components/TitleBar/styles/TitleBar.style.js
@@ -3,18 +3,23 @@ import { colors } from '@dhis2/ui'
export default {
titleBar: {
display: 'flex',
- justifyContent: 'center',
+ alignItems: 'center',
+ paddingInlineStart: '12px',
+ marginInlineStart: '8px',
+ borderInlineStart: '1px solid var(--colors-grey400)',
},
cell: {
display: 'flex',
alignItems: 'center',
- background: colors.white,
- padding: '6px',
- borderRadius: '5px',
- margin: '4px',
},
title: {
- fontSize: '14px',
+ fontSize: '13px',
+ fontWeight: '500',
+ lineHeight: '16px',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ maxWidth: '360px',
},
suffix: {
paddingInlineStart: '4px',
diff --git a/src/components/VisualizationOptions/OptionsPopover.jsx b/src/components/VisualizationOptions/OptionsPopover.jsx
new file mode 100644
index 0000000000..69e27539cf
--- /dev/null
+++ b/src/components/VisualizationOptions/OptionsPopover.jsx
@@ -0,0 +1,85 @@
+import i18n from '@dhis2/d2-i18n'
+import { TabBar, Tab, FieldSet, Legend, Help, Button, ButtonStrip } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import styles from './OptionsPopover.module.css'
+
+export const OptionsPopover = ({ optionsConfig, onUpdate, onClose }) => {
+ const [activeTabKey, setActiveTabKey] = useState(
+ optionsConfig[0]?.key ?? null
+ )
+
+ let activeTabIndex = optionsConfig.findIndex(
+ (tab) => tab.key === activeTabKey
+ )
+ if (activeTabIndex < 0) {
+ activeTabIndex = 0
+ }
+
+ const activeTab = optionsConfig[activeTabIndex]
+
+ return (
+
+
+
+ {optionsConfig.map(({ key, label }, index) => (
+ setActiveTabKey(key)}
+ selected={index === activeTabIndex}
+ >
+ {label}
+
+ ))}
+
+
+
+ {activeTab?.content?.map(
+ ({ key, label, content, helpText }) => (
+
+
+
+ )
+ )}
+
+
+
+
+
+
+
+
)
}
diff --git a/src/components/VisualizationOptions/VisualizationOptionsManager.module.css b/src/components/VisualizationOptions/VisualizationOptionsManager.module.css
new file mode 100644
index 0000000000..0eae40ff0f
--- /dev/null
+++ b/src/components/VisualizationOptions/VisualizationOptionsManager.module.css
@@ -0,0 +1,37 @@
+.wrapper {
+ position: relative;
+ display: flex;
+ align-items: stretch;
+}
+
+.optionsButton {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 0 12px;
+ margin: 4px 0;
+ border: none;
+ border-radius: 5px;
+ background: var(--colors-white);
+ color: #212934;
+ font-size: 13px;
+ line-height: 16px;
+ cursor: pointer;
+ white-space: nowrap;
+ user-select: none;
+}
+
+.optionsButton:hover {
+ background: var(--colors-grey200);
+ border-radius: 5px;
+}
+
+.optionsButton:active {
+ background: var(--colors-grey200);
+}
+
+.optionsButton svg {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+}
diff --git a/src/components/VisualizationTypeSelector/VisualizationTypeSelector.jsx b/src/components/VisualizationTypeSelector/VisualizationTypeSelector.jsx
index e0ec9f9dfd..2b33b0a083 100644
--- a/src/components/VisualizationTypeSelector/VisualizationTypeSelector.jsx
+++ b/src/components/VisualizationTypeSelector/VisualizationTypeSelector.jsx
@@ -1,4 +1,4 @@
-import { visTypeDisplayNames, ToolbarSidebar } from '@dhis2/analytics'
+import { visTypeDisplayNames } from '@dhis2/analytics'
import { useConfig } from '@dhis2/app-runtime'
import { useSetting } from '@dhis2/app-service-datastore'
import i18n from '@dhis2/d2-i18n'
@@ -105,34 +105,32 @@ const UnconnectedVisualizationTypeSelector = ({
return (
<>
-