diff --git a/packages/webapp/public/locales/en/translation.json b/packages/webapp/public/locales/en/translation.json index 9378779763..6e2013a6f8 100644 --- a/packages/webapp/public/locales/en/translation.json +++ b/packages/webapp/public/locales/en/translation.json @@ -714,6 +714,7 @@ "RESET_PASSWORD_LINK": "Send new password link." }, "FARM_MAP": { + "ADD_LOCATION": "Add Location", "AREA_DETAILS": { "NETWORK": "Network connectivity issues.", "PERIMETER": "Perimeter", @@ -797,6 +798,7 @@ "ZERO_AREA_DETECTED": "Field with no area detected. Please add more points to current drawing or draw again.", "ZERO_LENGTH_DETECTED": "Line with no length detected. Please draw again." }, + "EXPORT_MAP": "Export Map", "EXPORT_MODAL": { "BODY": "How do you want to export your farm map?", "DOWNLOAD": "Download", @@ -826,6 +828,7 @@ "TITLE": "Add field", "TRANSITIONING": "Transitioning" }, + "FILTER_MAP": "Filter Map", "GARDEN": { "DATE": "Eligible transition date", "EDIT_TITLE": "Edit garden", diff --git a/packages/webapp/src/assets/images/map/add.svg b/packages/webapp/src/assets/images/map/add.svg deleted file mode 100644 index fb011fef14..0000000000 --- a/packages/webapp/src/assets/images/map/add.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/webapp/src/assets/images/map/addSkew.svg b/packages/webapp/src/assets/images/map/addSkew.svg new file mode 100644 index 0000000000..0ca383b514 --- /dev/null +++ b/packages/webapp/src/assets/images/map/addSkew.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/webapp/src/assets/images/map/download.svg b/packages/webapp/src/assets/images/map/download.svg index 0e8fd3044c..fd7cb360d1 100644 --- a/packages/webapp/src/assets/images/map/download.svg +++ b/packages/webapp/src/assets/images/map/download.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/packages/webapp/src/assets/images/map/filter-funnel.svg b/packages/webapp/src/assets/images/map/filter-funnel.svg new file mode 100644 index 0000000000..e59e868ef7 --- /dev/null +++ b/packages/webapp/src/assets/images/map/filter-funnel.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/webapp/src/components/Form/Button/button.module.scss b/packages/webapp/src/components/Form/Button/button.module.scss index 5cb23d02b5..29b2389374 100644 --- a/packages/webapp/src/components/Form/Button/button.module.scss +++ b/packages/webapp/src/components/Form/Button/button.module.scss @@ -77,6 +77,26 @@ --focus-box-shadow: none; } +.btn.accent { + --background: var(--White); + --border: none; + --box-shadow: 0px 0px 1px 0px var(--Colors-Accent---singles-Blue-full); + --color: var(--Colors-Accent---singles-Blue-dark); + + --hover-background: var(--Colors-Accent---singles-Blue-full); + --hover-border: none; + --hover-box-shadow: none; + --hover-color: var(--White); + + --active-background: var(--Colors-Accent---singles-Blue-dark); + --active-border: none; + --active-color: var(--White); + + --focus-border: none; + --focus-box-shadow: 0px 0px 1px 0px var(--Colors-Accent---singles-Blue-full); + --focus-outline: none; +} + .btn.error { --background: var(--error); --color: var(--White); diff --git a/packages/webapp/src/components/Form/Button/index.tsx b/packages/webapp/src/components/Form/Button/index.tsx index 557d7c7865..f960b852fe 100644 --- a/packages/webapp/src/components/Form/Button/index.tsx +++ b/packages/webapp/src/components/Form/Button/index.tsx @@ -18,7 +18,15 @@ import styles from './button.module.scss'; import clsx from 'clsx'; export type ButtonProps = { - color?: 'primary' | 'secondary' | 'secondary-2' | 'secondary-cta' | 'warning' | 'error' | 'none'; + color?: + | 'primary' + | 'secondary' + | 'secondary-2' + | 'secondary-cta' + | 'accent' + | 'warning' + | 'error' + | 'none'; children?: ReactNode; sm?: boolean; md?: boolean; diff --git a/packages/webapp/src/components/Map/Footer/MapNavigationButtons.tsx b/packages/webapp/src/components/Map/Footer/MapNavigationButtons.tsx new file mode 100644 index 0000000000..84f9bd01e9 --- /dev/null +++ b/packages/webapp/src/components/Map/Footer/MapNavigationButtons.tsx @@ -0,0 +1,93 @@ +/* + * Copyright 2025 LiteFarm.org + * This file is part of LiteFarm. + * + * LiteFarm is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * LiteFarm is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details, see . + */ + +import { useTranslation } from 'react-i18next'; +import clsx from 'clsx'; +import Button from '../../Form/Button'; +import styles from './styles.module.scss'; +import { ReactComponent as AddLogo } from '../../../assets/images/map/addSkew.svg'; +import { ReactComponent as FilterLogo } from '../../../assets/images/map/filter-funnel.svg'; +import { ReactComponent as ExportLogo } from '../../../assets/images/map/download.svg'; + +export interface MapNavigationButtonsProps { + isAdmin?: boolean; + showAddDrawer?: boolean; + showMapFilter?: boolean; + showModal?: boolean; + isMapFilterSettingActive?: boolean; + onClickAdd: () => void; + handleClickFilter: () => void; + onClickExport?: () => void; +} + +const MapNavigationButtons = ({ + isAdmin, + showAddDrawer, + showMapFilter, + showModal, + onClickAdd, + handleClickFilter, + onClickExport, + isMapFilterSettingActive, +}: MapNavigationButtonsProps) => { + const { t } = useTranslation(); + + return ( +
+ {isAdmin && ( + + )} + + +
+ ); +}; + +export default MapNavigationButtons; diff --git a/packages/webapp/src/components/Map/Footer/index.jsx b/packages/webapp/src/components/Map/Footer/index.jsx index ec1db05003..0c465e06b4 100644 --- a/packages/webapp/src/components/Map/Footer/index.jsx +++ b/packages/webapp/src/components/Map/Footer/index.jsx @@ -1,24 +1,19 @@ -import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import styles from './styles.module.scss'; -import { ReactComponent as AddLogo } from '../../../assets/images/map/add.svg'; -import { ReactComponent as FilterLogo } from '../../../assets/images/map/filter.svg'; -import { ReactComponent as ExportLogo } from '../../../assets/images/map/export.svg'; -import clsx from 'clsx'; import { useTranslation } from 'react-i18next'; import MapDrawer from '../../MapDrawer'; import { locationEnum } from '../../../containers/Map/constants'; import { TourProviderWrapper } from '../../TourProviderWrapper/TourProviderWrapper'; +import FloatingContainer from '../../FloatingContainer'; +import MapNavigationButtons from './MapNavigationButtons'; export default function PureMapFooter({ - style, isAdmin, showSpotlight, resetSpotlight, onClickAdd, + showModal, onClickExport, handleClickFilter, - showModal, setShowMapFilter, showMapFilter, setShowAddDrawer, @@ -43,11 +38,10 @@ export default function PureMapFooter({ point: [locationEnum.gate, locationEnum.water_valve, locationEnum.sensor], }, isMapFilterSettingActive = false, + isCompactSideMenu, }) { const { t } = useTranslation(); - const [stepSpotlighted, setStepSpotlighted] = useState(null); - const { container, button, svg, spotlighted } = styles; return ( -
- {isAdmin && ( - - )} - - -
+ + + dispatch(setSpotlightToShown('map'))} onClickAdd={handleClickAdd} - onClickExport={handleClickExport} showModal={showExportModal} + onClickExport={handleClickExport} setShowMapFilter={setShowMapFilter} showMapFilter={showMapFilter} setShowAddDrawer={(showAddDrawer) => { @@ -573,6 +573,7 @@ export default function Map({ history, isCompactSideMenu }) { onAddMenuClick={handleAddMenuClick} availableFilterSettings={availableFilterSettings} isMapFilterSettingActive={isMapFilterSettingActive} + isCompactSideMenu={isCompactSideMenu} /> )} {showExportModal && ( diff --git a/packages/webapp/src/stories/Pages/Map/Drawer/Drawer.stories.jsx b/packages/webapp/src/stories/Pages/Map/Drawer/Drawer.stories.jsx index 3ccf1678b3..e20dffd082 100644 --- a/packages/webapp/src/stories/Pages/Map/Drawer/Drawer.stories.jsx +++ b/packages/webapp/src/stories/Pages/Map/Drawer/Drawer.stories.jsx @@ -38,7 +38,11 @@ const Template = (args) => ( }} >
- +
); diff --git a/packages/webapp/src/stories/Pages/Map/Footer/MapFooter.stories.jsx b/packages/webapp/src/stories/Pages/Map/Footer/MapFooter.stories.jsx index 891b2ab4f1..b9ff221bce 100644 --- a/packages/webapp/src/stories/Pages/Map/Footer/MapFooter.stories.jsx +++ b/packages/webapp/src/stories/Pages/Map/Footer/MapFooter.stories.jsx @@ -24,7 +24,7 @@ const availableFilterSettings = { line: [locationEnum.buffer_zone, locationEnum.creek, locationEnum.fence], point: [locationEnum.gate, locationEnum.water_valve], }; -const Template = (args) => ; +const Template = (args) => ; export const Admin = Template.bind({}); Admin.args = { diff --git a/packages/webapp/src/stories/Pages/Map/SpotLight/Drawer.stories.jsx b/packages/webapp/src/stories/Pages/Map/SpotLight/Drawer.stories.jsx index 6dcdb8d421..da43a95ef4 100644 --- a/packages/webapp/src/stories/Pages/Map/SpotLight/Drawer.stories.jsx +++ b/packages/webapp/src/stories/Pages/Map/SpotLight/Drawer.stories.jsx @@ -38,7 +38,7 @@ const Template = (args) => ( }} >
- +
);