diff --git a/package.json b/package.json index f41e1282..fd71a943 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,6 @@ { "name": "utopia-ui", -<<<<<<< HEAD - "version": "3.0.0-alpha.204", -======= "version": "3.0.0-alpha.215", ->>>>>>> 8dc8779fe58040fb5c2a763d6519e57ddffc7ab7 "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage:": "https://utopia-os.org/", diff --git a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx new file mode 100644 index 00000000..158b9619 --- /dev/null +++ b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx @@ -0,0 +1,25 @@ +import { useNavigate } from "react-router-dom" + +export const GratitudeControl = () => { + const navigate = useNavigate(); + return ( +
+ { + + +
{ + navigate("/select-user") + }}> + + + + + + +
+ + } + +
+ ) +} diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx index 16a7f3eb..ec1b0d52 100644 --- a/src/Components/Map/UtopiaMap.tsx +++ b/src/Components/Map/UtopiaMap.tsx @@ -20,6 +20,7 @@ import {FilterControl} from "./Subcomponents/Controls/FilterControl"; import {LayerControl} from "./Subcomponents/Controls/LayerControl"; import { useLayers } from "./hooks/useLayers"; import { useAddVisibleLayer } from "./hooks/useFilter"; +import { GratitudeControl } from "./Subcomponents/Controls/GratitudeControl"; // for refreshing map on resize (needs to be implemented) const mapDivRef = React.createRef(); @@ -60,21 +61,13 @@ function UtopiaMap({ const selectNewItemPosition = useSelectPosition(); const setSelectNewItemPosition = useSetSelectPosition(); - const location = useLocation(); const setClusterRef = useSetClusterRef(); const clusterRef = useClusterRef(); const setMapClicked = useSetMapClicked(); const [itemFormPopup, setItemFormPopup] = useState(null); - const [embedded, setEmbedded] = useState(true) - useEffect(() => { - let params = new URLSearchParams(location.search); - let urlPosition = params.get("position"); - let embedded = params.get("embedded"); - embedded != "true" && setEmbedded(false) - }, [location]); const layers = useLayers(); @@ -110,6 +103,7 @@ function UtopiaMap({ {showFilterControl && } {/*todo: needed layer handling is located LayerControl*/} {showLayerControl && } + {} { let params = new URLSearchParams(location.search); @@ -89,51 +39,6 @@ export const TabsForm = ({ item, state, setState, updatePermission, linkItem, un text: v }))} containerStyle='tw-h-full' inputStyle='tw-h-full tw-border-t-0 tw-rounded-tl-none' /> - {item.layer?.itemType.questlog && - <> - updateActiveTab(2)} /> - -
- - - {attestations.map((a, i) => - - - - - - )} - -
-
{a.symbol}
- - 		-
{a.text}
- - 		-
-
-
- Avatar Tailwind CSS Component -
-
-
-
{a.from}
-
{a.date}
- -
-
-
- -
- - } {item.layer?.itemType.offers_and_needs && <> updateActiveTab(3)} /> diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx index 6f8d4c19..27f58e0c 100644 --- a/src/Components/Profile/Templates/TabsView.tsx +++ b/src/Components/Profile/Templates/TabsView.tsx @@ -41,11 +41,62 @@ export const TabsView = ({ item, offers, needs, relations, updatePermission, loa urlTab ? setActiveTab(Number(urlTab)) : setActiveTab(1); }, [location]) + const attestations = [{ + from: "Timo", + avatar: "https://api.utopia-lab.org/assets/262117f8-feb6-444f-9bd2-e84087285760?width=80&heigth=80", + symbol: "🥇", + text: "1. Platz im Bogenschießen", + date: "21.06.2024", +}, +{ + from: "Sebastian", + avatar: "https://api.utopia-lab.org/assets/7510a082-882b-41c3-aa7d-5a19f9502f25?width=80&heigth=80", + symbol: "🌱", + text: "danke fürs Rasen mähen", + date: "29.06.2024", +}, +{ + from: "Yurij", + avatar: "https://api.utopia-lab.org/assets/abe62291-35ad-45de-b978-e5906d8a3eb6?width=80&heigth=80", + symbol: "🏆", + text: "bester Coder ever", + date: "04.07.2024", +}, +{ + from: "Luca", + avatar: "https://api.utopia-lab.org/assets/e285e653-36e8-4211-a69d-00053c1f610e?width=80&heigth=80", + symbol: "🙏", + text: "Vielen Dank für deine Hilfe!!!", + date: "04.07.2024", +}, +{ + from: "Lisa", + avatar: "https://i.pinimg.com/originals/c0/ed/08/c0ed088cd6532d4fd27396aefddac57c.jpg", + symbol: "❤️", + text: "Vielen Dank für deine Hilfe!!!", + date: "04.07.2024", +}, +{ + from: "Timo", + avatar: "https://api.utopia-lab.org/assets/262117f8-feb6-444f-9bd2-e84087285760?width=80&heigth=80", + symbol: "🥈", + text: "2. Platz im Bogenschießen", + date: "21.06.2024", +}, +{ + from: "Anton", + avatar: "https://api.utopia-lab.org/assets/007dc678-6073-4ad1-9b47-f2cfe1dca582?width=80&heigth=80", + symbol: "🌱", + text: "danke fürs Rasen mähen", + date: "29.06.2024" +}, +] + return (
updateActiveTab(1)} />
@@ -54,12 +105,56 @@ export const TabsView = ({ item, offers, needs, relations, updatePermission, loa }
+ {item.layer?.itemType.questlog && + <> + updateActiveTab(2)} /> +
+ + + {attestations.map((a, i) => + + + + + + )} + +
+
{a.symbol}
+ + 		+
{a.text}
+ + 		+
+
+
+ Avatar Tailwind CSS Component +
+
+
+
{a.from}
+
{a.date}
+ +
+
+
+ +
+ + } {item.layer?.itemType.offers_and_needs && <> - updateActiveTab(3)} /> + updateActiveTab(3)} />
@@ -97,7 +192,7 @@ export const TabsView = ({ item, offers, needs, relations, updatePermission, loa {item.layer?.itemType.relations && <> - updateActiveTab(7)} /> + updateActiveTab(7)} />
diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx index d8aeaec3..1dc7226d 100644 --- a/src/Components/Templates/AttestationForm.tsx +++ b/src/Components/Templates/AttestationForm.tsx @@ -1,65 +1,79 @@ -import * as react from 'react' -import { useState } from 'react' -import { TitleCard } from './TitleCard' -import { timeAgo } from '../../Utils/TimeAgo' + import { MapOverlayPage } from './MapOverlayPage' import { useItems } from '../Map/hooks/useItems' import { useAssetApi } from '../AppShell/hooks/useAssets' +import { EmojiPicker } from './EmojiPicker'; +import { Link } from 'react-router-dom'; +import { ColorPicker } from '../Profile/Subcomponents/ColorPicker'; +import { useRef, useState } from 'react'; +import { Item, UserItem } from '../../types'; +import { useEffect } from 'react'; -export const AttestationForm = ({ userType }: { userType: string }) => { +export const AttestationForm = () => { const items = useItems(); - const users = items.filter(i => i.layer?.itemType.name == userType) const assetsApi = useAssetApi(); + const [users, setUsers] = useState>(); + + useEffect(() => { + let params = new URLSearchParams(location.search); + let to_user_ids = params.get("to"); + setUsers(items.filter(i => to_user_ids?.includes(i.id))) + }, [items, location]) + + const [inputValue, setInputValue] = useState(''); + const inputRef = useRef(null); + + useEffect(() => { + if (inputRef.current) { + inputRef.current.style.width = 'auto'; + inputRef.current.style.width = `${inputRef.current.scrollWidth+20}px`; + } + }, [inputValue]); + + const handleChange = (event: React.ChangeEvent) => { + setInputValue(event.target.value); + }; + + + return ( - - -
Select User
- - - {/* Team Member list in table format loaded constant */} -
- - - { - users.map((l, k) => { - return ( - - - - - ) - }) - } - -
- - -
- {l.image ?
-
- Avatar -
-
: -
} -
-
{l.name}
-
-
-
+ +
Gratitude
+
to
+
+ {users && users.map((u, k) => ( +
+ {u.image ?
+
+ Avatar +
+
: +
} +
+
{u.name}
+
+
+ ), ", ")}
- + +
+
+
+ +
+
+
+ +
+
+
) -} - -const TEAM_MEMBERS = [ - { name: "Alex", avatar: "https://reqres.in/img/faces/1-image.jpg", email: "alex@dashwind.com", role: "Owner", joinedOn: timeAgo(new Date()), lastActive: "5 hr ago" }, - { name: "Ereena", avatar: "https://reqres.in/img/faces/2-image.jpg", email: "ereena@dashwind.com", role: "Admin", joinedOn: timeAgo(new Date()), lastActive: "15 min ago" }, - { name: "John", avatar: "https://reqres.in/img/faces/3-image.jpg", email: "jhon@dashwind.com", role: "Admin", joinedOn: timeAgo(new Date()), lastActive: "20 hr ago" }, - { name: "Matrix", avatar: "https://reqres.in/img/faces/4-image.jpg", email: "matrix@dashwind.com", role: "Manager", joinedOn: timeAgo(new Date()), lastActive: "1 hr ago" }, - { name: "Virat", avatar: "https://reqres.in/img/faces/5-image.jpg", email: "virat@dashwind.com", role: "Support", joinedOn: timeAgo(new Date()), lastActive: "40 min ago" }, - { name: "Miya", avatar: "https://reqres.in/img/faces/6-image.jpg", email: "miya@dashwind.com", role: "Support", joinedOn: timeAgo(new Date()), lastActive: "5 hr ago" }, - -] +} \ No newline at end of file diff --git a/src/Components/Templates/EmojiPicker.tsx b/src/Components/Templates/EmojiPicker.tsx new file mode 100644 index 00000000..841a5779 --- /dev/null +++ b/src/Components/Templates/EmojiPicker.tsx @@ -0,0 +1,95 @@ +import { useState } from 'react'; + +export const EmojiPicker = () => { + const [selectedEmoji, setSelectedEmoji] = useState('select badge'); + const [selectedShape, setSelectedShape] = useState('circle'); + const [selectedColor, setSelectedColor] = useState('#fff0d6'); + + + const [isOpen, setIsOpen] = useState(false); + + const emojis = [ + '❤️', '🙏', '👍', '🌻',, '✨', '☀️', + '🔥', '🪵', '💧', '🎶', '🎨','🍄', + '📝', '✉️', '🧩','💡', '🎓', '💬', + '🛠', '💻', '🕹', '🖨', '🚐', '🛒', + '⚽️', '🧵', '👀', '🌱', + '🏕', '💪', '🎁', '🎉', + '🥕', '🥇', '🥈', '🥉']; + const shapes = ["squircle", "circle", "hexagon-2"]; + + const colors = ["#FF99C8", "#fff0d6", "#FCF6BD", "#D0F4DE", "#A9DEF9", "#E4C1F9", "#de324c", "#f4895f", "#f8e16f", "#95cf92", "#369acc", "#9656a2"] + + + const toggleDropdown = () => { + setIsOpen(!isOpen); + }; + + const selectEmoji = (emoji) => { + setSelectedEmoji(emoji); + setIsOpen(false); + }; + + const selectShape = (shape) => { + setSelectedShape(shape); + setIsOpen(false); + }; + + const selectColor = (color) => { + setSelectedColor(color); + setIsOpen(false); + }; + + + + return ( + <> +
+ {selectedEmoji} +
+ + {isOpen && ( +
+
+ {emojis.map((emoji) => ( + + ))} +
+
+
+ {shapes.map(shape => ( +
selectShape(shape)}> +
+
+ ))} +
+
+
+ {colors.map(color => ( +
selectColor(color)}> +
+
+ ))} +
+
+ + )} + + ); +}; + diff --git a/src/Components/Templates/SelectUser.tsx b/src/Components/Templates/SelectUser.tsx index e585f240..802a046f 100644 --- a/src/Components/Templates/SelectUser.tsx +++ b/src/Components/Templates/SelectUser.tsx @@ -5,6 +5,7 @@ import { timeAgo } from '../../Utils/TimeAgo' import { MapOverlayPage } from './MapOverlayPage' import { useItems } from '../Map/hooks/useItems' import { useAssetApi } from '../AppShell/hooks/useAssets' +import { Link } from 'react-router-dom' export const SelectUser = ({ userType }: { userType: string }) => { @@ -12,33 +13,35 @@ export const SelectUser = ({ userType }: { userType: string }) => { const users = items.filter(i => i.layer?.itemType.name == userType) const assetsApi = useAssetApi(); - return ( - + const [selectedUsers, setSelectedUsers] = useState>([]); -
Select User
+ return ( + + +
Gratitude to ...
{/* Team Member list in table format loaded constant */} -
+
{ - users.map((l, k) => { + users.map((u, k) => { return ( @@ -49,7 +52,7 @@ export const SelectUser = ({ userType }: { userType: string }) => {
- + setSelectedUsers(prev => [...prev, u.id])} className="tw-checkbox tw-checkbox-sm" />
- {l.image ?
+ {u.image ?
- Avatar + Avatar
:
}
-
{l.name}
+
{u.name}
- +
u,",")}>
) } diff --git a/src/Components/Templates/index.tsx b/src/Components/Templates/index.tsx index 849a97bc..cbb8fd57 100644 --- a/src/Components/Templates/index.tsx +++ b/src/Components/Templates/index.tsx @@ -1,6 +1,9 @@ +import { AttestationForm } from './AttestationForm' + export {CardPage} from './CardPage' export {TitleCard} from './TitleCard' export {MapOverlayPage} from './MapOverlayPage' export {MoonCalendar} from './MoonCalendar' export {SelectUser} from "./SelectUser" export {OverlayItemsIndexPage} from "./OverlayItemsIndexPage" +export {AttestationForm} from "./AttestationForm" diff --git a/src/index.css b/src/index.css index 9fae544a..0790b43c 100644 --- a/src/index.css +++ b/src/index.css @@ -52,6 +52,10 @@ } +.placeholder-center::placeholder { + text-align: center; +} + .custom-file-upload { cursor: pointer; } diff --git a/src/index.tsx b/src/index.tsx index 0d260528..2137b4dc 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,7 +3,7 @@ export {AppShell, Content, SideBar, Sitemap } from "./Components/AppShell" export {AuthProvider, useAuth, LoginPage, SignupPage, RequestPasswordPage, SetNewPasswordPage} from "./Components/Auth" export {UserSettings, ProfileView, ProfileForm} from './Components/Profile' export {Quests, Modal} from './Components/Gaming' -export {TitleCard, CardPage, MapOverlayPage, OverlayItemsIndexPage, MoonCalendar, SelectUser } from './Components/Templates' +export {TitleCard, CardPage, MapOverlayPage, OverlayItemsIndexPage, MoonCalendar, SelectUser, AttestationForm } from './Components/Templates' export {TextInput, TextAreaInput, SelectBox} from './Components/Input' import "./index.css" diff --git a/tailwind.config.js b/tailwind.config.js index bb9428d9..a49dda38 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,6 +4,25 @@ module.exports = { "./src/**/*.{js,jsx,ts,tsx}", "./node_modules/tw-elements/dist/js/**/*.js" ], + safelist: [ + 'tw-mask-squircle', + 'tw-mask-circle', + 'tw-mask-hexagon-2', + 'tw-mask-decagon', + 'tw-bg-[#FF99C8]', + 'tw-bg-[#fff0d6]', + 'tw-bg-[#FCF6BD]', + 'tw-bg-[#D0F4DE]', + 'tw-bg-[#A9DEF9]', + 'tw-bg-[#E4C1F9]', + 'tw-bg-[#de324c]', + 'tw-bg-[#f4895f]', + 'tw-bg-[#f8e16f]', + 'tw-bg-[#95cf92]', + 'tw-bg-[#369acc]', + 'tw-bg-[#9656a2]', + + ], theme: { extend: { zIndex: { @@ -31,7 +50,7 @@ module.exports = { 'sans': ["Helvetica", "sans-serif", 'Roboto'], }, fontSize: { - 'map': "13px" + 'map': "13px" }, lineHeight: { 'map': "1.4em" @@ -44,17 +63,18 @@ module.exports = { ], daisyui: { themes: ["light", "dark", "cupcake", "retro", "cyberpunk", "aqua", - { - docutopia: { - "primary": "#8e00ff", - "secondary": "#00bb7a", - "accent": "#006aff", - "neutral": "#231502", - "base-content": "#ffad6b", - "base-100": "#440844", - }, - },] + { + docutopia: { + "primary": "#8e00ff", + "secondary": "#00bb7a", + "accent": "#006aff", + "neutral": "#231502", + "base-content": "#ffad6b", + "base-100": "#440844", + }, + },] }, prefix: 'tw-', content: ['./src/**/*.{js,jsx,ts,tsx}'], -} + +} \ No newline at end of file