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.

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 57 commits into
base: develop
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
57 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
e31442a
refactor: create separate MobileMapSettingsLayout
mohitb35 Jan 29, 2025
cfe9c10
refactor: rename MapLayerControlPanel to MapSettingsSection and updat…
mohitb35 Jan 29, 2025
6dd0953
feat: adds mapSettings.config to describe available MapSettings options
mohitb35 Jan 30, 2025
7954e32
feat: refactor info popup functionality for MapSettings
mohitb35 Jan 30, 2025
597a6a7
fix: increase explore button/menu width for non-mobile screen
mohitb35 Jan 31, 2025
7ef27e7
feat: modifies explore button layout with subtitle
mohitb35 Jan 31, 2025
dc684b9
feat: makes scroll content bottom obvious in MobileMapSettingsLayout
mohitb35 Jan 31, 2025
c26a6a1
[CodeFactor] Apply fixes to commit dc684b9
code-factor Jan 31, 2025
b3525ff
feat: makes header/scrollable content separation more subtle
mohitb35 Jan 31, 2025
5eddbd4
Merge branch 'feature/new-explore-ui' of https://github.com/Plant-for…
mohitb35 Jan 31, 2025
12ba0e3
Merge branch 'develop' into feature/new-explore-ui
mohitb35 Jan 31, 2025
49f386e
fix: resolve erratic popover behavior in MapFeatureExplorer
mohitb35 Jan 31, 2025
7925aa5
feat: links up toggle actions with updating MapOptions
mohitb35 Jan 31, 2025
3874bfc
refactor: extract YearRangeSlider to separate component (unused)
mohitb35 Jan 31, 2025
d7cef46
refactor: clean up unused styles and components in MapFeatureExplorer
mohitb35 Jan 31, 2025
ff6494b
refactor: move CustomSlider into YearSlider (unused)
mohitb35 Jan 31, 2025
d6983c5
fix: improve Modal accessibility and close behavior in MapFeatureExpl…
mohitb35 Jan 31, 2025
aaa0f1c
fix: minor cleanup
mohitb35 Jan 31, 2025
0f99a00
fix: update translations for MapFeatureExplorer explore layers
mohitb35 Jan 31, 2025
65366fe
fix: hide scrollbar for exploreItemsContainer in Firefox as well
mohitb35 Feb 3, 2025
8e107df
fix: improve handling of single and grouped layers in MapSettingsSection
mohitb35 Feb 4, 2025
1966e6e
feat: hides all unavailable layers
mohitb35 Feb 4, 2025
2f8862d
feat: fetch layers API and populate ProjectMapsContext
mohitb35 Feb 4, 2025
d6602c3
feat: refactor ExploreLayersData to use SingleExploreLayerConfig type
mohitb35 Feb 4, 2025
ffc9070
feat: dynamically render enabled layers using ExploreLayers
mohitb35 Feb 4, 2025
c61c4e6
fix: update name for biomassPotential
mohitb35 Feb 11, 2025
ab99caf
feat: enable availability for forestCover and biomassPotential layers
mohitb35 Feb 11, 2025
7560c4c
temp: replace tileURL from google cloud to R2 (base)
mohitb35 Feb 11, 2025
27f76dc
feat: use API response to determine layer availability
mohitb35 Feb 11, 2025
1d909fb
feat: add canShow property to layer configuration for UI visibility c…
mohitb35 Feb 11, 2025
2fea7d6
feat: use minzoom and maxzoom for ExploreLayers
mohitb35 Feb 11, 2025
541f39a
revert: "temp: replace tileURL from google cloud to R2 (base)"
mohitb35 Feb 12, 2025
65a7ff7
feat: optimize layer selection and validation in ExploreLayers component
mohitb35 Feb 12, 2025
ae73eaa
feat: define TILE_SIZE constant for improved tileSize management in E…
mohitb35 Feb 12, 2025
f186acc
feat: optimize available layers filtering using useMemo for performan…
mohitb35 Feb 12, 2025
ee6bb67
Merge pull request #2395 from Plant-for-the-Planet-org/feature/soil-b…
sunilsabatp Feb 12, 2025
ae2b7cc
feat: remove unused description in MapFeatureExplorer
mohitb35 Feb 13, 2025
192ecf4
fix: remove unnecessary tilde from `resolution` in LayerInfoPopupContent
mohitb35 Feb 13, 2025
630dc8b
fix: increase dimensions of CustomSwitch by 50% for improved usability
mohitb35 Feb 14, 2025
0b2d81b
fix: adjusts position of SingleLayerOption popover to avoid hiding text
mohitb35 Feb 14, 2025
922daef
feat: enable all soil layers, and treeSpeciesDensity
mohitb35 Feb 17, 2025
cae26b5
feat: enable 4 layers for explore
mohitb35 Feb 18, 2025
811fe24
feat: reorder MapSettingsSection moving `soil` to the bottom
mohitb35 Feb 20, 2025
419133e
feat: allow full height for MapFeatureExplorer (non mobile screens)
mohitb35 Feb 20, 2025
60b2ce2
fix: remove scrollbar color customization for MapFeatureExplorer
mohitb35 Feb 20, 2025
3b1d3cd
feat: allows only one active explore layer
mohitb35 Feb 20, 2025
2049835
feat: remove delay on hiding layer info popup
mohitb35 Feb 20, 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
Prev Previous commit
Next Next commit
feat: revamp explore dropdown UI for mobile
Used MUI Modal to render explore features for better
compatibility on mobile devices. Provided a cross icon
to close the modal view for improved usability.
sunilsabatp committed Dec 18, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 60ab7d60c1888e2fd2e3b92ec836f874b3822367
Original file line number Diff line number Diff line change
@@ -133,6 +133,7 @@ const ProjectListControlForMobile = ({
<MapFeatureExplorer
mapOptions={mapOptions}
updateMapOption={updateMapOption}
isMobile={true}
/>
)}
<ViewModeTabs {...viewModeTabsProps} />
Original file line number Diff line number Diff line change
@@ -9,14 +9,39 @@

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

@include xsPhoneView {
position: absolute;
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.

}
}

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

@mohitb35 mohitb35 Jan 28, 2025

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;
}
}

Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
import type { ChangeEvent, 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 InfoIcon from '../../../../../public/assets/images/icons/projectV2/InfoIcon';
import { StyledSwitch } from './CustomSwitch';
// import { YearRangeSlider } from '.';
import { useTranslations } from 'next-intl';
import { ExploreIcon } from '../../../../../public/assets/images/icons/projectV2/ExploreIcon';
import CrossIcon from '../../../../../public/assets/images/icons/projectV2/CrossIcon';
// import themeProperties from '../../../../theme/themeProperties';

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');
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

Remove unused translation hook.

The tMaps translation hook is defined but never used in the component.

-  const tMaps = useTranslations('Maps');
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const tMaps = useTranslations('Maps');
🧰 Tools
🪛 GitHub Check: CodeFactor

[notice] 24-24: src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx#L24
'tMaps' is assigned a value but never used. Allowed unused vars must match /^_/u. (@typescript-eslint/no-unused-vars)

/* const {
@@ -51,6 +61,17 @@ const MapSettings: FC<MapSettingsProps> = ({ mapOptions, updateMapOption }) => {
}
/>
<div className={styles.hrLine} /> */}
{isMobile && setIsOpen && (
<div className={styles.exploreFeatureMobileHeader}>
<div className={styles.exploreLabel}>
<ExploreIcon />
<p>{tMaps('explore')}</p>
</div>
<button onClick={() => setIsOpen(false)}>
<CrossIcon />
</button>
</div>
)}
<MapLayerToggle
infoIcon={undefined}
label={tAllProjects('projects')}
15 changes: 14 additions & 1 deletion src/features/projectsV2/ProjectsMap/MapFeatureExplorer/index.tsx
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import styles from './MapFeatureExplorer.module.scss';
// import PlayIcon from '../../../../../public/assets/images/icons/projectV2/PlayIcon';
import CustomButton from './CustomButton';
import MapSettings from './MapSettings';
import { Modal } from '@mui/material';

/* interface ExploreProjectProps {
label: string | string[];
@@ -96,11 +97,13 @@ export const MapLayerToggle = ({
type MapFeatureExplorerProps = {
mapOptions: MapOptions;
updateMapOption: (option: keyof MapOptions, value: boolean) => void;
isMobile?: boolean;
};

const MapFeatureExplorer = ({
mapOptions,
updateMapOption,
isMobile,
}: MapFeatureExplorerProps) => {
const t = useTranslations('Maps');
const [isOpen, setIsOpen] = useState(false);
@@ -114,12 +117,22 @@ const MapFeatureExplorer = ({
{t('explore')}
</CustomButton>

{isOpen && (
{isOpen && !isMobile && (
<MapSettings
mapOptions={mapOptions}
updateMapOption={updateMapOption}
/>
)}
{isMobile && (
<Modal open={isOpen}>
<MapSettings
mapOptions={mapOptions}
updateMapOption={updateMapOption}
isMobile={isMobile}
setIsOpen={setIsOpen}
/>
</Modal>
)}
</div>
);
};