Implement emphasize-on-relevant for sections

kbss-cvut · Apr 20, 2021 · 0834cf3 · 0834cf3
1 parent 8c95d61
commit 0834cf3
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 9 deletions.
diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -113,8 +113,9 @@ export default class Question extends React.Component {
       const label = JsonLdUtils.getLocalized(question[JsonLdUtils.RDFS_LABEL], this.context.options.intl);
 
       const headerClassName = classNames(
-        FormUtils.isEmphasised(question) ? Question.getEmphasizedClass(question) : 'bg-info',
-        collapsible ? 'cursor-pointer' : ''
+        FormUtils.isEmphasised(question) ? Question.getEmphasizedClass(question) : 'section-background',
+        collapsible ? 'cursor-pointer' : '',
+        Question.getEmphasizedOnRelevantClass(question)
       );
 
       if (FormUtils.isAnswerable(question)) {
@@ -160,8 +161,9 @@ export default class Question extends React.Component {
     const collapsible = this.props.collapsible;
     const categoryClass = Question._getQuestionCategoryClass(question);
     let headerClassNames = [
-      FormUtils.isEmphasised(question) ? Question.getEmphasizedClass(question) : 'bg-info',
-      this.state.expanded ? 'section-expanded' : 'section-collapsed'
+      FormUtils.isEmphasised(question) ? Question.getEmphasizedClass(question) : 'section-background',
+      this.state.expanded ? 'section-expanded' : 'section-collapsed',
+      Question.getEmphasizedOnRelevantClass(question)
     ];
 
     if (collapsible && this._getFirstAnswerValue()) {
@@ -197,7 +199,11 @@ export default class Question extends React.Component {
         FormUtils.isTextarea(question, FormUtils.resolveValue(answers[i])) ||
         FormUtils.isSparqlInput(question) ||
         FormUtils.isTurtleInput(question);
-      cls = classNames(Question._getAnswerClass(question, isTextarea), Question._getQuestionCategoryClass(question));
+      cls = classNames(
+        Question._getAnswerClass(question, isTextarea),
+        Question._getQuestionCategoryClass(question),
+        Question.getEmphasizedOnRelevantClass(question)
+      );
       row.push(
         <div key={'row-item-' + i} className={cls} id={question['@id']}>
           <div className="row">
@@ -256,10 +262,6 @@ export default class Question extends React.Component {
       ? 'col-6'
       : 'col-' + Constants.COLUMN_COUNT / Constants.GENERATED_ROW_SIZE;
 
-    if (JsonLdUtils.hasValue(question, Constants.LAYOUT_CLASS, Constants.LAYOUT.EMPHASISE_ON_RELEVANT)) {
-      return [columns, 'emphasise-on-relevant'];
-    }
-
     return columns;
   }
 
@@ -272,6 +274,14 @@ export default class Question extends React.Component {
     return FormUtils.isEmphasised(question) ? 'bg-warning' : '';
   }
 
+  static getEmphasizedOnRelevantClass(question) {
+    if (JsonLdUtils.hasValue(question, Constants.LAYOUT_CLASS, Constants.LAYOUT.EMPHASISE_ON_RELEVANT)) {
+      return 'emphasise-on-relevant';
+    }
+
+    return '';
+  }
+
   _renderCollapseToggle() {
     const { options } = this.context;
 

diff --git a/src/styles/s-forms.css b/src/styles/s-forms.css
@@ -146,6 +146,10 @@ input:disabled {
   background-color: #e6f9fb !important;
 }
 
+.card-header.section-background {
+  background-color: #e6f9fb
+}
+
 .card-header .form-group {
   margin-bottom: 0;
 }
@@ -154,6 +158,10 @@ input:disabled {
   animation: emphasiseOnRelevant 1.2s ease-in;
 }
 
+.card-header.emphasise-on-relevant {
+  animation: emphasiseOnRelevantSection 1.2s ease-in;
+}
+
 @keyframes emphasiseOnRelevant {
   0% {
     display: none;
@@ -183,4 +191,32 @@ input:disabled {
   }
 }
 
+@keyframes emphasiseOnRelevantSection {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+
+  1% {
+    display: block;
+    opacity: 0;
+    background-color: yellow;
+  }
+
+  25% {
+    display: block;
+    opacity: 0;
+  }
+
+  75% {
+    display: block;
+    opacity: 1;
+  }
+
+  100% {
+    display: block;
+    opacity: 1;
+    background-color: #e6f9fb;
+  }
+}