Merge pull request #2612 from strapi/documentation-link

Add Documentation and Help links

packages/strapi-admin/admin/src/components/LeftMenuFooter/index.js

@@ -8,6 +8,8 @@ import React from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { PropTypes } from 'prop-types';
 
+import LeftMenuLink from 'components/LeftMenuLink';
+
 import styles from './styles.scss';
 import messages from './messages.json';
 defineMessages(messages);
@@ -15,8 +17,22 @@ defineMessages(messages);
 function LeftMenuFooter({ version }) { // eslint-disable-line react/prefer-stateless-function
   return (
     <div className={styles.leftMenuFooter}>
+      <ul className={styles.list}>
+        <LeftMenuLink
+          icon="book"
+          label={messages.documentation.id}
+          destination="https://strapi.io/documentation"
+        />
+        <LeftMenuLink
+          icon="question-circle"
+          label={messages.help.id}
+          destination="https://strapi.io/help"
+        />
+      </ul>
+      <div className={styles.poweredBy}>
         <FormattedMessage {...messages.poweredBy} />
-      <a href={`https://github.com/strapi/strapi/releases/tag/v${version}`} target="_blank">v{version}</a>
+        <a href="https://strapi.io" target="_blank">Strapi</a> <a href={`https://github.com/strapi/strapi/releases/tag/v${version}`} target="_blank">v{version}</a>
+      </div>
     </div>
   );
 }

packages/strapi-admin/admin/src/components/LeftMenuFooter/messages.json

@@ -1,4 +1,12 @@
 {
+  "documentation": {
+    "id": "app.components.LeftMenuFooter.documentation",
+    "defaultMessage": "Documentation"
+  },
+  "help": {
+    "id": "app.components.LeftMenuFooter.help",
+    "defaultMessage": "Help"
+  },
   "poweredBy": {
     "id": "app.components.LeftMenuFooter.poweredBy",
     "defaultMessage": "Proudly powered by "

packages/strapi-admin/admin/src/components/LeftMenuFooter/styles.scss

@@ -4,26 +4,27 @@
 .leftMenuFooter { /* stylelint-disable */
   position: absolute;
   width: 100%;
-  display: flex;
+  background: $left-menu-bg;
-  justify-content: space-between;
+  bottom: 0;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin-bottom: 0;
+}
+
+.poweredBy {
+  width: 100%;
   bottom: 0;
   height: 3rem;
   padding-left: 15px;
   padding-right: 15px;
   line-height: 3rem;
-  font-family: 'Lato';
   background-color: rgba(255, 255, 255, .02);
   font-size: 1rem;
   font-weight: 400;
   letter-spacing: 0.05rem;
   vertical-align: middle;
   color: $strapi-gray-light;
-
-  a {
-    color: #0097f7;
-  }
-
-  select{
-    outline: none;
-  }
 }

packages/strapi-admin/admin/src/components/LeftMenuLink/index.js

@@ -47,8 +47,22 @@ class LeftMenuLink extends React.Component {
       <span className={styles.linkLabel}>{this.props.label}</span>
     );
 
-    return (
+    // Icon.
-      <li className={styles.item}>
+    const icon = <i className={`${styles.linkIcon} fa-${this.props.icon} fa`} />;
+
+    // Create external or internal link.
+    const link = this.props.destination.includes('http')
+      ? (
+        <a
+          className={`${styles.link} ${isLinkActive ? styles.linkActive : ''}`}
+          href={this.props.destination}
+          target="_blank"
+        >
+          {icon}
+          {content}
+        </a>
+      )
+      : (
         <Link
           className={`${styles.link} ${isLinkActive ? styles.linkActive : ''}`}
           to={{
@@ -56,9 +70,14 @@ class LeftMenuLink extends React.Component {
             search: this.props.source ? `?source=${this.props.source}` : '',
           }}
         >
-          <i className={`${styles.linkIcon} fa-${this.props.icon} fa`} />
+          {icon}
           {content}
         </Link>
+      );
+
+    return (
+      <li className={styles.item}>
+        {link}
         {plugin}
       </li>
     );

packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/styles.scss

@@ -3,6 +3,7 @@
 
 .leftMenuLinkContainer { /* stylelint-ignore */
   padding-top: .6rem;
+  padding-bottom: 10.2rem; // LeftMenuFooter height
   position: absolute;
   top: 60px;
   right: 0;

packages/strapi-admin/admin/src/containers/AdminPage/index.js

@@ -256,6 +256,7 @@ AdminPage.propTypes = {
   blockApp: PropTypes.bool.isRequired,
   disableGlobalOverlayBlocker: PropTypes.func.isRequired,
   enableGlobalOverlayBlocker: PropTypes.func.isRequired,
+  getAdminData: PropTypes.func.isRequired,
   hasUserPlugin: PropTypes.bool,
   history: PropTypes.object.isRequired,
   isAppLoading: PropTypes.bool,

packages/strapi-admin/admin/src/translations/en.json

@@ -65,6 +65,8 @@
   "app.components.InstallPluginPopup.navLink.faq": "faq",
   "app.components.InstallPluginPopup.navLink.screenshots": "Screenshots",
   "app.components.InstallPluginPopup.noDescription": "No description available",
+  "app.components.LeftMenuFooter.documentation": "Documentation",
+  "app.components.LeftMenuFooter.help": "Help",
   "app.components.LeftMenuFooter.poweredBy": "Powered by ",
   "app.components.LeftMenuLinkContainer.configuration": "Configurations",
   "app.components.LeftMenuLinkContainer.general": "General",

packages/strapi-admin/admin/src/translations/fr.json

@@ -66,6 +66,8 @@
   "app.components.InstallPluginPopup.navLink.faq": "FAQ",
   "app.components.InstallPluginPopup.navLink.screenshots": "Captures d'écran",
   "app.components.InstallPluginPopup.noDescription": "Aucune description disponible",
+  "app.components.LeftMenuFooter.documentation": "Documentation",
+  "app.components.LeftMenuFooter.help": "Aide",
   "app.components.LeftMenuFooter.poweredBy": "Propulsé par ",
   "app.components.LeftMenuLinkContainer.configuration": "Configurations",
   "app.components.LeftMenuLinkContainer.general": "Général",