forked from zbycz/osmapp
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FeaturePanel: swipeable drawer in mobile (zbycz#396)
- Loading branch information
Showing
42 changed files
with
635 additions
and
603 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,100 +1,45 @@ | ||
| import React from 'react'; | ||
| import styled from 'styled-components'; | ||
| 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'; | ||
| import { getOsmappLink } from '../../../services/helpers'; | ||
| import { StarButton } from '../ImageSection/StarButton'; | ||
| import { OsmError } from '../OsmError'; | ||
| import { Properties } from '../Properties/Properties'; | ||
| import { PoiDescription } from '../ImageSection/PoiDescription'; | ||
| import { ImageSlider } from '../ImagePane/ImageSlider'; | ||
| import { ClimbingParentLink } from '../ParentLink'; | ||
| import { RouteDistribution } from './RouteDistribution'; | ||
| import { YellowedBadge } from './YellowedBadge'; | ||
| import { getWikimediaCommonsKeys, removeFilePrefix } from './utils/photo'; | ||
| import { SuggestEdit } from '../SuggestEdit'; | ||
|
|
||
| const HeadingContainer = styled.div` | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| `; | ||
|
|
||
| const DetailButtonContainer = styled.div` | ||
| margin: 8px; | ||
| @supports (-webkit-touch-callout: none) { | ||
| /* CSS specific to iOS devices */ | ||
| margin-bottom: 28px; | ||
| } | ||
| `; | ||
|
|
||
| const Heading = styled.div` | ||
| margin: 12px 8px 4px; | ||
| font-size: 36px; | ||
| line-height: 0.98; | ||
| `; | ||
| import { PanelContent, PanelSidePadding } from '../../utils/PanelHelpers'; | ||
| import { FeatureHeading } from '../FeatureHeading'; | ||
| import { ParentLink } from '../ParentLink'; | ||
|
|
||
| export const ClimbingPanel = ({ footer, showTagsTable }) => { | ||
| const { feature } = useFeatureContext(); | ||
| const label = getLabel(feature); | ||
|
|
||
| const { preparePhotosAndSet } = useClimbingContext(); | ||
|
|
||
| const onFullScreenClick = () => { | ||
| Router.push(`${getOsmappLink(feature)}/climbing${window.location.hash}`); | ||
| }; | ||
| const cragPhotos = getWikimediaCommonsKeys(feature.tags) | ||
| .map((key) => feature.tags[key]) | ||
| .map(removeFilePrefix); | ||
| preparePhotosAndSet(cragPhotos); | ||
|
|
||
| return ( | ||
| <> | ||
| <PanelWrapper> | ||
| <PanelScrollbars> | ||
| <ClimbingParentLink /> | ||
|
|
||
| <HeadingContainer> | ||
| <Heading>{label}</Heading> | ||
| <YellowedBadge /> | ||
| <StarButton /> | ||
| </HeadingContainer> | ||
| <PoiDescription /> | ||
|
|
||
| <ImageSlider /> | ||
| <OsmError /> | ||
|
|
||
| <RouteDistribution /> | ||
| <RouteList /> | ||
|
|
||
| <div style={{ padding: '35px 15px 5px' }}> | ||
| <Properties showTags={showTagsTable} /> | ||
| </div> | ||
|
|
||
| <SuggestEdit /> | ||
|
|
||
| {/* @TODO unite with parent panel */} | ||
| <div style={{ padding: '20px 15px 0 15px' }}>{footer}</div> | ||
| </PanelScrollbars> | ||
| <DetailButtonContainer> | ||
| <Button | ||
| color="primary" | ||
| size="large" | ||
| startIcon={<ZoomInIcon fontSize="inherit" />} | ||
| onClick={onFullScreenClick} | ||
| fullWidth | ||
| variant="contained" | ||
| > | ||
| Show crag detail | ||
| </Button> | ||
| </DetailButtonContainer> | ||
| </PanelWrapper> | ||
| </> | ||
| <PanelContent> | ||
| <PanelSidePadding> | ||
| <FeatureHeading /> | ||
| <ParentLink /> | ||
| </PanelSidePadding> | ||
| <ImageSlider /> | ||
| <OsmError /> | ||
| <RouteDistribution /> | ||
| <RouteList /> | ||
|
|
||
| <div style={{ padding: '35px 15px 5px' }}> | ||
| <Properties showTags={showTagsTable} /> | ||
| </div> | ||
|
|
||
| <SuggestEdit /> | ||
| {/* @TODO unite with parent panel */} | ||
| <div style={{ padding: '20px 15px 0 15px' }}>{footer}</div> | ||
| </PanelContent> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,77 @@ | ||
| import React from 'react'; | ||
| import styled from 'styled-components'; | ||
| import { EditIconButton } from './helpers/EditIconButton'; | ||
| import EditIcon from '@mui/icons-material/Edit'; | ||
| import { IconButton } from '@mui/material'; | ||
| import { useEditDialogContext } from './helpers/EditDialogContext'; | ||
| import { PoiDescription } from './ImageSection/PoiDescription'; | ||
| import { StarButton } from './ImageSection/StarButton'; | ||
| import { getLabel } from '../../helpers/featureLabel'; | ||
| import { useFeatureContext } from '../utils/FeatureContext'; | ||
| import { t } from '../../services/intl'; | ||
|
|
||
| const Wrapper = styled.div<{ $deleted: boolean }>` | ||
| font-size: 36px; | ||
| line-height: 0.98; | ||
| const StyledEditButton = styled(IconButton)` | ||
| visibility: hidden; | ||
| position: relative; | ||
| padding-bottom: 30px; | ||
| ${({ $deleted }) => $deleted && 'text-decoration: line-through;'} | ||
| top: 3px; | ||
| `; | ||
| const NameWithEdit = styled.div` | ||
| display: flex; | ||
| gap: 8px; | ||
| `; | ||
| const Container = styled.div` | ||
| margin: 12px 0 20px 0; | ||
| `; | ||
|
|
||
| const HeadingContainer = styled.div` | ||
| margin: 6px 0 4px 0; | ||
| &:hover .show-on-hover { | ||
| display: block !important; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: flex-start; | ||
| position: relative; | ||
| &:hover ${StyledEditButton} { | ||
| visibility: visible; | ||
| } | ||
| `; | ||
|
|
||
| export const FeatureHeading = ({ title, deleted, editEnabled }) => { | ||
| const Heading = styled.h1<{ $deleted: boolean }>` | ||
| font-size: 36px; | ||
| line-height: 0.98; | ||
| margin: 0; | ||
| ${({ $deleted }) => $deleted && 'text-decoration: line-through;'} | ||
| `; | ||
|
|
||
| export const FeatureHeading = () => { | ||
| const { openWithTag } = useEditDialogContext(); | ||
| const { feature } = useFeatureContext(); | ||
| const label = getLabel(feature); | ||
| const { skeleton, deleted } = feature; | ||
| const editEnabled = !skeleton; | ||
|
|
||
| return ( | ||
| <Wrapper $deleted={deleted}> | ||
| {editEnabled && <EditIconButton onClick={() => openWithTag('name')} />} | ||
| {title} | ||
| </Wrapper> | ||
| <Container> | ||
| <PoiDescription /> | ||
| <HeadingContainer> | ||
| <NameWithEdit> | ||
| <Heading $deleted={deleted}>{label}</Heading> | ||
| {/* <YellowedBadge /> */} | ||
| {editEnabled && ( | ||
| <div> | ||
| <StyledEditButton | ||
| onClick={() => openWithTag('name')} | ||
| size="small" | ||
| > | ||
| <EditIcon | ||
| fontSize="small" | ||
| titleAccess={t('featurepanel.inline_edit_title')} | ||
| /> | ||
| </StyledEditButton> | ||
| </div> | ||
| )} | ||
| </NameWithEdit> | ||
| <StarButton /> | ||
| </HeadingContainer> | ||
| </Container> | ||
| ); | ||
| }; |
Oops, something went wrong.