Flip people menu for first person
This commit is contained in:
parent
df57f55ac4
commit
b20229f995
|
@ -50,9 +50,11 @@ type PersonMoreMenuProps = {
|
||||||
face: sidebarMediaQuery_media_faces
|
face: sidebarMediaQuery_media_faces
|
||||||
setChangeLabel: React.Dispatch<React.SetStateAction<boolean>>
|
setChangeLabel: React.Dispatch<React.SetStateAction<boolean>>
|
||||||
className?: string
|
className?: string
|
||||||
|
menuFlipped: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const PersonMoreMenu = ({
|
const PersonMoreMenu = ({
|
||||||
|
menuFlipped,
|
||||||
face,
|
face,
|
||||||
setChangeLabel,
|
setChangeLabel,
|
||||||
className,
|
className,
|
||||||
|
@ -119,7 +121,7 @@ const PersonMoreMenu = ({
|
||||||
<PeopleDotsIcon className="text-gray-500" />
|
<PeopleDotsIcon className="text-gray-500" />
|
||||||
</Menu.Button>
|
</Menu.Button>
|
||||||
<Menu.Items className="">
|
<Menu.Items className="">
|
||||||
<ArrowPopoverPanel width={120}>
|
<ArrowPopoverPanel width={120} flipped={menuFlipped}>
|
||||||
<PersonMoreMenuItem
|
<PersonMoreMenuItem
|
||||||
onClick={() => setChangeLabel(true)}
|
onClick={() => setChangeLabel(true)}
|
||||||
className="border-b"
|
className="border-b"
|
||||||
|
@ -152,9 +154,10 @@ const PersonMoreMenu = ({
|
||||||
|
|
||||||
type MediaSidebarFaceProps = {
|
type MediaSidebarFaceProps = {
|
||||||
face: sidebarMediaQuery_media_faces
|
face: sidebarMediaQuery_media_faces
|
||||||
|
menuFlipped: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const MediaSidebarPerson = ({ face }: MediaSidebarFaceProps) => {
|
const MediaSidebarPerson = ({ face, menuFlipped }: MediaSidebarFaceProps) => {
|
||||||
const [changeLabel, setChangeLabel] = useState(false)
|
const [changeLabel, setChangeLabel] = useState(false)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -172,6 +175,7 @@ const MediaSidebarPerson = ({ face }: MediaSidebarFaceProps) => {
|
||||||
/>
|
/>
|
||||||
{!changeLabel && (
|
{!changeLabel && (
|
||||||
<PersonMoreMenu
|
<PersonMoreMenu
|
||||||
|
menuFlipped={menuFlipped}
|
||||||
className="pl-0.5"
|
className="pl-0.5"
|
||||||
face={face}
|
face={face}
|
||||||
setChangeLabel={setChangeLabel}
|
setChangeLabel={setChangeLabel}
|
||||||
|
@ -189,8 +193,8 @@ type MediaSidebarFacesProps = {
|
||||||
const MediaSidebarPeople = ({ media }: MediaSidebarFacesProps) => {
|
const MediaSidebarPeople = ({ media }: MediaSidebarFacesProps) => {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
const faceElms = (media.faces ?? []).map(face => (
|
const faceElms = (media.faces ?? []).map((face, i) => (
|
||||||
<MediaSidebarPerson key={face.id} face={face} />
|
<MediaSidebarPerson key={face.id} face={face} menuFlipped={i == 0} />
|
||||||
))
|
))
|
||||||
|
|
||||||
if (faceElms.length == 0) return null
|
if (faceElms.length == 0) return null
|
||||||
|
|
|
@ -108,18 +108,36 @@ const DELETE_SHARE_MUTATION = gql`
|
||||||
|
|
||||||
export const ArrowPopoverPanel = styled.div.attrs({
|
export const ArrowPopoverPanel = styled.div.attrs({
|
||||||
className:
|
className:
|
||||||
'absolute right-6 -top-3 bg-white rounded shadow-md border border-gray-200',
|
'absolute -top-3 bg-white rounded shadow-md border border-gray-200 z-10',
|
||||||
})<{ width: number }>`
|
})<{ width: number; flipped?: boolean }>`
|
||||||
width: ${({ width }) => width}px;
|
width: ${({ width }) => width}px;
|
||||||
|
|
||||||
|
${({ flipped }) =>
|
||||||
|
flipped
|
||||||
|
? `
|
||||||
|
left: 32px;
|
||||||
|
`
|
||||||
|
: `
|
||||||
|
right: 24px;
|
||||||
|
`}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 18px;
|
top: 18px;
|
||||||
right: -7px;
|
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpolyline stroke-width='1' stroke='%23E2E2E2' fill='%23FFFFFF' points='1 0 7 7 1 14'%3E%3C/polyline%3E%3C/svg%3E");
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpolyline stroke-width='1' stroke='%23E2E2E2' fill='%23FFFFFF' points='1 0 7 7 1 14'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
|
||||||
|
${({ flipped }) =>
|
||||||
|
flipped
|
||||||
|
? `
|
||||||
|
left: -7px;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
`
|
||||||
|
: `
|
||||||
|
right: -7px;
|
||||||
|
`}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue