antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-01-15 01:14:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

ItemViewPopup layout

Browse Source
This commit is contained in:
Anton 2024-01-06 13:37:40 +01:00
parent ac63672290
commit 49ab4a9989
4 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
View File

@ -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">

19
src/Components/Map/Subcomponents/ItemViewPopup.tsx
View File

@ -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>
)

3
src/Components/Map/index.tsx
View File

@ -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'
export {StartEndView} from './Subcomponents/ItemPopupComponents/StartEndView'
export {PopupButton} from './Subcomponents/ItemPopupComponents/PopupButton'

2
src/index.tsx
View File

@ -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'