Merge branch 'front/ui-improvements' into front/font-weight

2025-12-27 07:03:38 +00:00 · 2020-02-13 13:46:49 +01:00 · 2020-02-13 13:46:49 +01:00 · 8d36b69507
commit 8d36b69507
parent 8e1fe9cfe5 021f88c88f
14 changed files with 98 additions and 87 deletions
--- a/packages/strapi-admin/admin/src/components/ListRow/index.js
+++ b/packages/strapi-admin/admin/src/components/ListRow/index.js
@ -7,6 +7,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Checkbox, IconLinks } from '@buffetjs/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 import Switch from '../Switch';
 import StyledListRow from './StyledListRow';
@ -24,11 +25,11 @@ function ListRow({
 }) {
  const links = [
    {
-      icon: 'pencil',
+      icon: <FontAwesomeIcon icon="pencil-alt" />,
      onClick: () => onEditClick(id),
    },
    {
-      icon: 'trash',
+      icon: <FontAwesomeIcon icon="trash-alt" />,
      onClick: e => {
        e.stopPropagation();
        onDeleteCLick(id);
--- a/packages/strapi-admin/admin/src/components/Row/index.js
+++ b/packages/strapi-admin/admin/src/components/Row/index.js
@ -10,13 +10,10 @@ import { withRouter } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { isEmpty } from 'lodash';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconLinks } from '@buffetjs/core';
+
 // Design
-import {
-  GlobalContext,
-  IcoContainer,
-  ListRow,
-  PopUpWarning,
-} from 'strapi-helper-plugin';
+import { GlobalContext, ListRow, PopUpWarning } from 'strapi-helper-plugin';
 import Action from './Action';
 import Content from './Content';

@ -49,11 +46,12 @@ class Row extends React.Component {
    const { currentEnvironment } = this.context;

    const settingsPath = `/plugins/${name}/configurations/${currentEnvironment}`;
-    const icons = [];
+
+    const links = [];

    if (PLUGINS_WITH_CONFIG.includes(name)) {
-      icons.push({
-        icoType: 'cog',
+      links.push({
+        icon: <FontAwesomeIcon icon="cog" />,
        onClick: e => {
          e.preventDefault();
          e.stopPropagation();
@ -63,8 +61,8 @@ class Row extends React.Component {
    }

    if (!required && currentEnvironment === 'development') {
-      icons.push({
-        icoType: 'trash',
+      links.push({
+        icon: <FontAwesomeIcon icon="trash-alt" />,
        id: name,
        onClick: this.handleClick,
      });
@ -93,7 +91,7 @@ class Row extends React.Component {
        </Content>
        <div className="col-md-1">
          <Action>
-            <IcoContainer icons={icons} />
+            <IconLinks links={links} />
          </Action>
        </div>
        <PopUpWarning
--- a/packages/strapi-helper-plugin/lib/src/components/TrashButton/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/TrashButton/index.js
@ -23,8 +23,8 @@ const TrashButton = styled.div`
    padding: 0 10px;
    font-size: 13px;
    &:before {
-      content: '\f1f8';
-      font-size: 14px;
+      content: '\f2ed';
+      font-size: 10px;
      font-family: FontAwesome;
      margin-right: 10px;
    }
--- a/packages/strapi-helper-plugin/lib/src/index.js
+++ b/packages/strapi-helper-plugin/lib/src/index.js
@ -74,7 +74,6 @@ export { default as PluginHeader } from './components/PluginHeader';
 export { default as PopUpWarning } from './components/PopUpWarning';
 export { default as SelectNav } from './components/SelectNav';
 export { default as SelectWrapper } from './components/SelectWrapper';
-export { default as TrashButton } from './components/TrashButton';
 export { default as ViewContainer } from './components/ViewContainer';

 // Contexts
--- a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js
@ -3,7 +3,10 @@ import { withRouter } from 'react-router';
 import PropTypes from 'prop-types';
 import { get, isEmpty, isNull, isObject, toLower, toString } from 'lodash';
 import moment from 'moment';
-import { IcoContainer, useGlobalContext } from 'strapi-helper-plugin';
+import { useGlobalContext } from 'strapi-helper-plugin';
+import { IconLinks } from '@buffetjs/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import useListView from '../../hooks/useListView';
 import DATE_FORMATS from '../../utils/DATE_FORMATS';
 import CustomInputCheckbox from '../CustomInputCheckbox';
@ -89,6 +92,24 @@ function Row({ goTo, isBulkable, row, headers }) {

  const { emitEvent } = useGlobalContext();

+  const links = [
+    {
+      icon: <FontAwesomeIcon icon="pencil-alt" />,
+      onClick: () => {
+        emitEvent('willEditEntryFromList');
+        goTo(row.id);
+      },
+    },
+    {
+      icon: <FontAwesomeIcon icon="trash-alt" />,
+      onClick: e => {
+        e.stopPropagation();
+        emitEvent('willDeleteEntryFromList');
+        onClickDelete(row.id);
+      },
+    },
+  ];
+
  return (
    <>
      {isBulkable && (
@ -117,26 +138,7 @@ function Row({ goTo, isBulkable, row, headers }) {
        );
      })}
      <ActionContainer>
-        <IcoContainer
-          style={{ minWidth: 'inherit', width: '100%', lineHeight: 48 }}
-          icons={[
-            {
-              icoType: 'pencil-alt',
-              onClick: () => {
-                emitEvent('willEditEntryFromList');
-                goTo(row.id);
-              },
-            },
-            {
-              id: row.id,
-              icoType: 'trash',
-              onClick: () => {
-                emitEvent('willDeleteEntryFromList');
-                onClickDelete(row.id);
-              },
-            },
-          ]}
-        />
+        <IconLinks links={links} />
      </ActionContainer>
    </>
  );
--- a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/styledComponents.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/styledComponents.js
@ -171,9 +171,9 @@ const DeletAllSpan = styled.span`
  &:after {
    position: relative;
    top: -1px;
-    content: '\f1f8';
+    content: '\f2ed';
    margin-left: 7px;
-    font-size: 13px;
+    font-size: 10px;
    font-family: FontAwesome;
    -webkit-font-smoothing: antialiased;
  }
--- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js
@ -119,7 +119,7 @@ const DynamicZone = ({ max, min, name }) => {
              <RoundCTA
                onClick={() => removeComponentFromDynamicZone(name, index)}
              >
-                <FontAwesomeIcon icon="trash" />
+                <FontAwesomeIcon icon="trash-alt" />
              </RoundCTA>
              <FieldComponent
                componentUid={componentUid}
--- a/packages/strapi-plugin-content-manager/admin/src/components/FieldComponent/ComponentIcon.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldComponent/ComponentIcon.js
@ -33,7 +33,6 @@ const ComponentIcon = styled.div`
      border: 1px solid white;
      background-color: #e6f0fb;

-      i,
      svg {
        margin: auto;
        color: #007eff;
--- a/packages/strapi-plugin-content-manager/admin/src/components/FieldComponent/ResetComponent.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/FieldComponent/ResetComponent.js
@ -31,8 +31,8 @@ const ResetComponent = styled.div`
    text-align: center;
    border-radius: 2px;
    &:after {
-      content: '\f1f8';
-      font-size: 14px;
+      content: '\f2ed';
+      font-size: 10px;
      font-family: FontAwesome;
    }
  }
--- a/packages/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/Banner.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/Banner.js
@ -65,7 +65,7 @@ const Banner = forwardRef(
                onClickRemove();
              }}
            >
-              <FontAwesomeIcon icon="trash" />
+              <FontAwesomeIcon icon="trash-alt" />
            </span>
            <span className="grab" ref={refs ? refs.dragRef : null}>
              <Grab />
--- a/packages/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/BannerWrapper.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/RepeatableComponent/BannerWrapper.js
@ -138,6 +138,9 @@ const BannerWrapper = styled.button`

    .grab {
      cursor: move;
+      svg {
+        vertical-align: initial;
+      }
    }
  }

--- a/packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/index.js
@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { FormattedMessage } from 'react-intl';
-import { AttributeIcon } from '@buffetjs/core';
+import { AttributeIcon, IconLinks } from '@buffetjs/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import pluginId from '../../pluginId';
 import useDataManager from '../../hooks/useDataManager';
@ -250,25 +250,25 @@ function ListRow({
        {isInDevelopmentMode && (
          <>
            {configurable ? (
-              <>
-                <button type="button" onClick={handleClick}>
-                  <FontAwesomeIcon className="link-icon" icon="pencil-alt" />
-                </button>
-                <button
-                  type="button"
-                  onClick={e => {
-                    e.stopPropagation();
-
-                    removeAttribute(
-                      editTarget,
-                      name,
-                      secondLoopComponentUid || firstLoopComponentUid || ''
-                    );
-                  }}
-                >
-                  <FontAwesomeIcon className="link-icon" icon="trash" />
-                </button>
-              </>
+              <IconLinks
+                links={[
+                  {
+                    icon: <FontAwesomeIcon icon="pencil-alt" />,
+                    onClick: () => handleClick(),
+                  },
+                  {
+                    icon: <FontAwesomeIcon icon="trash-alt" />,
+                    onClick: e => {
+                      e.stopPropagation();
+                      removeAttribute(
+                        editTarget,
+                        name,
+                        secondLoopComponentUid || firstLoopComponentUid || ''
+                      );
+                    },
+                  },
+                ]}
+              />
            ) : (
              <button type="button">
                <FontAwesomeIcon icon="lock" />
--- a/packages/strapi-plugin-upload/admin/src/components/Li/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/Li/index.js
@ -9,8 +9,10 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import moment from 'moment';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconLinks } from '@buffetjs/core';

-import { IcoContainer, PopUpWarning } from 'strapi-helper-plugin';
+import { PopUpWarning } from 'strapi-helper-plugin';
 import { HomePageContext } from '../../contexts/HomePage';
 import FileIcon from '../FileIcon';
 import { StyledLi, Truncate, Wrapper, Checked } from './components';
@ -87,18 +89,17 @@ class Li extends React.Component {
      return this.renderLiCopied();
    }

-    const icons = [
-      // {
-      //   icoType: item.private ? 'lock' : 'unlock',
-      //   onClick: () => {},
-      // },
+    const links = [
      {
-        icoType: 'eye',
+        icon: <FontAwesomeIcon icon="eye" />,
        onClick: this.handleClick,
      },
      {
-        icoType: 'trash',
-        onClick: () => this.setState({ isOpen: true }),
+        icon: <FontAwesomeIcon icon="trash-alt" />,
+        onClick: e => {
+          e.stopPropagation();
+          this.setState({ isOpen: true });
+        },
      },
    ];

@ -149,7 +150,7 @@ class Li extends React.Component {
                  return <Truncate key={key}>{item[value]}</Truncate>;
                }

-                return <IcoContainer key={key} icons={icons} />;
+                return <IconLinks key={key} links={links} />;
              }
            )}
          </Wrapper>
--- a/packages/strapi-plugin-users-permissions/admin/src/components/ListRow/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/ListRow/index.js
@ -8,8 +8,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { capitalize, get, includes } from 'lodash';
+import { IconLinks } from '@buffetjs/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

-import { IcoContainer, PopUpWarning } from 'strapi-helper-plugin';
+import { PopUpWarning } from 'strapi-helper-plugin';
 import en from '../../translations/en.json';
 import { HomePageContext } from '../../contexts/HomePage';
 import { Container, Flex, Row, Wrapper } from './Components';
@ -28,14 +30,15 @@ class ListRow extends React.Component {
  undeletableIDs = ['public', 'authenticated'];

  generateContent = () => {
-    let icons = [
+    let links = [
      {
-        icoType: 'pencil-alt',
+        icon: <FontAwesomeIcon icon="pencil-alt" />,
        onClick: this.handleClick,
      },
      {
-        icoType: 'trash',
-        onClick: () => {
+        icon: <FontAwesomeIcon icon="trash-alt" />,
+        onClick: e => {
+          e.stopPropagation();
          this.setState({ showModalDelete: true });
        },
      },
@ -44,11 +47,16 @@ class ListRow extends React.Component {
    switch (this.props.settingType) {
      case 'roles':
        if (includes(this.protectedRoleIDs, get(this.props.item, 'type', ''))) {
-          icons = [];
+          links = [];
        }

        if (includes(this.undeletableIDs, get(this.props.item, 'type', ''))) {
-          icons = [{ icoType: 'pencil-alt', onClick: this.handleClick }];
+          links = [
+            {
+              icon: <FontAwesomeIcon icon="pencil-alt" />,
+              onClick: this.handleClick,
+            },
+          ];
        }

        return (
@ -62,12 +70,12 @@ class ListRow extends React.Component {
              {this.props.item.nb_users > 1 ? 'users' : 'user'}
            </div>
            <div className="col-md-2">
-              <IcoContainer icons={icons} />
+              <IconLinks links={links} />
            </div>
          </Wrapper>
        );
      case 'providers':
-        icons.pop(); // Remove the icon-trash
+        links.pop(); // Remove the delete CTA

        return (
          <Wrapper className="row">
@ -94,13 +102,13 @@ class ListRow extends React.Component {
              )}
            </div>
            <div className="col-md-2">
-              <IcoContainer icons={icons} />
+              <IconLinks links={links} />
            </div>
          </Wrapper>
        );

      case 'email-templates':
-        icons.pop();
+        links.pop(); // Remove the delete CTA

        return (
          <Wrapper className="row">
@ -121,7 +129,7 @@ class ListRow extends React.Component {
              </Flex>
            </div>
            <div className="col-md-8">
-              <IcoContainer icons={icons} />
+              <IconLinks links={links} />
            </div>
          </Wrapper>
        );