diff --git a/packages/strapi-admin/admin/src/translations/en.json b/packages/strapi-admin/admin/src/translations/en.json index 7c4102b18d..3bab400876 100755 --- a/packages/strapi-admin/admin/src/translations/en.json +++ b/packages/strapi-admin/admin/src/translations/en.json @@ -104,7 +104,10 @@ "components.Input.error.custom-error": "{errorMessage} ", "components.ListRow.empty": "There is no data to be shown.", - + + "components.WysiwygBottomControls.charactersIndicators": "{characters} characters", + "components.WysiwygBottomControls.fullscreen": "Fullscreen mode", + "notification.error": "An error occurred", "Users & Permissions": "Users & Permissions", diff --git a/packages/strapi-admin/admin/src/translations/fr.json b/packages/strapi-admin/admin/src/translations/fr.json index 2d1f086cba..e63492a991 100755 --- a/packages/strapi-admin/admin/src/translations/fr.json +++ b/packages/strapi-admin/admin/src/translations/fr.json @@ -105,6 +105,9 @@ "components.ListRow.empty": "Il n'y a pas de données à afficher.", + "components.WysiwygBottomControls.charactersIndicators": "{characters} charactères", + "components.WysiwygBottomControls.fullscreen": "Mode plein écran", + "notification.error": "Une erreur est survenue", "Auth & Permissions": "Auth & Permissions", diff --git a/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js b/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js index dab0129f66..7b7ef4aec3 100644 --- a/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/index.js @@ -20,8 +20,10 @@ import PropTypes from 'prop-types'; import { isEmpty } from 'lodash'; import cn from 'classnames'; -import Select from 'components/InputSelect'; import Controls from 'components/WysiwygInlineControls'; +import Select from 'components/InputSelect'; +import WysiwygBottomControls from 'components/WysiwygBottomControls'; + import styles from './styles.scss'; const SELECT_OPTIONS = [ @@ -253,6 +255,7 @@ class Wysiwyg extends React.Component { /> + ); } diff --git a/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/styles.scss b/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/styles.scss index efbaf008c9..b5456c1347 100644 --- a/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/styles.scss +++ b/packages/strapi-helper-plugin/lib/src/components/Wysiwyg/styles.scss @@ -9,7 +9,7 @@ } .editorWrapper { - min-height: 350px; + min-height: 320px; margin-top: .9rem; border: 1px solid #E3E9F3; border-radius: 0.25rem; diff --git a/packages/strapi-helper-plugin/lib/src/components/WysiwygBottomControls/index.js b/packages/strapi-helper-plugin/lib/src/components/WysiwygBottomControls/index.js new file mode 100644 index 0000000000..c98130bbb5 --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/WysiwygBottomControls/index.js @@ -0,0 +1,33 @@ +/** + * + * WysiwygBottomControls + * + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import cn from 'classnames'; +import { FormattedMessage } from 'react-intl'; + +import styles from './styles.scss'; + +const WysiwygBottomControls = (props) => { + return ( +
+
+
+ +
+
+ ); +} + +WysiwygBottomControls.defaultProps = { + charactersNumber: 0, +}; + +WysiwygBottomControls.propTypes = { + charactersNumber: PropTypes.number, +}; + +export default WysiwygBottomControls; diff --git a/packages/strapi-helper-plugin/lib/src/components/WysiwygBottomControls/styles.scss b/packages/strapi-helper-plugin/lib/src/components/WysiwygBottomControls/styles.scss new file mode 100644 index 0000000000..725298d621 --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/WysiwygBottomControls/styles.scss @@ -0,0 +1,21 @@ +.wysiwygBottomControlsWrapper { + display: flex; + height: 30px; + width: 100%; + padding: 0 17px; + justify-content: space-between; + background-color: #FAFAFB; + line-height: 30px; + font-size: 12px; + font-family: Lato; +} + + +.fullScreenWrapper { + &:after { + content: '\f065'; + margin-left: 8px; + font-family: FontAwesome; + font-size: 10px; + } +}