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

animate select position

Browse Source
This commit is contained in:
Anton Tranelis 2024-07-31 18:32:24 +02:00
parent c075d474c4
commit a57c51d676
2 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/Components/Map/Subcomponents/SelectPosition.tsx Normal file
View File

@ -0,0 +1,16 @@
export const SelectPosition = ({ setSelectNewItemPosition }: { setSelectNewItemPosition }) => {
return (
<div className="tw-animate-pulseGrow tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md">
<label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600" onClick={() => {
setSelectNewItemPosition(null)
}}>
<p className='tw-text-center '>✕</p></label>
<div className="tw-alert tw-bg-base-100 tw-text-base-content">
<div>
<span className="tw-text-lg">Select position on the map!</span>
</div>
</div>
</div>
)
}

15
src/Components/Map/UtopiaMap.tsx
View File

@ -20,6 +20,7 @@ import {FilterControl} from "./Subcomponents/Controls/FilterControl";
import { LayerControl } from "./Subcomponents/Controls/LayerControl"; import { LayerControl } from "./Subcomponents/Controls/LayerControl";
import { useLayers } from "./hooks/useLayers"; import { useLayers } from "./hooks/useLayers";
import { useAddVisibleLayer } from "./hooks/useFilter"; import { useAddVisibleLayer } from "./hooks/useFilter";
import { SelectPosition } from "./Subcomponents/SelectPosition";
// for refreshing map on resize (needs to be implemented) // for refreshing map on resize (needs to be implemented)
const mapDivRef = React.createRef(); const mapDivRef = React.createRef();
@ -51,7 +52,9 @@ function UtopiaMap({
const resetMetaTags = () => { const resetMetaTags = () => {
let params = new URLSearchParams(window.location.search); let params = new URLSearchParams(window.location.search);
if (!location.pathname.includes("/item/")) {
window.history.pushState({}, "", `/` + `${params.toString() !== "" ? `?${params}` : ""}`) window.history.pushState({}, "", `/` + `${params.toString() !== "" ? `?${params}` : ""}`)
}
document.title = document.title.split("-")[0]; document.title = document.title.split("-")[0];
document.querySelector('meta[property="og:title"]')?.setAttribute("content", document.title); document.querySelector('meta[property="og:title"]')?.setAttribute("content", document.title);
document.querySelector('meta[property="og:description"]')?.setAttribute("content", `${document.querySelector('meta[name="description"]')?.getAttribute("content")}`); document.querySelector('meta[property="og:description"]')?.setAttribute("content", `${document.querySelector('meta[name="description"]')?.getAttribute("content")}`);
@ -133,17 +136,7 @@ function UtopiaMap({
</MapContainer> </MapContainer>
<AddButton triggerAction={setSelectNewItemPosition}></AddButton> <AddButton triggerAction={setSelectNewItemPosition}></AddButton>
{selectNewItemPosition != null && {selectNewItemPosition != null &&
<div className="tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md"> <SelectPosition setSelectNewItemPosition={setSelectNewItemPosition} />
<label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600" onClick={() => {
setSelectNewItemPosition(null)
}}>
<p className='tw-text-center '>✕</p></label>
<div className="tw-alert tw-bg-base-100 tw-text-base-content">
<div>
<span>Select {selectNewItemPosition.name} position!</span>
</div>
</div>
</div>
} }
</div> </div>