@akemona-org/strapi-admin 3.7.0

package/admin/src/components/LeftMenu/LeftMenuLink/NotificationCount.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Text } from '@buffetjs/core';
+
+const NotificationWrapper = styled.div`
+  height: 14px;
+  margin-top: 4px;
+  margin-right: 20px;
+  padding: 0px 4px;
+  background-color: #383d49;
+  border-radius: 2px;
+  font-size: 11px;
+`;
+
+const NotificationCount = ({ count }) => (
+  <NotificationWrapper>
+    <Text fontWeight="bold" fontSize="xs" lineHeight="14px" color="#919bae">
+      {count}
+    </Text>
+  </NotificationWrapper>
+);
+
+NotificationCount.defaultProps = {
+  count: 0,
+};
+
+NotificationCount.propTypes = {
+  count: PropTypes.number,
+};
+
+export default NotificationCount;

package/admin/src/components/LeftMenu/LeftMenuLink/index.js

@@ -0,0 +1,41 @@
+/**
+ *
+ * LeftMenuLink
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import LeftMenuLinkContent from './LeftMenuLinkContent';
+
+const LeftMenuLink = ({ destination, iconName, label, location, notificationsCount, search }) => {
+  return (
+    <LeftMenuLinkContent
+      destination={destination}
+      iconName={iconName}
+      label={label}
+      location={location}
+      notificationsCount={notificationsCount}
+      search={search}
+    />
+  );
+};
+
+LeftMenuLink.propTypes = {
+  destination: PropTypes.string.isRequired,
+  iconName: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+  }).isRequired,
+  notificationsCount: PropTypes.number.isRequired,
+  search: PropTypes.string,
+};
+
+LeftMenuLink.defaultProps = {
+  iconName: 'circle',
+  search: null,
+};
+
+export default LeftMenuLink;

package/admin/src/components/LeftMenu/LeftMenuLinkHeader/Search.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Search = styled.input`
+  width: 100%;
+  padding: 0 15px;
+  outline: 0;
+  font-size: 1.1rem;
+  color: ${({ theme }) => theme.main.colors.white};
+`;
+
+export default Search;

package/admin/src/components/LeftMenu/LeftMenuLinkHeader/SearchButton.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const SearchButton = styled.button`
+  padding: 0 10px;
+  line-height: normal;
+  &:focus {
+    outline: 0;
+  }
+`;
+
+export default SearchButton;

package/admin/src/components/LeftMenu/LeftMenuLinkHeader/SearchWrapper.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const SearchWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 19px;
+  justify-content: space-between;
+  border-bottom: 1px solid;
+`;
+
+export default SearchWrapper;

package/admin/src/components/LeftMenu/LeftMenuLinkHeader/Title.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+const Title = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding-left: 2rem;
+  padding-right: 1.6rem;
+  padding-top: 1rem;
+  margin-bottom: 0.9rem;
+  color: ${props => props.theme.main.colors.leftMenu['title-color']};
+  text-transform: uppercase;
+  font-size: 1.1rem;
+  letter-spacing: 0.1rem;
+  font-weight: 800;
+  max-height: 26px;
+`;
+
+Title.defaultProps = {
+  theme: {
+    main: {
+      colors: {
+        leftMenu: {
+          'title-color': '#5b626f',
+        },
+      },
+    },
+  },
+};
+
+export default Title;

package/admin/src/components/LeftMenu/LeftMenuLinkHeader/index.js

@@ -0,0 +1,81 @@
+import React, { useState, createRef, useEffect } from 'react';
+import { camelCase } from 'lodash';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+// TODO remove this
+import messages from './messages.json';
+import Search from './Search';
+import Title from './Title';
+import SearchButton from './SearchButton';
+import SearchWrapper from './SearchWrapper';
+
+const LeftMenuLinkHeader = ({ section, searchable, setSearch, search }) => {
+  const [showSearch, setShowSearch] = useState(false);
+  const ref = createRef();
+  const { id, defaultMessage } = messages[camelCase(section)];
+
+  useEffect(() => {
+    if (showSearch && ref.current) {
+      ref.current.focus();
+    }
+  }, [ref, showSearch]);
+
+  const toggleSearch = () => {
+    setShowSearch(prev => !prev);
+  };
+
+  const handleChange = ({ target: { value } }) => {
+    setSearch(value);
+  };
+
+  const clearSearch = () => {
+    setSearch('');
+    setShowSearch(false);
+  };
+
+  return (
+    <Title>
+      {!showSearch ? (
+        <>
+          <FormattedMessage id={id} defaultMessage={defaultMessage} />
+          {searchable && (
+            <SearchButton onClick={toggleSearch}>
+              <FontAwesomeIcon icon="search" />
+            </SearchButton>
+          )}
+        </>
+      ) : (
+        <SearchWrapper>
+          <div>
+            <FontAwesomeIcon style={{ fontSize: 12 }} icon="search" />
+          </div>
+          <FormattedMessage id="components.Search.placeholder">
+            {message => (
+              <Search ref={ref} onChange={handleChange} value={search} placeholder={message} />
+            )}
+          </FormattedMessage>
+          <SearchButton onClick={clearSearch}>
+            <FontAwesomeIcon icon="times" />
+          </SearchButton>
+        </SearchWrapper>
+      )}
+    </Title>
+  );
+};
+
+LeftMenuLinkHeader.propTypes = {
+  section: PropTypes.string.isRequired,
+  searchable: PropTypes.bool,
+  setSearch: PropTypes.func,
+  search: PropTypes.string,
+};
+
+LeftMenuLinkHeader.defaultProps = {
+  search: null,
+  searchable: false,
+  setSearch: () => {},
+};
+
+export default LeftMenuLinkHeader;

package/admin/src/components/LeftMenu/LeftMenuLinkHeader/messages.json

@@ -0,0 +1,38 @@
+{
+  "collectionType": {
+    "id": "app.components.LeftMenuLinkContainer.collectionTypes",
+    "defaultMessage": "Collection Types"
+  },
+  "singleType": {
+    "id": "app.components.LeftMenuLinkContainer.singleTypes",
+    "defaultMessage": "Single Types"
+  },
+  "listPlugins": {
+    "id": "app.components.LeftMenuLinkContainer.listPlugins",
+    "defaultMessage": "Plugins"
+  },
+  "installNewPlugin": {
+    "id": "app.components.LeftMenuLinkContainer.installNewPlugin",
+    "defaultMessage": "Marketplace"
+  },
+  "configuration": {
+    "id": "app.components.LeftMenuLinkContainer.configuration",
+    "defaultMessage": "Configurations"
+  },
+  "plugins": {
+    "id": "app.components.LeftMenuLinkContainer.plugins",
+    "defaultMessage": "Plugins"
+  },
+  "general": {
+    "id": "app.components.LeftMenuLinkContainer.general",
+    "defaultMessage": "General"
+  },
+  "noPluginsInstalled": {
+    "id": "app.components.LeftMenuLinkContainer.noPluginsInstalled",
+    "defaultMessage": "No plugins installed yet"
+  },
+  "settings": {
+    "id": "app.components.LeftMenuLinkContainer.settings",
+    "defaultMessage": "Settings"
+  }
+}

package/admin/src/components/LeftMenu/LeftMenuLinkSection/EmptyLinksList.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const EmptyLinksList = styled.span`
+  min-height: 3.6rem;
+  padding: 0.6rem 1.6rem 2.6rem 0;
+  font-size: 1.4rem;
+  font-weight: 400;
+  color: ${({ theme }) => theme.main.colors.leftMenu['link-color']};
+`;
+
+EmptyLinksList.defaultProps = {
+  theme: {
+    main: {
+      colors: {
+        white: '#ffffff',
+      },
+    },
+  },
+};
+
+export default EmptyLinksList;

package/admin/src/components/LeftMenu/LeftMenuLinkSection/EmptyLinksListWrapper.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const EmptyLinksListWrapper = styled.div`
+  margin-bottom: 0.1rem;
+  padding: 0.8rem 0 0.7rem 2rem;
+  line-height: 18px;
+`;
+
+export default EmptyLinksListWrapper;

package/admin/src/components/LeftMenu/LeftMenuLinkSection/LeftMenuListLink.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const LeftMenuListLink = styled.div`
+  max-height: 180px;
+  margin-bottom: 19px;
+  margin-right: 25px;
+  overflow: auto;
+`;
+
+export default LeftMenuListLink;

package/admin/src/components/LeftMenu/LeftMenuLinkSection/index.js

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import matchSorter from 'match-sorter';
+import { sortBy } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+
+import LeftMenuLink from '../LeftMenuLink';
+import LeftMenuLinkHeader from '../LeftMenuLinkHeader';
+import LeftMenuListLink from './LeftMenuListLink';
+import EmptyLinksList from './EmptyLinksList';
+import EmptyLinksListWrapper from './EmptyLinksListWrapper';
+
+const LeftMenuLinksSection = ({
+  section,
+  searchable,
+  location,
+  links,
+  emptyLinksListMessage,
+  shrink,
+}) => {
+  const [search, setSearch] = useState('');
+
+  const filteredList = sortBy(
+    matchSorter(links, search, {
+      keys: ['label'],
+    }),
+    'label'
+  );
+
+  return (
+    <>
+      <LeftMenuLinkHeader
+        section={section}
+        searchable={searchable}
+        setSearch={setSearch}
+        search={search}
+      />
+      <LeftMenuListLink shrink={shrink}>
+        {filteredList.length > 0 ? (
+          filteredList.map((link, index) => (
+            <LeftMenuLink
+              location={location}
+              // There is no id or unique value in the link object for the moment.
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              iconName={link.icon}
+              label={link.label}
+              destination={link.destination}
+              notificationsCount={link.notificationsCount || 0}
+              search={link.search}
+            />
+          ))
+        ) : (
+          <EmptyLinksListWrapper>
+            <FormattedMessage id={emptyLinksListMessage} defaultMessage="No plugins installed yet">
+              {msg => <EmptyLinksList>{msg}</EmptyLinksList>}
+            </FormattedMessage>
+          </EmptyLinksListWrapper>
+        )}
+      </LeftMenuListLink>
+    </>
+  );
+};
+
+LeftMenuLinksSection.defaultProps = {
+  shrink: false,
+};
+
+LeftMenuLinksSection.propTypes = {
+  section: PropTypes.string.isRequired,
+  searchable: PropTypes.bool.isRequired,
+  shrink: PropTypes.bool,
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+  }).isRequired,
+  links: PropTypes.arrayOf(PropTypes.object).isRequired,
+  emptyLinksListMessage: PropTypes.string,
+};
+
+LeftMenuLinksSection.defaultProps = {
+  emptyLinksListMessage: 'components.ListRow.empty',
+};
+
+export default LeftMenuLinksSection;

package/admin/src/components/LeftMenu/LinksContainer/index.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const LinksContainer = styled.div`
+  padding-top: 0.7rem;
+  position: absolute;
+  top: ${props => props.theme.main.sizes.leftMenu.height};
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow-y: auto;
+  height: calc(100vh - (${props => props.theme.main.sizes.leftMenu.height} + 3rem));
+  box-sizing: border-box;
+`;
+
+LinksContainer.defaultProps = {
+  theme: {
+    main: {
+      sizes: {
+        header: {},
+        leftMenu: {},
+      },
+    },
+  },
+};
+
+LinksContainer.propTypes = {
+  theme: PropTypes.object,
+};
+
+export default LinksContainer;

package/admin/src/components/LeftMenu/index.js

@@ -0,0 +1,4 @@
+export { default as LeftMenuFooter } from './LeftMenuFooter';
+export { default as LeftMenuHeader } from './LeftMenuHeader';
+export { default as LinksContainer } from './LinksContainer';
+export { default as LeftMenuLinksSection } from './LeftMenuLinkSection';

package/admin/src/components/NavTopRightWrapper/index.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const NavTopRightWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  display: flex;
+  z-index: 1050;
+`;
+
+export default NavTopRightWrapper;

package/admin/src/components/Notifications/Notification/Li.js

@@ -0,0 +1,168 @@
+import styled, { createGlobalStyle } from 'styled-components';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const GlobalNotification = createGlobalStyle`
+  .notificationIcon {
+    position: relative;
+    display: block;
+    width: 40px;
+    height: 40px;
+    > div {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      top: 10px;
+      left: 5px;
+      border-radius: 10px;
+      border: 1px solid ${props => props.theme.main.colors.green};
+      display: flex;
+      svg {
+        margin: auto;
+        color: ${props => props.theme.main.colors.green};
+        width: 10px;
+        height: 10px;
+      }
+    }
+  }
+
+  .notificationContent {
+    display: flex;
+    align-items: center;
+    width: 220px;
+    margin: 0;
+    padding-right: 10px;
+    border-right: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  .notificationTitle {
+    margin-bottom: 0;
+    font-size: 1.4rem;
+    font-weight: 400;
+    line-height: 1.8rem;
+  }
+
+  .notificationClose {
+    position: relative;
+    display: flex;
+    width: 20px;
+    margin-right: 15px;
+    cursor: pointer;
+    opacity: 0.6;
+    font-size: 1.4rem;
+    color: #BBC2BF;
+    transition: opacity 0.1s ease;
+    -webkit-font-smoothing: antialiased;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    svg {
+      margin: auto;
+      font-size: 1.3rem;
+      font-weight: 100!important;
+    }
+  }
+
+  .notificationSuccess{
+    .notificationIcon {
+      div {
+        border-color: ${props => props.theme.main.colors.green};
+      } 
+      svg {
+        color: ${props => props.theme.main.colors.green};
+      }
+    } 
+  }
+
+  .notificationWarning {
+    .notificationIcon {
+      div {
+        border-color: ${props => props.theme.main.colors.orange};
+      } 
+      svg {
+        color: ${props => props.theme.main.colors.orange};
+      }
+    } 
+  }
+
+  .notificationError {
+    .notificationIcon {
+      div {
+        border-color: ${props => props.theme.main.colors.red};
+      } 
+      svg {
+        color: ${props => props.theme.main.colors.red};
+      }
+    } 
+  }
+
+  .notificationInfo {
+    .notificationIcon {
+      div {
+        border-color: ${props => props.theme.main.colors.blue};
+      } 
+      svg {
+        color: ${props => props.theme.main.colors.blue};
+      }
+    } 
+  }
+`;
+
+const Li = styled.li`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 300px;
+  min-height: 60px;
+  margin-bottom: 14px;
+  background: ${props => props.theme.main.colors.white};
+  border-radius: 2px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
+  color: #333740;
+  transition: all 0.15s ease;
+  overflow: hidden;
+  z-index: 10;
+  padding: 1rem;
+  border-left: 2px solid ${props => props.theme.main.colors.green};
+  &.notificationError {
+    border-color: ${props => props.theme.main.colors.red};
+  }
+  &.notificationWarning {
+    border-color: ${props => props.theme.main.colors.orange};
+  }
+  &.notificationInfo {
+    border-color: ${props => props.theme.main.colors.blue};
+  }
+
+  &:last-child {
+    z-index: 1;
+  }
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  }
+`;
+
+Li.defaultProps = {
+  theme: {
+    main: {
+      colors: {
+        leftMenu: {},
+      },
+      sizes: {
+        header: {},
+        leftMenu: {},
+      },
+    },
+  },
+};
+
+Li.propTypes = {
+  ...themePropTypes,
+};
+
+export default Li;
+
+export { GlobalNotification };