fixed errors for components without workflow, improved css, small clean

eea · Dec 2, 2020 · cc31acb · cc31acb
1 parent 40dd7de
commit cc31acb
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 98 deletions.
diff --git a/src/ProgressWorkflow.jsx b/src/ProgressWorkflow.jsx
@@ -5,10 +5,7 @@ import { getWorkflowProgress } from './actions';
 import './less/editor.less';
 
 /**
- * @summary The React component that allows the footnotes block view to be
- * edited using a form in a sidebar portal.
- * @param {object} props Contains the props received by any Edit component of a
- * registered Volto block: `selected`, `block`, `data`, `onChangeBlock` etc.
+ * @summary The React component that shows progress tracking of selected content.
  */
 const ProgressWorkflow = (props) => {
   const { content, pathname } = props;
@@ -17,13 +14,12 @@ const ProgressWorkflow = (props) => {
 
   const [visible, setVisible] = useState(false);
   const [workflowProgressSteps, setWorkflowProgressSteps] = useState([]);
-  const [currentState, setCurrentState] = useState({});
+  const [currentState, setCurrentState] = useState(null);
   const workflowProgress = useSelector((state) => state?.workflowProgress);
 
   const setVisibleSide = () => {
     setVisible(!visible);
   };
-
   const findCurrentState = (steps, done) => {
     const arrayContainingCurrentState = steps.find(
       (itemElements) => itemElements[1] === done,
@@ -42,20 +38,23 @@ const ProgressWorkflow = (props) => {
   };
 
   useEffect(() => {
-    if (workflowProgress.result) {
+    if (
+      workflowProgress.result &&
+      Array.isArray(workflowProgress.result.steps)
+    ) {
       findCurrentState(
         workflowProgress.result.steps,
         workflowProgress.result.done,
       );
       setWorkflowProgressSteps(workflowProgress.result.steps);
+    } else {
+      setCurrentState(null);
     }
   }, [workflowProgress]);
 
-  // Similar to componentDidMount and componentDidUpdate:
-  // used only once at mount
   useEffect(() => {
     dispatch(getWorkflowProgress(pathname));
-  }, [dispatch, pathname, props]); // to be used only once at mount
+  }, [dispatch, pathname, props]);
 
   const itemTracker = (tracker) => (
     <li
@@ -79,23 +78,18 @@ const ProgressWorkflow = (props) => {
   };
 
   return (
-    <>
-      <Portal
-        node={__CLIENT__ && document.querySelector('#toolbar .toolbar-actions')}
-      >
+    <Portal
+      node={__CLIENT__ && document.querySelector('#toolbar .toolbar-actions')}
+    >
+      {currentState ? (
         <>
-          <div
-            className={`review-state-text ${
-              currentStateClass[currentStateKey]
-                ? currentStateClass[currentStateKey]
-                : ''
-            }`}
-          >
-            {currentState.title}
-          </div>
           <div>
             <button
-              className="circle-right-btn"
+              className={`circle-right-btn ${
+                currentStateClass[currentStateKey]
+                  ? `review-state-${currentStateKey}`
+                  : ''
+              }`}
               id="toolbar-cut-blocks"
               onClick={setVisibleSide}
             >
@@ -111,9 +105,18 @@ const ProgressWorkflow = (props) => {
               </div>
             ) : null}
           </div>
+          <div
+            className={`review-state-text ${
+              currentStateClass[currentStateKey]
+                ? `review-state-${currentStateKey}`
+                : ''
+            }`}
+          >
+            {currentState.title}
+          </div>
         </>
-      </Portal>
-    </>
+      ) : null}
+    </Portal>
   );
 };
 export default ProgressWorkflow;
diff --git a/src/index.js b/src/index.js
@@ -14,9 +14,6 @@ const applyConfig = (config) => {
       {
         match: '',
         component: ProgressWorkflow,
-        props: {
-          'google-tag': '123456',
-        },
       },
     ],
   };

diff --git a/src/less/editor.less b/src/less/editor.less
@@ -1,16 +1,21 @@
-
+@default-state-color: rgb(246, 168, 8);
+@published-state-color: rgb(0, 123, 193);
+@private-state-color: rgb(237, 64, 51);
+@border-color: rgba(0, 0, 0, 0.3);
+@progress-indicator-color: #607D8B;
+@progress-green: darkseagreen;
 
 .circle-right-btn {
 	height: 45px;
 	width: 45px;
 	border-radius: 50%;
-	border: 2px solid #007eb1 !important;
+	border: 2px solid @default-state-color !important;
 	font-size:16px;
 	font-weight: 600;
-  color: #007eb1 !important;
+  color: @default-state-color !important;
   text-align: center !important;
   text-decoration: none;
-  display: inline-block !important;
+	display: inline-block !important;
   margin: 4px 2px;
   cursor: pointer !important;
 }
@@ -35,10 +40,10 @@
   overflow: hidden;
   padding: 2rem;
   color: #fff;
-  background: #607D8B;
-  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+  background:@progress-indicator-color;
+  -moz-box-shadow: 0 0 15px @border-color;
+  -webkit-box-shadow: 0 0 15px @border-color;
+  box-shadow: 0 0 15px @border-color;
 }
 
 .progress {
@@ -49,82 +54,85 @@
 }
 
 .review-state-text {
-	color: rgb(0, 123, 193);
+	color: @published-state-color !important;
 	text-align: center;
 	font-weight: 500;
 }
 .review-state-text {
-	color: rgb(246, 168, 8);
+	color: @default-state-color !important;
+	border-color: @default-state-color !important;
 }
-.review-state-text.published {
-	color: rgb(0, 123, 193);
+.review-state-published {
+	color: @published-state-color !important;
+	border-color: @published-state-color !important;
 }
-.review-state-text.private {
-	color:rgb(237, 64, 51);
+.review-state-private {
+	color:@private-state-color !important;
+	border-color:@private-state-color !important;
 }
 
 .progress__item {
-  position: relative;
-  min-height: 75px;
-  counter-increment: list;
-  padding-left: 0.5rem;
-  opacity: 0.4;
-}
-.progress__item:before {
-  content: "";
-  position: absolute;
-  left: -1.5rem;
-  top: 28px;
-  height: 60%;
-  width: 1px;
-  border-left: 1px solid #607D8B;
-}
-.progress__item:after {
-  content: counter(list);
-  position: absolute;
-  top: 0;
-  left: -2.5rem;
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  background: #607D8B;
-  color: white;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 2rem;
-  text-align: center;
-  border: 1px solid #607D8B;
-}
-.progress__item:last-child:before {
-  border: none;
-}
-.progress__item.progress__item--completed:before {
-  border-color: green;
+	position: relative;
+	min-height: 75px;
+	counter-increment: list;
+	padding-left: 0.5rem;
+	opacity: 0.4;
+	&:before {
+		content: "";
+		position: absolute;
+		left: -1.6rem;
+		top: 26px;
+		height: calc(100% - 26px);
+		width: 1px;
+		border-left: 1px solid @progress-indicator-color;
+	}
+	&:after {
+		content: counter(list);
+		position: absolute;
+		top: 0;
+		left: -2.5rem;
+		width: 26px;
+		height: 26px;
+		border-radius: 50%;
+		background: @progress-indicator-color;
+		color: white;
+		font-weight: 400;
+		font-size: 13px;
+		line-height: 2rem;
+		text-align: center;
+		border: 1px solid @progress-indicator-color;
+	}
+	&:last-child {
+		&:before {
+			border: none;
+		}
+	}
 }
 .progress__item.progress__item--completed {
-  opacity: 1;
-  color: green;
-}
-.progress__item.progress__item--completed:after {
-	content: "\2713";
-	font-weight: 400;
-	background: green;
-	color: white;
+	&:before {
+		border-color: @progress-green;
+	}
+	opacity: 1;
+	color: @progress-green;
+	&:after {
+		content: "\2713";
+		font-weight: 400;
+		background: @progress-green;
+		color: white;
+	}
 }
 .progress__item.progress__item--active {
-  opacity: 1;
-}
-.progress__item.progress__item--active:after {
-  background: #607D8B;
-  color: white;
+	opacity: 1;
+	&:after {
+		background: @progress-indicator-color;
+		color: white;
+	}
 }
-
 .progress__title {
-  padding: 0.4rem 0 0.5rem;
-  margin: 0;
-  font-size: 1rem;
+	padding: 0.4rem 0 0.5rem;
+	margin: 0;
+	font-size: 1rem;
 }
-
 .progress__info {
-  font-size: 13px;
+	font-size: 13px;
 }