mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
updated daisy ui
This commit is contained in:
parent
bbbbe1ac2c
commit
3dd32c62dd
60
package-lock.json
generated
60
package-lock.json
generated
@ -25,7 +25,7 @@
|
||||
"@typescript-eslint/eslint-plugin": "^5.38.1",
|
||||
"@typescript-eslint/parser": "^5.38.1",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"daisyui": "^2.51.5",
|
||||
"daisyui": "^3.3.1",
|
||||
"eslint": "^8.24.0",
|
||||
"eslint-plugin-react": "^7.31.8",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
@ -864,19 +864,6 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/color": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
|
||||
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1",
|
||||
"color-string": "^1.9.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
@ -894,16 +881,6 @@
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||
},
|
||||
"node_modules/color-string": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
|
||||
"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"color-name": "^1.0.0",
|
||||
"simple-swizzle": "^0.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/colord": {
|
||||
"version": "2.9.2",
|
||||
"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
|
||||
@ -1127,23 +1104,23 @@
|
||||
"integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
|
||||
},
|
||||
"node_modules/daisyui": {
|
||||
"version": "2.51.5",
|
||||
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-2.51.5.tgz",
|
||||
"integrity": "sha512-L05dRw0tasmz2Ha+10LhftEGLq4kaA8vRR/T0wDaXfHwqcgsf81jfXDJ6NlZ63Z7Rl1k3rj7UHs0l0p7CM3aYA==",
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.3.1.tgz",
|
||||
"integrity": "sha512-0PVNl+0r2Ie+FRkDNQABYcv8qLc0bt0lhUfSf8PxGocqpDsCB6cNQ5k8jOlnZIjUhc1EXMIDPU9r0pVrfRGftw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"color": "^4.2",
|
||||
"css-selector-tokenizer": "^0.8.0",
|
||||
"postcss-js": "^4.0.0",
|
||||
"colord": "^2.9",
|
||||
"css-selector-tokenizer": "^0.8",
|
||||
"postcss": "^8",
|
||||
"postcss-js": "^4",
|
||||
"tailwindcss": "^3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.9.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/daisyui"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"autoprefixer": "^10.0.2",
|
||||
"postcss": "^8.1.6"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
@ -2270,12 +2247,6 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/is-arrayish": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
|
||||
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/is-bigint": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
|
||||
@ -4213,15 +4184,6 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/simple-swizzle": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
|
||||
"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-arrayish": "^0.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
"@typescript-eslint/eslint-plugin": "^5.38.1",
|
||||
"@typescript-eslint/parser": "^5.38.1",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"daisyui": "^2.51.5",
|
||||
"daisyui": "^3.3.1",
|
||||
"eslint": "^8.24.0",
|
||||
"eslint-plugin-react": "^7.31.8",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
|
||||
@ -38,9 +38,10 @@ export default function NavBar({name, useAuth} : {name: string, useAuth : any})
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="tw-inline-block tw-w-5 tw-h-5 tw-stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</button>
|
||||
<div className="tw-flex-1 tw-mr-2">
|
||||
<div className="tw-flex-1 tw-truncate tw-grid tw-grid-flow-col tw-max-w-72">
|
||||
<div className="tw-flex-1 tw-truncate tw-grid tw-grid-flow-col tw-max-w-52">
|
||||
<Link className="tw-btn tw-btn-ghost tw-px-2 tw-normal-case tw-text-xl tw-flex-1 tw-truncate" to={"/"}><p className="tw-truncate">{name}</p></Link>
|
||||
<label htmlFor="my-modal" className="tw-cursor-pointer"><div className="tw-btn tw-px-2 tw-btn-ghost "><QuestionMarkIcon className="tw-h-5 tw-w-5"/></div></label>
|
||||
<button className="tw-btn tw-px-2 tw-btn-ghost" onClick={() => window.my_modal_3.showModal()}><QuestionMarkIcon className="tw-h-5 tw-w-5"/></button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -61,7 +61,7 @@ export function SideBar({routes} : {routes : route[]}) {
|
||||
data-te-sidenav-slim-width ="56"
|
||||
data-te-sidenav-width ="160">
|
||||
<div className='tw-flex tw-flex-col tw-h-full' style={{height: "calc(100vh - 64px)"}}>
|
||||
<ul className="tw-menu tw-w-full tw-bg-base-100 tw-text-base-content" data-te-sidenav-menu-ref>
|
||||
<ul className="tw-menu tw-w-full tw-bg-base-100 tw-text-base-content tw-p-0" data-te-sidenav-menu-ref>
|
||||
{
|
||||
routes.map((route, k) => {
|
||||
return (
|
||||
@ -72,7 +72,7 @@ export function SideBar({routes} : {routes : route[]}) {
|
||||
(<NavLink
|
||||
end
|
||||
to={route.path}
|
||||
className={({ isActive }) => `${isActive ? 'tw-font-semibold tw-bg-base-200 ' : 'tw-font-normal'}`} onClick={ () => {if(screen.width < 640 && !slim) instance.toggle();
|
||||
className={({ isActive }) => `${isActive ? 'tw-font-semibold tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`} onClick={ () => {if(screen.width < 640 && !slim) instance.toggle();
|
||||
}}>
|
||||
{route.icon}<span className="group-[&[data-te-sidenav-slim-collapsed='true']]:data-[te-sidenav-slim='false']:tw-hidden" data-te-sidenav-slim="false">{route.name}</span>
|
||||
{
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import { useState } from "react"
|
||||
import * as React from "react"
|
||||
|
||||
type ModalProps = {
|
||||
clickAction: () => void
|
||||
type ChapterProps = {
|
||||
clickAction?: () => void
|
||||
}
|
||||
|
||||
export function Welcome1({ clickAction }: ModalProps) {
|
||||
|
||||
export function Welcome1({ clickAction }: ChapterProps) {
|
||||
return (
|
||||
<>
|
||||
<h3 className="tw-font-bold tw-text-lg">Herzlich Willkommen, schön dass du da bist! </h3>
|
||||
@ -16,13 +17,13 @@ export function Welcome1({ clickAction }: ModalProps) {
|
||||
<br /><br />
|
||||
<b>Hast du Lust mitzumachen?</b></p>
|
||||
<div className="tw-modal-action">
|
||||
<label className="tw-btn" onClick={() => clickAction()}>Bin dabei</label>
|
||||
<label className="tw-btn tw-btn-neutral" onClick={() => clickAction!()}>Bin dabei</label>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function Welcome2({ clickAction }: ModalProps) {
|
||||
export function Welcome2({ clickAction }: ChapterProps) {
|
||||
return (
|
||||
<>
|
||||
<h3 className="tw-font-bold tw-text-lg">Veränderung passiert im echten Leben</h3>
|
||||
@ -31,13 +32,13 @@ export function Welcome2({ clickAction }: ModalProps) {
|
||||
<br /><br />
|
||||
Darum tauchen wir wieder in das echte Leben ein und nutzen digitale Medien nur dort, wo sie uns wirklich helfen in echt zusammen zu kommen</p>
|
||||
<div className="tw-modal-action">
|
||||
<label className="tw-btn" onClick={() => clickAction()}>Alles klar</label>
|
||||
<label className="tw-btn tw-btn-neutral" onClick={() => clickAction!()}>Alles klar</label>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function Welcome3({ clickAction }: ModalProps) {
|
||||
export function Welcome3({ clickAction }: ChapterProps) {
|
||||
return (
|
||||
<>
|
||||
<h3 className="tw-font-bold tw-text-lg"> Gemeinsam erschaffen wir Strukturen </h3>
|
||||
@ -49,7 +50,7 @@ export function Welcome3({ clickAction }: ModalProps) {
|
||||
<li>🚐 Mobilität</li>
|
||||
</ul>
|
||||
<div className="tw-modal-action">
|
||||
<label htmlFor="tw-my-modal" onClick={() => clickAction()} className="tw-btn">Ich mach mit</label>
|
||||
<button className="tw-btn tw-btn-neutral" onClick={() => clickAction!()}>Ich mach mit</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
@ -61,10 +62,7 @@ export function Modal() {
|
||||
const [chapter, setChapter] = useState<number>(1);
|
||||
|
||||
const close = () => {
|
||||
if (document.getElementById('my-modal')) {
|
||||
const el = document.getElementById('my-modal') as HTMLInputElement
|
||||
el.checked = false;
|
||||
}
|
||||
window.my_modal_3.close();
|
||||
}
|
||||
|
||||
const ActiveChapter = () => {
|
||||
@ -72,12 +70,11 @@ export function Modal() {
|
||||
case 1:
|
||||
return <Welcome1 clickAction={() => { setChapter(2) }} />
|
||||
case 2:
|
||||
return <Welcome2 clickAction={() => setChapter(3)} />
|
||||
return <Welcome2 clickAction={() => { setChapter(3) }} />
|
||||
case 3:
|
||||
return <Welcome3 clickAction={() => {
|
||||
close()
|
||||
setChapter(1)
|
||||
|
||||
setChapter(1);
|
||||
close();
|
||||
}} />
|
||||
default: return <></>
|
||||
};
|
||||
@ -85,14 +82,17 @@ export function Modal() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Put this part before </body> tag */}
|
||||
<input type="checkbox" id="my-modal" className="tw-modal-toggle" />
|
||||
<div className="tw-modal">
|
||||
<label className="tw-modal-box tw-relative" htmlFor="">
|
||||
<label htmlFor="my-modal" className="tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2">✕</label>
|
||||
|
||||
{/* You can open the modal using ID.showModal() method */}
|
||||
<dialog id="my_modal_3" className="tw-modal">
|
||||
<form method="dialog" className="tw-modal-box">
|
||||
<button className="tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2">✕</button>
|
||||
<ActiveChapter />
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<form method="dialog" className="tw-modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -6,8 +6,6 @@ export function Quests() {
|
||||
|
||||
if (open) return (
|
||||
<>
|
||||
<input type="checkbox" id="quests" className="tw-modal-toggle" />
|
||||
|
||||
<div className="tw-card tw-w-48 tw-bg-base-100 tw-shadow-xl tw-absolute tw-bottom-4 tw-left-4 tw-z-1000">
|
||||
<div className="tw-card-body tw-p-4 tw-pt-0">
|
||||
<div className="tw-card-actions tw-justify-end">
|
||||
|
||||
@ -28,10 +28,16 @@ function MapEventListener(props: MapEventListenerProps) {
|
||||
props.setItemFormPopup({ layer: props.selectMode, position: e.latlng })
|
||||
props.setSelectMode(null)
|
||||
}
|
||||
},
|
||||
resize: () => {
|
||||
console.log("resize");
|
||||
|
||||
}
|
||||
})
|
||||
return null
|
||||
}
|
||||
// for refreshing map on resize (needs to be implemented)
|
||||
const mapDivRef = React.createRef();
|
||||
|
||||
/** This is a description of the foo function. */
|
||||
function UtopiaMap({
|
||||
@ -52,7 +58,7 @@ function UtopiaMap({
|
||||
<TagsProvider initialTags={[]}>
|
||||
<ItemsProvider initialItems={[]}>
|
||||
<div className={(selectMode != null ? "crosshair-cursor-enabled" : undefined)}>
|
||||
<MapContainer style={{ height: height, width: width }} center={center} zoom={zoom}>
|
||||
<MapContainer ref={mapDivRef} style={{ height: height, width: width }} center={center} zoom={zoom}>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://tile.osmand.net/hd/{z}/{x}/{y}.png" />
|
||||
|
||||
@ -4,3 +4,9 @@ export {AuthProviderDirectus, useAuthDirectus} from "./Components/Auth"
|
||||
export {Settings} from './Components/Profile'
|
||||
export {Quests, Modal} from './Components/Gaming'
|
||||
import "./index.css"
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
my_modal_3: any;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user