Merge pull request #454 from strapi/install-plugin

Install plugin
strapi · Jan 17, 2018 · 10dfd71 · 10dfd71
2 parents 832dd16 + 8ca63de
commit 10dfd71
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 89 deletions.
diff --git 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' ? <FormattedMessage id={this.props.plugin.description.short} /> : this.props.plugin.description.short,
       long: this.props.plugin.id === 'support-us' ? <FormattedMessage id={this.props.plugin.description.long || this.props.plugin.description.short} /> : 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 (
       <Modal isOpen={this.props.isOpen} toggle={this.toggle} className={styles.modalPosition}>
@@ -93,7 +97,7 @@ class InstallPluginPopup extends React.Component {
                     </div>
                     <div className={styles.buttonWrapper} onClick={this.handleClick}>
                       <div>
-                        <FormattedMessage id="app.components.InstallPluginPopup.downloads" />
+                        <FormattedMessage id={buttonName} />
                       </div>
                       {/* Uncomment whebn prices are running}
                       <div>{this.props.plugin.price}&nbsp;€</div>
@@ -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
@@ -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
@@ -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}
               />
               <a
-                href="mailto:hi@strapi.io?subject=I'd like to support Strapi"
+                href="https://strapi.io/shop"
                 style={{ display: 'none' }}
                 ref={(a) => { this.aTag = a; }}
+                target="_blank"
               >
                 &nbsp;
               </a>

diff --git 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 <img src={IconAuth} alt="logo" />;
-      case 'Content Manager':
-        return <img src={IconCm} alt="logo" />;
-      case 'Settings Manager':
-        return <img src={IconSettings} alt="logo" />;
-      case 'Content Type Builder':
-        return <img src={IconCtb} alt="logo" />;
-      default:
-    }
-  }
-
   render() {
     return (
       <ListRow>
         <div className={cn("col-md-11", styles.nameWrapper)}>
-          <div className={styles.icoContainer} style={{ marginRight: '30px' }}>
+          <div className={styles.icoContainer} style={{ marginRight: '14px' }}>
             <img src={`${this.props.plugin.logo}`} alt="icon" />
           </div>
           <div className={styles.pluginContent}>
             <span>{this.props.plugin.name} —&nbsp;</span>
-            <FormattedMessage id={this.props.plugin.description} />
+            <FormattedMessage id={`${this.props.plugin.description}.short`} />
           </div>
         </div>
         <div className="col-md-1">

diff --git 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
         <ModalHeader toggle={toggleModal} className={styles.header}>
           <FormattedMessage id={content.title || 'components.popUpWarning.title'} />
         </ModalHeader>
-        <div className={styles.bordered} />
-        <ModalBody>
-          <div className={styles.modalDangerBodyContainer}>
+        <ModalBody className={styles.modalBody}>
+          <div className={styles.modalBodyContainer}>
             <img src={icons[popUpWarningType]} alt="icon" />
             <FormattedMessage id={content.message || 'components.popUpWarning.message'}>
               {(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
@@ -1,114 +1,151 @@
 .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;
     font-family: Lato;
     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;
+  }
 }