From 6b5cd89db3e22bca2feedb086e96969f48ce75b2 Mon Sep 17 00:00:00 2001 From: viktorstrate Date: Tue, 13 Jul 2021 13:56:05 +0200 Subject: [PATCH] Replace modals for people actions --- .../SingleFaceGroup/DetachImageFacesModal.tsx | 74 ++++----- .../SingleFaceGroup/FaceGroupTitle.tsx | 150 +++++++++--------- .../SingleFaceGroup/MergeFaceGroupsModal.tsx | 68 ++++---- .../SingleFaceGroup/MoveImageFacesModal.tsx | 83 ++++------ .../Pages/SettingsPage/Users/UsersTable.tsx | 2 +- ui/src/components/layout/MainMenu.tsx | 17 +- ui/src/primitives/Modal.tsx | 4 +- ui/src/primitives/form/Input.tsx | 14 +- 8 files changed, 197 insertions(+), 215 deletions(-) diff --git a/ui/src/Pages/PeoplePage/SingleFaceGroup/DetachImageFacesModal.tsx b/ui/src/Pages/PeoplePage/SingleFaceGroup/DetachImageFacesModal.tsx index d7701315..2cd2b9bd 100644 --- a/ui/src/Pages/PeoplePage/SingleFaceGroup/DetachImageFacesModal.tsx +++ b/ui/src/Pages/PeoplePage/SingleFaceGroup/DetachImageFacesModal.tsx @@ -2,8 +2,8 @@ import { gql, useMutation } from '@apollo/client' import React, { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { useHistory } from 'react-router-dom' -import { Button, Modal } from 'semantic-ui-react' import { isNil } from '../../../helpers/utils' +import Modal from '../../../primitives/Modal' import { MY_FACES_QUERY } from '../PeoplePage' import { myFaces_myFaceGroups, @@ -83,46 +83,42 @@ const DetachImageFacesModal = ({ return ( setOpen(false)} - onOpen={() => setOpen(true)} - open={open} - > - - {t('people_page.modal.detach_image_faces.title', 'Detach Image Faces')} - - - -

- {t( - 'people_page.modal.detach_image_faces.description', - 'Detach selected images of this face group and move them to a new face groups' - )} -

- - - - - - + +
  • + +
    • +
  • + +
    • +
  • + +
    • + + {/* { onClick={() => setMoveModalOpen(true)} /> - - - ) - } else { - title = ( - - setInputValue(e.target.value)} - onBlur={() => { - resetLabel() - }} - /> - - ) - } - - let modals = null - if (faceGroup) { - modals = ( - <> - - - - - ) - } - - return ( - <> - {title} + */} + {modals} ) diff --git a/ui/src/Pages/PeoplePage/SingleFaceGroup/MergeFaceGroupsModal.tsx b/ui/src/Pages/PeoplePage/SingleFaceGroup/MergeFaceGroupsModal.tsx index 64ef5d55..455652a0 100644 --- a/ui/src/Pages/PeoplePage/SingleFaceGroup/MergeFaceGroupsModal.tsx +++ b/ui/src/Pages/PeoplePage/SingleFaceGroup/MergeFaceGroupsModal.tsx @@ -2,8 +2,8 @@ import { gql, useMutation, useQuery } from '@apollo/client' import React, { useState } from 'react' import { useTranslation } from 'react-i18next' import { useHistory } from 'react-router-dom' -import { Button, Modal } from 'semantic-ui-react' import { isNil } from '../../../helpers/utils' +import Modal from '../../../primitives/Modal' import { MY_FACES_QUERY } from '../PeoplePage' import { myFaces, @@ -78,45 +78,39 @@ const MergeFaceGroupsModal = ({ return ( setOpen(false), + }, + { + key: 'merge', + label: t('people_page.modal.action.merge', 'Merge'), + onClick: () => mergeFaceGroups(), + variant: 'positive', + }, + ]} onClose={() => setOpen(false)} - onOpen={() => setOpen(true)} open={open} > - - {t('people_page.modal.merge_face_groups.title', 'Merge Face Groups')} - - - -

    - {t( - 'people_page.modal.merge_face_groups.description', - 'All images within this face group will be merged into the selected face group.' - )} -

    - -     -     - - - - {positiveButton} - + {table}     ) } diff --git a/ui/src/Pages/SettingsPage/Users/UsersTable.tsx b/ui/src/Pages/SettingsPage/Users/UsersTable.tsx index a6489511..60c0da96 100644 --- a/ui/src/Pages/SettingsPage/Users/UsersTable.tsx +++ b/ui/src/Pages/SettingsPage/Users/UsersTable.tsx @@ -95,8 +95,8 @@ const UsersTable = () => { diff --git a/ui/src/primitives/form/Input.tsx b/ui/src/primitives/form/Input.tsx index e18aa0da..9de1c3e0 100644 --- a/ui/src/primitives/form/Input.tsx +++ b/ui/src/primitives/form/Input.tsx @@ -135,24 +135,27 @@ export const TextField = forwardRef( type ButtonProps = { variant?: 'negative' | 'positive' | 'default' + background?: 'default' | 'white' } -const buttonStyles = ({ variant }: ButtonProps) => +const buttonStyles = ({ variant, background }: ButtonProps) => classNames( - 'bg-gray-50 px-6 py-0.5 rounded border border-gray-200 focus:outline-none focus:border-blue-300 text-[#222] hover:bg-gray-100 whitespace-nowrap', + 'px-6 py-0.5 rounded border border-gray-200 focus:outline-none focus:border-blue-300 text-[#222] hover:bg-gray-100 whitespace-nowrap', variant == 'negative' && 'text-red-600 hover:bg-red-600 hover:border-red-700 hover:text-white transition-colors focus:border-red-600 focus:hover:border-red-700', variant == 'positive' && - 'text-green-600 hover:bg-green-600 hover:border-green-700 hover:text-white transition-colors focus:border-green-600 focus:hover:border-green-700' + 'text-green-600 hover:bg-green-600 hover:border-green-700 hover:text-white transition-colors focus:border-green-600 focus:hover:border-green-700', + background == 'white' ? 'bg-white' : 'bg-gray-50' ) export const Submit = ({ className, variant, + background, ...props }: ButtonProps & React.ButtonHTMLAttributes) => ( @@ -161,11 +164,12 @@ export const Submit = ({ export const Button = ({ children, variant, + background, className, ...props }: ButtonProps & React.ButtonHTMLAttributes) => (