mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

Flip people menu for first person

This commit is contained in:
viktorstrate 2021-10-21 16:46:08 +02:00
parent df57f55ac4
commit b20229f995
No known key found for this signature in database
GPG Key ID: 3F855605109C1E8A
2 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/src/components/sidebar/MediaSidebar/MediaSidebarPeople.tsx
View File

@ -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

24
ui/src/components/sidebar/Sharing.tsx
View File

@ -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;
`}
} }
` `