Fix after PR comments

Signed-off-by: HichamELBSI <elabbassih@gmail.com>
This commit is contained in:
HichamELBSI 2020-02-12 17:54:08 +01:00
parent 4f5cd5a209
commit fc1541330b
14 changed files with 97 additions and 61 deletions

View File

@ -37,7 +37,7 @@ const LeftMenuLinkContainer = ({ plugins }) => {
return acc;
}, {});
// Generate the list of plugin links
// Generate the list of plugin links (plugins without a mainComponent should not appear in the left menu)
const pluginsLinks = Object.values(plugins)
.filter(
plugin =>

View File

@ -1,9 +1,9 @@
{
"contentTypes": {
"id": "app.components.LeftMenuLinkContainer.contentTypes",
"collectionType": {
"id": "app.components.LeftMenuLinkContainer.collectionTypes",
"defaultMessage": "Collection Types"
},
"singleTypes": {
"singleType": {
"id": "app.components.LeftMenuLinkContainer.singleTypes",
"defaultMessage": "Single Types"
},

View File

@ -0,0 +1,7 @@
import styled from 'styled-components';
const SearchButton = styled.button`
padding: 0 10px;
`;
export default SearchButton;

View File

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

View File

@ -2,28 +2,12 @@ import React, { useState, createRef, useEffect } from 'react';
import { camelCase } from 'lodash';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import messages from '../LeftMenuLinkContainer/messages.json';
import Search from './Search';
const Title = styled.div`
display: flex;
justify-content: space-between;
padding-left: 2rem;
padding-right: 1.6rem;
padding-top: 0.7rem;
margin-bottom: 0.8rem;
color: ${props => props.theme.main.colors.leftMenu['title-color']};
text-transform: uppercase;
font-size: 1.1rem;
letter-spacing: 0.1rem;
font-weight: 800;
`;
const SearchButton = styled.button`
padding: 0 10px;
`;
import Title from './Title';
import SearchButton from './SearchButton';
const LeftMenuLinkHeader = ({ section, searchable, setSearch, search }) => {
const [showSearch, setShowSearch] = useState(false);
@ -63,12 +47,16 @@ const LeftMenuLinkHeader = ({ section, searchable, setSearch, search }) => {
<div>
<FontAwesomeIcon icon="search" />
</div>
<Search
ref={ref}
onChange={handleChange}
value={search}
placeholder="search…"
/>
<FormattedMessage id="components.Search.placeholder">
{message => (
<Search
ref={ref}
onChange={handleChange}
value={search}
placeholder={message}
/>
)}
</FormattedMessage>
<SearchButton onClick={clearSearch}>
<FontAwesomeIcon icon="times" />
</SearchButton>

View File

@ -0,0 +1,22 @@
import styled from 'styled-components';
const EmptyLinksList = styled.div`
color: ${props => props.theme.main.colors.white};
padding-left: 1.6rem;
padding-right: 1.6rem;
font-weight: 300;
min-height: 3.6rem;
padding-top: 0.2rem;
`;
EmptyLinksList.defaultProps = {
theme: {
main: {
colors: {
white: '#ffffff',
},
},
},
};
export default EmptyLinksList;

View File

@ -0,0 +1,8 @@
import styled from 'styled-components';
const LeftMenuListLink = styled.div`
max-height: 180px;
overflow: auto;
`;
export default LeftMenuListLink;

View File

@ -1,25 +1,13 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import matchSorter from 'match-sorter';
import styled from 'styled-components';
import { sortBy } from 'lodash';
import { FormattedMessage } from 'react-intl';
import LeftMenuLink from '../LeftMenuLink';
import LeftMenuLinkHeader from '../LeftMenuLinkHeader';
const LeftMenuListLink = styled.div`
max-height: 180px;
overflow: auto;
`;
const EmptyLinksList = styled.div`
color: ${props => props.theme.main.colors.white};
padding-left: 1.6rem;
padding-right: 1.6rem;
font-weight: 300;
min-height: 3.6rem;
padding-top: 0.2rem;
`;
import EmptyLinksList from './EmptyLinksList';
import LeftMenuListLink from './LeftMenuListLink';
const LeftMenuLinksSection = ({
section,

View File

@ -76,7 +76,7 @@
"app.components.LeftMenuLinkContainer.general": "General",
"app.components.LeftMenuLinkContainer.installNewPlugin": "Marketplace",
"app.components.LeftMenuLinkContainer.listPlugins": "Plugins",
"app.components.LeftMenuLinkContainer.contentTypes": "Collection Types",
"app.components.LeftMenuLinkContainer.collectionTypes": "Collection Types",
"app.components.LeftMenuLinkContainer.singleTypes": "Single Types",
"app.components.LeftMenuLinkContainer.noPluginsInstalled": "No plugins installed yet",
"app.components.LeftMenuLinkContainer.plugins": "Plugins",
@ -143,6 +143,7 @@
"components.PageFooter.select": "entries per page",
"components.ProductionBlocker.description": "For safety purposes we have to disable this plugin in other environments.",
"components.ProductionBlocker.header": "This plugin is only available in development.",
"components.Search.placeholder": "Search...",
"components.Wysiwyg.ToggleMode.markdown": "Switch to markdown",
"components.Wysiwyg.ToggleMode.preview": "Switch to preview",
"components.Wysiwyg.collapse": "Collapse",

View File

@ -139,6 +139,7 @@
"components.PageFooter.select": "entrées par page",
"components.ProductionBlocker.description": "Pour des raisons de sécurité il est désactivé dans les autres environnements.",
"components.ProductionBlocker.header": "Ce plugin est disponible uniquement en développement.",
"components.Search.placeholder": "Rechercher...",
"components.Wysiwyg.ToggleMode.markdown": "Retour au markdown",
"components.Wysiwyg.ToggleMode.preview": "Voir une prévisualisation",
"components.Wysiwyg.collapse": "Fermer",

View File

@ -74,7 +74,6 @@
"app.components.LeftMenuLinkContainer.general": "Ogólne",
"app.components.LeftMenuLinkContainer.installNewPlugin": "Sklep",
"app.components.LeftMenuLinkContainer.listPlugins": "Wtyczki",
"app.components.LeftMenuLinkContainer.contentTypes": "Modele",
"app.components.LeftMenuLinkContainer.noPluginsInstalled": "Brak zainstalowanych wtyczek",
"app.components.LeftMenuLinkContainer.plugins": "Wtyczki",
"app.components.LeftMenuLinkContainer.settings": "Ustawienia",

View File

@ -73,7 +73,6 @@
"app.components.LeftMenuLinkContainer.general": "Genel",
"app.components.LeftMenuLinkContainer.installNewPlugin": "Mağaza",
"app.components.LeftMenuLinkContainer.listPlugins": "Eklentiler",
"app.components.LeftMenuLinkContainer.contentTypes": "İçerik Tipi",
"app.components.LeftMenuLinkContainer.noPluginsInstalled": "Yüklenen eklenti bulunmamaktadır.",
"app.components.LeftMenuLinkContainer.plugins": "Eklentiler",
"app.components.LeftMenuLinkContainer.settings": "Ayarlar",

View File

@ -76,7 +76,7 @@
"app.components.LeftMenuLinkContainer.general": "常规",
"app.components.LeftMenuLinkContainer.installNewPlugin": "市场",
"app.components.LeftMenuLinkContainer.listPlugins": "插件",
"app.components.LeftMenuLinkContainer.contentTypes": "Content Types",
"app.components.LeftMenuLinkContainer.collectionTypes": "Collection Types",
"app.components.LeftMenuLinkContainer.noPluginsInstalled": "还没有安装插件",
"app.components.LeftMenuLinkContainer.plugins": "插件",
"app.components.LeftMenuLinkContainer.settings": "设置",

View File

@ -6,6 +6,7 @@
import { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { chain } from 'lodash';
import { request } from 'strapi-helper-plugin';
import pluginId from '../../pluginId';
@ -21,22 +22,15 @@ const Initializer = ({ updatePlugin }) => {
try {
const { data } = await request(requestURL, { method: 'GET' });
const menu = [
{
name: 'Content Types',
links: data.filter(
contentType => contentType.schema.kind === 'collectionType'
),
},
{
name: 'Single Types',
links: data.filter(
contentType => contentType.schema.kind === 'singleType'
),
},
];
ref.current(pluginId, 'leftMenuSections', menu);
ref.current(
pluginId,
'leftMenuSections',
chain(data)
.groupBy('schema.kind')
.map((value, key) => ({ name: key, links: value }))
.value()
);
ref.current(pluginId, 'isReady', true);
} catch (err) {
strapi.notification.error('content-manager.error.model.fetch');