From 49ab4a99895cb9af5de1e7c4f5b8515ad4180c90 Mon Sep 17 00:00:00 2001
From: Anton <mail@antontranelis.de>
Date: Sat, 6 Jan 2024 13:37:40 +0100
Subject: [PATCH] ItemViewPopup layout

---
 .../ItemPopupComponents/HeaderView.tsx        |  2 +-
 .../Map/Subcomponents/ItemViewPopup.tsx       | 19 ++++++++++++++++---
 src/Components/Map/index.tsx                  |  3 ++-
 src/index.tsx                                 |  2 +-
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index 00f2574b..0452be4c 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -73,7 +73,7 @@ export function HeaderView({ item, title, avatar, setItemFormPopup }: {
                 <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
               </svg>
             </label>
-            <ul tabIndex={0} className="tw-dropdown-content tw-menu tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box">
+            <ul tabIndex={0} className="tw-dropdown-content tw-menu tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box tw-z-1000">
               {item.layer.api.updateItem && hasUserPermission(item.layer.api?.collectionName!, "update") && <li>
                 <a className="!tw-text-base-content" onClick={openEditPopup}>
                   <svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
diff --git a/src/Components/Map/Subcomponents/ItemViewPopup.tsx b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
index c61d93da..8cb3fd49 100644
--- a/src/Components/Map/Subcomponents/ItemViewPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
@@ -6,6 +6,7 @@ import { HeaderView } from './ItemPopupComponents/HeaderView'
 import { TextView } from './ItemPopupComponents/TextView'
 import { useAssetApi } from '../../AppShell/hooks/useAssets'
 import { timeAgo } from '../../../Utils/TimeAgo'
+import { useState } from 'react'
 
 
 export interface ItemViewPopupProps {
@@ -19,13 +20,13 @@ export interface ItemViewPopupProps {
 
 export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: any) => {
 
-
+  const [infoExpanded, setInfoExpanded] = useState<Boolean>(false);
 
   return (
     <LeafletPopup ref={ref} maxHeight={377} minWidth={275} maxWidth={275} autoPanPadding={[20, 80]}>
       <div className='tw-bg-base-100 tw-text-base-content'>
         <HeaderView item={props.item} title={props.title} avatar={props.avatar} setItemFormPopup={props.setItemFormPopup} />
-        <div className='tw-overflow-y-auto tw-max-h-72'>
+        <div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64'>
           {props.children ?
 
             React.Children.toArray(props.children).map((child) =>
@@ -38,9 +39,21 @@ export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: a
             <TextView item={props.item} />
 
           }
-          <p className={`tw-italic !tw-my-0 tw-text-gray-500 tw-float-right`}>{`posted ${props.item && props.item.user_created &&  props.item.user_created.first_name? `by ${props.item.user_created.first_name}` : ""} ${timeAgo(props.item.date_created!)}`}</p>
 
         </div>
+        <div className='tw-flex -tw-mb-1  tw-flex-row'>
+
+
+          {
+            infoExpanded ?
+              <p className={`tw-italic tw-min-h-[21px] !tw-my-0 tw-text-gray-500 tw-cursor-pointer`} onClick={() => setInfoExpanded(false)}>{`posted ${props.item && props.item.user_created && props.item.user_created.first_name ? `by ${props.item.user_created.first_name}` : ""} ${timeAgo(props.item.date_created!)}`}</p>
+              :
+              <p className="!tw-my-0 tw-min-h-[21px] tw-font-bold tw-cursor-pointer tw-text-gray-500" onClick={() => setInfoExpanded(true)}>ⓘ</p>
+          }
+          <div className='tw-grow'></div>
+{ //**        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="tw-place-self-end tw-w-4 tw-h-4 tw-mb-1 tw-cursor-pointer"><path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></svg> */ 
+ }
+        </div>
       </div>
     </LeafletPopup>
   )
diff --git a/src/Components/Map/index.tsx b/src/Components/Map/index.tsx
index f165b6af..ff42e8cb 100644
--- a/src/Components/Map/index.tsx
+++ b/src/Components/Map/index.tsx
@@ -8,4 +8,5 @@ export {PopupTextAreaInput} from './Subcomponents/ItemPopupComponents/PopupTextA
 export {PopupStartEndInput} from './Subcomponents/ItemPopupComponents/PopupStartEndInput';
 export {PopupTextInput} from './Subcomponents/ItemPopupComponents/PopupTextInput';
 export {TextView} from './Subcomponents/ItemPopupComponents/TextView';
-export {StartEndView} from './Subcomponents/ItemPopupComponents/StartEndView'
\ No newline at end of file
+export {StartEndView} from './Subcomponents/ItemPopupComponents/StartEndView'
+export {PopupButton} from './Subcomponents/ItemPopupComponents/PopupButton'
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 50905fa4..651044e2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-export { UtopiaMap, Layer, Tags, Permissions, ItemForm, ItemView, PopupTextAreaInput, PopupStartEndInput, PopupTextInput, TextView, StartEndView } from './Components/Map';
+export { UtopiaMap, Layer, Tags, Permissions, ItemForm, ItemView, PopupTextAreaInput, PopupStartEndInput, PopupTextInput, PopupButton, TextView, StartEndView } from './Components/Map';
 export {AppShell, Content, SideBar} from "./Components/AppShell"
 export {AuthProvider, useAuth, LoginPage, SignupPage} from "./Components/Auth"
 export {UserSettings, ProfileSettings} from './Components/Profile'