From 7b709ee794622c55447f75bfa5ed0ede01e9fcee Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 27 Sep 2022 17:12:33 +0530 Subject: [PATCH 1/3] PRESS2-233 add generic step loading state component --- src/Brands/bluehost/step-loader-logo.svg | 87 +++++++++++++++++++ .../components/ImageUploader/index.js | 4 +- src/OnboardingSPA/components/Loader/index.js | 15 ---- .../components/Loader/stylesheet.scss | 33 ------- .../components/Loaders/ImageUpload/index.js | 9 ++ .../Loaders/ImageUpload/stylesheet.scss | 35 ++++++++ .../components/Loaders/Step/index.js | 17 ++++ .../components/Loaders/Step/stylesheet.scss | 8 ++ src/OnboardingSPA/components/Loaders/index.js | 2 + .../components/Loaders/stylesheet.scss | 2 + src/OnboardingSPA/styles/_branding.scss | 1 + src/OnboardingSPA/styles/app.scss | 2 +- 12 files changed, 164 insertions(+), 51 deletions(-) create mode 100644 src/Brands/bluehost/step-loader-logo.svg delete mode 100644 src/OnboardingSPA/components/Loader/index.js delete mode 100644 src/OnboardingSPA/components/Loader/stylesheet.scss create mode 100644 src/OnboardingSPA/components/Loaders/ImageUpload/index.js create mode 100644 src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss create mode 100644 src/OnboardingSPA/components/Loaders/Step/index.js create mode 100644 src/OnboardingSPA/components/Loaders/Step/stylesheet.scss create mode 100644 src/OnboardingSPA/components/Loaders/index.js create mode 100644 src/OnboardingSPA/components/Loaders/stylesheet.scss diff --git a/src/Brands/bluehost/step-loader-logo.svg b/src/Brands/bluehost/step-loader-logo.svg new file mode 100644 index 000000000..1043c4943 --- /dev/null +++ b/src/Brands/bluehost/step-loader-logo.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/OnboardingSPA/components/ImageUploader/index.js b/src/OnboardingSPA/components/ImageUploader/index.js index cef4335d0..c629665e2 100644 --- a/src/OnboardingSPA/components/ImageUploader/index.js +++ b/src/OnboardingSPA/components/ImageUploader/index.js @@ -1,7 +1,7 @@ import { __ } from '@wordpress/i18n'; import { useRef, useState } from '@wordpress/element'; -import Loader from '../Loader'; +import { ImageUploadLoader } from '../Loaders'; import { uploadImage } from '../../utils/api/uploader'; /* @@ -51,7 +51,7 @@ const ImageUploader = ({ icon, iconSetter }) => { function loader(){ return (
- +
); } function getImageUploadWindow() { diff --git a/src/OnboardingSPA/components/Loader/index.js b/src/OnboardingSPA/components/Loader/index.js deleted file mode 100644 index be7572bd4..000000000 --- a/src/OnboardingSPA/components/Loader/index.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Infinite Loader. - * - * @returns - */ -const Loader = () => { - - return ( -
-
-
- ); -}; - -export default Loader; diff --git a/src/OnboardingSPA/components/Loader/stylesheet.scss b/src/OnboardingSPA/components/Loader/stylesheet.scss deleted file mode 100644 index 8756d804e..000000000 --- a/src/OnboardingSPA/components/Loader/stylesheet.scss +++ /dev/null @@ -1,33 +0,0 @@ -.loading-box { - width: 200px; - height: 25px; - position: relative; - border-radius: 50px; - overflow: hidden; - border: 2px solid #ededed; - - &__loader { - width: 100%; - height: 100%; - position: absolute; - border-radius: 50px; - background: linear-gradient(45deg, #b6b5ff, #ff9797); - left: 0%; - } - - &__loader { - left: -100%; - animation: load 3s linear infinite; - } -} - -// Loading Animation -@keyframes load { - 0% { - left: -100%; - } - - 100% { - left: 100%; - } -} \ No newline at end of file diff --git a/src/OnboardingSPA/components/Loaders/ImageUpload/index.js b/src/OnboardingSPA/components/Loaders/ImageUpload/index.js new file mode 100644 index 000000000..6fde645e0 --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/ImageUpload/index.js @@ -0,0 +1,9 @@ +const ImageUploadLoader = () => { + return ( +
+
+
+ ); +}; + +export default ImageUploadLoader; diff --git a/src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss b/src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss new file mode 100644 index 000000000..4dec6c459 --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/ImageUpload/stylesheet.scss @@ -0,0 +1,35 @@ +.image-upload-loader { + + &--loading-box { + width: 200px; + height: 25px; + position: relative; + border-radius: 50px; + overflow: hidden; + border: 2px solid #ededed; + + &__loader { + width: 100%; + height: 100%; + position: absolute; + border-radius: 50px; + background: linear-gradient(45deg, #b6b5ff, #ff9797); + left: -100%; + animation: load 3s linear infinite; + } + } + + // Loading Animation + @keyframes load { + + 0% { + left: -100%; + } + + 100% { + left: 100%; + } + } + +} + diff --git a/src/OnboardingSPA/components/Loaders/Step/index.js b/src/OnboardingSPA/components/Loaders/Step/index.js new file mode 100644 index 000000000..ea84b1950 --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/Step/index.js @@ -0,0 +1,17 @@ +import CommonLayout from '../../Layouts/Common'; +import HeadingWithSubHeading from '../../HeadingWithSubHeading'; +import NeedHelpTag from '../../NeedHelpTag'; + +const StepLoader = ( { title, subtitle } ) => { + return ( + + +
+
+
+ + + ); +}; + +export default StepLoader; diff --git a/src/OnboardingSPA/components/Loaders/Step/stylesheet.scss b/src/OnboardingSPA/components/Loaders/Step/stylesheet.scss new file mode 100644 index 000000000..252a837bc --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/Step/stylesheet.scss @@ -0,0 +1,8 @@ +.step-loader { + + &__logo { + width: 256px; + height: 256px; + background-image: var(--nfd-onboarding-step-loader-icon); + } +} diff --git a/src/OnboardingSPA/components/Loaders/index.js b/src/OnboardingSPA/components/Loaders/index.js new file mode 100644 index 000000000..dc19345bd --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/index.js @@ -0,0 +1,2 @@ +export { default as StepLoader } from "./Step"; +export { default as ImageUploadLoader } from "./ImageUpload"; diff --git a/src/OnboardingSPA/components/Loaders/stylesheet.scss b/src/OnboardingSPA/components/Loaders/stylesheet.scss new file mode 100644 index 000000000..07308445b --- /dev/null +++ b/src/OnboardingSPA/components/Loaders/stylesheet.scss @@ -0,0 +1,2 @@ +@import "./ImageUpload/stylesheet"; +@import "./Step/stylesheet"; diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index e226e14d7..884b34389 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -25,6 +25,7 @@ body { --nfd-onboarding-border: 219, 219, 219; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light); + --nfd-onboarding-step-loader-icon: url("../../Brands/bluehost/step-loader-logo.svg"); } &.nfd-brand-hostgator { --wp-admin-theme-color: #2e93ee; diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 78bcc8e67..e422a3f10 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -10,7 +10,7 @@ @import "../components/Content/stylesheet"; @import "../components/Layouts/stylesheet"; @import "../components/SkipButton/stylesheet"; -@import "../components/Loader/stylesheet"; +@import "../components/Loaders/stylesheet.scss"; @import "../components/MiniPreview/stylesheet"; @import "../components/Tooltip/stylesheet"; @import "../components/ImageUploader/stylesheet"; From cc6e2d83cf993c1f846f79b2286d671e2b4c173b Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Tue, 27 Sep 2022 18:04:48 +0530 Subject: [PATCH 2/3] Minify HG and loader logos --- src/Brands/bluehost/step-loader-logo.svg | 88 +----------------------- src/Brands/hostgator/logo.svg | 32 +-------- src/OnboardingSPA/styles/_branding.scss | 2 +- 3 files changed, 3 insertions(+), 119 deletions(-) diff --git a/src/Brands/bluehost/step-loader-logo.svg b/src/Brands/bluehost/step-loader-logo.svg index 1043c4943..86d672953 100644 --- a/src/Brands/bluehost/step-loader-logo.svg +++ b/src/Brands/bluehost/step-loader-logo.svg @@ -1,87 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/Brands/hostgator/logo.svg b/src/Brands/hostgator/logo.svg index 9fa16f156..1c80087f9 100644 --- a/src/Brands/hostgator/logo.svg +++ b/src/Brands/hostgator/logo.svg @@ -1,31 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 884b34389..27196c84c 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -25,7 +25,7 @@ body { --nfd-onboarding-border: 219, 219, 219; --nfd-onboarding-drawer-icon-fill: var(--nfd-onboarding-tertiary); --nfd-onboarding-drawer-icon-active-fill: var(--nfd-onboarding-light); - --nfd-onboarding-step-loader-icon: url("../../Brands/bluehost/step-loader-logo.svg"); + --nfd-onboarding-step-loader-icon: url("../../Brands/bluehost/step-loader-logo.svg"); } &.nfd-brand-hostgator { --wp-admin-theme-color: #2e93ee; From ac0bc26d214e00dc0efbdbb7e835652c29a0e976 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Fri, 30 Sep 2022 12:55:28 +0530 Subject: [PATCH 3/3] remove .scss --- src/OnboardingSPA/styles/app.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index e422a3f10..9c8c4f5f4 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -10,7 +10,7 @@ @import "../components/Content/stylesheet"; @import "../components/Layouts/stylesheet"; @import "../components/SkipButton/stylesheet"; -@import "../components/Loaders/stylesheet.scss"; +@import "../components/Loaders/stylesheet"; @import "../components/MiniPreview/stylesheet"; @import "../components/Tooltip/stylesheet"; @import "../components/ImageUploader/stylesheet";