mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

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

Browse source
This commit is contained in:
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

12
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,6 +362,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
<Shell <Shell
title={`${eventType.title} | Event Type`} title={`${eventType.title} | Event Type`}
heading={ heading={
<div className="relative group" onClick={() => setEditIcon(false)}>
<input <input
ref={titleRef} ref={titleRef}
type="text" type="text"
@ -368,6 +373,13 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
placeholder="Quick Chat" placeholder="Quick Chat"
defaultValue={eventType.title} 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">