NEW Link type icon

silverstripe · Jan 12, 2024 · a870da8 · a870da8
1 parent fe72946
commit a870da8
Show file tree

Hide file tree

Showing 16 changed files with 57 additions and 6 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/LinkField/LinkField.js b/client/src/components/LinkField/LinkField.js
@@ -164,6 +164,7 @@ const LinkField = ({
         description={data[linkID]?.description}
         versionState={data[linkID]?.versionState}
         typeTitle={type.title || ''}
+        typeIcon={type.icon || 'link'}
         onDelete={onDelete}
         onClick={() => { setEditingID(linkID); }}
         canDelete={data[linkID]?.canDelete ? true : false}

diff --git a/client/src/components/LinkPicker/LinkPicker.scss b/client/src/components/LinkPicker/LinkPicker.scss
@@ -44,6 +44,11 @@
   }
 }
 
+.link-picker__menu-icon {
+  vertical-align: middle;
+  padding-right: 0.7rem;
+}
+
 .link-picker__link {
   @extend %link-row;
 

diff --git a/client/src/components/LinkPicker/LinkPickerMenu.js b/client/src/components/LinkPicker/LinkPickerMenu.js
@@ -17,8 +17,11 @@ const LinkPickerMenu = ({ types, onSelect }) => {
         {i18n._t('LinkField.ADD_LINK', 'Add Link')}
       </DropdownToggle>
       <DropdownMenu>
-        {types.map(({key, title}) =>
-            <DropdownItem key={key} onClick={() => onSelect(key)}>{title}</DropdownItem>
+        {types.map(({key, title, icon}) =>
+            <DropdownItem key={key} onClick={() => onSelect(key)}>
+              <span className={`link-picker__menu-icon font-icon-${icon}`}></span>
+              {title}
+            </DropdownItem>
         )}
       </DropdownMenu>
   </Dropdown>

diff --git a/client/src/components/LinkPicker/LinkPickerTitle.js b/client/src/components/LinkPicker/LinkPickerTitle.js
@@ -35,6 +35,7 @@ const LinkPickerTitle = ({
   description,
   versionState,
   typeTitle,
+  typeIcon,
   onDelete,
   onClick,
   canDelete
@@ -51,7 +52,7 @@ const LinkPickerTitle = ({
     ? i18n._t('LinkField.DELETE', 'Delete')
     : i18n._t('LinkField.ARCHIVE', 'Archive');
   return <div className={className}>
-    <Button className="link-picker__button font-icon-link"  color="secondary" onClick={stopPropagation(onClick)}>
+    <Button className={`link-picker__button font-icon-${typeIcon}`}  color="secondary" onClick={stopPropagation(onClick)}>
       <div className="link-picker__link-detail">
       <div className="link-picker__title">
         <span className="link-picker__title-text">{title}</span>
@@ -75,6 +76,7 @@ LinkPickerTitle.propTypes = {
   description: PropTypes.string,
   versionState: PropTypes.string,
   typeTitle: PropTypes.string.isRequired,
+  typeIcon: PropTypes.string.isRequired,
   onDelete: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
   canDelete: PropTypes.bool.isRequired,

diff --git a/client/src/components/LinkPicker/tests/LinkPicker-test.js b/client/src/components/LinkPicker/tests/LinkPicker-test.js
@@ -5,7 +5,7 @@ import LinkPicker from '../LinkPicker';
 
 function makeProps(obj = {}) {
   return {
-    types: { phone: { key: 'phone', title: 'Phone' } },
+    types: { phone: { key: 'phone', title: 'Phone', icon: 'phone' } },
     onModalSuccess: () => {},
     onModalClosed: () => {},
     ...obj
@@ -18,6 +18,7 @@ test('LinkPickerMenu render() should display toggle if can create', () => {
   })}
   />);
   expect(container.querySelectorAll('.link-picker__menu-toggle')).toHaveLength(1);
+  expect(container.querySelectorAll('.link-picker__menu-icon.font-icon-phone')).toHaveLength(1);
   expect(container.querySelectorAll('.link-picker__cannot-create')).toHaveLength(0);
 });
 

diff --git a/client/src/components/LinkPicker/tests/LinkPickerTitle-test.js b/client/src/components/LinkPicker/tests/LinkPickerTitle-test.js
@@ -11,6 +11,7 @@ function makeProps(obj = {}) {
     description: 'My description',
     versionState: 'draft',
     typeTitle: 'Phone',
+    typeIcon: 'phone',
     onDelete: () => {},
     onClick: () => {},
     ...obj
@@ -23,6 +24,7 @@ test('LinkPickerTitle render() should display clear button if can delete', () =>
   })}
   />);
   expect(container.querySelectorAll('.link-picker__delete')).toHaveLength(1);
+  expect(container.querySelectorAll('.font-icon-phone')).toHaveLength(1);
 });
 
 test('LinkPickerTitle render() should not display clear button if cannot delete', () => {

diff --git a/client/src/types/LinkType.js b/client/src/types/LinkType.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 const LinkType = PropTypes.shape({
   key: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired,
 });
 
 export default LinkType;
diff --git a/src/Form/Traits/AllowedLinkClassesTrait.php b/src/Form/Traits/AllowedLinkClassesTrait.php
@@ -96,6 +96,7 @@ public function getTypesProps(): string
                 'title' => $type->getMenuTitle(),
                 'handlerName' => $type->LinkTypeHandlerName(),
                 'priority' => $class::config()->get('menu_priority'),
+                'icon' => $type->getLinkIcon(),
             ];
         }
         uasort($typesList, function ($a, $b) {

diff --git a/src/Models/EmailLink.php b/src/Models/EmailLink.php
@@ -23,6 +23,11 @@ class EmailLink extends Link
      */
     private static int $menu_priority = 30;
 
+    /**
+    * Set the default icon for the Email link type
+    */
+    private static $icon = 'p-mail';
+
     public function getCMSFields(): FieldList
     {
         $this->beforeUpdateCMSFields(function (FieldList $fields) {

diff --git a/src/Models/ExternalLink.php b/src/Models/ExternalLink.php
@@ -22,6 +22,11 @@ class ExternalLink extends Link
      */
     private static int $menu_priority = 20;
 
+    /**
+     * Set the default icon for the External link type
+     */
+    private static $icon = 'external-link';
+
     public function getCMSFields(): FieldList
     {
         $this->beforeUpdateCMSFields(function (FieldList $fields) {

diff --git a/src/Models/FileLink.php b/src/Models/FileLink.php
@@ -24,6 +24,11 @@ class FileLink extends Link
      */
     private static int $menu_priority = 10;
 
+    /**
+     * Set the default icon for the File link type
+     */
+    private static $icon = 'image';
+
     public function getCMSFields(): FieldList
     {
         $this->beforeUpdateCMSFields(function (FieldList $fields) {

diff --git a/src/Models/Link.php b/src/Models/Link.php
@@ -62,6 +62,11 @@ class Link extends DataObject
      */
     private static int $menu_priority = 100;
 
+    /**
+     * Set the default icon for the link type
+     */
+    private static $icon = 'link';
+
     public function getDescription(): string
     {
         return '';
@@ -470,4 +475,9 @@ public function getMenuTitle(): string
     {
         return $this->i18n_singular_name();
     }
+
+    public function getLinkIcon(): string
+    {
+        return static::config()->get('icon');
+    }
 }
diff --git a/src/Models/PhoneLink.php b/src/Models/PhoneLink.php
@@ -19,6 +19,11 @@ class PhoneLink extends Link
      * Set the priority of this link type in the CMS menu
      */
     private static int $menu_priority = 40;
+
+    /**
+     * Set the default icon for the Phone link type
+     */
+    private static $icon = 'block-phone';
 
     public function getCMSFields(): FieldList
     {

diff --git a/src/Models/SiteTreeLink.php b/src/Models/SiteTreeLink.php
@@ -35,6 +35,11 @@ class SiteTreeLink extends Link
      */
     private static int $menu_priority = 0;
 
+    /**
+     * Set the default icon for the SiteTree link type
+     */
+    private static $icon = 'page';
+
     public function getDescription(): string
     {
         $page = $this->Page();