From 010c3f807215dccb9a0ada17d4449b3594d45da3 Mon Sep 17 00:00:00 2001 From: cyril lopez Date: Mon, 12 Feb 2018 15:12:58 +0100 Subject: [PATCH] Design ImgPReview slider and remoive dynamic --- .../admin/src/translations/en.json | 2 + .../admin/src/translations/fr.json | 2 + .../lib/src/components/ImgPreview/index.js | 85 ++++++++++++++++--- .../lib/src/components/ImgPreview/styles.scss | 67 +++++++++++++++ .../lib/src/components/InputFile/index.js | 33 ++++--- .../lib/src/components/InputFile/styles.scss | 29 +++++++ .../admin/src/containers/HomePage/index.js | 14 +-- 7 files changed, 203 insertions(+), 29 deletions(-) diff --git a/packages/strapi-admin/admin/src/translations/en.json b/packages/strapi-admin/admin/src/translations/en.json index 0066975dd8..5568c993f2 100755 --- a/packages/strapi-admin/admin/src/translations/en.json +++ b/packages/strapi-admin/admin/src/translations/en.json @@ -11,6 +11,8 @@ "app.components.HomePage.button": "Create your first content type", "app.components.HomePage.feedback": "Feel free to ask questions or give us feedback by using one of the support channels below.", + "app.components.InputFile.newFile": "ADD NEW FILE", + "app.components.InstallPluginPage.helmet": "Install plugins", "app.components.InstallPluginPage.title": "Install new plugins", "app.components.InstallPluginPage.description": "Extend your app with no efforts", diff --git a/packages/strapi-admin/admin/src/translations/fr.json b/packages/strapi-admin/admin/src/translations/fr.json index 6a876aa37f..35bcbf6f8f 100755 --- a/packages/strapi-admin/admin/src/translations/fr.json +++ b/packages/strapi-admin/admin/src/translations/fr.json @@ -11,6 +11,8 @@ "app.components.HomePage.button": "Créez votre premier type de contenu", "app.components.HomePage.feedback": "N'hésitez pas à utiliser un des channels ci-dessous pour poser vos questions ou nous donner vos retours.", + "app.components.InputFile.newFile": "AJOUTER UN NOUVEAU FICHIER", + "app.components.InstallPluginPage.helmet": "Installez des plugins", "app.components.InstallPluginPage.title": "Installez des nouveaux plugins", "app.components.InstallPluginPage.description": "Améliorez votre app sans efforts", diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js b/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js index 0cb988ee78..4cfc7ae577 100644 --- a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/ImgPreview/index.js @@ -7,7 +7,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { get, isEmpty, isObject } from 'lodash'; +import { cloneDeep, get, isEmpty, isObject, size } from 'lodash'; import cn from 'classnames'; import styles from './styles.scss'; @@ -16,8 +16,10 @@ class ImgPreview extends React.Component { state = { imgURL: '', position: 0 }; componentDidMount() { + // We don't need the generateImgURL function here since the compo will + // always have an init value here this.setState({ - imgURL: get(this.props.files, ['0', 'url']), + imgURL: get(this.props.files, ['0', 'url'], ''), }); } @@ -46,18 +48,18 @@ class ImgPreview extends React.Component { reader.readAsDataURL(file); } - handleClick = (operator) => { + handleClick = (type) => { const { position } = this.state; const { files } = this.props; let file; let nextPosition; - switch (operator) { - case '+': + switch (type) { + case 'right': file = files[position + 1] || files[0]; nextPosition = files[position + 1] ? position + 1 : 0; break; - case '-': + case 'left': file = files[position - 1] || files[files.length - 1]; nextPosition = files[position - 1] ? position - 1 : files.length - 1; break; @@ -74,16 +76,67 @@ class ImgPreview extends React.Component { this.setState({ position: nextPosition }); } + removeFile = (e) => { + e.preventDefault(); + e.stopPropagation(); + + const value = cloneDeep(this.props.files); + value.splice(this.state.position, 1); + + const nextPosition = this.state.position - 1 === -1 ? 0 : this.state.position - 1; + const nextFile = value[nextPosition]; + + if (!isEmpty(nextFile)) { + if (!nextFile.url) { + this.generateImgURL(nextFile); + } else { + this.setState({ imgURL: nextFile.url }); + } + } else { + this.setState({ imgURL: '' }); + } + + const target = { + name: this.props.name, + type: 'file', + value, + }; + + this.setState({ position: nextPosition }); + + this.props.onChange({ target }); + } + + renderArrow = (type = 'left') => ( +
{ + e.preventDefault(); + e.stopPropagation(); + this.handleClick(type); + }} + /> + ) + + renderIconRemove = () => ( +
+ +
+ ) + render() { + const { files, multiple } = this.props; + return ( -
+
+ {!isEmpty(files) && this.renderIconRemove()} - - + { multiple && size(files) > 1 && this.renderArrow('right')} + { multiple && size(files) > 1 && this.renderArrow('left')}
); } @@ -92,11 +145,17 @@ class ImgPreview extends React.Component { ImgPreview.defaultProps = { files: [{}], isUploading: false, + multiple: false, + name: '', + onChange: () => {}, }; ImgPreview.propTypes = { files: PropTypes.array, isUploading: PropTypes.bool, + multiple: PropTypes.bool, + name: PropTypes.string, + onChange: PropTypes.func, }; export default ImgPreview; diff --git a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/styles.scss b/packages/strapi-helper-plugin/lib/src/components/ImgPreview/styles.scss index e69de29bb2..b73d1b0f0c 100644 --- a/packages/strapi-helper-plugin/lib/src/components/ImgPreview/styles.scss +++ b/packages/strapi-helper-plugin/lib/src/components/ImgPreview/styles.scss @@ -0,0 +1,67 @@ +.imgPreviewContainer { + display: table-cell; + height: 144px; + width: 358px; + position: relative; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + text-align: center; + vertical-align: middle; + // background-color: red; + background-color: #F3F4F4; + white-space: nowrap; + + > img { + max-width: 358px; + max-height: 144px; + } +} + +.iconContainer { + position: absolute; + top: 5px; + right: 3px; + width: 20px; + height: 20px; + color: #fff; + font-size: 11px; + cursor: pointer; +} + +.arrowContainer { + height: 32px; + width: 28px; + background: rgba(0,0,0,0.20); + border-radius: 2px 0 0 2px; + text-align: center; + color: #fff; + cursor: pointer; +} + +.arrowRight { + position: absolute; + top: 56px; + right: 0; + &:before { + content: '\f105'; + vertical-align: middle; + text-align: center; + font-family: 'FontAwesome'; + font-size: 20px; + font-weight: 800; + } +} + +.arrowLeft { + position: absolute; + top: 56px; + left: 0; + &:before { + content: '\f104'; + vertical-align: middle; + text-align: center; + font-family: 'FontAwesome'; + font-size: 20px; + font-weight: 800; + } +} diff --git a/packages/strapi-helper-plugin/lib/src/components/InputFile/index.js b/packages/strapi-helper-plugin/lib/src/components/InputFile/index.js index 10f961748b..645de4b10a 100644 --- a/packages/strapi-helper-plugin/lib/src/components/InputFile/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/InputFile/index.js @@ -7,6 +7,7 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; import { cloneDeep, isArray, isObject, isEmpty, last } from 'lodash'; import cn from 'classnames'; @@ -44,16 +45,28 @@ class InputFile extends React.Component { return (
- - +
); } diff --git a/packages/strapi-helper-plugin/lib/src/components/InputFile/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputFile/styles.scss index e69de29bb2..6d0b0f69c1 100644 --- a/packages/strapi-helper-plugin/lib/src/components/InputFile/styles.scss +++ b/packages/strapi-helper-plugin/lib/src/components/InputFile/styles.scss @@ -0,0 +1,29 @@ +.inputFile { + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; +} + +.buttonContainer { + width: 100%; + height: 34px; + text-align: center; + background-color: #FAFAFB; + border: 1px solid #E3E9F3; + border-top: 0; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + + color: #333740; + font-size: 12px; + font-weight: 700; + -webkit-font-smoothing: antialiased; + line-height: 34px; + cursor: pointer; + + > i { + margin-right: 10px; + } + +} diff --git a/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js b/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js index 4d5f5811e8..01f6ebcde0 100755 --- a/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js +++ b/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js @@ -33,12 +33,14 @@ export class HomePage extends React.Component { render() { return ( -
- +
+
+ +
); }