diff --git a/src/components/notes/sharing.jsx b/src/components/notes/sharing.jsx index 8e571889..dea3f787 100644 --- a/src/components/notes/sharing.jsx +++ b/src/components/notes/sharing.jsx @@ -1,70 +1,32 @@ -import React, { useCallback, useState, useMemo, useEffect } from 'react' +import React, { useCallback, useState } from 'react' import SharingProvider, { ShareButton, ShareModal } from 'cozy-sharing' -import { withClient, models } from 'cozy-client' import { withLocales } from 'cozy-sharing' +import { withClient } from 'cozy-client' -const LocalizedSharingProvider = withLocales(SharingProvider) +import useFileWithPath from 'hooks/useFileWithPath' +import styles from 'components/notes/sharing.styl' -function normalizeFileAndPath(id, file, parent) { - const withId = { id, ...file } - const normalized = models.file.normalize(withId) - if (parent && parent.path) { - const withPath = models.file.ensureFilePath(normalized, parent) - return withPath - } else { - return normalized - } -} +const LocalizedSharingProvider = withLocales(SharingProvider) export default withClient(function SharingWidget(props) { const { client } = props - const [parent, setParent] = useState(undefined) - - const id = props.file.id || props.file._id - const file = useMemo(() => normalizeFileAndPath(id, props.file, parent), [ - id, - parent - ]) - - useEffect( - () => { - async function getParent(file) { - try { - const parent = await client.query( - client.get('io.cozy.files', file.attributes.dir_id) - ) - setParent(parent.data) - } catch (e) { - // eslint-disable-next-line no-console - console.warn( - `Request failed when try to fetch the parent ${ - file.attributes.dir_id - } of io.cozy.files ${file.id || file._id}` - ) - // nothing to do here - // @TODO send a sentry event - } - } - getParent(file) - }, - [file.attributes.dir_id] - ) + const file = useFileWithPath({ cozyClient: client, file: props.file }) + const noteId = file && file.id const [showModal, setShowModal] = useState(false) const onClick = useCallback(() => setShowModal(!showModal), []) const onClose = useCallback(() => setShowModal(false), []) - const noteId = file.id + return ( - (parent && ( + (file && ( {showModal && } diff --git a/src/components/notes/sharing.styl b/src/components/notes/sharing.styl new file mode 100644 index 00000000..c547f901 --- /dev/null +++ b/src/components/notes/sharing.styl @@ -0,0 +1,3 @@ +.sharing-button + & > span > svg + span + display var(--notes-share-button-label, unset) diff --git a/src/hooks/useFileWithPath.js b/src/hooks/useFileWithPath.js new file mode 100644 index 00000000..a31126c6 --- /dev/null +++ b/src/hooks/useFileWithPath.js @@ -0,0 +1,41 @@ +import { useEffect, useState } from 'react' +import { models } from 'cozy-client' + +function useFileWithPath({ cozyClient, file }) { + const [fileWithPath, setFileWithPath] = useState(undefined) + + useEffect( + () => { + async function getParent(rawFile) { + const file = models.file.normalize(rawFile) + try { + const parent = await cozyClient.query( + cozyClient.get('io.cozy.files', file.attributes.dir_id) + ) + setFileWithPath(models.file.ensureFilePath(file, parent.data)) + } catch (e) { + // eslint-disable-next-line no-console + console.warn( + `Request failed when try to fetch the parent ${ + file.attributes.dir_id + } of io.cozy.files ${file.id}` + ) + setFileWithPath(null) + // nothing to do here + // @TODO send a sentry event + } + } + + getParent(file) + }, + [file.attributes.dir_id] + ) + + if (fileWithPath && fileWithPath.id == file.id) { + return fileWithPath + } else { + return undefined + } +} + +export default useFileWithPath diff --git a/src/styles/index.css b/src/styles/index.css index 64425275..70dd7641 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -31,8 +31,8 @@ html { --note-title4-color: var(--coolGrey); --note-border-radius: 8px; --note-header-height: 3rem; - --note-header-margin-left: 5rem; - --note-header-margin-right: 5rem; + --note-header-margin-left: 7rem; + --note-header-margin-right: 10rem; color: var(--note-base-color); } @media (max-width: 800px) { @@ -99,12 +99,19 @@ html .akEditor > div:first-child > div:first-child > div:first-child > div:first max-width: 100%; margin: auto; } -@media (max-width: 810px) { - html .akEditor > div:first-child > div:first-child > div:first-child > div:first-child { - width: 480px; /* condensed view */ - } +@media (max-width: 1023px) { + html { + --useless: auto; + /* FIXME : without this block, the next rule is not taken into account */ + } +} +@media (max-width: 1023px) { + html { + --notes-share-button-label: none; /* do not display the label in sharing button */ + --note-header-margin-left: 5rem; /* remove margin to leave space for the toolbar */ + --note-header-margin-right: 5rem; + } } -/* FIXME : without this repetition, the rule is not taken into account */ @media (max-width: 810px) { html .akEditor > div:first-child > div:first-child > div:first-child > div:first-child { width: 480px; /* condensed view */