Init Modal

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-plugin-upload/admin/src/components/ModalNav/index.js

@@ -0,0 +1,24 @@
+/**
+ *
+ * ModalNav
+ *
+ */
+
+import styled from 'styled-components';
+
+const ModalNav = styled.div`
+  display: flex;
+  height: 3.8rem;
+  padding-top: 0.6rem;
+  color: #9ea7b8;
+  font-size: 1.2rem;
+  font-weight: 500;
+  letter-spacing: 0.7px;
+  text-transform: uppercase;
+
+  > div:last-child {
+    margin-left: 3rem;
+  }
+`;
+
+export default ModalNav;

packages/strapi-plugin-upload/admin/src/components/NavLink/Wrapper.js

@@ -0,0 +1,19 @@
+import styled, { css } from 'styled-components';
+
+const Wrapper = styled.div`
+  ${({ isActive }) => {
+    if (isActive) {
+      return css`
+        height: 3rem;
+        color: #007eff;
+        font-weight: 600;
+        border-bottom: 2px solid #007eff;
+        z-index: 99;
+      `;
+    }
+
+    return '';
+  }}
+`;
+
+export default Wrapper;

packages/strapi-plugin-upload/admin/src/components/NavLink/index.js

@@ -0,0 +1,47 @@
+/**
+ *
+ * HeaderNavLink
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import getTrad from '../../utils/getTrad';
+// import pluginId from '../../pluginId';
+import Wrapper from './Wrapper';
+
+/* istanbul ignore next */
+function HeaderNavLink({ isDisabled, to, isActive, onClick }) {
+  return (
+    <Wrapper
+      isActive={isActive}
+      style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}
+      onClick={e => {
+        if (isDisabled) {
+          e.preventDefault();
+
+          return;
+        }
+        onClick(to);
+      }}
+    >
+      <FormattedMessage id={getTrad(`modal.nav.${to}`)} />
+    </Wrapper>
+  );
+}
+
+HeaderNavLink.defaultProps = {
+  isActive: false,
+  isDisabled: false,
+  onClick: () => {},
+};
+
+HeaderNavLink.propTypes = {
+  to: PropTypes.string.isRequired,
+  isActive: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export default HeaderNavLink;

packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js

@@ -1,4 +1,4 @@
-import React, { useReducer } from 'react';
+import React, { useReducer, useState } from 'react';
 import { Header } from '@buffetjs/custom';
 import { HeaderSearch, useGlobalContext } from 'strapi-helper-plugin';
 import getTrad from '../../utils/getTrad';
@@ -8,6 +8,7 @@ import SelectAll from '../../components/SelectAll';
 import SortPicker from '../../components/SortPicker';
 // import List from '../../components/List';
 import ListEmpty from '../../components/ListEmpty';
+import UploadModal from '../UploadModal';
 import getHeaderLabel from './utils/getHeaderLabel';
 import init from './init';
 import reducer, { initialState } from './reducer';
@@ -16,9 +17,13 @@ import AddFilterCTA from '../../components/AddFilterCTA';
 const HomePage = () => {
   const { formatMessage } = useGlobalContext();
   const [reducerState, dispatch] = useReducer(reducer, initialState, init);
+  const [isOpen, setIsOpen] = useState(true);
   const { data, dataToDelete, _q } = reducerState.toJS();
   const pluginName = formatMessage({ id: getTrad('plugin.name') });
 
+  const handleClickToggleModal = () => {
+    setIsOpen(prev => !prev);
+  };
   const handleClearSearch = () => {
     dispatch({
       type: 'ON_CLEAR_SEARCH',
@@ -49,7 +54,7 @@ const HomePage = () => {
         disabled: false,
         color: 'primary',
         label: formatMessage({ id: getTrad('header.actions.upload-assets') }),
-        onClick: () => {},
+        onClick: handleClickToggleModal,
         type: 'button',
       },
     ],
@@ -76,9 +81,10 @@ const HomePage = () => {
       </ControlsWrapper>
       <ListEmpty
         // TODO
-        onClick={() => {}}
+        onClick={handleClickToggleModal}
       />
       {/* <List data={data} /> */}
+      <UploadModal isOpen={isOpen} onToggle={handleClickToggleModal} />
     </Container>
   );
 };

packages/strapi-plugin-upload/admin/src/containers/UploadModal/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  HeaderModal,
+  HeaderModalTitle,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalForm,
+} from 'strapi-helper-plugin';
+import { Button } from '@buffetjs/core';
+import { FormattedMessage } from 'react-intl';
+import getTrad from '../../utils/getTrad';
+import ModalNav from '../../components/ModalNav';
+import NavLink from '../../components/NavLink';
+
+const UploadModal = ({ isOpen, onToggle }) => {
+  return (
+    <Modal isOpen={isOpen} onToggle={onToggle}>
+      <HeaderModal>
+        <section>
+          <HeaderModalTitle>
+            <FormattedMessage id={getTrad('modal.header.browse')} />
+          </HeaderModalTitle>
+        </section>
+        <section>
+          <HeaderModalTitle>
+            <div className="settings-tabs" style={{ left: 30 }}>
+              <ModalNav>
+                <NavLink isActive to="computer" />
+                <NavLink to="url" isDisabled />
+              </ModalNav>
+            </div>
+            <hr />
+          </HeaderModalTitle>
+        </section>
+        <ModalForm>
+          <ModalBody>
+            <div className="container-fluid">
+              <div className="row">
+                <div className="col-12">
+                  <p>COMING SOON</p>
+                </div>
+              </div>
+            </div>
+          </ModalBody>
+        </ModalForm>
+
+        <ModalFooter>
+          <section>
+            <Button type="button" color="cancel" onClick={onToggle}>
+              Cancel
+            </Button>
+          </section>
+        </ModalFooter>
+      </HeaderModal>
+    </Modal>
+  );
+};
+
+UploadModal.defaultProps = {
+  onToggle: () => {},
+};
+
+UploadModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func,
+};
+
+export default UploadModal;

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

@@ -5,6 +5,9 @@
   "header.content.assets-single": "1 asset",
   "list.assets-empty.title": "There is no asset yet",
   "list.assets-empty.subtitle": "Add a first one to the list.",
+  "modal.header.browse": "Upload assets",
+  "modal.nav.computer": "from computer",
+  "modal.nav.url": "from url",
   "plugin.name": "Media Library",
   "plugin.description.long": "Media file management.",
   "plugin.description.short": "Media file management.",