shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: slideover redesign (#2973)

Browse Source
This commit is contained in:
Ryan Cohen
2022-08-24 15:00:04 +09:00
committed by GitHub
parent 815d709bcf
commit 22360f3b87
2 changed files with 26 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Common/SlideOver/index.tsx
View File

@@ -1,8 +1,8 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/click-events-have-key-events */
import Transition from '@app/components/Transition';
import { useLockBodyScroll } from '@app/hooks/useLockBodyScroll'; import { useLockBodyScroll } from '@app/hooks/useLockBodyScroll';
import { Transition } from '@headlessui/react';
import { XIcon } from '@heroicons/react/outline'; import { XIcon } from '@heroicons/react/outline';
import { useEffect, useRef, useState } from 'react'; import { Fragment, useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
interface SlideOverProps { interface SlideOverProps {
@@ -34,6 +34,7 @@ const SlideOver = ({
return ReactDOM.createPortal( return ReactDOM.createPortal(
<Transition <Transition
as={Fragment}
show={show} show={show}
appear appear
enter="opacity-0 transition ease-in-out duration-300" enter="opacity-0 transition ease-in-out duration-300"
@@ -54,9 +55,8 @@ const SlideOver = ({
}} }}
> >
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<section className="absolute inset-y-0 right-0 flex max-w-full pl-10"> <section className="absolute inset-y-0 right-0 flex max-w-full">
<Transition <Transition.Child
show={show}
appear appear
enter="transform transition ease-in-out duration-500 sm:duration-700" enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full" enterFrom="translate-x-full"
@@ -67,20 +67,20 @@ const SlideOver = ({
> >
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */} {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
<div <div
className="w-screen max-w-md" className="h-full w-screen max-w-md p-2 sm:p-4"
ref={slideoverRef} ref={slideoverRef}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div className="flex h-full flex-col overflow-y-scroll bg-gray-700 shadow-xl"> <div className="hide-scrollbar flex h-full flex-col overflow-y-scroll rounded-lg bg-gray-800 bg-opacity-80 shadow-xl ring-1 ring-gray-700 backdrop-blur">
<header className="slideover space-y-1 bg-indigo-600 px-4"> <header className="slideover space-y-1 border-b border-gray-700 px-4">
<div className="flex items-center justify-between space-x-3"> <div className="flex items-center justify-between space-x-3">
<h2 className="text-lg font-bold leading-7 text-white"> <h2 className="bg-gradient-to-br from-indigo-400 to-purple-400 bg-clip-text text-2xl font-bold leading-7 text-transparent">
{title} {title}
</h2> </h2>
<div className="flex h-7 items-center"> <div className="flex h-7 items-center">
<button <button
aria-label="Close panel" aria-label="Close panel"
className="text-indigo-200 transition duration-150 ease-in-out hover:text-white" className="text-gray-200 transition duration-150 ease-in-out hover:text-white"
onClick={() => onClose()} onClick={() => onClose()}
> >
<XIcon className="h-6 w-6" /> <XIcon className="h-6 w-6" />
@@ -89,9 +89,7 @@ const SlideOver = ({
</div> </div>
{subText && ( {subText && (
<div> <div>
<p className="text-sm leading-5 text-indigo-300"> <p className="leading-5 text-gray-300">{subText}</p>
{subText}
</p>
</div> </div>
)} )}
</header> </header>
@@ -100,7 +98,7 @@ const SlideOver = ({
</div> </div>
</div> </div>
</div> </div>
</Transition> </Transition.Child>
</section> </section>
</div> </div>
</div> </div>

28
src/components/ManageSlideOver/index.tsx
View File

@@ -137,11 +137,11 @@ const ManageSlideOver = ({
<div className="space-y-6"> <div className="space-y-6">
{((data?.mediaInfo?.downloadStatus ?? []).length > 0 || {((data?.mediaInfo?.downloadStatus ?? []).length > 0 ||
(data?.mediaInfo?.downloadStatus4k ?? []).length > 0) && ( (data?.mediaInfo?.downloadStatus4k ?? []).length > 0) && (
<div> <>
<h3 className="mb-2 text-xl font-bold"> <h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.downloadstatus)} {intl.formatMessage(messages.downloadstatus)}
</h3> </h3>
<div className="overflow-hidden rounded-md bg-gray-600 shadow"> <div className="overflow-hidden rounded-md border border-gray-700 shadow">
<ul> <ul>
{data.mediaInfo?.downloadStatus?.map((status, index) => ( {data.mediaInfo?.downloadStatus?.map((status, index) => (
<li <li
@@ -161,7 +161,7 @@ const ManageSlideOver = ({
))} ))}
</ul> </ul>
</div> </div>
</div> </>
)} )}
{hasPermission([Permission.MANAGE_ISSUES, Permission.VIEW_ISSUES], { {hasPermission([Permission.MANAGE_ISSUES, Permission.VIEW_ISSUES], {
type: 'or', type: 'or',
@@ -171,7 +171,7 @@ const ManageSlideOver = ({
<h3 className="mb-2 text-xl font-bold"> <h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.manageModalIssues)} {intl.formatMessage(messages.manageModalIssues)}
</h3> </h3>
<div className="overflow-hidden rounded-md bg-gray-600 shadow"> <div className="overflow-hidden rounded-md border border-gray-700 shadow">
<ul> <ul>
{openIssues.map((issue) => ( {openIssues.map((issue) => (
<li <li
@@ -186,11 +186,11 @@ const ManageSlideOver = ({
</> </>
)} )}
{requests.length > 0 && ( {requests.length > 0 && (
<div> <>
<h3 className="mb-2 text-xl font-bold"> <h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.manageModalRequests)} {intl.formatMessage(messages.manageModalRequests)}
</h3> </h3>
<div className="overflow-hidden rounded-md bg-gray-600 shadow"> <div className="overflow-hidden rounded-md border border-gray-700 shadow">
<ul> <ul>
{requests.map((request) => ( {requests.map((request) => (
<li <li
@@ -205,13 +205,13 @@ const ManageSlideOver = ({
))} ))}
</ul> </ul>
</div> </div>
</div> </>
)} )}
{hasPermission(Permission.ADMIN) && {hasPermission(Permission.ADMIN) &&
(data.mediaInfo?.serviceUrl || (data.mediaInfo?.serviceUrl ||
data.mediaInfo?.tautulliUrl || data.mediaInfo?.tautulliUrl ||
!!watchData?.data?.playCount) && ( !!watchData?.data?.playCount) && (
<div> <>
<h3 className="mb-2 text-xl font-bold"> <h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.manageModalMedia)} {intl.formatMessage(messages.manageModalMedia)}
</h3> </h3>
@@ -219,13 +219,13 @@ const ManageSlideOver = ({
{!!watchData?.data && ( {!!watchData?.data && (
<div> <div>
<div <div
className={`grid grid-cols-1 divide-y divide-gray-500 overflow-hidden bg-gray-600 text-sm text-gray-300 shadow ${ className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border border-gray-700 text-sm text-gray-300 shadow ${
data.mediaInfo?.tautulliUrl data.mediaInfo?.tautulliUrl
? 'rounded-t-md' ? 'rounded-t-md'
: 'rounded-md' : 'rounded-md'
}`} }`}
> >
<div className="grid grid-cols-3 divide-x divide-gray-500"> <div className="grid grid-cols-3 divide-x divide-gray-700">
<div className="px-4 py-3"> <div className="px-4 py-3">
<div className="font-bold"> <div className="font-bold">
{intl.formatMessage(messages.pastdays, { days: 7 })} {intl.formatMessage(messages.pastdays, { days: 7 })}
@@ -320,7 +320,7 @@ const ManageSlideOver = ({
</a> </a>
)} )}
</div> </div>
</div> </>
)} )}
{hasPermission(Permission.ADMIN) && {hasPermission(Permission.ADMIN) &&
(data.mediaInfo?.serviceUrl4k || (data.mediaInfo?.serviceUrl4k ||
@@ -334,13 +334,13 @@ const ManageSlideOver = ({
{!!watchData?.data4k && ( {!!watchData?.data4k && (
<div> <div>
<div <div
className={`grid grid-cols-1 divide-y divide-gray-500 overflow-hidden bg-gray-600 text-sm text-gray-300 shadow ${ className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border border-gray-700 text-sm text-gray-300 shadow ${
data.mediaInfo?.tautulliUrl4k data.mediaInfo?.tautulliUrl4k
? 'rounded-t-md' ? 'rounded-t-md'
: 'rounded-md' : 'rounded-md'
}`} }`}
> >
<div className="grid grid-cols-3 divide-x divide-gray-500"> <div className="grid grid-cols-3 divide-x divide-gray-700">
<div className="px-4 py-3"> <div className="px-4 py-3">
<div className="font-bold"> <div className="font-bold">
{intl.formatMessage(messages.pastdays, { days: 7 })} {intl.formatMessage(messages.pastdays, { days: 7 })}
@@ -487,7 +487,7 @@ const ManageSlideOver = ({
{intl.formatMessage(messages.manageModalClearMedia)} {intl.formatMessage(messages.manageModalClearMedia)}
</span> </span>
</ConfirmButton> </ConfirmButton>
<div className="mt-1 text-xs text-gray-400"> <div className="mt-2 text-xs text-gray-400">
{intl.formatMessage(messages.manageModalClearMediaWarning, { {intl.formatMessage(messages.manageModalClearMediaWarning, {
mediaType: intl.formatMessage( mediaType: intl.formatMessage(
mediaType === 'movie' ? messages.movie : messages.tvshow mediaType === 'movie' ? messages.movie : messages.tvshow