Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New explore dropdown UI #2336

Open
wants to merge 10 commits into
base: develop
Choose a base branch
from
Open

New explore dropdown UI #2336

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ccb9213
feat(style): update new explore dropdown ui for desktop
sunilsabatp Dec 12, 2024
60ab7d6
feat: revamp explore dropdown UI for mobile
sunilsabatp Dec 18, 2024
e0c3ae7
feat(map-settings): add MapSettings component with forest, soil, and …
sunilsabatp Dec 23, 2024
58456f8
feat: add scrollable container for explore items and hide scrollbars
sunilsabatp Dec 23, 2024
ea978bb
Merge remote-tracking branch 'origin' into feature/new-explore-ui
sunilsabatp Dec 23, 2024
b9074b8
feat: add LayerInfoPopupContent component for displaying layer detail…
sunilsabatp Dec 24, 2024
732b4ab
chore: commented out portions of the code related to map layer functi…
sunilsabatp Dec 24, 2024
d5dda28
chore: remove unuse prop.
sunilsabatp Dec 24, 2024
1cddf29
Merge branch 'develop' into feature/new-explore-ui
sunilsabatp Jan 2, 2025
fbd4cc7
Merge branch 'develop' into feature/new-explore-ui
mohitb35 Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 35 additions & 1 deletion public/static/locales/en/maps.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,40 @@
"showProjectDetails": "Show Project Details",
"hideProjectList": "Hide Project List",
"hideProjectDetails": "Hide Project Details",
"countries": "Countries"
"countries": "Countries",
"layers": {
"dataYears": "Data Years",
"covariates": "Covariates",
"description": "Description",
"resolution": "Resolution",
"underlyingData": "Underlying Data",
"forests": "Forests",
"soil": "Soil",
"biodiversity": "Biodiversity",
"risks": "Risks",
"forestLayers": {
"forestCover": "Forest Cover",
"forestBiomass": "Forest Biomass",
"potentialAdditionalForestBiomass": "Potential Additional Forest Biomass",
"deforestation": "Deforestation",
"canopyHeight": "Canopy Height"
},
"soilLayers": {
"soilNitrogen": "Soil Nitrogen",
"soilPH": "Soil pH",
"soilOrganicCarbon": "Soil Organic Carbon",
"soilBulkDensity": "Soil Bulk Density"
},
"biodiversityLayers": {
"treeSpeciesDensity": "Tree Species Density",
"birdsDensity": "Birds Density",
"mammalsDensity": "Mammals Density",
"amphibiansDensity": "Amphibians Density"
},
"risksLayers": {
"fireRisk": "Fire Risk",
"deforestationRisk": "Deforestation Risk"
}
}
}
}
1 change: 1 addition & 0 deletions src/features/projectsV2/ProjectListControls/ProjectListControlForMobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ const ProjectListControlForMobile = ({
<MapFeatureExplorer
mapOptions={mapOptions}
updateMapOption={updateMapOption}
isMobile={true}
/>
)}
<ViewModeTabs {...viewModeTabsProps} />
Expand Down
104 changes: 96 additions & 8 deletions src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,117 @@

.exploreMainContainer {
max-width: 182px;
background-color: $backgroundColor;
background-color: #fff;
border-radius: 12px;
margin-top: 10px;
padding: 14px 16px;
padding: 12px;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
max-height: 485px;

&::-webkit-scrollbar {
display: none;
}

@include xsPhoneView {
position: absolute;
max-height: max-content;
min-width: 293px;
border-radius: unset;
right: 0px;
top: -10px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do this instead of making margin-top = 0px? This makes it tougher to understand how the element is positioned.

}
}

.exploreContainer {
width: 150px;
.exploreItemsContainer {
max-height: 400px;
overflow-y: auto;

&::-webkit-scrollbar {
display: none;
}

@include xsPhoneView {
max-height: max-content;
}
}

.exploreFeatureMobileHeader {
display: flex;
justify-content: space-between;
padding: 3px 4px 18px;
Copy link
Collaborator

@mohitb35 mohitb35 Jan 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are minor differences from the designed spacing, any reason for that?

As per the design, total spacing of the contents of this component from the top/side is 16px, and bottom is 20px. To achieve that, we would use padding: 4px 4px 20px; (as the uniform padding outside exploreMainContainer is 12px).


.exploreLabel {
display: flex;
gap: 8px;

p {
font-size: 14px;
font-weight: 700;
gap: 8px;
}
}

svg {
width: 16px;
}
}

.exploreItemSection {
background: rgba(0, 122, 73, 0.05);
border-radius: 8px;
padding: 8px 9px;
font-size: 12px;
margin-bottom: 10px;

h2 {
font-weight: 600;
margin-bottom: 14px;
}
}

.layerSwitchContainer {
display: flex;
justify-content: space-between;
align-items: center;

.mapLayer {
cursor: pointer;
}

hr {
border-top: 1px dashed rgba(189, 189, 189, 1);
margin-top: 0px;
margin-bottom: 0px;
}
}

.layerInfoPopupContainer {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 189px;
background: #fff;
padding: 12px;
font-size: 10px;

.label {
font-weight: 600;
color: rgba(130, 130, 130, 1);
text-transform: uppercase;
}
.source {
color: $primaryDarkColor;
}
}

.toggleMainContainer {
padding: 15px 9px;
height: 14px;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(0, 122, 73, 0.05);
border-radius: 8px;
}

.toggleContainer {
Expand Down Expand Up @@ -86,11 +177,8 @@
}

.exploreDescription {
padding: 8px;
height: fit-content;
margin-top: 14px;
background-color: rgba(var(--explore-description-background-color-new), 1);
font-size: $fontXXSmall;
font-size: var(--font-xx-extra-small);
border-radius: 6px;
}

Expand Down
108 changes: 89 additions & 19 deletions src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,99 @@
import type { ChangeEvent, FC } from 'react';
import type { FC } from 'react';
import type { MapOptions } from '../../ProjectsMapContext';
import type { SetState } from '../../../common/types/common';

import styles from './MapFeatureExplorer.module.scss';
import { MapLayerToggle } from '.';
// // import { MapLayerToggle } from '.';
// import InfoIcon from '../../../../../public/assets/images/icons/projectV2/InfoIcon';
import { StyledSwitch } from './CustomSwitch';
// import { StyledSwitch } from './CustomSwitch';
// import { YearRangeSlider } from '.';
import { useTranslations } from 'next-intl';
// import themeProperties from '../../../../theme/themeProperties';
import MapLayerControlPanel from './microComponents/MapLayerControlPanel';
import ExploreDropdownHeaderMobile from './microComponents/ExploreDropdownHeaderMobile';

type MapSettingsProps = {
mapOptions: MapOptions;
updateMapOption: (option: keyof MapOptions, value: boolean) => void;
isMobile?: boolean;
setIsOpen?: SetState<boolean>;
};

const MapSettings: FC<MapSettingsProps> = ({ mapOptions, updateMapOption }) => {
const MapSettings: FC<MapSettingsProps> = ({
mapOptions,
updateMapOption,
isMobile,
setIsOpen,
}) => {
const tAllProjects = useTranslations('AllProjects');
const tMaps = useTranslations('Maps');
/* const {
primaryColorNew,
restorationToggleColorNew,
deforestrationToggleColorNew,
} = themeProperties; */

// const { primaryColorNew } = themeProperties;
// const forestConfig = [
// {
// label: tMaps('layers.forestLayers.canopyHeight'),
// color: undefined,
// showDivider: true,
// shouldRender: true,
// additionalInfo: {
// dataYears: 2018,
// resolution: '1m',
// description: 'Global canopy height between year 2018-2020',
// underlyingData:
// 'Global Canopy Height Maps based on AI model (DinoV2) and remote sensing data (MAXAR and GEDI) by Meta',
// source:
// 'https://sustainability.atmeta.com/blog/2024/04/22/using-artificial-intelligence-to-map-the-earths-forests/',
// covariates: 'Tolan et al. 2024',
// },
// },
// {
// label: tMaps('layers.forestLayers.deforestation'),
// color: primaryColorNew,
// showDivider: true,
// shouldRender: true,
// additionalInfo: {
// dataYears: 2023,
// resolution: '30m',
// description: 'Location of deforestation in previous year',
// underlyingData: 'Landsat satellite programs',
// source: 'https://www.science.org/doi/10.1126/science.1244693',
// covariates: 'Hansen et al. 2013',
// },
// },
// {
// label: tMaps('layers.forestLayers.forestBiomass'),
// color: primaryColorNew,
// showDivider: true,
// shouldRender: true,
// additionalInfo: {
// dataYears: 2023,
// resolution: '500km',
// description: 'Tree cover as a binary map',
// underlyingData:
// 'AI model built by Google to classify Sentinel II images in 9 different land use and land cover classes',
// source: 'https://dynamicworld.app/',
// covariates: 'Dynamic World',
// },
// },
// ];
const projectConfig = [
{
label: tAllProjects('projects'),
color: undefined,
showDivider: false,
shouldRender: true,
},
];
return (
<div className={styles.exploreMainContainer}>
<div className={styles.exploreContainer}>
<div>
<div>
<div className={styles.exploreItemsContainer}>
{/* <MapLayerToggle
infoIcon={<InfoIcon width={'10px'} />}
label={tAllProjects('currentForests')}
switchComponent={
<StyledSwitch customColor={`${primaryColorNew}`} />
}
/>
<div className={styles.hrLine} />
/> */}
{/* <div className={styles.hrLine} />
<MapLayerToggle
infoIcon={<InfoIcon width={'10px'} />}
label={tAllProjects('restorationPotential')}
Expand All @@ -49,10 +108,9 @@ const MapSettings: FC<MapSettingsProps> = ({ mapOptions, updateMapOption }) => {
switchComponent={
<StyledSwitch customColor={`${deforestrationToggleColorNew}`} />
}
/>
<div className={styles.hrLine} /> */}
<MapLayerToggle
infoIcon={undefined}
/> */}
{/* <div className={styles.hrLine} /> */}
{/* <MapLayerToggle
label={tAllProjects('projects')}
switchComponent={
<StyledSwitch
Expand All @@ -63,7 +121,19 @@ const MapSettings: FC<MapSettingsProps> = ({ mapOptions, updateMapOption }) => {
) => updateMapOption('showProjects', checked)}
/>
}
/> */}
{isMobile && setIsOpen && (
<ExploreDropdownHeaderMobile setIsOpen={setIsOpen} />
)}
<MapLayerControlPanel
Comment on lines +125 to +127
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Avoid cramped mobile headers.
ExploreDropdownHeaderMobile typically runs close to the top of the viewport. Ensure there's enough breathing room or margins in the enclosing layout so the header doesn't visually clash with the device notch or other UI elements.

exploreConfig={projectConfig}
updateMapOption={updateMapOption}
mapOptions={mapOptions}
/>
{/* <MapLayerControlPanel
category={tMaps('layers.forests')}
exploreConfig={forestConfig}
/> */}
</div>
<div className={styles.exploreDescription}>
{tMaps('3trilliontrees')}
Expand Down
Loading
Loading