public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added edit icon to event-type title input to make editing more obvious (#848)

pull/849/head^2
Peer Richelsen 2021-10-03 13:32:04 +01:00 committed by GitHub
parent 89e5da15df
commit f70d92df7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
pages/event-types/[type].tsx
View File

@ -8,6 +8,7 @@ import {
ExternalLinkIcon, ExternalLinkIcon,
LinkIcon, LinkIcon,
LocationMarkerIcon, LocationMarkerIcon,
PencilAltIcon,
PlusIcon, PlusIcon,
TrashIcon, TrashIcon,
UserAddIcon, UserAddIcon,
@ -115,6 +116,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
}); });
const [users, setUsers] = useState<AdvancedOptions["users"]>([]); const [users, setUsers] = useState<AdvancedOptions["users"]>([]);
const [editIcon, setEditIcon] = useState(true);
const [enteredAvailability, setEnteredAvailability] = useState(); const [enteredAvailability, setEnteredAvailability] = useState();
const [showLocationModal, setShowLocationModal] = useState(false); const [showLocationModal, setShowLocationModal] = useState(false);
const [showAddCustomModal, setShowAddCustomModal] = useState(false); const [showAddCustomModal, setShowAddCustomModal] = useState(false);
@ -358,16 +362,24 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<Shell <Shell
title={`${eventType.title} | Event Type`} title={`${eventType.title} | Event Type`}
heading={ heading={
<input <div className="relative group" onClick={() => setEditIcon(false)}>
ref={titleRef} <input
type="text" ref={titleRef}
name="title" type="text"
id="title" name="title"
required id="title"
className="pl-0 w-full text-xl font-bold focus:text-black text-gray-500 hover:text-gray-700 bg-transparent border-none cursor-pointer focus:ring-0 focus:outline-none" required
placeholder="Quick Chat" className="pl-0 w-full text-xl font-bold focus:text-black text-gray-500 hover:text-gray-700 bg-transparent border-none cursor-pointer focus:ring-0 focus:outline-none"
defaultValue={eventType.title} placeholder="Quick Chat"
/> defaultValue={eventType.title}
/>
{editIcon && (
<PencilAltIcon
style={{ top: 14, left: `${eventType.title.length * 10 + 8}` }}
className="group-hover:text-gray-700 text-gray-500 absolute left-0 w-4 h-4 inline"
/>
)}
</div>
} }
subtitle={eventType.description || ""}> subtitle={eventType.description || ""}>
<div className="block sm:flex"> <div className="block sm:flex">