mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-27 22:49:56 -05:00
Added static user invite dialog to AdminX
refs. https://github.com/TryGhost/Team/issues/3328
This commit is contained in:
Peter Zimon
parent
c865ab00f4
commit
04d68b2e47
3 changed files with 88 additions and 22 deletions
|
|
@ -4,10 +4,15 @@ import Heading from './Heading';
|
|||
import React from 'react';
|
||||
import {useModal} from '@ebay/nice-modal-react';
|
||||
|
||||
export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'bleed';
|
||||
export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'bleed' | number;
|
||||
|
||||
export interface ModalProps {
|
||||
|
||||
/**
|
||||
* Possible values are: `sm`, `md`, `lg`, `xl, `full`, `bleed`. Yu can also use any number to set an arbitrary width.
|
||||
*/
|
||||
size?: ModalSize;
|
||||
|
||||
title?: string;
|
||||
okLabel?: string;
|
||||
okColor?: string;
|
||||
|
|
@ -55,37 +60,42 @@ const Modal: React.FC<ModalProps> = ({
|
|||
});
|
||||
}
|
||||
|
||||
let modalStyles = 'relative rounded overflow-hidden z-50 mx-auto flex flex-col justify-between bg-white shadow-xl w-full';
|
||||
let backdropStyles = 'fixed inset-0 h-[100vh] w-[100vw] overflow-y-scroll ';
|
||||
let modalClasses = 'relative rounded overflow-hidden z-50 mx-auto flex flex-col justify-between bg-white shadow-xl w-full';
|
||||
let backdropClasses = 'fixed inset-0 h-[100vh] w-[100vw] overflow-y-scroll ';
|
||||
|
||||
switch (size) {
|
||||
case 'sm':
|
||||
modalStyles += ` max-w-[480px] ${!noPadding && 'p-8'}`;
|
||||
backdropStyles += ' p-[8vmin]';
|
||||
modalClasses += ` max-w-[480px] ${!noPadding && 'p-8'}`;
|
||||
backdropClasses += ' p-[8vmin]';
|
||||
break;
|
||||
|
||||
case 'md':
|
||||
modalStyles += ` max-w-[720px] ${!noPadding && 'p-8'}`;
|
||||
backdropStyles += ' p-[8vmin]';
|
||||
modalClasses += ` max-w-[720px] ${!noPadding && 'p-8'}`;
|
||||
backdropClasses += ' p-[8vmin]';
|
||||
break;
|
||||
|
||||
case 'lg':
|
||||
modalStyles += ` max-w-[1020px] ${!noPadding && 'p-12'}`;
|
||||
backdropStyles += ' p-[4vmin]';
|
||||
modalClasses += ` max-w-[1020px] ${!noPadding && 'p-12'}`;
|
||||
backdropClasses += ' p-[4vmin]';
|
||||
break;
|
||||
|
||||
case 'xl':
|
||||
modalStyles += ` max-w-[1240px] ${!noPadding && 'p-14'}`;
|
||||
backdropStyles += ' p-[3vmin]';
|
||||
modalClasses += ` max-w-[1240px] ${!noPadding && 'p-14'}`;
|
||||
backdropClasses += ' p-[3vmin]';
|
||||
break;
|
||||
|
||||
case 'full':
|
||||
modalStyles += ` h-full ${!noPadding && 'p-12'}`;
|
||||
backdropStyles += ' p-[2vmin]';
|
||||
modalClasses += ` h-full ${!noPadding && 'p-12'}`;
|
||||
backdropClasses += ' p-[2vmin]';
|
||||
break;
|
||||
|
||||
case 'bleed':
|
||||
modalStyles += ` h-full ${!noPadding && 'p-12'}`;
|
||||
modalClasses += ` h-full ${!noPadding && 'p-12'}`;
|
||||
break;
|
||||
|
||||
default:
|
||||
modalClasses += ` ${!noPadding && 'p-8'}`;
|
||||
backdropClasses += ' p-[8vmin]';
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
@ -95,10 +105,14 @@ const Modal: React.FC<ModalProps> = ({
|
|||
}
|
||||
};
|
||||
|
||||
const modalStyles = (typeof size === 'number') ? {
|
||||
width: size + 'px'
|
||||
} : {};
|
||||
|
||||
return (
|
||||
<div className={backdropStyles} id='modal-backdrop' onClick={handleBackdropClick}>
|
||||
<div className={backdropClasses} id='modal-backdrop' onClick={handleBackdropClick}>
|
||||
<div className='pointer-events-none fixed inset-0 z-0 bg-[rgba(98,109,121,0.15)] backdrop-blur-[3px]'></div>
|
||||
<section className={modalStyles}>
|
||||
<section className={modalClasses} style={modalStyles}>
|
||||
<div className='h-full'>
|
||||
{title && <Heading level={4}>{title}</Heading>}
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ const TextField: React.FC<TextFieldProps> = ({
|
|||
{title && <Heading useLabelTag={true}>{title}</Heading>}
|
||||
<input
|
||||
ref={inputRef}
|
||||
className={`border-b ${!clearBg && 'bg-grey-100 px-[10px]'} py-2 ${error ? `border-red` : `border-grey-300 hover:border-grey-400 focus:border-grey-600`} ${(title && !clearBg) && `mt-2`} ${className}`}
|
||||
className={`border-b ${!clearBg && 'bg-grey-100 px-[10px]'} py-2 ${error ? `border-red` : `border-grey-300 hover:border-grey-400 focus:border-black`} ${(title && !clearBg) && `mt-2`} ${className}`}
|
||||
defaultValue={value}
|
||||
maxLength={maxLength}
|
||||
placeholder={placeholder}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,69 @@
|
|||
import Modal from '../../../../admin-x-ds/global/Modal';
|
||||
import NiceModal from '@ebay/nice-modal-react';
|
||||
import Radio from '../../../../admin-x-ds/global/Radio';
|
||||
import TextField from '../../../../admin-x-ds/global/TextField';
|
||||
import {useEffect, useRef} from 'react';
|
||||
|
||||
const InviteUserModal = NiceModal.create(() => {
|
||||
const focusRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (focusRef.current) {
|
||||
focusRef.current.focus();
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Modal
|
||||
size='md'
|
||||
title='Invite users'
|
||||
<Modal
|
||||
cancelLabel=''
|
||||
okLabel='Send invitation now'
|
||||
size={540}
|
||||
title='Invite a new staff user'
|
||||
onOk={() => {
|
||||
// Handle invite user
|
||||
}}
|
||||
>
|
||||
<div className='py-4'>
|
||||
[TBD: invite user contents]
|
||||
<div className='flex flex-col gap-6 py-4'>
|
||||
<p>
|
||||
Send an invitation for a new person to create a staff account on your site, and select a role that matches what you’d like them to be able to do.
|
||||
</p>
|
||||
<TextField
|
||||
clearBg={true}
|
||||
inputRef={focusRef}
|
||||
placeholder='jamie@example.com'
|
||||
title='Email address'
|
||||
/>
|
||||
<div>
|
||||
<Radio
|
||||
defaultSelectedOption={'contributor'}
|
||||
id='role'
|
||||
options={[
|
||||
{
|
||||
hint: 'Can create and edit their own posts, but cannot publish. An Editor needs to approve and publish for them.',
|
||||
label: 'Contributor',
|
||||
value: 'contributor'
|
||||
},
|
||||
{
|
||||
hint: 'A trusted user who can create, edit and publish their own posts, but can’t modify others.',
|
||||
label: 'Author',
|
||||
value: 'author'
|
||||
},
|
||||
{
|
||||
hint: 'Can invite and manage other Authors and Contributors, as well as edit and publish any posts on the site.',
|
||||
label: 'Editor',
|
||||
value: 'editor'
|
||||
},
|
||||
{
|
||||
hint: 'Trusted staff user who should be able to manage all content and users, as well as site settings and options.',
|
||||
label: 'Administrator',
|
||||
value: 'administrator'
|
||||
}
|
||||
]}
|
||||
separator={true}
|
||||
title="Role"
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue