TASK: Use font-awesome layer icons

Replaces custom SVG icons with font=awesome icons.
neos · Dec 11, 2023 · 9862564 · 9862564
1 parent 4864def
commit 9862564
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 48 deletions.
diff --git a/Resources/Public/Icons/syncronize.svg b/Resources/Public/Icons/syncronize.svg
diff --git a/Resources/Public/Icons/syncronize_alert.svg b/Resources/Public/Icons/syncronize_alert.svg
diff --git a/Resources/Public/Icons/syncronize_check.svg b/Resources/Public/Icons/syncronize_check.svg
diff --git a/packages/neos-ui/src/Containers/Modals/SyncWorkspaceDialog/index.js b/packages/neos-ui/src/Containers/Modals/SyncWorkspaceDialog/index.js
@@ -5,6 +5,7 @@ import {connect} from 'react-redux';
 import Button from '@neos-project/react-ui-components/src/Button/';
 import Dialog from '@neos-project/react-ui-components/src/Dialog/';
 import Icon from '@neos-project/react-ui-components/src/Icon/';
+import WorkspaceSyncIcon from '../../PrimaryToolbar/WorkspaceSync/WorkspaceSyncIcon';
 
 const {personalWorkspaceNameSelector, personalWorkspaceRebaseStatusSelector} = selectors.CR.Workspaces;
 
@@ -55,9 +56,9 @@ export default class SyncWorkspaceDialog extends PureComponent {
             'syncPersonalWorkSpace',
             'Synchronize personal workspace', {}, 'Neos.Neos.Ui', 'Main')
         return (
-            <div>
-                <Icon icon="resource://Neos.Neos.Ui/Icons/syncronize_alert.svg" className={style.buttonIcon} size="2x"/>
-                <span className={style.modalTitle}>
+            <div className={style.modalTitle}>
+                <WorkspaceSyncIcon personalWorkspaceStatus={WorkspaceStatus.OUTDATED_CONFLICT} onDarkBackground={true}/>
+                <span>
                     {synchronizeWorkspaceLabel}
                 </span>
             </div>
@@ -95,7 +96,7 @@ export default class SyncWorkspaceDialog extends PureComponent {
                 hoverStyle="warn"
                 onClick={this.handleConfirm}
             >
-                <Icon icon="resource://Neos.Neos.Ui/Icons/syncronize.svg" className={style.buttonIcon} size="2x"/>
+                <Icon icon="sync" className={style.buttonIcon}/>
                 <span className={style.confirmText}>
                     {confirmationLabel}
                 </span>

diff --git a/packages/neos-ui/src/Containers/Modals/SyncWorkspaceDialog/style.module.css b/packages/neos-ui/src/Containers/Modals/SyncWorkspaceDialog/style.module.css
@@ -21,6 +21,16 @@
     height: auto;
 }
 
-.confirmText{
+.confirmText {
     vertical-align: sub;
 }
+
+.modalTitle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.modalTitle span:first-child {
+    scale: .8;
+}
diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/WorkspaceSync/WorkspaceSyncIcon.js b/packages/neos-ui/src/Containers/PrimaryToolbar/WorkspaceSync/WorkspaceSyncIcon.js
@@ -0,0 +1,35 @@
+/* eslint-disable complexity */
+import React from 'react';
+import Icon from '@neos-project/react-ui-components/src/Icon/';
+import style from './style.module.css';
+import mergeClassNames from 'classnames';
+import {WorkspaceStatus} from '@neos-project/neos-ts-interfaces';
+
+const WorkspaceSyncIcon = ({personalWorkspaceStatus, onDarkBackground}) => {
+    const iconBadgeClassNames = mergeClassNames({
+        [style.badgeIconBackground]: typeof onDarkBackground === 'undefined' || onDarkBackground === false,
+        [style.badgeIconOnDarkBackground]: onDarkBackground === true,
+        'fa-layers-counter': true,
+        'fa-layers-bottom-right': true,
+        'fa-2x': true
+    });
+    const iconLayerClassNames = mergeClassNames({
+        [style.iconLayer]: true,
+        'fa-layers': true,
+        'fa-fw': true
+    });
+    const iconBadge = personalWorkspaceStatus === WorkspaceStatus.OUTDATED_CONFLICT ? (
+        <span className={iconBadgeClassNames}>
+            <Icon icon="exclamation"/>
+        </span>
+    ) : null
+
+    return (
+        <span className={iconLayerClassNames}>
+            <Icon icon="sync" size="1x"/>
+            {iconBadge}
+        </span>
+    )
+}
+
+export default WorkspaceSyncIcon;
diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/WorkspaceSync/index.js b/packages/neos-ui/src/Containers/PrimaryToolbar/WorkspaceSync/index.js
@@ -3,16 +3,16 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 
-import Icon from '@neos-project/react-ui-components/src/Icon/';
-import Button from '@neos-project/react-ui-components/src/Button/';
-
 import {actions, selectors} from '@neos-project/neos-ui-redux-store';
+const {personalWorkspaceRebaseStatusSelector} = selectors.CR.Workspaces;
 import {neos} from '@neos-project/neos-ui-decorators';
+import {WorkspaceStatus} from '@neos-project/neos-ts-interfaces';
 
-const {personalWorkspaceRebaseStatusSelector} = selectors.CR.Workspaces;
+import Icon from '@neos-project/react-ui-components/src/Icon/';
+import Button from '@neos-project/react-ui-components/src/Button/';
+import WorkspaceSyncIcon from './WorkspaceSyncIcon';
 
 import style from './style.module.css';
-import {WorkspaceStatus} from '@neos-project/neos-ts-interfaces';
 
 @connect(state => ({
     isOpen: state?.ui?.SyncWorkspaceModal?.isOpen,
@@ -48,18 +48,11 @@ export default class WorkspaceSync extends PureComponent {
             isDiscarding,
             i18nRegistry
         } = this.props;
+
         if (personalWorkspaceStatus === WorkspaceStatus.UP_TO_DATE) {
             return (null);
         }
-        let icon = 'resource://Neos.Neos.Ui/Icons/syncronize_check.svg';
-        switch (personalWorkspaceStatus) {
-            case WorkspaceStatus.OUTDATED:
-                icon = 'resource://Neos.Neos.Ui/Icons/syncronize.svg';
-                break;
-            case WorkspaceStatus.OUTDATED_CONFLICT:
-                icon = 'resource://Neos.Neos.Ui/Icons/syncronize_alert.svg';
-                break;
-        }
+
         const buttonLabel = i18nRegistry.translate(
             'syncPersonalWorkSpace',
             'Synchronize personal workspace', {}, 'Neos.Neos.Ui', 'Main');
@@ -69,15 +62,15 @@ export default class WorkspaceSync extends PureComponent {
                     id="neos-workspace-rebase"
                     className={style.rebaseButton}
                     onClick={openModal}
-                    disabled={isSaving || isOpen || isPublishing || isDiscarding }
+                    disabled={isSaving || isOpen || isPublishing || isDiscarding}
                     style={personalWorkspaceStatus === WorkspaceStatus.OUTDATED ? 'warn' : 'error'}
                     hoverStyle={personalWorkspaceStatus === WorkspaceStatus.OUTDATED ? 'warn' : 'error'}
                     label={buttonLabel}
                 >
                     {(isSaving || isPublishing || isDiscarding) ? (
-                        <Icon icon="spinner" spin={true} />
+                        <Icon icon="spinner" spin={true}/>
                     ) : (
-                        <Icon icon={icon} className={style.iconRebase} size="1x"/>
+                        <WorkspaceSyncIcon personalWorkspaceStatus={personalWorkspaceStatus}/>
                     )}
                 </Button>
             </div>

diff --git a/packages/neos-ui/src/Containers/PrimaryToolbar/WorkspaceSync/style.module.css b/packages/neos-ui/src/Containers/PrimaryToolbar/WorkspaceSync/style.module.css
@@ -4,21 +4,25 @@
     vertical-align: top;
     height: var(--spacing-GoldenUnit);
 }
-.iconRebase {
-    height: 100%;
-    width: auto;
+
+.rebaseButton {
+    padding: 0 calc(var(--spacing-Full) - var(--spacing-Quarter));
+    border-left: 1px solid black;
 }
 
-.iconRebase svg {
-    height: 1.5rem;
-    width: auto;
+.iconLayer {
+    width: 1.5em;
+    height: 1.5em;
 }
 
-.iconRebase span {
-    display: flex;
-    align-items: center;
+.badgeIconBackground {
+    background: var(--colors-ContrastDarkest);
 }
-.rebaseButton {
-    padding: var(--spacing-Quarter);
-    border-left: 1px solid black;
+
+.badgeIconOnDarkBackground {
+    background: var(--colors-ContrastBrightest);
+}
+
+.badgeIconOnDarkBackground svg {
+    color: var(--colors-ContrastDarkest);
 }