Complete design list views

packages/strapi-helper-plugin/lib/internals/generators/component/es6.js.hbs

@@ -36,6 +36,6 @@ class {{ properCase name }} extends React.Component { // eslint-disable-line rea
 // Uncomment to use PropTypes
 // {{ properCase name }}.proptypes = {
   // foo: PropTypes.string,
-};
+// };
 
 export default {{ properCase name }};

packages/strapi-plugin-users-permissions/admin/src/components/List/index.js

@@ -12,6 +12,7 @@ import { map, size } from 'lodash';
 
 // Design
 import Button from 'components/Button';
+import ListRow from 'components/ListRow';
 
 import styles from './styles.scss';
 
@@ -63,10 +64,10 @@ function List({ data, noButton, onButtonClick, settingType }) {
         </div>
       </div>
       <div className={styles.ulContainer}>
-        <ul>
-          {map(data, item => {
-            return <li key={item.name}>{item.name}</li>
-          })}
+        <ul className={noButton ? styles.listPadded : ''}>
+          {map(data, item => (
+            <ListRow item={item} key={item.name} settingType={settingType} />
+          ))}
         </ul>
       </div>
     </div>

packages/strapi-plugin-users-permissions/admin/src/components/List/styles.scss

@@ -26,3 +26,7 @@
     list-style: none;
   }
 }
+
+.listPadded {
+  padding-top: 3px !important;
+}

packages/strapi-plugin-users-permissions/admin/src/components/ListRow/index.js

@@ -0,0 +1,133 @@
+/**
+*
+* ListRow
+*
+*/
+
+import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+
+// Design
+import IcoContainer from 'components/IcoContainer';
+import styles from './styles.scss';
+
+class ListRow extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  generateContent = () => {
+    let icons = [
+      {
+        icoType: 'pencil',
+        onClick: () => { console.log('edit') },
+      },
+      {
+        icoType: 'trash',
+        onClick: () => { console.log('delete') },
+      },
+    ];
+
+    switch (this.props.settingType) {
+      case 'roles':
+        return (
+          <div className={cn('row', styles.wrapper)}>
+            <div className="col-md-2">
+              <b>{this.props.item.name}</b>
+            </div>
+            <div className="col-md-7">
+              {this.props.item.description}
+            </div>
+            <div className="col-md-1">
+              <b>{this.props.item.nb_users}</b>&nbsp;
+              {this.props.item.nb_users > 1 ? (
+                'users'
+              ) : (
+                'user'
+              )}
+            </div>
+            <div className="col-md-2">
+              <IcoContainer icons={icons} />
+            </div>
+          </div>
+        );
+      case 'providers':
+        return (
+          <div className={cn('row', styles.wrapper)}>
+            <div className="col-md-4">
+              <div className={styles.flex}>
+                <div>
+                  <i className={`fa fa-${this.props.item.ico}`} />
+                </div>
+                <div>
+                  {this.props.item.name}
+                </div>
+              </div>
+            </div>
+            <div className="col-md-6" style={{ fontWeight: '600' }}>
+              {this.props.item.enabled ? (
+                <span style={{ color: '#5A9E06' }}>Enabled</span>
+              ) : (
+                <span style={{ color: '#F64D0A' }}>Disabled</span>
+              )}
+            </div>
+            <div className="col-md-2">
+              <IcoContainer icons={icons} />
+            </div>
+          </div>
+        );
+
+      case 'email-templates':
+        icons = [
+          {
+            icoType: 'pencil',
+            onClick: () => { console.log('edit') },
+          },
+        ];
+
+        return (
+          <div className={cn('row', styles.wrapper)}>
+            <div className="col-md-4">
+              <div className={styles.flex}>
+                <div>
+                  <i className={`fa fa-${this.props.item.ico}`} />
+                </div>
+                <div>
+                  {this.props.item.name}
+                </div>
+              </div>
+            </div>
+            <div className="col-md-8">
+              <IcoContainer icons={icons} />
+            </div>
+          </div>
+        );
+
+      default:
+        return '';
+    }
+  }
+
+  render() {
+    return (
+      <li className={styles.li}>
+        <div className={styles.container}>
+          {this.generateContent()}
+        </div>
+      </li>
+    );
+  }
+}
+
+ListRow.defaultProps = {
+  item: {
+    name: 'Owner',
+    description: 'Rule them all. This role can\'t be deleted',
+    nb_users: 1,
+  },
+  settingType: 'roles',
+}
+
+ListRow.proptypes = {
+  item: PropTypes.object,
+  settingType: PropTypes.string,
+};
+
+export default ListRow;

packages/strapi-plugin-users-permissions/admin/src/components/ListRow/styles.scss

@@ -0,0 +1,53 @@
+.listRow {
+
+}
+
+.container { /* stylelint-disable */
+  margin: 0 3.2rem 0 1.9rem ;
+  padding: 0 1.4rem 0 0rem;
+  border-bottom: 1px solid rgba(14,22,34,0.04);
+  color: #333740;
+  font-size: 1.3rem;
+  > div {
+    padding: 0;
+    align-self: center;
+  }
+  > div:first-child{
+    padding-left: 1.4rem;
+  }
+  > div:last-child {
+    text-align: right;
+  }
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+  text-transform: capitalize;
+  > div:last-child {
+    width: 80%;
+    text-align: left;
+  }
+}
+
+.li {
+  margin-top: 0!important;
+  position: relative;
+  height: 5.4rem;
+  line-height: 5.4rem;
+  cursor: pointer;
+  &:hover {
+    background-color: #F7F8F8;
+  }
+}
+
+.wrapper {
+  > div:first-child {
+    text-align: left;
+  }
+
+  > div:nth-of-type(2) {
+    text-align: center;
+  }
+}

packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/data.json

@@ -3,22 +3,22 @@
     {
       "name": "Owner",
       "description": "Rule them all. This role can't be deleted",
-      "nb_user": 1
+      "nb_users": 1
     },
     {
       "name": "Administrator",
       "description": "Full access to everything",
-      "nb_user": 3
+      "nb_users": 3
     },
     {
       "name": "Moderator",
       "description": "Allow editing and deleting (except users)",
-      "nb_user": 12
+      "nb_users": 12
     },
     {
       "name": "Editor",
       "description": "Allow creating and editing your entries",
-      "nb_user": 429
+      "nb_users": 429
     }
   ],
   "providers": [
@@ -53,7 +53,7 @@
       "ico": "refresh"
     },
     {
-      "name": "Successful sign-in",
+      "name": "Successfull sign-in",
       "ico": "check"
     }
   ]