Skip to content

C
coopwire-hypothesis
Commit 099152fb authored by Alejandro Celaya's avatar Alejandro Celaya Committed by Alejandro Celaya
Browse files
Options

Move user select first in export annotations dialog

parent 28f09161
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 67 deletions
src/sidebar/components/ShareDialog/ExportAnnotations.tsx
View file @ 099152fb
...@@ -210,7 +210,7 @@ function ExportAnnotations({ ...@@ -210,7 +210,7 @@ function ExportAnnotations({
> >
{exportableAnnotations.length > 0 ? ( {exportableAnnotations.length > 0 ? (
<> <>
<p className="text-color-text-light mb-3"> <p className="text-color-text-light">
<Link <Link
variant="text-light" variant="text-light"
underline="always" underline="always"
...@@ -221,75 +221,81 @@ function ExportAnnotations({ ...@@ -221,75 +221,81 @@ function ExportAnnotations({
</Link>{' '} </Link>{' '}
about copying and exporting annotations. about copying and exporting annotations.
</p> </p>
<label <div className="flex flex-col gap-y-3">
data-testid="export-count" <label htmlFor={userSelectId} className="font-medium">
htmlFor={fileInputId} Select which user{"'"}s annotations to export:
className="font-medium" </label>
> <SelectNext
Name of export file: value={selectedUser}
</label> onChange={setSelectedUser}
<div className="flex"> buttonId={userSelectId}
<Input buttonContent={
classes="grow" <UserAnnotationsListItem userAnnotations={selectedUser} />
data-testid="export-filename"
id={fileInputId}
defaultValue={defaultFilename}
value={customFilename}
onChange={e =>
setCustomFilename((e.target as HTMLInputElement).value)
} }
required data-testid="user-select"
maxLength={250} >
/> <SelectNext.Option value={allAnnotationsOption}>
{exportFormatsEnabled && ( <UserAnnotationsListItem
<div className="grow-0 ml-2 min-w-[5rem]"> userAnnotations={allAnnotationsOption}
<SelectNext />
value={exportFormat} </SelectNext.Option>
onChange={setExportFormat} {userList.map(userInfo => (
buttonContent={exportFormat.shortTitle ?? exportFormat.title} <SelectNext.Option key={userInfo.userid} value={userInfo}>
data-testid="export-format-select" <UserAnnotationsListItem userAnnotations={userInfo} />
right </SelectNext.Option>
> ))}
{exportFormats.map(exportFormat => ( </SelectNext>
<SelectNext.Option <label
key={exportFormat.value} data-testid="export-count"
value={exportFormat} htmlFor={fileInputId}
> className="font-medium"
<div className="flex-col gap-y-2"> >
<div className="font-bold" data-testid="format-name"> Name of export file:
{exportFormat.title} </label>
</div> <div className="flex">
<div data-testid="format-description"> <Input
{exportFormat.description} classes="grow"
data-testid="export-filename"
id={fileInputId}
defaultValue={defaultFilename}
value={customFilename}
onChange={e =>
setCustomFilename((e.target as HTMLInputElement).value)
}
required
maxLength={250}
/>
{exportFormatsEnabled && (
<div className="grow-0 ml-2 min-w-[5rem]">
<SelectNext
value={exportFormat}
onChange={setExportFormat}
buttonContent={
exportFormat.shortTitle ?? exportFormat.title
}
data-testid="export-format-select"
right
>
{exportFormats.map(exportFormat => (
<SelectNext.Option
key={exportFormat.value}
value={exportFormat}
>
<div className="flex-col gap-y-2">
<div className="font-bold" data-testid="format-name">
{exportFormat.title}
</div>
<div data-testid="format-description">
{exportFormat.description}
</div>
</div> </div>
</div> </SelectNext.Option>
</SelectNext.Option> ))}
))} </SelectNext>
</SelectNext> </div>
</div> )}
)} </div>
</div> </div>
<label htmlFor={userSelectId} className="block font-medium">
Select which user{"'"}s annotations to export:
</label>
<SelectNext
value={selectedUser}
onChange={setSelectedUser}
buttonId={userSelectId}
buttonContent={
<UserAnnotationsListItem userAnnotations={selectedUser} />
}
data-testid="user-select"
>
<SelectNext.Option value={allAnnotationsOption}>
<UserAnnotationsListItem userAnnotations={allAnnotationsOption} />
</SelectNext.Option>
{userList.map(userInfo => (
<SelectNext.Option key={userInfo.userid} value={userInfo}>
<UserAnnotationsListItem userAnnotations={userInfo} />
</SelectNext.Option>
))}
</SelectNext>
</> </>
) : ( ) : (
<p data-testid="no-annotations-message"> <p data-testid="no-annotations-message">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment