From fc009ead1cbe4bee9971e2ba549fd439f7a4ed57 Mon Sep 17 00:00:00 2001 From: viktorstrate Date: Fri, 4 Jun 2021 16:12:43 +0200 Subject: [PATCH] Style sidebar sharing options --- ui/src/components/sidebar/Sharing.tsx | 442 +++++++++--------- .../components/sidebar/icons/shareAddIcon.svg | 4 + .../sidebar/icons/shareCopyIcon.svg | 4 + .../sidebar/icons/shareDeleteIcon.svg | 4 + .../sidebar/icons/shareLinkIcon.svg | 4 + .../sidebar/icons/shareMoreIcon.svg | 4 + 6 files changed, 241 insertions(+), 221 deletions(-) create mode 100644 ui/src/components/sidebar/icons/shareAddIcon.svg create mode 100644 ui/src/components/sidebar/icons/shareCopyIcon.svg create mode 100644 ui/src/components/sidebar/icons/shareDeleteIcon.svg create mode 100644 ui/src/components/sidebar/icons/shareLinkIcon.svg create mode 100644 ui/src/components/sidebar/icons/shareMoreIcon.svg diff --git a/ui/src/components/sidebar/Sharing.tsx b/ui/src/components/sidebar/Sharing.tsx index 7fde76bf..b42eedec 100644 --- a/ui/src/components/sidebar/Sharing.tsx +++ b/ui/src/components/sidebar/Sharing.tsx @@ -1,25 +1,11 @@ -import React, { useEffect, useState } from 'react' +import React, { useEffect } from 'react' import { useMutation, useQuery, gql, useLazyQuery } from '@apollo/client' -import { - Table, - Button, - Dropdown, - Checkbox, - Input, - Icon, -} from 'semantic-ui-react' import copy from 'copy-to-clipboard' -import styled from 'styled-components' import { useTranslation } from 'react-i18next' -import { sidbarGetAlbumShares_album_shares } from './__generated__/sidbarGetAlbumShares' import { sidebareDeleteShare, sidebareDeleteShareVariables, } from './__generated__/sidebareDeleteShare' -import { - sidebarProtectShare, - sidebarProtectShareVariables, -} from './__generated__/sidebarProtectShare' import { sidbarGetPhotoShares_media_shares } from './__generated__/sidbarGetPhotoShares' import { sidebarPhotoAddShare, @@ -40,6 +26,12 @@ import { import { authToken } from '../../helpers/authentication' import { SidebarSection, SidebarSectionTitle } from './SidebarComponents' +import { ReactComponent as LinkIcon } from './icons/shareLinkIcon.svg' +import { ReactComponent as CopyIcon } from './icons/shareCopyIcon.svg' +import { ReactComponent as DeleteIcon } from './icons/shareDeleteIcon.svg' +import { ReactComponent as MoreIcon } from './icons/shareMoreIcon.svg' +import { ReactComponent as AddIcon } from './icons/shareAddIcon.svg' + const SHARE_PHOTO_QUERY = gql` query sidebarGetPhotoShares($id: ID!) { media(id: $id) { @@ -82,14 +74,14 @@ const ADD_ALBUM_SHARE_MUTATION = gql` } ` -const PROTECT_SHARE_MUTATION = gql` - mutation sidebarProtectShare($token: String!, $password: String) { - protectShareToken(token: $token, password: $password) { - token - hasPassword - } - } -` +// const PROTECT_SHARE_MUTATION = gql` +// mutation sidebarProtectShare($token: String!, $password: String) { +// protectShareToken(token: $token, password: $password) { +// token +// hasPassword +// } +// } +// ` const DELETE_SHARE_MUTATION = gql` mutation sidebareDeleteShare($token: String!) { @@ -99,162 +91,150 @@ const DELETE_SHARE_MUTATION = gql` } ` -type ShareItemMoreDropdownProps = { - id: string - isPhoto: boolean - share: sidbarGetAlbumShares_album_shares -} +// type ShareItemMoreDropdownProps = { +// id: string +// query: DocumentNode +// share: sidbarGetAlbumShares_album_shares +// } -const ShareItemMoreDropdown = ({ - id, - share, - isPhoto, -}: ShareItemMoreDropdownProps) => { - const { t } = useTranslation() - const query = isPhoto ? SHARE_PHOTO_QUERY : SHARE_ALBUM_QUERY +// const ShareItemMoreDropdown = ({ +// id, +// share, +// query, +// }: ShareItemMoreDropdownProps) => { +// const { t } = useTranslation() - const [deleteShare, { loading: deleteShareLoading }] = useMutation< - sidebareDeleteShare, - sidebareDeleteShareVariables - >(DELETE_SHARE_MUTATION, { - refetchQueries: [{ query: query, variables: { id } }], - }) +// const [addingPassword, setAddingPassword] = useState(false) +// const showPasswordInput = addingPassword || share.hasPassword - const [addingPassword, setAddingPassword] = useState(false) - const showPasswordInput = addingPassword || share.hasPassword +// const [passwordInputValue, setPasswordInputValue] = useState( +// share.hasPassword ? '**********' : '' +// ) +// const [passwordHidden, setPasswordHidden] = useState(share.hasPassword) - const [passwordInputValue, setPasswordInputValue] = useState( - share.hasPassword ? '**********' : '' - ) - const [passwordHidden, setPasswordHidden] = useState(share.hasPassword) +// const hidePassword = (hide: boolean) => { +// setPasswordHidden(hide) +// if (hide) { +// setPasswordInputValue('**********') +// } +// } - const hidePassword = (hide: boolean) => { - setPasswordHidden(hide) - if (hide) { - setPasswordInputValue('**********') - } - } +// const [setPassword, { loading: setPasswordLoading }] = useMutation< +// sidebarProtectShare, +// sidebarProtectShareVariables +// >(PROTECT_SHARE_MUTATION, { +// refetchQueries: [{ query: query, variables: { id } }], +// onCompleted: data => { +// hidePassword(data.protectShareToken.hasPassword) +// }, +// // refetchQueries: [{ query: query, variables: { id } }], +// variables: { +// token: share.token, +// }, +// }) - const [setPassword, { loading: setPasswordLoading }] = useMutation< - sidebarProtectShare, - sidebarProtectShareVariables - >(PROTECT_SHARE_MUTATION, { - refetchQueries: [{ query: query, variables: { id } }], - onCompleted: data => { - hidePassword(data.protectShareToken.hasPassword) - }, - // refetchQueries: [{ query: query, variables: { id } }], - variables: { - token: share.token, - }, - }) +// let addPasswordInput = null +// if (showPasswordInput) { +// const setPasswordEvent = (event: React.KeyboardEvent) => { +// if (!passwordHidden && passwordInputValue != '' && event.key == 'Enter') { +// event.preventDefault() +// setPassword({ +// variables: { +// token: share.token, +// password: (event.target as HTMLInputElement).value, +// }, +// }) +// } +// } - let addPasswordInput = null - if (showPasswordInput) { - const setPasswordEvent = (event: React.KeyboardEvent) => { - if (!passwordHidden && passwordInputValue != '' && event.key == 'Enter') { - event.preventDefault() - setPassword({ - variables: { - token: share.token, - password: (event.target as HTMLInputElement).value, - }, - }) - } - } +// addPasswordInput = ( +// e.stopPropagation()} +// value={passwordInputValue} +// type={passwordHidden ? 'password' : 'text'} +// onKeyUp={setPasswordEvent} +// onChange={event => { +// hidePassword(false) +// setPasswordInputValue(event.target.value) +// }} +// placeholder="Password" +// icon={ +// +// } +// /> +// ) +// } - addPasswordInput = ( - e.stopPropagation()} - value={passwordInputValue} - type={passwordHidden ? 'password' : 'text'} - onKeyUp={setPasswordEvent} - onChange={event => { - hidePassword(false) - setPasswordInputValue(event.target.value) - }} - placeholder="Password" - icon={ - - } - /> - ) - } +// const checkboxClick = () => { +// const enable = !showPasswordInput +// setAddingPassword(enable) +// if (!enable) { +// setPassword({ +// variables: { +// token: share.token, +// password: null, +// }, +// }) +// setPasswordInputValue('') +// } +// } - const checkboxClick = () => { - const enable = !showPasswordInput - setAddingPassword(enable) - if (!enable) { - setPassword({ - variables: { - token: share.token, - password: null, - }, - }) - setPasswordInputValue('') - } - } +// // const [dropdownOpen, setDropdownOpen] = useState(false) - // const [dropdownOpen, setDropdownOpen] = useState(false) - - return ( - { - // console.log('Blur') - // }} - // onClick={() => setDropdownOpen(state => !state)} - // onClose={() => setDropdownOpen(false)} - // open={dropdownOpen} - button - text={t('general.action.more', 'More')} - closeOnChange={false} - closeOnBlur={false} - > - - e.stopPropagation()} - onClick={e => { - e.stopPropagation() - checkboxClick() - }} - > - e.stopPropagation()} - checked={showPasswordInput} - onChange={() => { - checkboxClick() - }} - /> - {addPasswordInput} - - { - deleteShare({ - variables: { - token: share.token, - }, - }) - }} - /> - - - ) -} - -const ShareButtonGroup = styled(Button.Group)` - flex-wrap: wrap; -` +// return ( +// { +// // console.log('Blur') +// // }} +// // onClick={() => setDropdownOpen(state => !state)} +// // onClose={() => setDropdownOpen(false)} +// // open={dropdownOpen} +// button +// text={t('general.action.more', 'More')} +// closeOnChange={false} +// closeOnBlur={false} +// > +// +// e.stopPropagation()} +// onClick={e => { +// e.stopPropagation() +// checkboxClick() +// }} +// > +// e.stopPropagation()} +// checked={showPasswordInput} +// onChange={() => { +// checkboxClick() +// }} +// /> +// {addPasswordInput} +// +// {/* { +// deleteShare({ +// variables: { +// token: share.token, +// }, +// }) +// }} +// /> */} +// +// +// ) +// } type SidebarShareAlbumProps = { id: string @@ -369,37 +349,67 @@ const SidebarShare = ({ }: SidebarShareProps) => { const { t } = useTranslation() + const query = isPhoto ? SHARE_PHOTO_QUERY : SHARE_ALBUM_QUERY + + const [deleteShare] = useMutation< + sidebareDeleteShare, + sidebareDeleteShareVariables + >(DELETE_SHARE_MUTATION, { + refetchQueries: [{ query: query, variables: { id } }], + }) + if (shares === undefined) { return null } const optionsRows = shares.map(share => ( - - - {t('sidebar.sharing.public_link', 'Public Link')} {share.token} - - - - + + + {/* */} + + )) if (optionsRows.length == 0) { optionsRows.push( - - + + {t('sidebar.sharing.no_shares_found', 'No shares found')} - - + + ) } @@ -409,37 +419,27 @@ const SidebarShare = ({ {t('sidebar.sharing.title', 'Sharing options')}
- - - - - {t('sidebar.sharing.table_header', 'Public shares')} - - - - {optionsRows} - - - -
+ + {optionsRows} + + + +
+ +
) diff --git a/ui/src/components/sidebar/icons/shareAddIcon.svg b/ui/src/components/sidebar/icons/shareAddIcon.svg new file mode 100644 index 00000000..f1f783ad --- /dev/null +++ b/ui/src/components/sidebar/icons/shareAddIcon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/ui/src/components/sidebar/icons/shareCopyIcon.svg b/ui/src/components/sidebar/icons/shareCopyIcon.svg new file mode 100644 index 00000000..b36387b9 --- /dev/null +++ b/ui/src/components/sidebar/icons/shareCopyIcon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/ui/src/components/sidebar/icons/shareDeleteIcon.svg b/ui/src/components/sidebar/icons/shareDeleteIcon.svg new file mode 100644 index 00000000..7fc2b8d8 --- /dev/null +++ b/ui/src/components/sidebar/icons/shareDeleteIcon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/ui/src/components/sidebar/icons/shareLinkIcon.svg b/ui/src/components/sidebar/icons/shareLinkIcon.svg new file mode 100644 index 00000000..74f20a46 --- /dev/null +++ b/ui/src/components/sidebar/icons/shareLinkIcon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/ui/src/components/sidebar/icons/shareMoreIcon.svg b/ui/src/components/sidebar/icons/shareMoreIcon.svg new file mode 100644 index 00000000..b35c1e54 --- /dev/null +++ b/ui/src/components/sidebar/icons/shareMoreIcon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file