antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-12 23:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(lib): add Fullscreen Control to UtopiaMap Component (#408)

Browse Source 
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: antontranelis <31516529+antontranelis@users.noreply.github.com>
Co-authored-by: Anton Tranelis <mail@antontranelis.de>
This commit is contained in:
Copilot 2025-10-04 08:04:20 +02:00 committed by GitHub
parent 6050903ce5
commit b25ded083f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 104 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/pages/MapContainer.tsx
View File

@ -86,6 +86,7 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
expandLayerControl={map.expand_layer_control}
tileServerUrl={map.tile_server_url}
tileServerAttribution={map.tile_server_attribution}
showFullscreenControl={map.show_fullscreen_control}
>
{layers &&
apis &&

2
backend/directus-config/development/snapshot/fields/maps/Controls.json
View File

@ -15,7 +15,7 @@
"options": null,
"readonly": false,
"required": false,
"sort": 12,
"sort": 11,
"special": [
"alias",
"no-data",

2
backend/directus-config/development/snapshot/fields/maps/Presets.json
View File

@ -15,7 +15,7 @@
"options": null,
"readonly": false,
"required": false,
"sort": 15,
"sort": 14,
"special": [
"alias",
"no-data",

2
backend/directus-config/development/snapshot/fields/maps/custom_text.json
View File

@ -15,7 +15,7 @@
"options": null,
"readonly": false,
"required": false,
"sort": 13,
"sort": 12,
"special": null,
"translations": null,
"validation": null,

2
backend/directus-config/development/snapshot/fields/maps/default_theme.json
View File

@ -15,7 +15,7 @@
"options": null,
"readonly": false,
"required": false,
"sort": 10,
"sort": 9,
"special": [
"m2o"
],

2
backend/directus-config/development/snapshot/fields/maps/donation_widget.json
View File

@ -15,7 +15,7 @@
"options": null,
"readonly": false,
"required": false,
"sort": 11,
"sort": 10,
"special": [
"cast-boolean"
],

2
backend/directus-config/development/snapshot/fields/maps/geo.json
View File

@ -26,7 +26,7 @@
},
"readonly": false,
"required": false,
"sort": 14,
"sort": 13,
"special": [
"cast-json"
],

2
backend/directus-config/development/snapshot/fields/maps/hide_signup.json
View File

@ -15,7 +15,7 @@
"options": null,
"readonly": false,
"required": false,
"sort": 17,
"sort": 16,
"special": [
"cast-boolean"
],

45
backend/directus-config/development/snapshot/fields/maps/show_fullscreen_control.json Normal file
View File

@ -0,0 +1,45 @@
{
"collection": "maps",
"field": "show_fullscreen_control",
"type": "boolean",
"meta": {
"collection": "maps",
"conditions": null,
"display": null,
"display_options": null,
"field": "show_fullscreen_control",
"group": "Controls",
"hidden": false,
"interface": "boolean",
"note": null,
"options": null,
"readonly": false,
"required": false,
"sort": 6,
"special": [
"cast-boolean"
],
"translations": null,
"validation": null,
"validation_message": null,
"width": "half"
},
"schema": {
"name": "show_fullscreen_control",
"table": "maps",
"data_type": "boolean",
"default_value": false,
"max_length": null,
"numeric_precision": null,
"numeric_scale": null,
"is_nullable": true,
"is_unique": false,
"is_indexed": false,
"is_primary_key": false,
"is_generated": false,
"generation_expression": null,
"has_auto_increment": false,
"foreign_key_table": null,
"foreign_key_column": null
}
}

2
backend/directus-config/development/snapshot/fields/maps/show_request_password.json
View File

@ -15,7 +15,7 @@
"options": null,
"readonly": false,
"required": false,
"sort": 18,
"sort": 17,
"special": [
"cast-boolean"
],

2
backend/directus-config/development/snapshot/fields/maps/tile_server.json
View File

@ -17,7 +17,7 @@
},
"readonly": false,
"required": false,
"sort": 16,
"sort": 15,
"special": [
"alias",
"no-data",

41
lib/src/Components/Map/Subcomponents/Controls/FullscreenControl.tsx Normal file
View File

@ -0,0 +1,41 @@
import ArrowsPointingInIcon from '@heroicons/react/24/outline/ArrowsPointingInIcon'
import ArrowsPointingOutIcon from '@heroicons/react/24/outline/ArrowsPointingOutIcon'
import { useEffect, useState } from 'react'
export const FullscreenControl = () => {
const [isFullscreen, setIsFullscreen] = useState(false)
useEffect(() => {
const handleFullscreenChange = () => {
setIsFullscreen(document.fullscreenElement != null)
}
document.addEventListener('fullscreenchange', handleFullscreenChange)
return () => {
document.removeEventListener('fullscreenchange', handleFullscreenChange)
}
}, [])
const toggleFullscreen = () => {
if (!document.fullscreenElement) {
void document.documentElement.requestFullscreen()
} else {
void document.exitFullscreen()
}
}
return (
<div className='tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
<div
className='tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
onClick={toggleFullscreen}
>
{isFullscreen ? (
<ArrowsPointingInIcon className='tw:stroke-[2.5]' />
) : (
<ArrowsPointingOutIcon className='tw:stroke-[2.5]' />
)}
</div>
</div>
)
}

4
lib/src/Components/Map/UtopiaMap.tsx
View File

@ -53,6 +53,7 @@ function UtopiaMap({
showLayerControl = true,
showZoomControl = false,
showThemeControl = false,
showFullscreenControl = false,
defaultTheme,
donationWidget,
expandLayerControl,
@ -81,6 +82,8 @@ function UtopiaMap({
showZoomControl?: boolean
/** show a widget to switch the theme */
showThemeControl?: boolean
/** show fullscreen control widget (default false) */
showFullscreenControl?: boolean
/** the defaut theme */
defaultTheme?: string
/** ask to donate to the Utopia Project OpenCollective campaign (default false) */
@ -106,6 +109,7 @@ function UtopiaMap({
showFilterControl={showFilterControl}
showGratitudeControl={showGratitudeControl}
showLayerControl={showLayerControl}
showFullscreenControl={showFullscreenControl}
donationWidget={donationWidget}
showThemeControl={showThemeControl}
defaultTheme={defaultTheme}

4
lib/src/Components/Map/UtopiaMapInner.tsx
View File

@ -36,6 +36,7 @@ import { useTags } from './hooks/useTags'
import AddButton from './Subcomponents/AddButton'
import { Control } from './Subcomponents/Controls/Control'
import { FilterControl } from './Subcomponents/Controls/FilterControl'
import { FullscreenControl } from './Subcomponents/Controls/FullscreenControl'
import { GratitudeControl } from './Subcomponents/Controls/GratitudeControl'
import { LayerControl } from './Subcomponents/Controls/LayerControl'
import { SearchControl } from './Subcomponents/Controls/SearchControl'
@ -51,6 +52,7 @@ export function UtopiaMapInner({
showFilterControl = false,
showGratitudeControl = false,
showLayerControl = true,
showFullscreenControl = false,
showThemeControl = false,
defaultTheme = '',
donationWidget,
@ -63,6 +65,7 @@ export function UtopiaMapInner({
showFilterControl?: boolean
showLayerControl?: boolean
showGratitudeControl?: boolean
showFullscreenControl?: boolean
donationWidget?: boolean
showThemeControl?: boolean
defaultTheme?: string
@ -276,6 +279,7 @@ export function UtopiaMapInner({
<TagsControl />
</Control>
<Control position='bottomLeft' zIndex='999' absolute>
{showFullscreenControl && <FullscreenControl />}
{showFilterControl && <FilterControl />}
{showLayerControl && <LayerControl expandLayerControl={expandLayerControl ?? false} />}
{showGratitudeControl && <GratitudeControl />}