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

fix: transition animation (#2974)

Browse Source 
switched to using headlessui transition instead of react-css-transition due to new version breaking the
animation
This commit is contained in:
Brandon Cohen
2022-08-24 13:18:09 -04:00
committed by GitHub
parent baf1ea95a3
commit 98028bf2f4
22 changed files with 66 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Layout/LanguagePicker/index.tsx
View File

@@ -1,10 +1,10 @@
import Transition from '@app/components/Transition';
import type { AvailableLocale } from '@app/context/LanguageContext';
import { availableLanguages } from '@app/context/LanguageContext';
import useClickOutside from '@app/hooks/useClickOutside';
import useLocale from '@app/hooks/useLocale';
import { Transition } from '@headlessui/react';
import { TranslateIcon } from '@heroicons/react/solid';
import { useRef, useState } from 'react';
import { Fragment, useRef, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
const messages = defineMessages({
@@ -32,6 +32,7 @@ const LanguagePicker = () => {
</button>
</div>
<Transition
as={Fragment}
show={isDropdownOpen}
enter="transition ease-out duration-100 opacity-0"
enterFrom="transform opacity-0 scale-95"

20
src/components/Layout/Sidebar/index.tsx
View File

@@ -1,7 +1,7 @@
import VersionStatus from '@app/components/Layout/VersionStatus';
import Transition from '@app/components/Transition';
import useClickOutside from '@app/hooks/useClickOutside';
import { Permission, useUser } from '@app/hooks/useUser';
import { Transition } from '@headlessui/react';
import {
ClockIcon,
CogIcon,
@@ -12,7 +12,7 @@ import {
} from '@heroicons/react/outline';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useRef } from 'react';
import { Fragment, useRef } from 'react';
import { defineMessages, useIntl } from 'react-intl';
const messages = defineMessages({
@@ -94,9 +94,10 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
return (
<>
<div className="lg:hidden">
<Transition show={open}>
<Transition as={Fragment} show={open}>
<div className="fixed inset-0 z-40 flex">
<Transition
<Transition.Child
as="div"
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
@@ -107,8 +108,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
<div className="fixed inset-0">
<div className="absolute inset-0 bg-gray-900 opacity-90"></div>
</div>
</Transition>
<Transition
</Transition.Child>
<Transition.Child
as="div"
enter="transition ease-in-out duration-300 transform"
enterFrom="-translate-x-full"
enterTo="translate-x-0"
@@ -117,7 +119,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
leaveTo="-translate-x-full"
>
<>
<div className="sidebar relative flex w-full max-w-xs flex-1 flex-col bg-gray-800">
<div className="sidebar relative flex h-full w-full max-w-xs flex-1 flex-col bg-gray-800">
<div className="sidebar-close-button absolute top-0 right-0 -mr-14 p-1">
<button
className="flex h-12 w-12 items-center justify-center rounded-full focus:bg-gray-600 focus:outline-none"
@@ -129,7 +131,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
</div>
<div
ref={navRef}
className="flex h-0 flex-1 flex-col overflow-y-auto pt-8 pb-8 sm:pb-4"
className="flex flex-1 flex-col overflow-y-auto pt-8 pb-8 sm:pb-4"
>
<div className="flex flex-shrink-0 items-center px-2">
<span className="px-4 text-xl text-gray-50">
@@ -192,7 +194,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
{/* <!-- Force sidebar to shrink to fit close icon --> */}
</div>
</>
</Transition>
</Transition.Child>
</div>
</Transition>
</div>