diff --git a/packages/strapi-admin/admin/src/components/InstallPluginPopup/index.js b/packages/strapi-admin/admin/src/components/InstallPluginPopup/index.js index b2ec928670c..95de1be494a 100644 --- a/packages/strapi-admin/admin/src/components/InstallPluginPopup/index.js +++ b/packages/strapi-admin/admin/src/components/InstallPluginPopup/index.js @@ -19,7 +19,10 @@ import styles from './styles.scss'; class InstallPluginPopup extends React.Component { handleClick = () => { this.props.history.push({ pathname: this.props.history.location.pathname }); - this.context.downloadPlugin(this.props.plugin.id); + + if (!this.props.isAlreadyInstalled) { + this.context.downloadPlugin(this.props.plugin.id); + } } toggle = () => { @@ -56,6 +59,7 @@ class InstallPluginPopup extends React.Component { short: this.props.plugin.id === 'support-us' ? : this.props.plugin.description.short, long: this.props.plugin.id === 'support-us' ? : this.props.plugin.description.long || this.props.plugin.description.short, }; + const buttonName = this.props.isAlreadyInstalled ? 'app.components.PluginCard.Button.label.install' : 'app.components.InstallPluginPopup.downloads'; return ( @@ -93,7 +97,7 @@ class InstallPluginPopup extends React.Component {
- +
{/* Uncomment whebn prices are running}
{this.props.plugin.price} €
@@ -149,6 +153,7 @@ InstallPluginPopup.propTypes = { short: PropTypes.string, }), history: PropTypes.object.isRequired, + isAlreadyInstalled: PropTypes.bool.isRequired, isOpen: PropTypes.bool.isRequired, plugin: PropTypes.object.isRequired, }; diff --git a/packages/strapi-admin/admin/src/components/InstallPluginPopup/styles.scss b/packages/strapi-admin/admin/src/components/InstallPluginPopup/styles.scss index 196c2806f4b..a4030f8e47d 100644 --- a/packages/strapi-admin/admin/src/components/InstallPluginPopup/styles.scss +++ b/packages/strapi-admin/admin/src/components/InstallPluginPopup/styles.scss @@ -23,10 +23,6 @@ flex-grow: 2; } } - // > div:last-child { - // width: 50px; - // border-left: 1px solid #0774D9; - // } } .headerButtonContainer { @@ -102,6 +98,7 @@ color: #C3C5C8; opacity: 1; outline: 0!important; + cursor: pointer; } > span { display: none; diff --git a/packages/strapi-admin/admin/src/components/PluginCard/index.js b/packages/strapi-admin/admin/src/components/PluginCard/index.js index df627449d48..bef4fc9de87 100644 --- a/packages/strapi-admin/admin/src/components/PluginCard/index.js +++ b/packages/strapi-admin/admin/src/components/PluginCard/index.js @@ -64,7 +64,13 @@ class PluginCard extends React.Component { } handleDownloadPlugin = (e) => { - this.props.downloadPlugin(e); + if (!this.props.isAlreadyInstalled && this.props.plugin.id !== 'support-us') { + this.props.downloadPlugin(e); + } else if (this.props.plugin.id === 'support-us') { + this.aTag.click(); + } else { + this.props.history.push('/list-plugins'); + } } shouldOpenModal = (props) => { @@ -132,9 +138,10 @@ class PluginCard extends React.Component { onClick={this.handleDownloadPlugin} /> { this.aTag = a; }} + target="_blank" >   diff --git a/packages/strapi-admin/admin/src/components/Row/index.js b/packages/strapi-admin/admin/src/components/Row/index.js index 294e0a50c22..41715836368 100644 --- a/packages/strapi-admin/admin/src/components/Row/index.js +++ b/packages/strapi-admin/admin/src/components/Row/index.js @@ -13,10 +13,6 @@ import { FormattedMessage } from 'react-intl'; import Ico from 'components/Ico'; import ListRow from 'components/ListRow'; import PopUpWarning from 'components/PopUpWarning'; -import IconAuth from 'assets/icons/icon_auth-permissions.svg'; -import IconCtb from 'assets/icons/icon_content-type-builder.svg'; -import IconCm from 'assets/icons/icon_content-manager.svg'; -import IconSettings from 'assets/icons/icon_settings-manager.svg'; import styles from './styles.scss'; @@ -34,30 +30,16 @@ class Row extends React.Component { this.props.onDeleteClick(e); } - renderImg = () => { - switch (this.props.plugin.name) { - case 'Auth & Permissions': - return logo; - case 'Content Manager': - return logo; - case 'Settings Manager': - return logo; - case 'Content Type Builder': - return logo; - default: - } - } - render() { return (
-
+
icon
{this.props.plugin.name} —  - +
diff --git a/packages/strapi-helper-plugin/lib/src/components/PopUpWarning/index.js b/packages/strapi-helper-plugin/lib/src/components/PopUpWarning/index.js index 571e46febdd..6e6f980017f 100644 --- a/packages/strapi-helper-plugin/lib/src/components/PopUpWarning/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/PopUpWarning/index.js @@ -57,9 +57,8 @@ function PopUpWarning({ content, isOpen, onConfirm, onlyConfirmButton, popUpWarn -
- -
+ +
icon {(message) => ( diff --git a/packages/strapi-helper-plugin/lib/src/components/PopUpWarning/styles.scss b/packages/strapi-helper-plugin/lib/src/components/PopUpWarning/styles.scss index 32326c8195b..ad1e09da2af 100644 --- a/packages/strapi-helper-plugin/lib/src/components/PopUpWarning/styles.scss +++ b/packages/strapi-helper-plugin/lib/src/components/PopUpWarning/styles.scss @@ -1,9 +1,14 @@ .popUpWarning { /* stylelint-disable */ width: 37.5rem!important; + -webkit-font-smoothing: antialiased !important; } .header { - border: none!important; + margin-left: 30px; + margin-right: 30px; + padding-bottom: 11px !important; + border-bottom: 1px solid #F6F6F6; + > h4 { width: 100%; text-align: center; @@ -11,104 +16,136 @@ font-weight: bold!important; font-size: 1.8rem!important; } + > button { - margin-right: 0!important; + color: #C3C5C8; + opacity: 1; + font-size: 1.8rem; + font-weight: 100; + z-index: 999; + cursor: pointer; + + > span { + display: none; + } + + &:hover, &:focus { + color: #C3C5C8; + opacity: 1; + outline: 0!important; + } + + &:before { + content: '\F00d'; + position: absolute; + top: 14px; + right: 14px; + font-family: 'FontAwesome'; + font-weight: 400; + font-size: 1.2rem; + } } } -.modalPosition { - top: 16.8rem; - left: 18.2rem; - margin-top: 0 !important; +.modalPosition { > div { + width: 37.5rem; + padding: 0 !important; border:none; border-radius: 2px; - width: 37.5rem; - padding: 0; } } -.modalDangerBodyContainer { - padding-top: .1rem; + +.modalBodyContainer { + padding: .1rem; + color: #F64D0A; + text-align: center; + font-family: Lato; + font-size: 1.3rem; + > img { width: 2.5rem; margin-bottom: 1.5rem; } + > p { line-height: 1.8rem; } - color: #F64D0A; - text-align: center; - font-family: Lato; - font-size: 1.3rem; } + +.modalBody { + padding: 16px 30px 15px 30px !important; +} + + .buttonContainer { - width: 100%; - padding: 0 .5rem; display: flex; - margin-top: 3.5rem; + width: 100%; + margin-top: 37px; justify-content: space-between; + > button { + position: relative; height: 3rem; width: 15rem; - position: relative; border-radius: 0.3rem; - text-transform: capitalize; background-color: transparent; - cursor: pointer; + text-transform: capitalize; font-family: Lato; - &:focus { - outline: 0; - } + cursor: pointer; + > i { margin-right: 1.3rem; } + + &:focus { + outline: 0; + } &:hover { - &::after { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - border-radius: 0.3rem; - content: ''; - opacity: 0.1; - background: #FFFFFF; - } - } + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 0.3rem; + background: #FFFFFF; + opacity: 0.1; + } + } } } + .primary { - font-weight: 500; + border: none !important; background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%); - -webkit-font-smoothing: antialiased; color: white !important; - border: none !important; + font-weight: 500; + &:active, &:focus, &:hover { - box-shadow: inset 1px 1px 3px rgba(0,0,0,.15); - background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%); - background-color: transparent; border: none; - } + background-color: transparent; + background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%); + box-shadow: inset 1px 1px 3px rgba(0,0,0,.15); + } + -webkit-font-smoothing: antialiased; } + .secondary { - // height: 32px !important; - color: #F64D0A !important; - border: 0.1rem solid #F64D0A !important; position: relative; + border: 0.1rem solid #F64D0A !important; border-radius: 3px; + color: #F64D0A !important; overflow: hidden; + &:active { - border: 0.15rem solid #F64D0A; - } - &:focus, &:hover { - background-color: transparent !important; - color: #F64D0A; - border: 0.1rem solid #F64D0A; - } -} -.bordered { - margin-top: -.4rem; - margin-left: 3rem; - margin-right: 3rem; - border: 1px solid #F6F6F6; + border: 0.15rem solid #F64D0A; + } + + &:focus, &:hover { + border: 0.1rem solid #F64D0A; + background-color: transparent !important; + color: #F64D0A; + } }