Init filter design

packages/strapi-admin/package.json

@@ -52,4 +52,4 @@
     "npm": ">= 5.0.0"
   },
   "license": "MIT"
-}
+}

packages/strapi-helper-plugin/package.json

@@ -118,4 +118,4 @@
     "webpack-hot-middleware": "^2.18.2",
     "whatwg-fetch": "^2.0.3"
   }
-}
+}

packages/strapi-plugin-content-manager/admin/src/components/AddFilterCTA/Button.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import Logo from '../../assets/images/icon_filter.png';
+
+const Button = styled.div`
+  height: 30px;
+  width: 99px;
+  text-align: center;
+  background-color: #FFFFFF;
+  border: 1px solid #E3E9F3;
+  border-radius: 2px;
+  line-height: 30px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: Lato;
+  -webkit-font-smoothing-antialiased;
+  cursor: pointer;
+  &:hover {
+    background: #F7F8F8;
+  }
+  &:before {
+    content: url(${Logo});
+  }
+`;
+
+export default Button;

packages/strapi-plugin-content-manager/admin/src/components/AddFilterCTA/index.js

@@ -0,0 +1,21 @@
+/**
+ *
+ * AddFilterCTA
+ *
+ */
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+// Design
+import Button from './Button';
+
+function AddFilterCTA() {
+  return (
+    <Button>
+      <FormattedMessage id="content-manager.components.AddFilterCTA.add" />
+    </Button>
+  );
+}
+
+export default AddFilterCTA;

packages/strapi-plugin-content-manager/admin/src/components/FiltersWrapper/index.js

@@ -0,0 +1,15 @@
+/**
+ *
+ * FiltersWrapper
+ * This component uses styled-components library for styling
+ *
+ */
+
+import styled from 'styled-components';
+
+const FiltersWrapper = styled.div`
+  margin-top: -2px;
+  margin-bottom: 2px;
+`;
+
+export default FiltersWrapper;

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js

@@ -23,6 +23,8 @@ import PluginHeader from 'components/PluginHeader';
 import PopUpWarning from 'components/PopUpWarning';
 
 // Components from the plugin itself
+import AddFilterCTA from 'components/AddFilterCTA';
+import FiltersWrapper from 'components/FiltersWrapper';
 import Table from 'components/Table';
 
 // Utils located in `strapi/packages/strapi-helper-plugin/lib/src/utils`;
@@ -223,6 +225,13 @@ export class ListPage extends React.Component {
               id: listPage.currentModel || 'Content Manager',
             }}
           />
+          <div className={cn('row', styles.row)}>
+            <div className="col-md-12">
+              <FiltersWrapper>
+                <AddFilterCTA />
+              </FiltersWrapper>
+            </div>
+          </div>
           <div className={cn('row', styles.row)}>
             <div className="col-md-12">
               <Table

packages/strapi-plugin-content-manager/admin/src/translations/en.json

@@ -15,8 +15,10 @@
   "components.LimitSelect.itemsPerPage": "Items per page",
   "containers.List.errorFetchRecords": "Error",
 
+  "components.AddFilterCTA.add": "Add filter",
+
   "EditRelations.title": "Relational data",
-  
+
   "emptyAttributes.title": "There are no fields yet",
   "emptyAttributes.description": "Add your first field to your Content Type",
   "emptyAttributes.button": "Go to content type builder",

packages/strapi-plugin-content-manager/admin/src/translations/fr.json

@@ -16,6 +16,8 @@
   "components.LimitSelect.itemsPerPage": "Éléments par page",
   "containers.List.errorFetchRecords": "Erreur",
 
+  "components.AddFilterCTA.add": "Ajouter un filtre",
+
   "EditRelations.title": "Données associées",
 
   "emptyAttributes.title": "Il n'y a pas encore de champs",

packages/strapi-plugin-content-manager/package.json

@@ -47,4 +47,4 @@
     "npm": ">= 5.0.0"
   },
   "license": "MIT"
-}
+}

packages/strapi-plugin-content-type-builder/package.json

@@ -51,4 +51,4 @@
     "npm": ">= 5.0.0"
   },
   "license": "MIT"
-}
+}

packages/strapi-plugin-settings-manager/package.json

@@ -48,4 +48,4 @@
     "npm": ">= 5.0.0"
   },
   "license": "MIT"
-}
+}

packages/strapi-plugin-upload/package.json

@@ -48,4 +48,4 @@
     "npm": ">= 3.0.0"
   },
   "license": "MIT"
-}
+}

packages/strapi-plugin-users-permissions/package.json

@@ -55,4 +55,4 @@
     "npm": ">= 5.0.0"
   },
   "license": "MIT"
-}
+}