diff --git a/packages/strapi-admin/admin/src/components/PluginCard/index.js b/packages/strapi-admin/admin/src/components/PluginCard/index.js new file mode 100644 index 0000000000..628201d2c1 --- /dev/null +++ b/packages/strapi-admin/admin/src/components/PluginCard/index.js @@ -0,0 +1,47 @@ +/** +* +* PluginCard +* +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +import cn from 'classnames'; +import styles from './styles.scss'; + +function PluginCard({ isAlreadyInstalled, plugin, showSupportUsButton }) { + return ( +
+
+
+ {plugin.name} +
+
+
+
+
{isAlreadyInstalled} {showSupportUsButton}
+
+
+ ); +} + +PluginCard.defaultProps = { + isAlreadyInstalled: false, + plugin: { + description: '', + id: '', + icon: '', + name: '', + price: 0, + ratings: 5, + }, + showSupportUsButton: false, +}; + +PluginCard.propTypes = { + isAlreadyInstalled: PropTypes.bool, + plugin: PropTypes.object, + showSupportUsButton: PropTypes.bool, +}; + +export default PluginCard; diff --git a/packages/strapi-admin/admin/src/components/PluginCard/styles.scss b/packages/strapi-admin/admin/src/components/PluginCard/styles.scss new file mode 100644 index 0000000000..40f7b2a9c2 --- /dev/null +++ b/packages/strapi-admin/admin/src/components/PluginCard/styles.scss @@ -0,0 +1,27 @@ +.cardDescription { + +} + +.cardFooter { + +} + +.cardPrice { + +} + +.cardScreenshot { + +} + +.cardTitle { + +} + +.pluginCard { + +} + +.wrapper { + +} diff --git a/packages/strapi-admin/admin/src/containers/InstallPluginPage/fakeData.json b/packages/strapi-admin/admin/src/containers/InstallPluginPage/fakeData.json index d72dd586c9..4b53d9f6c2 100644 --- a/packages/strapi-admin/admin/src/containers/InstallPluginPage/fakeData.json +++ b/packages/strapi-admin/admin/src/containers/InstallPluginPage/fakeData.json @@ -5,28 +5,32 @@ "id": "content-manager", "icon": "plug", "name": "Content Manager", - "price": 0 + "price": 0, + "ratings": 3 }, { "description": "content-type-builder.plugin.description", "id": "content-type-builder", "icon": "brush", "name": "content type builder", - "price": 0 + "price": 0, + "ratings": 4.4 }, { "description": "settings-manager.plugin.description", "id": "settings-manager", "icon": "wrench", "name": "settings manager", - "price": 0 + "price": 0, + "ratings": 2.5 }, { "description": "users-permissions.plugin.description", "id": "users-permissions", "icon": "users", "name": "Auth & Permissions", - "price": 0 + "price": 0, + "ratings": 3.6 } ] } diff --git a/packages/strapi-admin/admin/src/containers/InstallPluginPage/index.js b/packages/strapi-admin/admin/src/containers/InstallPluginPage/index.js index f6b217b7b6..0cb662823a 100644 --- a/packages/strapi-admin/admin/src/containers/InstallPluginPage/index.js +++ b/packages/strapi-admin/admin/src/containers/InstallPluginPage/index.js @@ -11,9 +11,11 @@ import { Helmet } from 'react-helmet'; import { FormattedMessage } from 'react-intl'; import { bindActionCreators, compose } from 'redux'; import cn from 'classnames'; +import { get, isUndefined, map } from 'lodash'; // Design import Input from 'components/Input'; +import PluginCard from 'components/PluginCard'; import PluginHeader from 'components/PluginHeader'; import injectSaga from 'utils/injectSaga'; @@ -55,7 +57,7 @@ export class InstallPluginPage extends React.Component { // eslint-disable-line description={{ id: 'app.components.InstallPluginPage.description' }} actions={[]} /> -
+
+
+ {map(this.props.availablePlugins, (plugin) => ( + + ))} +
); @@ -78,6 +90,7 @@ InstallPluginPage.contextTypes = { }; InstallPluginPage.propTypes = { + availablePlugins: PropTypes.array.isRequired, didFetchPlugins: PropTypes.bool.isRequired, getPlugins: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, diff --git a/packages/strapi-admin/admin/src/containers/InstallPluginPage/reducer.js b/packages/strapi-admin/admin/src/containers/InstallPluginPage/reducer.js index 4d7b188139..379f6a3a89 100644 --- a/packages/strapi-admin/admin/src/containers/InstallPluginPage/reducer.js +++ b/packages/strapi-admin/admin/src/containers/InstallPluginPage/reducer.js @@ -21,7 +21,7 @@ function installPluginPageReducer(state = initialState, action) { case GET_PLUGINS_SUCCEEDED: return state .set('didFetchPlugins', true) - .set('plugins', List(action.availablePlugins)); + .set('availablePlugins', List(action.availablePlugins)); case ON_CHANGE: return state.updateIn(action.keys, () => action.value); default: diff --git a/packages/strapi-admin/admin/src/containers/InstallPluginPage/saga.js b/packages/strapi-admin/admin/src/containers/InstallPluginPage/saga.js index 3120c27c9a..d738102b8a 100644 --- a/packages/strapi-admin/admin/src/containers/InstallPluginPage/saga.js +++ b/packages/strapi-admin/admin/src/containers/InstallPluginPage/saga.js @@ -24,6 +24,7 @@ export function* pluginsGet() { icon: '', name: 'buy a t-shirt', price: 30, + ratings: 5, }; yield put(getPluginsSucceeded(availablePlugins.concat([supportUs]))); diff --git a/packages/strapi-admin/admin/src/containers/InstallPluginPage/styles.scss b/packages/strapi-admin/admin/src/containers/InstallPluginPage/styles.scss index 65508e7681..7ecc188bb0 100644 --- a/packages/strapi-admin/admin/src/containers/InstallPluginPage/styles.scss +++ b/packages/strapi-admin/admin/src/containers/InstallPluginPage/styles.scss @@ -2,5 +2,22 @@ padding: 18px 30px !important; > div:first-child { max-height: 33px; + margin-bottom: 48px; + } +} + +.inputContainer { + padding-top: 7px; + background-color: #fff; + > div { + > div { + margin-bottom: 0!important; + } + > div:nth-child(3) { + display: none; + } + > label { + display: none!important; + } } } diff --git a/packages/strapi-plugin-users-permissions/services/UsersPermissions.js b/packages/strapi-plugin-users-permissions/services/UsersPermissions.js index a7d4aa119b..6005c36f91 100644 --- a/packages/strapi-plugin-users-permissions/services/UsersPermissions.js +++ b/packages/strapi-plugin-users-permissions/services/UsersPermissions.js @@ -48,6 +48,7 @@ module.exports = { }, getActions: () => { + console.log(strapi); const generateActions = (data) => ( Object.keys(data).reduce((acc, key) => { acc[key] = { enabled: false, policy: '' };