chrisryn/requestarr
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: modal redesign and fix for transitions (#2987)

Browse Source
This commit is contained in:
Ryan Cohen
2022-08-29 14:56:04 +09:00
committed by GitHub
parent 4d56320870
commit 889caaa733
38 changed files with 164 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/RequestModal/CollectionRequestModal.tsx
View File

@@ -7,7 +7,6 @@ import AdvancedRequester from '@app/components/RequestModal/AdvancedRequester';
import QuotaDisplay from '@app/components/RequestModal/QuotaDisplay';
import { useUser } from '@app/hooks/useUser';
import globalMessages from '@app/i18n/globalMessages';
import { DownloadIcon } from '@heroicons/react/outline';
import { MediaRequestStatus, MediaStatus } from '@server/constants/media';
import type { MediaRequest } from '@server/entity/MediaRequest';
import type { QuotaResponse } from '@server/interfaces/api/userInterfaces';
@@ -22,8 +21,8 @@ import useSWR from 'swr';
const messages = defineMessages({
requestadmin: 'This request will be approved automatically.',
requestSuccess: '<strong>{title}</strong> requested successfully!',
requesttitle: 'Request {title}',
request4ktitle: 'Request {title} in 4K',
requestcollectiontitle: 'Request Collection',
requestcollection4ktitle: 'Request Collection in 4K',
requesterror: 'Something went wrong while submitting the request.',
selectmovies: 'Select Movie(s)',
requestmovies: 'Request {count} {count, plural, one {Movie} other {Movies}}',
@@ -249,9 +248,11 @@ const CollectionRequestModal = ({
onCancel={onCancel}
onOk={sendRequest}
title={intl.formatMessage(
is4k ? messages.request4ktitle : messages.requesttitle,
{ title: data?.name }
is4k
? messages.requestcollection4ktitle
: messages.requestcollectiontitle
)}
subTitle={data?.name}
okText={
isUpdating
? intl.formatMessage(globalMessages.requesting)
@@ -266,7 +267,6 @@ const CollectionRequestModal = ({
}
okDisabled={selectedParts.length === 0}
okButtonType={'primary'}
iconSvg={<DownloadIcon />}
backdrop={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data?.backdropPath}`}
>
{hasAutoApprove && !quota?.movie.restricted && (
@@ -292,11 +292,11 @@ const CollectionRequestModal = ({
<div className="flex flex-col">
<div className="-mx-4 sm:mx-0">
<div className="inline-block min-w-full py-2 align-middle">
<div className="overflow-hidden shadow sm:rounded-lg">
<div className="overflow-hidden border border-gray-700 backdrop-blur sm:rounded-lg">
<table className="min-w-full">
<thead>
<tr>
<th className="w-16 bg-gray-500 px-4 py-3">
<th className="w-16 bg-gray-700 bg-opacity-80 px-4 py-3">
<span
role="checkbox"
tabIndex={0}
@@ -328,15 +328,15 @@ const CollectionRequestModal = ({
></span>
</span>
</th>
<th className="bg-gray-500 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
<th className="bg-gray-700 bg-opacity-80 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
{intl.formatMessage(globalMessages.movie)}
</th>
<th className="bg-gray-500 px-2 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
<th className="bg-gray-700 bg-opacity-80 px-2 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
{intl.formatMessage(globalMessages.status)}
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-700 bg-gray-600">
<tbody className="divide-y divide-gray-700">
{data?.parts.map((part) => {
const partRequest = getPartRequest(part.id);
const partMedia =
@@ -378,7 +378,7 @@ const CollectionRequestModal = ({
partRequest ||
isSelectedPart(part.id)
? 'bg-indigo-500'
: 'bg-gray-800'
: 'bg-gray-700'
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
></span>
<span