diff --git a/examples/getstarted/src/api/temp/content-types/temp/schema.json b/examples/getstarted/src/api/temp/content-types/temp/schema.json index f1c27e520c..907a1943ea 100644 --- a/examples/getstarted/src/api/temp/content-types/temp/schema.json +++ b/examples/getstarted/src/api/temp/content-types/temp/schema.json @@ -45,6 +45,20 @@ "localized": true } } + }, + "multiple": { + "allowedTypes": [ + "images", + "files", + "videos" + ], + "type": "media", + "multiple": true, + "pluginOptions": { + "i18n": { + "localized": true + } + } } } } diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js new file mode 100644 index 0000000000..2f0701c298 --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/FileWrapper.js @@ -0,0 +1,48 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { Row } from '@strapi/parts/Row'; +import { TableLabel } from '@strapi/parts/Text'; + +const Wrapper = styled(Row)` + position: relative; + border-radius: 50%; + width: 26px; + height: 26px; + border: 1px solid ${({ theme }) => theme.colors.neutral200}; + background: ${({ theme }) => theme.colors.neutral150}; + padding-left: 1px; + z-index: ${({ hovering }) => (hovering ? 1 : undefined)}; + + span { + line-height: 0.6rem; + font-size: 0.6rem; + } +`; + +const FileWrapper = ({ children, preview }) => { + const [previewVisible, setPreviewVisible] = useState(false); + + return ( + setPreviewVisible(true)} + onMouseLeave={() => setPreviewVisible(false)} + > + {children} + + ); +}; + +FileWrapper.defaultProps = { + preview: true, +}; + +FileWrapper.propTypes = { + children: PropTypes.string.isRequired, + preview: PropTypes.bool, +}; + +export default FileWrapper; diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/index.js similarity index 59% rename from packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media.js rename to packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/index.js index 39d56fc4af..aef3dba95e 100644 --- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media.js +++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media/index.js @@ -1,27 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; import { Avatar } from '@strapi/parts/Avatar'; -import { TableLabel } from '@strapi/parts/Text'; -import { Row } from '@strapi/parts/Row'; - +import { Tooltip } from '@strapi/parts/Tooltip'; import { getFileExtension, prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin'; - -// TODO: this is very temporary until we get a design -const FileWrapper = styled(Row)` - position: relative; - border-radius: 50%; - width: 26px; - height: 26px; - border: 1px solid ${({ theme }) => theme.colors.neutral200}; - background: ${({ theme }) => theme.colors.neutral150}; - padding-left: 1px; - - span { - line-height: 0.6rem; - font-size: 0.6rem; - } -`; +import FileWrapper from './FileWrapper'; const Media = ({ url, mime, alternativeText, name, ext, formats }) => { const fileURL = prefixFileUrlWithBackendUrl(url); @@ -34,11 +16,12 @@ const Media = ({ url, mime, alternativeText, name, ext, formats }) => { } const fileExtension = getFileExtension(ext); + const fileName = name.length > 100 ? `${name.substring(0, 100)}...` : name; return ( - - {fileExtension} - + + {fileExtension} + ); }; diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/MultipleMedias.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/MultipleMedias.js index ba4d6719b7..a317d98897 100644 --- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/MultipleMedias.js +++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/MultipleMedias.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { AvatarGroup } from '@strapi/parts/Avatar'; import Media from './Media'; +import FileWrapper from './Media/FileWrapper'; const MultipleMedia = ({ value }) => { return ( @@ -9,6 +10,20 @@ const MultipleMedia = ({ value }) => { {value.map((file, index) => { const key = `${file.id}${index}`; + if (index === 3) { + const remainingFiles = `+${value.length - 3}`; + + return ( + + {remainingFiles} + + ); + } + + if (index > 3) { + return null; + } + return ; })} diff --git a/packages/core/admin/admin/src/content-manager/pages/ListView/FieldPicker/index.js b/packages/core/admin/admin/src/content-manager/pages/ListView/FieldPicker/index.js index a404c171bc..79e58e7140 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListView/FieldPicker/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListView/FieldPicker/index.js @@ -44,7 +44,7 @@ const FieldPicker = ({ layout }) => { return ( { - {/* - - {formatMessage({ - id: 'components.PageFooter.select', - defaultMessage: 'Entries per page', - })} - - */} + + + {formatMessage({ + id: 'components.PageFooter.select', + defaultMessage: 'Entries per page', + })} + + ); }; diff --git a/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js b/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js index 9c0b9a4124..dab3aefb0a 100644 --- a/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js +++ b/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/tests/index.test.js @@ -39,11 +39,37 @@ describe('', () => { } = render(makeApp(history)); expect(firstChild).toMatchInlineSnapshot(` - .c2 { - font-weight: 500; - font-size: 0.75rem; - line-height: 1.33; - color: #32324d; + .c12 { + padding-left: 8px; + } + + .c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c3 { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + width: 100%; + background: transparent; + border: none; + } + + .c3:focus { + outline: none; } .c8 { @@ -62,21 +88,7 @@ describe('', () => { padding-left: 12px; } - .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } - - .c5 { + .c4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -94,6 +106,20 @@ describe('', () => { align-items: center; } + .c6 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + .c1 { display: -webkit-box; display: -webkit-flex; @@ -110,10 +136,10 @@ describe('', () => { } .c1 > * + * { - margin-top: 4px; + margin-top: 0px; } - .c3 { + .c2 { position: relative; border: 1px solid #dcdce4; padding-right: 12px; @@ -122,7 +148,7 @@ describe('', () => { overflow: hidden; } - .c3:focus-within { + .c2:focus-within { border: 1px solid #4945ff; } @@ -155,25 +181,17 @@ describe('', () => { width: 0.375rem; } - .c4 { - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - width: 100%; - background: transparent; - border: none; - } - - .c4:focus { - outline: none; - } - - .c6 { + .c5 { min-height: 2.5rem; } + .c13 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #666687; + } +
@@ -181,30 +199,24 @@ describe('', () => {
- - Entries per page -
+
+ +
`); diff --git a/packages/core/upload/admin/src/pages/App/components/tests/ListView.test.js b/packages/core/upload/admin/src/pages/App/components/tests/ListView.test.js index af44e575af..67a6d8f861 100644 --- a/packages/core/upload/admin/src/pages/App/components/tests/ListView.test.js +++ b/packages/core/upload/admin/src/pages/App/components/tests/ListView.test.js @@ -130,26 +130,10 @@ describe('MediaLibrary / ListView', () => { ); expect(container).toMatchInlineSnapshot(` - .c36 { - font-weight: 400; - font-size: 0.875rem; - line-height: 1.43; - color: #32324d; - } - .c27 { padding-top: 24px; } - .c35 { - padding-right: 16px; - padding-left: 16px; - } - - .c37 { - padding-left: 12px; - } - .c28 { display: -webkit-box; display: -webkit-flex; @@ -168,6 +152,84 @@ describe('MediaLibrary / ListView', () => { align-items: flex-end; } + .c43 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .c47 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + .c44 > * + * { + margin-left: 4px; + } + + .c45 { + padding: 12px; + border-radius: 4px; + -webkit-text-decoration: none; + text-decoration: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + } + + .c46 { + font-size: 0.7rem; + pointer-events: none; + } + + .c46 svg path { + fill: #c0c0cf; + } + + .c46:focus svg path, + .c46:hover svg path { + fill: #c0c0cf; + } + + .c48 { + font-size: 0.7rem; + } + + .c48 svg path { + fill: #666687; + } + + .c48:focus svg path, + .c48:hover svg path { + fill: #4a4a6a; + } + + .c0 { + display: grid; + grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); + grid-gap: 16px; + } + + .c41 { + padding-left: 8px; + } + .c29 { display: -webkit-box; display: -webkit-flex; @@ -182,6 +244,37 @@ describe('MediaLibrary / ListView', () => { align-items: center; } + .c32 { + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + width: 100%; + background: transparent; + border: none; + } + + .c32:focus { + outline: none; + } + + .c37 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #32324d; + } + + .c36 { + padding-right: 16px; + padding-left: 16px; + } + + .c38 { + padding-left: 12px; + } + .c33 { display: -webkit-box; display: -webkit-flex; @@ -200,16 +293,18 @@ describe('MediaLibrary / ListView', () => { align-items: center; } - .c43 { - border: 0; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + .c35 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .c30 { @@ -244,23 +339,23 @@ describe('MediaLibrary / ListView', () => { border: 1px solid #4945ff; } - .c38 { + .c39 { background: transparent; border: none; position: relative; z-index: 1; } - .c38 svg { + .c39 svg { height: 0.6875rem; width: 0.6875rem; } - .c38 svg path { + .c39 svg path { fill: #666687; } - .c39 { + .c40 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -269,75 +364,19 @@ describe('MediaLibrary / ListView', () => { border: none; } - .c39 svg { + .c40 svg { width: 0.375rem; } - .c40 > * + * { - margin-left: 4px; - } - - .c41 { - padding: 12px; - border-radius: 4px; - -webkit-text-decoration: none; - text-decoration: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - } - - .c42 { - font-size: 0.7rem; - pointer-events: none; - } - - .c42 svg path { - fill: #c0c0cf; - } - - .c42:focus svg path, - .c42:hover svg path { - fill: #c0c0cf; - } - - .c44 { - font-size: 0.7rem; - } - - .c44 svg path { - fill: #666687; - } - - .c44:focus svg path, - .c44:hover svg path { - fill: #4a4a6a; - } - - .c32 { - position: absolute; - left: 0; - right: 0; - bottom: 0; - top: 0; - width: 100%; - background: transparent; - border: none; - } - - .c32:focus { - outline: none; - } - .c34 { min-height: 2.5rem; } - .c0 { - display: grid; - grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); - grid-gap: 16px; + .c42 { + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + color: #666687; } .c1 { @@ -778,13 +817,13 @@ describe('MediaLibrary / ListView', () => { class="c33 c34" >
10 @@ -792,11 +831,11 @@ describe('MediaLibrary / ListView', () => {
+
+