From db2fdbe102871e28eba146feebd542005d07820a Mon Sep 17 00:00:00 2001 From: Jeremy Hermelin Date: Wed, 12 Feb 2020 13:37:30 -0500 Subject: [PATCH 1/9] admin watcher improvement Signed-off-by: Jeremy Hermelin --- packages/strapi-admin/index.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/strapi-admin/index.js b/packages/strapi-admin/index.js index 5399726e38..37660c76bb 100644 --- a/packages/strapi-admin/index.js +++ b/packages/strapi-admin/index.js @@ -249,6 +249,7 @@ async function watchFiles(dir, ignoreFiles = []) { const cacheDir = path.join(dir, '.cache'); const pkgJSON = require(path.join(dir, 'package.json')); const admin = path.join(dir, 'admin'); + const extensionsPath = path.join(dir, 'extensions'); const appPlugins = Object.keys(pkgJSON.dependencies).filter( dep => @@ -256,12 +257,7 @@ async function watchFiles(dir, ignoreFiles = []) { fs.existsSync(path.resolve(getPkgPath(dep), 'admin', 'src', 'index.js')) ); const pluginsToWatch = appPlugins.map(plugin => - path.join( - dir, - 'extensions', - plugin.replace(/^strapi-plugin-/i, ''), - 'admin' - ) + path.join(extensionsPath, plugin.replace(/^strapi-plugin-/i, ''), 'admin') ); const filesToWatch = [admin, ...pluginsToWatch]; @@ -272,20 +268,20 @@ async function watchFiles(dir, ignoreFiles = []) { }); watcher.on('all', async (event, filePath) => { - const re = /\/extensions\/([^\/]*)\/.*$/gm; - const matched = re.exec(filePath); - const isExtension = matched !== null; - const pluginName = isExtension ? matched[1] : ''; + const isExtension = filePath.includes(extensionsPath); + const pluginName = isExtension + ? filePath.replace(extensionsPath, '').split(path.sep)[1] + : ''; const packageName = isExtension ? `strapi-plugin-${pluginName}` : 'strapi-admin'; const targetPath = isExtension - ? filePath - .split(`${path.sep}extensions${path.sep}`)[1] - .replace(pluginName, '') - : filePath.split(`${path.sep}admin`)[1]; + ? path.normalize( + filePath.split(extensionsPath)[1].replace(pluginName, '') + ) + : path.normalize(filePath.split(admin)[1]); const destFolder = isExtension ? path.join(cacheDir, 'plugins', packageName) From d4d83fcd56ceda9c6a986bb0a5e0c0f05fa7a247 Mon Sep 17 00:00:00 2001 From: Vitalii Tverdokhlib Date: Sun, 16 Feb 2020 16:24:49 +0200 Subject: [PATCH 2/9] update ru.json sync with last en ( jq -s '.[0] * .[1]' en.json ru.json) Signed-off-by: vitaliytv --- .../admin/src/translations/ru.json | 44 ++++++++++++++++++- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/packages/strapi-admin/admin/src/translations/ru.json b/packages/strapi-admin/admin/src/translations/ru.json index c5e6b36cf5..139a7ad335 100644 --- a/packages/strapi-admin/admin/src/translations/ru.json +++ b/packages/strapi-admin/admin/src/translations/ru.json @@ -22,6 +22,7 @@ "app.components.BlockLink.documentation.content": "Ознакомьтесь с концепциями, справочниками и обучающими материалами.", "app.components.Button.cancel": "Отменить", "app.components.Button.save": "Сохранить", + "app.components.Button.reset": "Сброс", "app.components.ComingSoonPage.comingSoon": "Скоро", "app.components.ComingSoonPage.featuresNotAvailable": "Этот функционал все еще находится в активной разработке.", "app.components.DownloadInfo.download": "Выполняется загрузка...", @@ -75,8 +76,10 @@ "app.components.LeftMenuLinkContainer.general": "Общие", "app.components.LeftMenuLinkContainer.installNewPlugin": "Магазин", "app.components.LeftMenuLinkContainer.listPlugins": "Плагины", + "app.components.LeftMenuLinkContainer.contentTypes": "Типы контента", "app.components.LeftMenuLinkContainer.noPluginsInstalled": "Нет установленных плагинов", "app.components.LeftMenuLinkContainer.plugins": "Плагины", + "app.components.LeftMenuLinkContainer.settings": "Настройки", "app.components.ListPluginsPage.description": "Список установленных плагинов в проекте.", "app.components.ListPluginsPage.helmet.title": "Список плагинов", "app.components.ListPluginsPage.title": "Плагины", @@ -105,6 +108,7 @@ "app.components.listPlugins.title.plural": "{number} плагинов установлено", "app.components.listPlugins.title.singular": "{number} плагин установлен", "app.components.listPluginsPage.deletePlugin.error": "Произошла ошибка при удалении плагина", + "app.links.configure-view": "Настройка представления", "app.utils.SelectOption.defaultMessage": " ", "app.utils.defaultMessage": " ", "app.utils.placeholder.defaultMessage": " ", @@ -125,7 +129,9 @@ "components.Input.error.validation.minSupMax": "Не может быть выше", "components.Input.error.validation.regex": "Значение не соответствует регулярному выражению.", "components.Input.error.validation.required": "Обязательное значение.", + "components.Input.error.validation.unique": "Это значение уже используется.", "components.InputSelect.option.placeholder": "Выберите здесь", + "component.Input.error.validation.integer": "Значение должно быть целочисленным", "components.ListRow.empty": "Нет данных для отображения.", "components.OverlayBlocker.description": "Вы воспользовались функционалом, который требует перезапуска сервера. Пожалуйста, подождите, пока сервер не будет запущен.", "components.OverlayBlocker.description.serverError": "Сервер должен был перезагрузиться, пожалуйста, проверьте ваши логи в терминале.", @@ -163,7 +169,6 @@ "HomePage.community": "Присоединяйтесь к сообществу", "HomePage.roadmap": "Смотрите нашу дорожную карту", "HomePage.greetings": "Привет {name}!", - "Auth.advanced.allow_register": "", "Auth.privacy-policy-agreement.terms": "условия", "Auth.privacy-policy-agreement.policy": "политика конфиденциальности", @@ -212,8 +217,43 @@ "Auth.header.register.description": "Для завершения установки и обеспечения безопасности приложения, создайте вашего первого пользователя (root admin), заполнив форму ниже.", "Auth.link.forgot-password": "Забыли пароль?", "Auth.link.ready": "Готовы войти?", + "Settings.global": "Глобальные настройки", + "Settings.error": "Ошибка", + "Settings.webhooks.title": "Webhooks", + "Settings.webhooks.singular": "webhook", + "Settings.webhooks.list.description": "Уведомления с помощью POST событий.", + "Settings.webhooks.list.button.add": "Добавить новый webhook", + "Settings.webhooks.list.button.delete": "Удалить", + "Settings.webhooks.list.empty.title": "Пока еще нет webhooks", + "Settings.webhooks.list.empty.description": "Добавить первый в этот список.", + "Settings.webhooks.list.empty.link": "Просмотреть документацию", + "Settings.webhooks.enabled": "Включен", + "Settings.webhooks.disabled": "Выключен", + "Settings.webhooks.create": "Создание webhook", + "Settings.webhooks.create.header": "Создание нового заголовка", + "Settings.webhooks.form.name": "Название", + "Settings.webhooks.form.url": "Url", + "Settings.webhooks.form.headers": "Заголовки", + "Settings.webhooks.form.events": "События", + "Settings.webhooks.key": "Ключ", + "Settings.webhooks.value": "Значение", + "Settings.webhooks.trigger": "Триггер", + "Settings.webhooks.trigger.title": "Сохранить перед триггером", + "Settings.webhooks.trigger.cancel": "Отмена триггера", + "Settings.webhooks.trigger.pending": "Ожидание…", + "Settings.webhooks.trigger.success": "Успех!", + "Settings.webhooks.trigger.success.label": "Триггер выполнен", + "Settings.webhooks.trigger.save": "Пожалуйста сохраните триггер", + "Settings.webhooks.trigger.test": "Тест триггер", + "Settings.webhooks.events.create": "Создание", + "Settings.webhooks.events.edit": "Редактирование", + "Settings.webhooks.events.delete": "Удаление", + "Settings.webhooks.created": "Webhook создан", "app.containers.App.notification.error.init": "Произошла ошибка при запросе к API", "components.Input.error.password.noMatch": "Пароль не совпадает", "form.button.done": "Выполнено", - "notification.form.error.fields": "Форма содержит некоторые ошибки" + "form.button.finish": "Финиш", + "notification.form.error.fields": "Форма содержит некоторые ошибки", + "notification.form.success.fields": "Изменения сохранены", + "global.prompt.unsaved": "Вы действительно хотите покинуть эту страницу? Все Ваши изменения будут потеряны" } From f128edc73a6acb7d6d0ab8861e885f4e009d087b Mon Sep 17 00:00:00 2001 From: soupette Date: Thu, 20 Feb 2020 07:06:58 +0100 Subject: [PATCH 3/9] Add font-sizes and font-weight to the theme Signed-off-by: soupette --- packages/strapi-admin/admin/src/themes/sizes.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/strapi-admin/admin/src/themes/sizes.js b/packages/strapi-admin/admin/src/themes/sizes.js index f6b666191e..c7b9769d94 100644 --- a/packages/strapi-admin/admin/src/themes/sizes.js +++ b/packages/strapi-admin/admin/src/themes/sizes.js @@ -6,6 +6,22 @@ const sizes = { height: '6rem', width: '24rem', }, + margins: { + // TODO: + normal: '10px', + }, + fontSizes: { + xs: '11px', + sm: '12px', + md: '13px', + lg: '18px', + }, + fontWeight: { + regular: 400, + semiBold: 500, + bold: 600, + black: 900, + }, }; export default sizes; From de10305b3223175ef1ce3e22edd2f86768eef143 Mon Sep 17 00:00:00 2001 From: soupette Date: Thu, 20 Feb 2020 07:58:59 +0100 Subject: [PATCH 4/9] Created new modal header component Signed-off-by: soupette --- .../strapi-admin/admin/src/themes/colors.js | 3 +- .../admin/src/themes/fontSizes.js | 8 ++++ .../admin/src/themes/fontWeights.js | 8 ++++ .../strapi-admin/admin/src/themes/index.js | 4 ++ .../strapi-admin/admin/src/themes/sizes.js | 16 ++------ .../lib/src/commonPropTypes/index.js | 5 +-- .../lib/src/commonPropTypes/themeShape.js | 14 +++++++ .../strapi-helper-plugin/lib/src/index.js | 2 +- .../src/components/ModalHeader/Wrapper.js | 24 ++++++++++++ .../admin/src/components/ModalHeader/index.js | 37 +++++++++++++++++++ .../src/components/ModalSection/index.js | 12 ++++++ .../src/containers/ModalStepper/index.js | 20 +++++----- 12 files changed, 127 insertions(+), 26 deletions(-) create mode 100644 packages/strapi-admin/admin/src/themes/fontSizes.js create mode 100644 packages/strapi-admin/admin/src/themes/fontWeights.js create mode 100644 packages/strapi-helper-plugin/lib/src/commonPropTypes/themeShape.js create mode 100644 packages/strapi-plugin-upload/admin/src/components/ModalHeader/Wrapper.js create mode 100644 packages/strapi-plugin-upload/admin/src/components/ModalHeader/index.js create mode 100644 packages/strapi-plugin-upload/admin/src/components/ModalSection/index.js diff --git a/packages/strapi-admin/admin/src/themes/colors.js b/packages/strapi-admin/admin/src/themes/colors.js index e9490418fa..ce88ff5401 100644 --- a/packages/strapi-admin/admin/src/themes/colors.js +++ b/packages/strapi-admin/admin/src/themes/colors.js @@ -1,5 +1,5 @@ const colors = { - black: '#000000', + black: '#3b3b3b', white: '#ffffff', red: '#ff203c', orange: '#ff5d00', @@ -14,6 +14,7 @@ const colors = { 'gray-light': '#636c72', 'gray-lighter': '#eceeef', 'gray-lightest': '#f7f7f9', + lightGrey: '#fafafa', content: { background: '#fafafb', diff --git a/packages/strapi-admin/admin/src/themes/fontSizes.js b/packages/strapi-admin/admin/src/themes/fontSizes.js new file mode 100644 index 0000000000..ca51761093 --- /dev/null +++ b/packages/strapi-admin/admin/src/themes/fontSizes.js @@ -0,0 +1,8 @@ +const fontSizes = { + xs: '11px', + sm: '12px', + md: '13px', + lg: '18px', +}; + +export default fontSizes; diff --git a/packages/strapi-admin/admin/src/themes/fontWeights.js b/packages/strapi-admin/admin/src/themes/fontWeights.js new file mode 100644 index 0000000000..d7057f6c40 --- /dev/null +++ b/packages/strapi-admin/admin/src/themes/fontWeights.js @@ -0,0 +1,8 @@ +const fontWeights = { + regular: 400, + semiBold: 500, + bold: 600, + black: 900, +}; + +export default fontWeights; diff --git a/packages/strapi-admin/admin/src/themes/index.js b/packages/strapi-admin/admin/src/themes/index.js index 79284b5f26..7b27860f01 100644 --- a/packages/strapi-admin/admin/src/themes/index.js +++ b/packages/strapi-admin/admin/src/themes/index.js @@ -1,9 +1,13 @@ import colors from './colors'; +import fontSizes from './fontSizes'; +import fontWeights from './fontWeights'; import sizes from './sizes'; const theme = { main: { colors, + fontSizes, + fontWeights, sizes, }, }; diff --git a/packages/strapi-admin/admin/src/themes/sizes.js b/packages/strapi-admin/admin/src/themes/sizes.js index c7b9769d94..c1afb773e7 100644 --- a/packages/strapi-admin/admin/src/themes/sizes.js +++ b/packages/strapi-admin/admin/src/themes/sizes.js @@ -8,19 +8,11 @@ const sizes = { }, margins: { // TODO: - normal: '10px', + sm: '10px', }, - fontSizes: { - xs: '11px', - sm: '12px', - md: '13px', - lg: '18px', - }, - fontWeight: { - regular: 400, - semiBold: 500, - bold: 600, - black: 900, + padding: { + // TODO + md: '30px', }, }; diff --git a/packages/strapi-helper-plugin/lib/src/commonPropTypes/index.js b/packages/strapi-helper-plugin/lib/src/commonPropTypes/index.js index 386b4c3dac..565e26362d 100644 --- a/packages/strapi-helper-plugin/lib/src/commonPropTypes/index.js +++ b/packages/strapi-helper-plugin/lib/src/commonPropTypes/index.js @@ -1,5 +1,4 @@ import routerPropTypes from './router'; +import themeShape from './themeShape'; -export { - routerPropTypes, -}; +export { routerPropTypes, themeShape }; diff --git a/packages/strapi-helper-plugin/lib/src/commonPropTypes/themeShape.js b/packages/strapi-helper-plugin/lib/src/commonPropTypes/themeShape.js new file mode 100644 index 0000000000..4120909c95 --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/commonPropTypes/themeShape.js @@ -0,0 +1,14 @@ +import PropTypes from 'prop-types'; + +const themeShape = { + theme: PropTypes.shape({ + main: PropTypes.shape({ + colors: PropTypes.object, + fontSizes: PropTypes.object, + fontWeights: PropTypes.object, + sizes: PropTypes.object, + }), + }), +}; + +export default themeShape; diff --git a/packages/strapi-helper-plugin/lib/src/index.js b/packages/strapi-helper-plugin/lib/src/index.js index a10ea71f18..be33711ea5 100644 --- a/packages/strapi-helper-plugin/lib/src/index.js +++ b/packages/strapi-helper-plugin/lib/src/index.js @@ -4,7 +4,7 @@ export { default as sizes } from './assets/styles/sizes'; // CommonPropTypes export { default as routerPropTypes } from './commonPropTypes/router'; - +export { default as themePropTypes } from './commonPropTypes/themeShape'; // Components export { default as BackHeader } from './components/BackHeader'; export { default as BlockerComponent } from './components/BlockerComponent'; diff --git a/packages/strapi-plugin-upload/admin/src/components/ModalHeader/Wrapper.js b/packages/strapi-plugin-upload/admin/src/components/ModalHeader/Wrapper.js new file mode 100644 index 0000000000..9e0abc4c32 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/ModalHeader/Wrapper.js @@ -0,0 +1,24 @@ +/* + * NOTE: + * This component should be put in the strapi-helper-plugin + * at some point so the other packages can benefits from the updates + * + * + */ + +import styled from 'styled-components'; + +import { themePropTypes } from 'strapi-helper-plugin'; + +const Wrapper = styled.div` + height: 59px; + line-height: 59px; + background-color: ${({ theme }) => theme.main.colors.lightGrey}; + color: ${({ theme }) => theme.main.colors.black}; + font-size: ${({ theme }) => theme.main.fontSizes.md}; + font-weight: ${({ theme }) => theme.main.fontWeights.bold}; +`; + +Wrapper.propTypes = themePropTypes; + +export default Wrapper; diff --git a/packages/strapi-plugin-upload/admin/src/components/ModalHeader/index.js b/packages/strapi-plugin-upload/admin/src/components/ModalHeader/index.js new file mode 100644 index 0000000000..54e1270455 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/ModalHeader/index.js @@ -0,0 +1,37 @@ +/* + * NOTE: + * This component should be put in the strapi-helper-plugin + * at some point so the other packages can benefits from the updates + * + * + */ + +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { HeaderModalTitle } from 'strapi-helper-plugin'; +import ModalSection from '../ModalSection'; +import Wrapper from './Wrapper'; + +const ModalHeader = ({ headers }) => { + return ( + + + + {headers.map(({ key, element }) => { + return {element}; + })} + + + + ); +}; + +ModalHeader.defaultProps = { + headers: [], +}; + +ModalHeader.propTypes = { + headers: PropTypes.array, +}; + +export default ModalHeader; diff --git a/packages/strapi-plugin-upload/admin/src/components/ModalSection/index.js b/packages/strapi-plugin-upload/admin/src/components/ModalSection/index.js new file mode 100644 index 0000000000..59baf42268 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/ModalSection/index.js @@ -0,0 +1,12 @@ +import styled from 'styled-components'; +import { themePropTypes } from 'strapi-helper-plugin'; + +const ModalSection = styled.section` + display: flex; + + padding: 0 ${({ theme }) => theme.main.sizes.padding.md}; +`; + +ModalSection.propTypes = themePropTypes; + +export default ModalSection; diff --git a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js index f6224105a7..612aca7314 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js +++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js @@ -2,8 +2,8 @@ import React, { useEffect, useReducer, useRef } from 'react'; import PropTypes from 'prop-types'; import { get } from 'lodash'; import { - HeaderModal, - HeaderModalTitle, + // HeaderModal, + // HeaderModalTitle, Modal, ModalFooter, useGlobalContext, @@ -12,6 +12,7 @@ import { import { Button } from '@buffetjs/core'; import { FormattedMessage } from 'react-intl'; import pluginId from '../../pluginId'; +import ModalHeader from '../../components/ModalHeader'; import stepper from './utils/stepper'; import init from './init'; import reducer, { initialState } from './reducer'; @@ -141,13 +142,14 @@ const ModalStepper = ({ isOpen, onToggle }) => { return ( {/* header title */} - -
- - - -
- + , + }, + ]} + /> {/* body of the modal */} {Component && ( Date: Thu, 20 Feb 2020 09:02:51 +0100 Subject: [PATCH 5/9] Improve Modal components Signed-off-by: soupette --- .../strapi-admin/admin/src/themes/colors.js | 1 + .../admin/src/components/Flex/index.js | 7 +++ .../admin/src/components/ModalNav/index.js | 24 --------- .../src/components/ModalNavWrapper/Hr.js | 14 +++++ .../src/components/ModalNavWrapper/index.js | 51 +++++++++++++++++++ .../src/components/ModalSection/index.js | 12 ++++- .../{NavLink => ModalTab}/Wrapper.js | 19 ++++--- .../components/{NavLink => ModalTab}/index.js | 13 ++--- .../admin/src/components/UploadForm/index.js | 49 +++++------------- 9 files changed, 116 insertions(+), 74 deletions(-) create mode 100644 packages/strapi-plugin-upload/admin/src/components/Flex/index.js delete mode 100644 packages/strapi-plugin-upload/admin/src/components/ModalNav/index.js create mode 100644 packages/strapi-plugin-upload/admin/src/components/ModalNavWrapper/Hr.js create mode 100644 packages/strapi-plugin-upload/admin/src/components/ModalNavWrapper/index.js rename packages/strapi-plugin-upload/admin/src/components/{NavLink => ModalTab}/Wrapper.js (58%) rename packages/strapi-plugin-upload/admin/src/components/{NavLink => ModalTab}/index.js (71%) diff --git a/packages/strapi-admin/admin/src/themes/colors.js b/packages/strapi-admin/admin/src/themes/colors.js index ce88ff5401..0da883adab 100644 --- a/packages/strapi-admin/admin/src/themes/colors.js +++ b/packages/strapi-admin/admin/src/themes/colors.js @@ -14,6 +14,7 @@ const colors = { 'gray-light': '#636c72', 'gray-lighter': '#eceeef', 'gray-lightest': '#f7f7f9', + brightGrey: '#f0f3f8', lightGrey: '#fafafa', content: { diff --git a/packages/strapi-plugin-upload/admin/src/components/Flex/index.js b/packages/strapi-plugin-upload/admin/src/components/Flex/index.js new file mode 100644 index 0000000000..7240b6ad45 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/Flex/index.js @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +const Flex = styled.div` + display: flex; +`; + +export default Flex; diff --git a/packages/strapi-plugin-upload/admin/src/components/ModalNav/index.js b/packages/strapi-plugin-upload/admin/src/components/ModalNav/index.js deleted file mode 100644 index 246b835e81..0000000000 --- a/packages/strapi-plugin-upload/admin/src/components/ModalNav/index.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * - * ModalNav - * - */ - -import styled from 'styled-components'; - -const ModalNav = styled.div` - display: flex; - height: 3.8rem; - padding-top: 0.6rem; - color: #9ea7b8; - font-size: 1.2rem; - font-weight: 500; - letter-spacing: 0.7px; - text-transform: uppercase; - - > div:last-child { - margin-left: 3rem; - } -`; - -export default ModalNav; diff --git a/packages/strapi-plugin-upload/admin/src/components/ModalNavWrapper/Hr.js b/packages/strapi-plugin-upload/admin/src/components/ModalNavWrapper/Hr.js new file mode 100644 index 0000000000..a548202c09 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/ModalNavWrapper/Hr.js @@ -0,0 +1,14 @@ +import styled from 'styled-components'; +import { themePropTypes } from 'strapi-helper-plugin'; + +const Hr = styled.hr` + margin: 0px; + width: 100%; + height: 1px; + border: 0; + background: ${({ theme }) => theme.main.colors.brightGrey}; +`; + +Hr.propTypes = themePropTypes; + +export default Hr; diff --git a/packages/strapi-plugin-upload/admin/src/components/ModalNavWrapper/index.js b/packages/strapi-plugin-upload/admin/src/components/ModalNavWrapper/index.js new file mode 100644 index 0000000000..71b66a5d85 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/ModalNavWrapper/index.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Flex from '../Flex'; +import ModalSection from '../ModalSection'; +import ModalTab from '../ModalTab'; +import Hr from './Hr'; + +const ModalNavWrapper = ({ children, links, onClickGoTo, to }) => { + return ( + <> + + + {links.map(link => { + const isActive = link.to === to; + + return ( + + ); + })} + + {children} + + +
+ + + ); +}; + +ModalNavWrapper.defaultProps = { + children: null, + links: [], + onClickGoTo: () => {}, + to: '', +}; + +ModalNavWrapper.propTypes = { + children: PropTypes.node, + links: PropTypes.array, + onClickGoTo: PropTypes.func, + to: PropTypes.string, +}; + +export default ModalNavWrapper; diff --git a/packages/strapi-plugin-upload/admin/src/components/ModalSection/index.js b/packages/strapi-plugin-upload/admin/src/components/ModalSection/index.js index 59baf42268..97b34f134e 100644 --- a/packages/strapi-plugin-upload/admin/src/components/ModalSection/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/ModalSection/index.js @@ -1,12 +1,20 @@ import styled from 'styled-components'; +import PropTypes from 'prop-types'; import { themePropTypes } from 'strapi-helper-plugin'; const ModalSection = styled.section` display: flex; - + justify-content: ${({ justifyContent }) => justifyContent}; padding: 0 ${({ theme }) => theme.main.sizes.padding.md}; `; -ModalSection.propTypes = themePropTypes; +ModalSection.defaultProps = { + justifyContent: 'initial', +}; + +ModalSection.propTypes = { + ...themePropTypes, + justifyContent: PropTypes.string, +}; export default ModalSection; diff --git a/packages/strapi-plugin-upload/admin/src/components/NavLink/Wrapper.js b/packages/strapi-plugin-upload/admin/src/components/ModalTab/Wrapper.js similarity index 58% rename from packages/strapi-plugin-upload/admin/src/components/NavLink/Wrapper.js rename to packages/strapi-plugin-upload/admin/src/components/ModalTab/Wrapper.js index d2f30033b7..aba70e907f 100644 --- a/packages/strapi-plugin-upload/admin/src/components/NavLink/Wrapper.js +++ b/packages/strapi-plugin-upload/admin/src/components/ModalTab/Wrapper.js @@ -1,23 +1,30 @@ import styled from 'styled-components'; import PropTypes from 'prop-types'; -const Wrapper = styled.div(({ isActive, isDisabled }) => { +const Wrapper = styled.div(({ isActive, isDisabled, theme }) => { const cursor = isDisabled ? 'not-allowed' : 'pointer'; + const baseStyle = { + color: '#9ea7b8', + cursor, + fontSize: theme.main.fontSizes.sm, + fontWeight: theme.main.fontWeights.bold, + letterSpacing: '0.7px', + marginTop: '34px', + marginRight: '30px', + textTransform: 'uppercase', + }; if (isActive) { return { + ...baseStyle, height: '3rem', - cursor, color: '#007eff', - fontWeight: 600, borderBottom: '2px solid #007eff', zIndex: 99, }; } - return { - cursor, - }; + return baseStyle; }); Wrapper.defaultProps = { diff --git a/packages/strapi-plugin-upload/admin/src/components/NavLink/index.js b/packages/strapi-plugin-upload/admin/src/components/ModalTab/index.js similarity index 71% rename from packages/strapi-plugin-upload/admin/src/components/NavLink/index.js rename to packages/strapi-plugin-upload/admin/src/components/ModalTab/index.js index f9815174c9..18dc244232 100644 --- a/packages/strapi-plugin-upload/admin/src/components/NavLink/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/ModalTab/index.js @@ -1,6 +1,6 @@ /** * - * HeaderNavLink + * ModalTab * */ @@ -10,7 +10,7 @@ import { FormattedMessage } from 'react-intl'; import getTrad from '../../utils/getTrad'; import Wrapper from './Wrapper'; -const HeaderNavLink = ({ isDisabled, to, isActive, onClick }) => { +const ModalTab = ({ isDisabled, label, to, isActive, onClick }) => { const handleClick = e => { if (isDisabled) { e.preventDefault(); @@ -23,22 +23,23 @@ const HeaderNavLink = ({ isDisabled, to, isActive, onClick }) => { return ( - + ); }; -HeaderNavLink.defaultProps = { +ModalTab.defaultProps = { isActive: false, isDisabled: false, onClick: () => {}, }; -HeaderNavLink.propTypes = { +ModalTab.propTypes = { to: PropTypes.string.isRequired, isActive: PropTypes.bool, isDisabled: PropTypes.bool, + label: PropTypes.string.isRequired, onClick: PropTypes.func, }; -export default HeaderNavLink; +export default ModalTab; diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js b/packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js index 23f0843222..fedadb444d 100644 --- a/packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js @@ -1,18 +1,20 @@ import React, { useReducer } from 'react'; import PropTypes from 'prop-types'; -import { HeaderNavWrapper, ModalBody, ModalForm } from 'strapi-helper-plugin'; -import ModalNav from '../ModalNav'; -import NavLink from '../NavLink'; +import { ModalBody } from 'strapi-helper-plugin'; import InputFile from '../InputFile'; +import ModalNavWrapper from '../ModalNavWrapper'; import init from './init'; import reducer, { initialState } from './reducer'; const UploadForm = ({ addFilesToUpload }) => { const [reducerState, dispatch] = useReducer(reducer, initialState, init); const { to } = reducerState.toJS(); - const links = ['computer', 'url']; + const links = [ + { to: 'computer', label: 'computer', isDisabled: false }, + { to: 'url', label: 'url', isDisabled: true }, + ]; - const handleGoTo = to => { + const handleClickGoTo = to => { dispatch({ type: 'SET_TAB', to, @@ -21,38 +23,13 @@ const UploadForm = ({ addFilesToUpload }) => { return ( <> - -
- - {links.map(link => { - const isActive = link === to; - - return ( - - ); - })} - + + +
+ {to === 'computer' && } + {to === 'url' &&
COMING SOON
}
-
- - - -
-
-
- {to === 'computer' && } - {to === 'url' &&
COMING SOON
} -
-
-
- - + ); }; From 8f36a32209aa23c538ada8ff3dc310c804932efd Mon Sep 17 00:00:00 2001 From: soupette Date: Thu, 20 Feb 2020 09:09:34 +0100 Subject: [PATCH 6/9] Fix design UploadForm Signed-off-by: soupette --- .../admin/src/components/InputFile/Label.js | 4 +++- .../admin/src/components/UploadForm/index.js | 12 +++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/strapi-plugin-upload/admin/src/components/InputFile/Label.js b/packages/strapi-plugin-upload/admin/src/components/InputFile/Label.js index 128cc684b2..a68aa3b56c 100644 --- a/packages/strapi-plugin-upload/admin/src/components/InputFile/Label.js +++ b/packages/strapi-plugin-upload/admin/src/components/InputFile/Label.js @@ -3,8 +3,10 @@ import PropTypes from 'prop-types'; const Label = styled.label` position: relative; - height: 204px; + height: 203px; width: 100%; + margin-top: 36px; + margin-bottom: 18px; padding-top: 46px; border: 2px dashed #e3e9f3; border-radius: 2px; diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js b/packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js index fedadb444d..508f5a9cb1 100644 --- a/packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js @@ -1,8 +1,8 @@ import React, { useReducer } from 'react'; import PropTypes from 'prop-types'; -import { ModalBody } from 'strapi-helper-plugin'; import InputFile from '../InputFile'; import ModalNavWrapper from '../ModalNavWrapper'; +import ModalSection from '../ModalSection'; import init from './init'; import reducer, { initialState } from './reducer'; @@ -24,12 +24,10 @@ const UploadForm = ({ addFilesToUpload }) => { return ( <> - -
- {to === 'computer' && } - {to === 'url' &&
COMING SOON
} -
- + + {to === 'computer' && } + {to === 'url' &&
COMING SOON
} + ); }; From f0231154f306bae3ff90dc82e203e0b3644d2e7b Mon Sep 17 00:00:00 2001 From: soupette Date: Thu, 20 Feb 2020 09:52:29 +0100 Subject: [PATCH 7/9] improve design upload list Signed-off-by: soupette --- .../strapi-admin/admin/src/themes/colors.js | 2 + .../src/components/ContainerFluid/index.js | 12 +++ .../admin/src/components/Text/index.js | 17 +++++ .../components/UploadList/ButtonWrapper.js | 7 ++ .../components/UploadList/HeaderWrapper.js | 17 ----- .../src/components/UploadList/ListWrapper.js | 10 +++ .../src/components/UploadList/TextWrapper.js | 7 ++ .../admin/src/components/UploadList/index.js | 75 +++++++++---------- .../src/containers/ModalStepper/index.js | 2 - 9 files changed, 92 insertions(+), 57 deletions(-) create mode 100644 packages/strapi-plugin-upload/admin/src/components/ContainerFluid/index.js create mode 100644 packages/strapi-plugin-upload/admin/src/components/Text/index.js create mode 100644 packages/strapi-plugin-upload/admin/src/components/UploadList/ButtonWrapper.js delete mode 100644 packages/strapi-plugin-upload/admin/src/components/UploadList/HeaderWrapper.js create mode 100644 packages/strapi-plugin-upload/admin/src/components/UploadList/ListWrapper.js create mode 100644 packages/strapi-plugin-upload/admin/src/components/UploadList/TextWrapper.js diff --git a/packages/strapi-admin/admin/src/themes/colors.js b/packages/strapi-admin/admin/src/themes/colors.js index 0da883adab..d8476709bd 100644 --- a/packages/strapi-admin/admin/src/themes/colors.js +++ b/packages/strapi-admin/admin/src/themes/colors.js @@ -16,6 +16,8 @@ const colors = { 'gray-lightest': '#f7f7f9', brightGrey: '#f0f3f8', lightGrey: '#fafafa', + grey: '#9ea7b8', + greyDark: '#292b2c', content: { background: '#fafafb', diff --git a/packages/strapi-plugin-upload/admin/src/components/ContainerFluid/index.js b/packages/strapi-plugin-upload/admin/src/components/ContainerFluid/index.js new file mode 100644 index 0000000000..8d6d3db44f --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/ContainerFluid/index.js @@ -0,0 +1,12 @@ +import styled from 'styled-components'; +import { Container } from 'reactstrap'; + +const ContainerFluid = styled(Container)` + padding: 0; +`; + +ContainerFluid.defaultProps = { + fluid: true, +}; + +export default ContainerFluid; diff --git a/packages/strapi-plugin-upload/admin/src/components/Text/index.js b/packages/strapi-plugin-upload/admin/src/components/Text/index.js new file mode 100644 index 0000000000..b31ab26e88 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/Text/index.js @@ -0,0 +1,17 @@ +import styled from 'styled-components'; + +const Text = styled.p` + margin: 0; + line-height: 18px; + color: ${({ theme, color }) => theme.main.colors[color]}; + font-size: ${({ theme, fontSize }) => theme.main.fontSizes[fontSize]}; + font-weight: ${({ theme, fontWeight }) => theme.main.fontWeights[fontWeight]}; +`; + +Text.defaultProps = { + color: 'greyDark', + fontSize: 'md', + fontWeight: 'regular', +}; + +export default Text; diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/ButtonWrapper.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/ButtonWrapper.js new file mode 100644 index 0000000000..21e5e6015b --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/ButtonWrapper.js @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +const ButtonWrapper = styled.div` + padding-top: 28px; +`; + +export default ButtonWrapper; diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/HeaderWrapper.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/HeaderWrapper.js deleted file mode 100644 index 4be9ac2cb7..0000000000 --- a/packages/strapi-plugin-upload/admin/src/components/UploadList/HeaderWrapper.js +++ /dev/null @@ -1,17 +0,0 @@ -import styled from 'styled-components'; -import { HeaderNavWrapper } from 'strapi-helper-plugin'; - -const Wrapper = styled(HeaderNavWrapper)` - padding-top: 27px; - font-size: 12px; - - .assets-selected { - padding-top: 7px; - line-height: 18px; - } - .infos { - color: #9ea7b8; - } -`; - -export default Wrapper; diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/ListWrapper.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/ListWrapper.js new file mode 100644 index 0000000000..da5576efa4 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/ListWrapper.js @@ -0,0 +1,10 @@ +import styled from 'styled-components'; + +const ListWrapper = styled.div` + margin-bottom: 4px; + padding-top: 14px; + max-height: 350px; + overflow: auto; +`; + +export default ListWrapper; diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/TextWrapper.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/TextWrapper.js new file mode 100644 index 0000000000..0087f540dd --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/TextWrapper.js @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +const TextWrapper = styled.div` + padding-top: 34px; +`; + +export default TextWrapper; diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js index 64e075f98f..b855a446d7 100644 --- a/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js @@ -1,13 +1,16 @@ -/* eslint-disable react/no-array-index-key */ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import { ModalBody } from 'strapi-helper-plugin'; import { Button } from '@buffetjs/core'; import createMatrix from '../../utils/createMatrix'; import getTrad from '../../utils/getTrad'; -import HeaderWrapper from './HeaderWrapper'; +import ContainerFluid from '../ContainerFluid'; +import ModalSection from '../ModalSection'; +import Text from '../Text'; +import ButtonWrapper from './ButtonWrapper'; +import TextWrapper from './TextWrapper'; import RowItem from './RowItem'; +import ListWrapper from './ListWrapper'; const UploadList = ({ filesToUpload, @@ -22,22 +25,23 @@ const UploadList = ({ return ( <> - -
-
+ + + -
-
+ + + -
-
-
+ + + {label => (
- - -
- {matrix.map(({ key, rowContent }) => { - return ( -
- {rowContent.map(data => ( - - ))} -
- ); - })} -
- + + + + + + + {matrix.map(({ key, rowContent }) => { + return ( +
+ {rowContent.map(data => ( + + ))} +
+ ); + })} + + + ); }; diff --git a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js index 612aca7314..60e279898d 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js +++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js @@ -2,8 +2,6 @@ import React, { useEffect, useReducer, useRef } from 'react'; import PropTypes from 'prop-types'; import { get } from 'lodash'; import { - // HeaderModal, - // HeaderModalTitle, Modal, ModalFooter, useGlobalContext, From 5ff19144b111667e8ad6f63e37871ccad19b5b31 Mon Sep 17 00:00:00 2001 From: soupette Date: Thu, 20 Feb 2020 10:00:49 +0100 Subject: [PATCH 8/9] Remove useless compo Signed-off-by: soupette --- .../src/components/HeaderNavWrapper/index.js | 32 ------------------- .../strapi-helper-plugin/lib/src/index.js | 1 - 2 files changed, 33 deletions(-) delete mode 100644 packages/strapi-helper-plugin/lib/src/components/HeaderNavWrapper/index.js diff --git a/packages/strapi-helper-plugin/lib/src/components/HeaderNavWrapper/index.js b/packages/strapi-helper-plugin/lib/src/components/HeaderNavWrapper/index.js deleted file mode 100644 index 676455ab55..0000000000 --- a/packages/strapi-helper-plugin/lib/src/components/HeaderNavWrapper/index.js +++ /dev/null @@ -1,32 +0,0 @@ -import styled from 'styled-components'; -import colors from '../../assets/styles/colors'; -import sizes from '../../assets/styles/sizes'; - -const HeaderNavWrapper = styled.section` - display: flex; - padding: 0 ${sizes.margin * 3}px; - position: relative; - justify-content: space-between; - height: 65px; - font-size: 1.8rem; - > hr { - position: absolute; - left: ${sizes.margin * 3}px; - bottom: 0; - width: calc(100% - ${sizes.margin * 6}px); - height: 1px; - background: ${colors.brightGrey}; - border: 0; - margin: 0; - } - span { - padding-top: 16px; - } - .settings-tabs { - position: absolute; - right: ${sizes.margin * 3}px; - bottom: -${sizes.margin * 0.1}px; - } -`; - -export default HeaderNavWrapper; diff --git a/packages/strapi-helper-plugin/lib/src/index.js b/packages/strapi-helper-plugin/lib/src/index.js index be33711ea5..8e4c6cd6f3 100644 --- a/packages/strapi-helper-plugin/lib/src/index.js +++ b/packages/strapi-helper-plugin/lib/src/index.js @@ -17,7 +17,6 @@ export { default as ErrorBoundary } from './components/ErrorBoundary'; export { default as ExtendComponent } from './components/ExtendComponent'; export { default as GlobalPagination } from './components/GlobalPagination'; export { default as HeaderNav } from './components/HeaderNav'; -export { default as HeaderNavWrapper } from './components/HeaderNavWrapper'; export { default as HeaderModal } from './components/HeaderModal'; export { default as HeaderModalTitle } from './components/HeaderModalTitle'; export { default as HeaderSearch } from './components/HeaderSearch'; From a63ae8a6e2e5c6aea964c270946cebd57cc80969 Mon Sep 17 00:00:00 2001 From: soupette Date: Thu, 20 Feb 2020 11:47:51 +0100 Subject: [PATCH 9/9] Fix PR feedback Signed-off-by: soupette --- .../admin/src/components/InputFile/Label.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/strapi-plugin-upload/admin/src/components/InputFile/Label.js b/packages/strapi-plugin-upload/admin/src/components/InputFile/Label.js index a68aa3b56c..ec992869a3 100644 --- a/packages/strapi-plugin-upload/admin/src/components/InputFile/Label.js +++ b/packages/strapi-plugin-upload/admin/src/components/InputFile/Label.js @@ -20,16 +20,12 @@ const Label = styled.label` right: 0; } - ${({ isDragging }) => { - if (isDragging) { - return ` - background-color: rgba(28, 93, 231, 0.01); - border: 2px dashed rgba(28, 93, 231, 0.1); - `; - } - - return ''; - }} + ${({ isDragging }) => + isDragging && + ` + background-color: rgba(28, 93, 231, 0.01); + border: 2px dashed rgba(28, 93, 231, 0.1); + `} `; Label.defaultProps = {