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,
LinkIcon,
LocationMarkerIcon,
PencilAltIcon,
PlusIcon,
TrashIcon,
UserAddIcon,
@ -115,6 +116,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
});
const [users, setUsers] = useState<AdvancedOptions["users"]>([]);
const [editIcon, setEditIcon] = useState(true);
const [enteredAvailability, setEnteredAvailability] = useState();
const [showLocationModal, setShowLocationModal] = useState(false);
const [showAddCustomModal, setShowAddCustomModal] = useState(false);
@ -358,16 +362,24 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<Shell
title={`${eventType.title} | Event Type`}
heading={
<input
ref={titleRef}
type="text"
name="title"
id="title"
required
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"
placeholder="Quick Chat"
defaultValue={eventType.title}
/>
<div className="relative group" onClick={() => setEditIcon(false)}>
<input
ref={titleRef}
type="text"
name="title"
id="title"
required
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"
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 || ""}>
<div className="block sm:flex">