mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-07 07:07:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): a few more tooltips (#2972)

Browse Source 
* feat(frontend): a few more tooltips

* feat: add tooltips to status badges
This commit is contained in:
TheCatLady
2022-08-23 21:59:26 -07:00
committed by GitHub
parent 8a2acb7f2b
commit 815d709bcf
11 changed files with 410 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/RequestBlock/index.tsx
View File

@@ -1,5 +1,6 @@
import Badge from '@app/components/Common/Badge';
import Button from '@app/components/Common/Button';
import Tooltip from '@app/components/Common/Tooltip';
import RequestModal from '@app/components/RequestModal';
import useRequestOverride from '@app/hooks/useRequestOverride';
import { useUser } from '@app/hooks/useUser';
@@ -27,6 +28,13 @@ const messages = defineMessages({
profilechanged: 'Quality Profile',
rootfolder: 'Root Folder',
languageprofile: 'Language Profile',
requestdate: 'Request Date',
requestedby: 'Requested By',
lastmodifiedby: 'Last Modified By',
approve: 'Approve Request',
decline: 'Decline Request',
edit: 'Edit Request',
delete: 'Delete Request',
});
interface RequestBlockProps {
@@ -83,7 +91,9 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => {
<div className="flex items-center justify-between">
<div className="mr-6 min-w-0 flex-1 flex-col items-center text-sm leading-5">
<div className="white mb-1 flex flex-nowrap">
<UserIcon className="mr-1.5 h-5 w-5 min-w-0 flex-shrink-0" />
<Tooltip content={intl.formatMessage(messages.requestedby)}>
<UserIcon className="mr-1.5 h-5 w-5 min-w-0 flex-shrink-0" />
</Tooltip>
<span className="w-40 truncate md:w-auto">
<Link
href={
@@ -100,7 +110,9 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => {
</div>
{request.modifiedBy && (
<div className="flex flex-nowrap">
<EyeIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
<Tooltip content={intl.formatMessage(messages.lastmodifiedby)}>
<EyeIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
</Tooltip>
<span className="w-40 truncate md:w-auto">
<Link
href={
@@ -120,39 +132,47 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => {
<div className="ml-2 flex flex-shrink-0 flex-wrap">
{request.status === MediaRequestStatus.PENDING && (
<>
<Button
buttonType="success"
className="mr-1"
onClick={() => updateRequest('approve')}
disabled={isUpdating}
>
<CheckIcon className="icon-sm" />
</Button>
<Button
buttonType="danger"
className="mr-1"
onClick={() => updateRequest('decline')}
disabled={isUpdating}
>
<XIcon />
</Button>
<Button
buttonType="primary"
onClick={() => setShowEditModal(true)}
disabled={isUpdating}
>
<PencilIcon className="icon-sm" />
</Button>
<Tooltip content={intl.formatMessage(messages.approve)}>
<Button
buttonType="success"
className="mr-1"
onClick={() => updateRequest('approve')}
disabled={isUpdating}
>
<CheckIcon className="icon-sm" />
</Button>
</Tooltip>
<Tooltip content={intl.formatMessage(messages.decline)}>
<Button
buttonType="danger"
className="mr-1"
onClick={() => updateRequest('decline')}
disabled={isUpdating}
>
<XIcon />
</Button>
</Tooltip>
<Tooltip content={intl.formatMessage(messages.edit)}>
<Button
buttonType="primary"
onClick={() => setShowEditModal(true)}
disabled={isUpdating}
>
<PencilIcon className="icon-sm" />
</Button>
</Tooltip>
</>
)}
{request.status !== MediaRequestStatus.PENDING && (
<Button
buttonType="danger"
onClick={() => deleteRequest()}
disabled={isUpdating}
>
<TrashIcon className="icon-sm" />
</Button>
<Tooltip content={intl.formatMessage(messages.delete)}>
<Button
buttonType="danger"
onClick={() => deleteRequest()}
disabled={isUpdating}
>
<TrashIcon className="icon-sm" />
</Button>
</Tooltip>
)}
</div>
</div>
@@ -187,7 +207,9 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => {
</div>
</div>
<div className="mt-2 flex items-center text-sm leading-5 sm:mt-0">
<CalendarIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
<Tooltip content={intl.formatMessage(messages.requestdate)}>
<CalendarIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
</Tooltip>
<span>
{intl.formatDate(request.createdAt, {
year: 'numeric',