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

- preparation for presentation

Browse Source
This commit is contained in:
Sebastian Stein 2024-06-28 14:37:48 +02:00
parent 4181460ba1
commit c27888c3fd
5 changed files with 62 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
View File

@ -9,18 +9,22 @@ import { getValue } from '../../../../Utils/GetValue';
import remarkBreaks from 'remark-breaks'; import remarkBreaks from 'remark-breaks';
import { decodeTag } from '../../../../Utils/FormatTags'; import { decodeTag } from '../../../../Utils/FormatTags';
export const TextView = ({ item, truncate = false, itemTextField }: { item?: Item, truncate?: boolean, itemTextField?: string }) => { export const TextView = ({ item, truncate = false, itemTextField, rawText }: { item?: Item, truncate?: boolean, itemTextField?: string, rawText?: string }) => {
const tags = useTags(); const tags = useTags();
const addFilterTag = useAddFilterTag(); const addFilterTag = useAddFilterTag();
let text = ""; let text = "";
let replacedText = "";
if (itemTextField && item) text = getValue(item, itemTextField); if (rawText)
else text = item?.layer?.itemTextField && item ? getValue(item, item.layer?.itemTextField) : ""; text = replacedText = rawText;
else if (itemTextField && item)
text = getValue(item, itemTextField);
else
text = item?.layer?.itemTextField && item ? getValue(item, item.layer?.itemTextField) : "";
if (item && text && truncate) text = truncateText(removeMarkdownKeepLinksAndParagraphs(text), 100); if (item && text && truncate) text = truncateText(removeMarkdownKeepLinksAndParagraphs(text), 100);
let replacedText;
item && text ? replacedText = fixUrls(text) : ""; item && text ? replacedText = fixUrls(text) : "";
@ -100,7 +104,7 @@ export const TextView = ({ item, truncate = false, itemTextField }: { item?: Ite
}; };
return ( return (
<Markdown className={`tw-text-map tw-leading-map `} remarkPlugins={[remarkBreaks]} components={{ <Markdown className={`tw-text-map tw-leading-map tw-text-sm`} remarkPlugins={[remarkBreaks]} components={{
p: CustomParagraph, p: CustomParagraph,
a: ({ href, children }) => { a: ({ href, children }) => {
const isYouTubeVideo = href?.startsWith('https://www.youtube.com/watch?v='); const isYouTubeVideo = href?.startsWith('https://www.youtube.com/watch?v=');

21
src/Components/Profile/ContactInfo.tsx
View File

@ -8,18 +8,26 @@ const ContactInfo = ({ email, name, avatar } : {email: string, name: string, ava
<div className="tw-bg-gray-100 tw-my-10 tw-p-6"> <div className="tw-bg-gray-100 tw-my-10 tw-p-6">
<h2 className="tw-text-lg tw-font-semibold">Du hast Fragen?</h2> <h2 className="tw-text-lg tw-font-semibold">Du hast Fragen?</h2>
<div className="tw-mt-4 tw-flex tw-items-center"> <div className="tw-mt-4 tw-flex tw-items-center">
<div className="tw-w-20 tw-h-20 tw-bg-gray-200 tw-rounded-full tw-mr-5 tw-flex tw-items-center tw-justify-center"> <div className="tw-mr-5 tw-flex tw-items-center tw-justify-center">
<div className="tw-avatar">
<div
className="tw-w-20 tw-h-20 tw-bg-gray-200 rounded-full tw-flex tw-items-center tw-justify-center overflow-hidden">
{avatar ? ( {avatar ? (
<img src={assetsApi.url+avatar} alt={name} className="tw-w-full tw-h-full tw-rounded-full" /> <img src={assetsApi.url + avatar} alt={name}
className="tw-w-full tw-h-full tw-object-cover"/>
) : ( ) : (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="tw-w-6 tw-h-6" <div className="tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full">
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="tw-w-12 tw-h-12"
fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
strokeLinejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle> <circle cx="12" cy="7" r="4"></circle>
</svg> </svg>
</div>
)} )}
</div> </div>
</div>
</div>
<div className="tw-text-sm"> <div className="tw-text-sm">
<p className="tw-font-semibold">{name}</p> <p className="tw-font-semibold">{name}</p>
<a href={`mailto:${email}`} className="tw-mt-2 tw-text-green-500 tw-flex tw-items-center"> <a href={`mailto:${email}`} className="tw-mt-2 tw-text-green-500 tw-flex tw-items-center">
@ -35,6 +43,7 @@ const ContactInfo = ({ email, name, avatar } : {email: string, name: string, ava
</div> </div>
</div> </div>
</div> </div>
)} )
}
export default ContactInfo; export default ContactInfo;

33
src/Components/Profile/OverlayItemProfile.tsx
View File

@ -25,7 +25,6 @@ import { TagView } from '../Templates/TagView';
import RelationCard from "./RelationCard"; import RelationCard from "./RelationCard";
import ContactInfo from "./ContactInfo"; import ContactInfo from "./ContactInfo";
import ProfileSubHeader from "./ProfileSubHeader"; import ProfileSubHeader from "./ProfileSubHeader";
import SocialShareBar from './SocialShareBar';
export function OverlayItemProfile() { export function OverlayItemProfile() {
@ -276,7 +275,7 @@ export function OverlayItemProfile() {
const d = { const d = {
groupName: "Gruppe Berlin-Britz", groupName: "Gruppe Berlin-Britz",
location: "12347 Berlin-Britz", location: "🇩🇪 12347 Berlin",
country: "Berlin, Deutschland", country: "Berlin, Deutschland",
countryCode: "de", countryCode: "de",
contact: { contact: {
@ -298,6 +297,7 @@ export function OverlayItemProfile() {
}; };
return ( return (
<> <>
{item && {item &&
@ -305,27 +305,32 @@ export function OverlayItemProfile() {
className={`${item.layer?.itemType.onepager && '!tw-p-0'} tw-mx-4 tw-mt-4 tw-max-h-[calc(100dvh-96px)] tw-h-[calc(100dvh-96px)] md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-min-w-80 tw-max-w-3xl !tw-left-0 sm:!tw-left-auto tw-top-0 tw-bottom-0 tw-transition-opacity tw-duration-500 ${!selectPosition ? 'tw-opacity-100 tw-pointer-events-auto' : 'tw-opacity-0 tw-pointer-events-none'}`}> className={`${item.layer?.itemType.onepager && '!tw-p-0'} tw-mx-4 tw-mt-4 tw-max-h-[calc(100dvh-96px)] tw-h-[calc(100dvh-96px)] md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-min-w-80 tw-max-w-3xl !tw-left-0 sm:!tw-left-auto tw-top-0 tw-bottom-0 tw-transition-opacity tw-duration-500 ${!selectPosition ? 'tw-opacity-100 tw-pointer-events-auto' : 'tw-opacity-0 tw-pointer-events-none'}`}>
<> <>
<div className={`${item.layer?.itemType.onepager && 'tw-p-4'}`}> <div className="tw-px-6 tw-pt-6">
<HeaderView showAddress api={item.layer?.api} item={item} deleteCallback={handleDelete} editCallback={() => navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} /> <HeaderView api={item.layer?.api} item={item} deleteCallback={handleDelete} editCallback={() => navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} />
<SocialShareBar url={""} title={"title"} /> <ProfileSubHeader
location={d.location}
type={"Regionalgruppe"}
url={d.url}
title={d.title}
/>
</div> </div>
<div className='tw-h-full tw-overflow-y-auto fade'> <div className='tw-h-full tw-overflow-y-auto fade'>
{item.layer?.itemType.onepager && {item.layer?.itemType.onepager &&
<> <>
{item.user_created.first_name && (
{/* Description Section */}
<TextView item={item}></TextView>
{d.contact && (
<ContactInfo name={item.user_created.first_name} avatar={item.user_created.avatar} email={item.contact} /> <ContactInfo name={item.user_created.first_name} avatar={item.user_created.avatar} email={item.contact} />
)} )}
{/* Description Section */}
<div className="tw-my-10 tw-px-6">
<h2 className="tw-text-lg tw-font-semibold">Beschreibung</h2>
<p className="tw-mt-2 tw-text-sm tw-text-gray-600">
<TextView rawText={item.text ?? 'Keine Beschreibung vorhanden'}/>
</p>
</div>
{/* Relations Section */} {/* Relations Section */}
{d.relations && ( {d.relations && (
<div className="tw-my-10 tw-px-6"> <div className="tw-my-10 tw-px-6">

9
src/Components/Profile/ProfileSubHeader.tsx
View File

@ -18,12 +18,11 @@ const flags = {
) )
}; };
const SubHeader = ({ location, country, countryCode, url, title }) => ( const SubHeader = ({ location, type, url, title }) => (
<div className="tw-px-6"> <div>
<div className="tw-flex tw-items-center tw-mt-6"> <div className="tw-flex tw-items-center tw-mt-6">
<span className="tw-text-sm tw-text-gray-600">{location}</span> <span className="tw-text-sm tw-text-gray-600">{type}</span>
<span className="tw-ml-6">{flags[countryCode] || null}</span> <span className="tw-text-sm tw-text-gray-600 tw-ml-6">{location}</span>
<span className="tw-text-sm tw-text-gray-600 tw-ml-2">{country}</span>
</div> </div>
<div className="tw-mt-4"> <div className="tw-mt-4">
<SocialShareBar url={url} title={title} /> <SocialShareBar url={url} title={title} />

2
src/Components/Profile/SocialShareBar.tsx
View File

@ -3,7 +3,6 @@ import SocialShareButton from './SocialShareButton';
const SocialShareBar = ({url, title, platforms = ['facebook', 'twitter', 'linkedin', 'xing', 'email']}) => { const SocialShareBar = ({url, title, platforms = ['facebook', 'twitter', 'linkedin', 'xing', 'email']}) => {
return ( return (
<div className="tw-flex tw-items-center tw-justify-end tw-space-x-2"> <div className="tw-flex tw-items-center tw-justify-end tw-space-x-2">
<div className="tw-flex tw-space-x-2">
{platforms.map((platform) => ( {platforms.map((platform) => (
<SocialShareButton <SocialShareButton
platform={platform} platform={platform}
@ -12,7 +11,6 @@ const SocialShareBar = ({ url, title, platforms = ['facebook', 'twitter', 'linke
/> />
))} ))}
</div> </div>
</div>
); );
}; };