Skip to content

Commit

Permalink
FeaturePanel: new drawer
Browse files Browse the repository at this point in the history
  • Loading branch information
jvaclavik committed Jun 29, 2024
1 parent f3a9e87 commit ba6955d
Show file tree
Hide file tree
Showing 15 changed files with 213 additions and 203 deletions.
9 changes: 2 additions & 7 deletions src/components/App/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import { StarsProvider } from '../utils/StarsContext';
import { SnackbarProvider } from '../utils/SnackbarContext';
import { useMobileMode } from '../helpers';
import { FeaturePanelInDrawer } from '../FeaturePanel/FeaturePanelInDrawer';
import { PanelWrapper } from '../utils/PanelHelpers';

const usePersistMapView = () => {
const { view } = useMapStateContext();
Expand Down Expand Up @@ -81,13 +80,9 @@ const IndexWithProviders = () => {
const photo = router.query.all?.[3];
return (
<>
<SearchBox />
<Loading />
{featureShown && !isMobileMode && (
<PanelWrapper>
<FeaturePanel />
</PanelWrapper>
)}
<SearchBox />
{featureShown && !isMobileMode && <FeaturePanel />}
{featureShown && isMobileMode && <FeaturePanelInDrawer />}
{isClimbingDialogShown && (
<ClimbingContextProvider feature={feature}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/App/Loading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { isDesktop, useBoolState } from '../helpers';

const Wrapper = styled.div`
position: absolute;
top: 72px;
top: 0;
z-index: 1200;
width: 100%;
Expand Down
7 changes: 3 additions & 4 deletions src/components/FeaturePanel/Climbing/ClimbingPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import Router from 'next/router';
import ZoomInIcon from '@mui/icons-material/ZoomIn';
import { Button } from '@mui/material';
import { useClimbingContext } from './contexts/ClimbingContext';
import { PanelScrollbars, PanelWrapper } from '../../utils/PanelHelpers';
import { RouteList } from './RouteList/RouteList';
import { useFeatureContext } from '../../utils/FeatureContext';
import { getLabel } from '../../../helpers/featureLabel';
Expand All @@ -19,6 +18,7 @@ import { RouteDistribution } from './RouteDistribution';
import { YellowedBadge } from './YellowedBadge';
import { getWikimediaCommonsKeys, removeFilePrefix } from './utils/photo';
import { SuggestEdit } from '../SuggestEdit';
import { PanelContent } from '../../utils/PanelHelpers';

const HeadingContainer = styled.div`
display: flex;
Expand Down Expand Up @@ -55,7 +55,7 @@ export const ClimbingPanel = ({ footer, showTagsTable }) => {
preparePhotosAndSet(cragPhotos);

return (
<>
<PanelContent>
{/* <PanelWrapper>
<PanelScrollbars> */}
<ClimbingParentLink />
Expand All @@ -78,7 +78,6 @@ export const ClimbingPanel = ({ footer, showTagsTable }) => {
</div>

<SuggestEdit />

{/* @TODO unite with parent panel */}
<div style={{ padding: '20px 15px 0 15px' }}>{footer}</div>
{/* </PanelScrollbars> */}
Expand All @@ -95,6 +94,6 @@ export const ClimbingPanel = ({ footer, showTagsTable }) => {
</Button>
</DetailButtonContainer>
{/* </PanelWrapper> */}
</>
</PanelContent>
);
};
153 changes: 14 additions & 139 deletions src/components/FeaturePanel/FeaturePanel.tsx
Original file line number Diff line number Diff line change
@@ -1,139 +1,14 @@
import React, { useState } from 'react';
import styled from 'styled-components';
import { FeatureHeading } from './FeatureHeading';
import Coordinates from './Coordinates';
import { useToggleState } from '../helpers';
import { getFullOsmappLink, getKey } from '../../services/helpers';
import {
PanelContent,
PanelFooter,
PanelScrollbars,
PanelSidePadding,
PanelWrapper,
} from '../utils/PanelHelpers';
import { useFeatureContext } from '../utils/FeatureContext';
import { t } from '../../services/intl';
import { FeatureDescription } from './FeatureDescription';
import { ObjectsAround } from './ObjectsAround';
import { OsmError } from './OsmError';
import { Members } from './Members';
import { getLabel } from '../../helpers/featureLabel';
import { ImageSection } from './ImageSection/ImageSection';
import { PublicTransport } from './PublicTransport/PublicTransport';
import { Properties } from './Properties/Properties';
import { MemberFeatures } from './MemberFeatures';
import { ClimbingPanel } from './Climbing/ClimbingPanel';
import { ClimbingContextProvider } from './Climbing/contexts/ClimbingContext';
import { isClimbingRelation } from '../../services/osmApi';
import { ParentLink } from './ParentLink';
import { ImageSlider } from './ImagePane/ImageSlider';
import { SuggestEdit } from './SuggestEdit';

const Flex = styled.div`
flex: 1;
`;

export const FeaturePanel = () => {
const { feature } = useFeatureContext();

const [advanced, setAdvanced] = useState(false);
const [showAround, toggleShowAround] = useToggleState(false);
const [showTags, toggleShowTags] = useToggleState(false);

const { point, tags, skeleton, deleted } = feature;
const editEnabled = !skeleton;
const showTagsTable = deleted || showTags || (!skeleton && !feature.schema);

const osmappLink = getFullOsmappLink(feature);
const label = getLabel(feature);

const footer = (
<PanelFooter>
<FeatureDescription advanced={advanced} setAdvanced={setAdvanced} />
<Coordinates />
<br />
<a href={osmappLink}>{osmappLink}</a>
<br />
<label>
<input
type="checkbox"
onChange={toggleShowTags}
checked={showTagsTable}
disabled={point || deleted || (!skeleton && !feature.schema)}
/>{' '}
{t('featurepanel.show_tags')}
</label>{' '}
<label>
<input
type="checkbox"
onChange={toggleShowAround}
checked={point || showAround}
disabled={point}
/>{' '}
{t('featurepanel.show_objects_around')}
</label>
{!point && showAround && <ObjectsAround advanced={advanced} />}
</PanelFooter>
);

if (!feature) {
return null;
}

if (
isClimbingRelation(feature) && // only for this condition is memberFeatures fetched
feature.tags.climbing === 'crag' &&
!advanced
) {
return (
<ClimbingContextProvider feature={feature} key={getKey(feature)}>
<ClimbingPanel footer={footer} showTagsTable={showTagsTable} />
</ClimbingContextProvider>
);
}

return (
<>
{/* <PanelWrapper>
<PanelScrollbars> */}
<ImageSection />
<PanelContent>
<PanelSidePadding>
<ParentLink />
<FeatureHeading
deleted={deleted}
title={label}
editEnabled={editEnabled && !point}
/>

<OsmError />
</PanelSidePadding>

<Flex>
{!skeleton && (
<>
<ImageSlider />

<PanelSidePadding>
<Properties showTags={showTagsTable} key={getKey(feature)} />

<MemberFeatures />
{advanced && <Members />}

<PublicTransport tags={tags} />

{editEnabled && <SuggestEdit />}

{point && <ObjectsAround advanced={advanced} />}
</PanelSidePadding>
</>
)}
</Flex>

<PanelSidePadding>{footer}</PanelSidePadding>
</PanelContent>
{/* </PanelScrollbars>
</PanelWrapper> */}
</>
);
};
import React from 'react';

import { PanelScrollbars, PanelWrapper } from '../utils/PanelHelpers';
import { FeaturePanelInner } from './FeaturePanelInner';

export const FeaturePanel = () => (
<>
<PanelWrapper>
<PanelScrollbars>
<FeaturePanelInner />
</PanelScrollbars>
</PanelWrapper>
</>
);
41 changes: 22 additions & 19 deletions src/components/FeaturePanel/FeaturePanelInDrawer.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,22 @@
import React, { useState } from 'react';

import { SwipeableDrawer, useTheme } from '@mui/material';
import { SwipeableDrawer } from '@mui/material';
import styled from 'styled-components';
import { grey } from '@mui/material/colors';
import { FeaturePanel } from './FeaturePanel';
import { FeaturePanelInner } from './FeaturePanelInner';

const Container = styled.div`
position: relative;
background: ${({ theme }) => theme.palette.background.paper};
margin-top: -86px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
visibility: visible;
right: 0;
left: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
height: 100%;
`;

const Puller = styled.div`
width: 30px;
Expand All @@ -12,18 +25,19 @@ const Puller = styled.div`
theme.palette.mode === 'light' ? grey[300] : grey[900]};
border-radius: 3px;
position: absolute;
pointer-events: none;
top: 8px;
left: calc(50% - 15px);
`;

const ListContainer = styled('div')(() => ({
maxHeight: '90vh',
maxHeight: 'calc(100% - 8px)',
height: '100%',
overflow: 'auto',
}));

export const FeaturePanelInDrawer = () => {
const [open, setOpen] = useState(false);
const theme = useTheme();

return (
<SwipeableDrawer
Expand All @@ -33,29 +47,18 @@ export const FeaturePanelInDrawer = () => {
onOpen={() => {
setOpen(true);
}}
swipeAreaWidth={72}
swipeAreaWidth={86}
disableSwipeToOpen={false}
ModalProps={{
keepMounted: true,
}}
>
<div
style={{
position: 'relative',
background: theme.palette.background.paper,
marginTop: `-72px`,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
visibility: 'visible',
right: 0,
left: 0,
}}
>
<Container>
<Puller />
<ListContainer>
<FeaturePanel />
<FeaturePanelInner />
</ListContainer>
</div>
</Container>
</SwipeableDrawer>
);
};
Loading

0 comments on commit ba6955d

Please sign in to comment.