IBX-8684: Updated spinner for UDW (#1315)

ibexa · Aug 23, 2024 · 34be604 · 34be604
1 parent 75c2ed4
commit 34be604
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 11 deletions.
diff --git a/src/bundle/Resources/public/scss/ui/modules/_common.scss b/src/bundle/Resources/public/scss/ui/modules/_common.scss
@@ -4,3 +4,4 @@
 @import 'common/simple.dropdown';
 @import 'common/user.name';
 @import 'common/taggify';
+@import 'common/spinner';
diff --git a/src/bundle/Resources/public/scss/ui/modules/common/_spinner.scss b/src/bundle/Resources/public/scss/ui/modules/common/_spinner.scss
@@ -0,0 +1,11 @@
+.c-spinner {
+    @include spinner(calculateRem(26px), calculateRem(3px), $ibexa-color-primary);
+
+    &--small {
+        @include spinner(calculateRem(16px), calculateRem(2px), $ibexa-color-primary);
+    }
+
+    &--large {
+        @include spinner(calculateRem(86px), calculateRem(6px), $ibexa-color-primary);
+    }
+}
diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content.meta.preview.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content.meta.preview.scss
@@ -94,7 +94,7 @@
         }
     }
 
-    &__loading-spinner {
+    &__loading-spinner-wrapper {
         display: flex;
         justify-content: center;
         align-items: center;

diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_finder.branch.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_finder.branch.scss
@@ -65,7 +65,7 @@
         right: 0;
     }
 
-    &__loading-spinner {
+    &__loading-spinner-wrapper {
         display: flex;
         align-items: center;
         justify-content: center;

diff --git a/src/bundle/ui-dev/src/modules/common/spinner/spinner.js b/src/bundle/ui-dev/src/modules/common/spinner/spinner.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { createCssClassNames } from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/common/helpers/css.class.names';
+
+export const SIZES = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    SIZES: 'large',
+};
+
+const Spinner = ({ size }) => {
+    const className = createCssClassNames({
+        'c-spinner': true,
+        [`c-spinner--${size}`]: true,
+    });
+
+    return <div className={className} />;
+};
+
+Spinner.propTypes = {
+    size: PropTypes.oneOf(Object.values(SIZES)),
+};
+
+Spinner.defaultProps = {
+    size: SIZES.MEDIUM,
+};
+
+export default Spinner;
diff --git a/...bundle/ui-dev/src/modules/universal-discovery/components/bookmarks-list/bookmarks.list.js b/...bundle/ui-dev/src/modules/universal-discovery/components/bookmarks-list/bookmarks.list.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { parse as parseTooltip } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper';
 
 import Icon from '../../../common/icon/icon';
+import Spinner from '../../../common/spinner/spinner';
 
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 import { findMarkedLocation } from '../../helpers/locations.helper';
@@ -53,7 +54,7 @@ const BookmarksList = ({ setBookmarkedLocationMarked, itemsPerPage }) => {
 
         return (
             <div className="c-bookmarks-list__spinner-wrapper">
-                <Icon name="spinner" extraClasses="m-sub-items__spinner ibexa-icon--medium ibexa-spin" />
+                <Spinner />
             </div>
         );
     };

diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/finder/finder.branch.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/finder/finder.branch.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import FinderLeaf from './finder.leaf';
 import Icon from '../../../common/icon/icon';
+import Spinner from '../../../common/spinner/spinner';
 import { getIconPath } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/icon.helper.js';
 
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
@@ -128,8 +129,8 @@ const FinderBranch = ({ locationData, itemsPerPage }) => {
         }
 
         return (
-            <div className="c-finder-branch__loading-spinner">
-                <Icon name="spinner" extraClasses="ibexa-icon--medium ibexa-spin" />
+            <div className="c-finder-branch__loading-spinner-wrapper">
+                <Spinner />
             </div>
         );
     };

diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.js
@@ -8,6 +8,7 @@ export const SelectedSubtreeContext = createContext();
 export const SelectedSubtreeBreadcrumbsContext = createContext();
 
 import Icon from '../../../common/icon/icon';
+import Spinner from '../../../common/spinner/spinner';
 import ContentTable from '../content-table/content.table';
 import Filters from '../filters/filters';
 import SearchTags from './search.tags';
@@ -197,7 +198,7 @@ const Search = ({ itemsPerPage }) => {
                                     </div>
                                     <div className="c-search__content">
                                         <div className={spinnerWrapperClassName}>
-                                            <Icon name="spinner" extraClasses="ibexa-icon--medium ibexa-spin" />
+                                            <Spinner />
                                         </div>
                                         {renderSearchResults()}
                                     </div>

diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/content.meta.preview.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/content.meta.preview.module.js
@@ -3,6 +3,7 @@ import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import Icon from '../common/icon/icon';
 import Thumbnail from '../common/thumbnail/thumbnail';
 import { createCssClassNames } from '../common/helpers/css.class.names';
+import Spinner from '../common/spinner/spinner';
 import { findMarkedLocation } from './helpers/locations.helper';
 import { addBookmark, removeBookmark } from './services/universal.discovery.service';
 import ContentEditButton from './components/content-edit-button/content.edit.button';
@@ -116,14 +117,14 @@ const ContentMetaPreview = () => {
         );
     };
     const renderMetaPreviewLoadingSpinner = () => {
-        const spinnerClassName = createCssClassNames({
-            'c-content-meta-preview__loading-spinner': true,
-            'c-content-meta-preview__loading-spinner--hidden': isLocationDataLoaded,
+        const spinnerWrapperClassName = createCssClassNames({
+            'c-content-meta-preview__loading-spinner-wrapper': true,
+            'c-content-meta-preview__loading-spinner-wrapper--hidden': isLocationDataLoaded,
         });
 
         return (
-            <div className={spinnerClassName}>
-                <Icon name="spinner" extraClasses="ibexa-icon--medium ibexa-spin" />
+            <div className={spinnerWrapperClassName}>
+                <Spinner />
             </div>
         );
     };