feat: radarr edit/create modal/backend functionality

This commit is contained in:
sct
2020-11-02 12:11:28 +00:00
parent e032e385a5
commit c4ac357ef4
14 changed files with 968 additions and 16 deletions

View File

@@ -5,7 +5,8 @@ export type ButtonType =
| 'primary'
| 'danger'
| 'warning'
| 'success';
| 'success'
| 'ghost';
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
buttonType?: ButtonType;
@@ -30,22 +31,27 @@ const Button: React.FC<ButtonProps> = ({
break;
case 'danger':
buttonStyle.push(
'text-white bg-red-600 hover:bg-red-500 focus:border-red-700 focus:shadow-outline-red active:bg-red-700'
'text-white bg-red-600 hover:bg-red-500 focus:border-red-700 focus:shadow-outline-red active:bg-red-700 disabled:opacity-50'
);
break;
case 'warning':
buttonStyle.push(
'text-white bg-orange-500 hover:bg-orange-400 focus:border-orange-700 focus:shadow-outline-orange active:bg-orange-700'
'text-white bg-orange-500 hover:bg-orange-400 focus:border-orange-700 focus:shadow-outline-orange active:bg-orange-700 disabled:opacity-50'
);
break;
case 'success':
buttonStyle.push(
'text-white bg-green-400 hover:bg-green-300 focus:border-green-700 focus:shadow-outline-green active:bg-green-700'
'text-white bg-green-400 hover:bg-green-300 focus:border-green-700 focus:shadow-outline-green active:bg-green-700 disabled:opacity-50'
);
break;
case 'ghost':
buttonStyle.push(
'text-white bg-transaprent border border-cool-gray-600 hover:border-cool-gray-200 focus:border-cool-gray-100 active:border-cool-gray-100 disabled:opacity-50'
);
break;
default:
buttonStyle.push(
'leading-5 font-medium rounded-md text-gray-200 bg-cool-gray-500 hover:bg-cool-gray-400 hover:text-white focus:border-blue-300 focus:shadow-outline-blue active:text-gray-200 active:bg-cool-gray-400'
'leading-5 font-medium rounded-md text-gray-200 bg-cool-gray-500 hover:bg-cool-gray-400 hover:text-white focus:border-blue-300 focus:shadow-outline-blue active:text-gray-200 active:bg-cool-gray-400 disabled:opacity-50'
);
}

View File

@@ -103,7 +103,7 @@ const Modal: React.FC<ModalProps> = ({
item && (
<animated.div
style={props}
className="inline-block align-bottom bg-cool-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6"
className="inline-block align-bottom bg-cool-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline"
@@ -116,7 +116,7 @@ const Modal: React.FC<ModalProps> = ({
{iconSvg}
</div>
)}
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<div className="mt-3 text-center sm:mt-0 sm:text-left mb-6">
{title && (
<h3
className="text-lg leading-6 font-medium text-white"
@@ -128,10 +128,8 @@ const Modal: React.FC<ModalProps> = ({
</div>
</div>
{children && (
<div className="mt-4">
<p className="text-sm leading-5 text-cool-gray-300">
{children}
</p>
<div className="mt-4 text-sm leading-5 text-cool-gray-300">
{children}
</div>
)}
{(onCancel || onOk || onSecondary || onTertiary) && (