admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

improve renaming user experience

Browse source
This commit is contained in:
MarconLP 2023-04-16 01:30:01 +02:00
parent bf202b958c
commit e819ce242e
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
1 changed files with 34 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/components/VideoMoreMenu.tsx
View file

@ -172,36 +172,43 @@ export default function VideoMoreMenu({ video }: Props) {
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all"> <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
<div className="sm:col-span-4"> <form
<label onSubmit={(e) => {
htmlFor="title" e.preventDefault();
className="block text-sm font-medium leading-6 text-gray-900" renameVideoMutation.mutate({
> videoId: video.id,
Video title title,
</label> });
<div className="mt-2">
<input
value={title}
onChange={(e) => setTitle(e.currentTarget.value)}
id="title"
name="title"
type="title"
autoComplete="title"
className="block w-full rounded-md border-0 px-2 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<button
type="submit"
onClick={() => {
renameVideoMutation.mutate({ videoId: video.id, title });
setRenameMenuOpen(false); setRenameMenuOpen(false);
}} }}
className="mt-2 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
> >
Save <div className="sm:col-span-4">
</button> <label
htmlFor="title"
className="block text-sm font-medium leading-6 text-gray-900"
>
Video title
</label>
<div className="mt-2">
<input
value={title}
onChange={(e) => setTitle(e.currentTarget.value)}
id="title"
name="title"
type="title"
autoComplete="title"
className="block w-full rounded-md border-0 px-2 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<button
type="submit"
className="mt-2 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Save
</button>
</form>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>