+
+
{
if (isSelected) return
@@ -100,7 +100,7 @@ export const BackgroundMapSelector = ({ active, dismiss }) => {
title={name}
/>
-
+
)
})}
From 610e745dbcdf95d085052de461d4c7080a11e98f Mon Sep 17 00:00:00 2001
From: lightlii <32508751+lightlii@users.noreply.github.com>
Date: Tue, 22 Aug 2023 11:03:38 +0200
Subject: [PATCH 40/51] fix: remove unused inports
---
.../MapFilter/MapView/MapPreviewCard.js | 2 +-
.../components/SettingsView/SettingsItem.js | 24 ++++++++++++-------
src/renderer/components/SettingsView/index.js | 7 ------
3 files changed, 17 insertions(+), 16 deletions(-)
diff --git a/src/renderer/components/MapFilter/MapView/MapPreviewCard.js b/src/renderer/components/MapFilter/MapView/MapPreviewCard.js
index 96f90000..bdac17e3 100644
--- a/src/renderer/components/MapFilter/MapView/MapPreviewCard.js
+++ b/src/renderer/components/MapFilter/MapView/MapPreviewCard.js
@@ -1,4 +1,4 @@
-import { Box, Typography, makeStyles, useTheme } from '@material-ui/core'
+import { Typography, makeStyles, useTheme } from '@material-ui/core'
import React from 'react'
import ReactMapboxGl from 'react-mapbox-gl'
diff --git a/src/renderer/components/SettingsView/SettingsItem.js b/src/renderer/components/SettingsView/SettingsItem.js
index de36d50a..05fef594 100644
--- a/src/renderer/components/SettingsView/SettingsItem.js
+++ b/src/renderer/components/SettingsView/SettingsItem.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
import { Typography, useTheme } from '@material-ui/core'
import ChevronRightIcon from '@material-ui/icons/ChevronRight'
@@ -8,7 +8,7 @@ import styled from 'styled-components'
const m = defineMessages({
on: 'On',
- off: 'Off',
+ off: 'Off'
})
export const SettingsItem = React.forwardRef(
@@ -18,7 +18,9 @@ export const SettingsItem = React.forwardRef(
return (
- {Icon ?
+
+ {Icon ?
{typeof label === 'string' ? label : t(label)}
@@ -38,16 +40,22 @@ export const SettingsItem = React.forwardRef(
textTransform: 'none',
textAlign: 'left',
cursor: 'pointer',
- color: theme.palette.grey['700'],
+ color: theme.palette.grey['700']
}}
>
- {type === 'toggle' ?
- {type === 'menuItem' &&
)
- },
+ }
)
const Subtitle = ({ label }) => {
diff --git a/src/renderer/components/SettingsView/index.js b/src/renderer/components/SettingsView/index.js
index 060ce159..e257e889 100644
--- a/src/renderer/components/SettingsView/index.js
+++ b/src/renderer/components/SettingsView/index.js
@@ -72,10 +72,3 @@ const Container = styled.div`
display: flex;
height: 100%;
`
-
-const Boc = styled.div`
-
-background-color: red
-height: 200px;
-width:100px;
-`
From 99d74509d801989c664e4bc6ef4e66909f1ebc8c Mon Sep 17 00:00:00 2001
From: lightlii <32508751+lightlii@users.noreply.github.com>
Date: Tue, 29 Aug 2023 14:00:54 +0200
Subject: [PATCH 41/51] fix: use fuill screen dialog for BackgroundMapSelector
and fix overflow
---
.../MapView/BackgroundMapSelector.js | 125 ++++++++++--------
1 file changed, 68 insertions(+), 57 deletions(-)
diff --git a/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js b/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
index 86b6c2f5..3cd73ede 100644
--- a/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
+++ b/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
@@ -2,14 +2,15 @@ import * as React from 'react'
import {
Box,
Button,
+ Dialog,
Link,
- Paper,
Slide,
Typography,
makeStyles
} from '@material-ui/core'
import { defineMessages, useIntl } from 'react-intl'
import { Close } from '@material-ui/icons'
+
import { MapPreviewCard } from './MapPreviewCard'
import {
useBackgroundMapStore,
@@ -22,6 +23,8 @@ import {
} from '../../../hooks/useMapStylesQuery'
import Loader from '../../Loader'
+const MAPEO_BLUE = '#2469f6'
+
const m = defineMessages({
// Title for background maps overlay
title: 'Background Maps',
@@ -42,6 +45,7 @@ export const BackgroundMapSelector = ({ active, dismiss }) => {
const setTabIndex = usePersistedUiStore(store => store.setTabIndex)
const navigateToBackgroundMaps = () => {
+ dismiss()
setTabIndex(3) // TODO: Set from an ID rather than hardcoded index
}
@@ -56,57 +60,57 @@ export const BackgroundMapSelector = ({ active, dismiss }) => {
backgroundMapsEnabled && data ? [defaultMapStyle, ...data] : data
return (
-
-
- {/* HEADER */}
-
-
-
- {t(m.title)}
-
-
-
- {t(m.close)}
-
+
+ {/* HEADER */}
+
+
+
+ {t(m.title)}
+
+
+
+ {t(m.close)}
+
+
+ {/* MAP STYLES ROW */}
+ {isLoading ? (
+
+ {mapStyles
+ .filter(({ isImporting }) => !isImporting)
+ .map(({ id, url, name }) => {
+ const isSelected = mapStyle === id
+ return (
+ {
+ if (isSelected) return
+ dismiss()
+ setMapStyle(id)
+ }}
+ selected={isSelected}
+ styleUrl={url}
+ title={name}
+ key={id}
+ />
+ )
+ })}
- {/* MAP STYLES ROW */}
- {isLoading ? (
-
- {mapStyles
- .filter(({ isImporting }) => !isImporting)
- .map(({ id, url, name }) => {
- const isSelected = mapStyle === id
- return (
-
-
- {
- if (isSelected) return
- dismiss()
- setMapStyle(id)
- }}
- selected={isSelected}
- styleUrl={url}
- title={name}
- />
-
-
- )
- })}
-
- )}
-
-
+ )}
+
)
}
@@ -120,6 +124,10 @@ const Loading = () => {
)
}
+const Transition = React.forwardRef((props, ref) => (
+
+))
+
const useStyles = makeStyles(theme => ({
container: {
borderRadius: '10px 10px 0px 0px',
@@ -141,7 +149,7 @@ const useStyles = makeStyles(theme => ({
title: {
fontSize: 22,
fontWeight: 500,
- marginRight: 5
+ marginRight: 10
},
row: {
display: 'flex',
@@ -150,13 +158,13 @@ const useStyles = makeStyles(theme => ({
},
styleRow: {
display: 'flex',
- padding: 22
+ padding: 22,
+ flexWrap: 'wrap',
+ gap: '40px 20px '
},
link: {
- cursor: 'pointer'
- },
- mapCardWrapper: {
- marginRight: 32
+ cursor: 'pointer',
+ color: MAPEO_BLUE
},
loaderContainer: {
width: '100%',
@@ -164,5 +172,8 @@ const useStyles = makeStyles(theme => ({
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
+ },
+ closeButton: {
+ color: MAPEO_BLUE
}
}))
From 0cc01473f07cb9a08a48b17e0accdf0be4dbdb73 Mon Sep 17 00:00:00 2001
From: lightlii <32508751+lightlii@users.noreply.github.com>
Date: Tue, 29 Aug 2023 14:35:32 +0200
Subject: [PATCH 42/51] fix: make style list in background maps screen
scrollable
---
.../components/BackgroundMaps/MapCard.js | 4 +-
.../components/BackgroundMaps/SidePanel.js | 58 +++++++++++--------
.../components/SettingsView/BackgroundMaps.js | 8 +--
3 files changed, 40 insertions(+), 30 deletions(-)
diff --git a/src/renderer/components/BackgroundMaps/MapCard.js b/src/renderer/components/BackgroundMaps/MapCard.js
index f456d2c2..1953c77e 100644
--- a/src/renderer/components/BackgroundMaps/MapCard.js
+++ b/src/renderer/components/BackgroundMaps/MapCard.js
@@ -30,7 +30,7 @@ export const MapboxPrevOnly = ReactMapboxGl({
/**
* @typedef MapCardProps
* @prop {import('../SettingsView/BackgroundMaps').MapServerStyleInfo} offlineMap
- * @prop {React.Dispatch
>} setMap
+ * @prop {React.Dispatch>} setMap
* @prop {boolean } isBeingViewed
*/
@@ -92,7 +92,7 @@ export const MapCard = ({ offlineMap, setMap, isBeingViewed }) => {
const useStyles = makeStyles({
root: {
- height: 90,
+ minHeight: '90px',
width: '90%',
marginBottom: 20,
textTransform: 'none',
diff --git a/src/renderer/components/BackgroundMaps/SidePanel.js b/src/renderer/components/BackgroundMaps/SidePanel.js
index 8ae3a7fc..d15f50c6 100644
--- a/src/renderer/components/BackgroundMaps/SidePanel.js
+++ b/src/renderer/components/BackgroundMaps/SidePanel.js
@@ -17,8 +17,8 @@ const m = defineMessages({
/**
* @typedef SidePanelProps
* @prop {()=>void} openSettings
- * @prop {string|false} mapValue
- * @prop {React.Dispatch>} setMapValue
+ * @prop {string|null} mapValue
+ * @prop {React.Dispatch>} setMapValue
*/
/** @param {SidePanelProps} param */
@@ -37,28 +37,32 @@ export const SidePanel = ({ openSettings, mapValue, setMapValue }) => {
- setOpen(true)}
- className={`${classes.button} ${classes.firstButton}`}
- variant='outlined'
- >
- {t(m.addMap)}
-
-
+
+
+ setOpen(true)}
+ className={`${classes.button} ${classes.firstButton}`}
+ variant='outlined'
+ >
+ {t(m.addMap)}
+
+
- {isLoading ? (
-
- ) : data ? (
- data.map(offlineMap => (
-
- ))
- ) : null}
+ {isLoading ? (
+
+ ) : data ? (
+ data.map(offlineMap => (
+ <>
+
+
+ ))
+ ) : null}
+