-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Update styles for Collections views * Add button dropdown * Add logout button * update responsive for unregconized file tab * mitigating responsive for credits, episode, images, tags * fix reponsive bug in unregconized file tab * update change request * update button padding * fix linting and code conflict * Fix bugs reponsive for Unregconized Tabs and File Search * remove filcker for and fix bug reponsive for file search, update change request * Fix Unrecognized Files Toolbar. --------- Co-authored-by: ElementalCrisis <[email protected]>
- Loading branch information
1 parent
7f17467
commit c260daa
Showing
17 changed files
with
378 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import React, { useEffect, useMemo, useState } from 'react'; | ||
| import useMeasure from 'react-use-measure'; | ||
| import { mdiChevronDown, mdiLoading } from '@mdi/js'; | ||
| import Icon from '@mdi/react'; | ||
| import cx from 'classnames'; | ||
| import { useEventCallback } from 'usehooks-ts'; | ||
|
|
||
| type Props = { | ||
| buttonTypes?: 'primary' | 'secondary' | 'danger'; | ||
| className?: string; | ||
| children: React.ReactNode; | ||
| content: React.ReactNode | string; | ||
| disabled?: boolean; | ||
| loading?: boolean; | ||
| loadingSize?: number; | ||
| tooltip?: string; | ||
| }; | ||
|
|
||
| const buttonTypeClasses = { | ||
| primary: | ||
| 'bg-button-primary text-button-primary-text border-2 !border-button-primary-border rounded-md hover:bg-button-primary-hover', | ||
| secondary: | ||
| 'bg-button-secondary text-button-secondary-text border-2 !border-button-secondary-border rounded-md hover:bg-button-secondary-hover', | ||
| danger: | ||
| 'bg-button-danger text-button-danger-text border-2 !border-button-danger-border rounded-md hover:bg-button-danger-hover', | ||
| }; | ||
|
|
||
| const ButtonDropdown = (props: Props) => { | ||
| const { | ||
| buttonTypes, | ||
| children, | ||
| className, | ||
| content, | ||
| disabled, | ||
| loading, | ||
| loadingSize, | ||
| tooltip, | ||
| } = props; | ||
|
|
||
| const [open, setOpen] = useState(false); | ||
| const onClick = useEventCallback(() => { | ||
| setOpen(prev => !prev); | ||
| }); | ||
| const [containerRef, containerBounds] = useMeasure(); | ||
| const [menuRef, menuBounds] = useMeasure(); | ||
| const [windowWidth, setWindowWidth] = useState(window.innerWidth); | ||
| const menuShift = useMemo(() => containerBounds.x - (menuBounds.width - (containerBounds.width)), [ | ||
| containerBounds.x, | ||
| containerBounds.width, | ||
| menuBounds.width, | ||
| ]); | ||
|
|
||
| const isOutOfBounds = useMemo(() => containerBounds.right > windowWidth, [windowWidth, containerBounds.right]); | ||
|
|
||
| useEffect(() => { | ||
| const resizeEvent = () => { | ||
| setOpen(_ => false); | ||
| setWindowWidth(_ => window.innerWidth); | ||
| }; | ||
| window.addEventListener('resize', resizeEvent); | ||
| return () => { | ||
| window.removeEventListener('resize', resizeEvent); | ||
| }; | ||
| }, [className]); | ||
|
|
||
| return ( | ||
| <div className="relative inline-block" ref={containerRef}> | ||
| <button | ||
| type="button" | ||
| title={tooltip} | ||
| className={cx([ | ||
| `${className} button rounded font-semibold transition ease-in-out focus:shadow-none focus:outline-none min-w-full px-4 py-3`, | ||
| buttonTypes !== undefined && `${buttonTypeClasses[buttonTypes ?? 'secondary']} border border-panel-border`, | ||
| loading && 'cursor-default', | ||
| disabled && 'cursor-default opacity-50', | ||
| ])} | ||
| onClick={onClick} | ||
| disabled={disabled} | ||
| > | ||
| {loading && ( | ||
| <div className="flex items-center justify-center"> | ||
| <Icon path={mdiLoading} spin size={loadingSize ?? 1} /> | ||
| </div> | ||
| )} | ||
|
|
||
| {!loading && ( | ||
| <div className="flex flex-row items-center justify-between"> | ||
| <span>{content}</span> | ||
| <Icon path={mdiChevronDown} size={1} /> | ||
| </div> | ||
| )} | ||
| </button> | ||
| <div | ||
| className={cx([ | ||
| 'flex-col fixed z-10 origin-top-right text-right overflow-hidden justify-center w-fit-content p-3 gap-y-2', | ||
| open ? 'flex' : 'hidden', | ||
| buttonTypes !== undefined && `${buttonTypeClasses[buttonTypes]} border border-panel-border`, | ||
| ])} | ||
| style={{ left: isOutOfBounds ? `${menuShift}px` : `${containerBounds.left}px` }} | ||
| ref={menuRef} | ||
| > | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ButtonDropdown; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.