[#1879] Add visual feedback when editing update

akvo · Nov 3, 2015 · 43d6a33 · 43d6a33
1 parent c33652b
commit 43d6a33
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 6 deletions.
diff --git a/akvo/rsr/static/scripts-src/project-main.js b/akvo/rsr/static/scripts-src/project-main.js
@@ -684,17 +684,28 @@ if (firstAccordionChild !== null) {
           var updateProgress = updateContainer.querySelector('.indicator-bar-progress-amount');
           var updateActual = updateContainer.querySelector('.update-target-actual');
           var originalPercentageProgress = parseInt(updateMarker.style.left.substring(0, updateMarker.style.left.length - 1));
+          var originalValue = updateActual.textContent;
           var originalPositionMarkerEl = document.createElement('div');
           var changeIndicatorEl = document.createElement('div');
+          var handleLabelEl = document.createElement('div');
+          var handleChangeLabelEl = document.createElement('div');
+
 
           originalPositionMarkerEl.classList.add('original-position-marker');
           originalPositionMarkerEl.style.left = originalPercentageProgress + '%';
 
           changeIndicatorEl.classList.add('change-indicator');
           changeIndicatorEl.style.left = originalPercentageProgress + '%';
 
+          handleLabelEl.classList.add('handle-label');
+
+          handleChangeLabelEl.classList.add('handle-change-label');
+
+
           document.querySelector('.edit-slider').appendChild(originalPositionMarkerEl);
           document.querySelector('.edit-slider').appendChild(changeIndicatorEl);
+          document.querySelector('.edit-slider .noUi-handle').appendChild(handleLabelEl);
+          document.querySelector('.edit-slider .noUi-handle').appendChild(handleChangeLabelEl);
 
           exceedCheckbox.removeAttribute('disabled');
           if (exceedCheckbox.checked) {
@@ -719,6 +730,10 @@ if (firstAccordionChild !== null) {
               updateMarker.setAttribute('data-value', value);
               updateProgress.style.width = percentage + '%';
 
+              handleLabelEl.textContent = value;
+              handleChangeLabelEl.textContent = changeValueIsNegative ? '-' : '+';
+              handleChangeLabelEl.textContent += Math.abs(value - originalValue);
+
               if (changeValueIsNegative) {
                 // Change is negative
                 changeIndicatorEl.style.right = (100 - originalPercentageProgress) + '%';

diff --git a/akvo/rsr/static/scripts-src/project-main.jsx b/akvo/rsr/static/scripts-src/project-main.jsx
@@ -684,17 +684,28 @@ if (firstAccordionChild !== null) {
           var updateProgress = updateContainer.querySelector('.indicator-bar-progress-amount');
           var updateActual = updateContainer.querySelector('.update-target-actual');
           var originalPercentageProgress = parseInt(updateMarker.style.left.substring(0, updateMarker.style.left.length - 1));
+          var originalValue = updateActual.textContent;
           var originalPositionMarkerEl = document.createElement('div');
           var changeIndicatorEl = document.createElement('div');
+          var handleLabelEl = document.createElement('div');
+          var handleChangeLabelEl = document.createElement('div');
+
 
           originalPositionMarkerEl.classList.add('original-position-marker');
           originalPositionMarkerEl.style.left = originalPercentageProgress + '%';
 
           changeIndicatorEl.classList.add('change-indicator');
           changeIndicatorEl.style.left = originalPercentageProgress + '%';
 
+          handleLabelEl.classList.add('handle-label');
+
+          handleChangeLabelEl.classList.add('handle-change-label');
+
+
           document.querySelector('.edit-slider').appendChild(originalPositionMarkerEl);
           document.querySelector('.edit-slider').appendChild(changeIndicatorEl);
+          document.querySelector('.edit-slider .noUi-handle').appendChild(handleLabelEl);
+          document.querySelector('.edit-slider .noUi-handle').appendChild(handleChangeLabelEl);
 
           exceedCheckbox.removeAttribute('disabled');
           if (exceedCheckbox.checked) {
@@ -719,6 +730,10 @@ if (firstAccordionChild !== null) {
               updateMarker.setAttribute('data-value', value);
               updateProgress.style.width = percentage + '%';
 
+              handleLabelEl.textContent = value;
+              handleChangeLabelEl.textContent = changeValueIsNegative ? '-' : '+';
+              handleChangeLabelEl.textContent += Math.abs(value - originalValue);
+
               if (changeValueIsNegative) {
                 // Change is negative
                 changeIndicatorEl.style.right = (100 - originalPercentageProgress) + '%';

diff --git a/akvo/rsr/static/styles-src/main.css b/akvo/rsr/static/styles-src/main.css
@@ -2640,13 +2640,15 @@ body.translationBarActive div.skiptranslate ~ article, body.translationBarActive
           height: 20px;
           position: absolute;
           background-color: #B5B5B5;
-          top: -3px; }
+          top: -3px;
+          z-index: 102; }
         .results .update-dialog-container td .update-entry-container .edit-slider .change-indicator {
           position: absolute;
           background-color: green;
-          height: 20px;
-          top: -40px;
-          z-index: 101; }
+          height: 12px;
+          top: 1px;
+          z-index: 101;
+          opacity: 0.5; }
           .results .update-dialog-container td .update-entry-container .edit-slider .change-indicator.negative {
             background-color: red; }
         .results .update-dialog-container td .update-entry-container .edit-slider .noUi-base, .results .update-dialog-container td .update-entry-container .edit-slider.noUi-horizontal {
@@ -2667,6 +2669,7 @@ body.translationBarActive div.skiptranslate ~ article, body.translationBarActive
             -webkit-border-radius: 4px;
             border-radius: 4px; }
           .results .update-dialog-container td .update-entry-container .edit-slider .noUi-base .noUi-handle, .results .update-dialog-container td .update-entry-container .edit-slider.noUi-horizontal .noUi-handle {
+            position: relative;
             width: 28px;
             height: 28px;
             z-index: 9999;
@@ -2695,6 +2698,30 @@ body.translationBarActive div.skiptranslate ~ article, body.translationBarActive
               background-color: #009ceb; }
             .results .update-dialog-container td .update-entry-container .edit-slider .noUi-base .noUi-handle:active, .results .update-dialog-container td .update-entry-container .edit-slider.noUi-horizontal .noUi-handle:active {
               background-color: #de8929; }
+            .results .update-dialog-container td .update-entry-container .edit-slider .noUi-base .noUi-handle .handle-label, .results .update-dialog-container td .update-entry-container .edit-slider.noUi-horizontal .noUi-handle .handle-label {
+              position: absolute;
+              top: -32px;
+              background-color: #007ab8;
+              padding: 3px;
+              width: 100%;
+              text-align: center; }
+              .results .update-dialog-container td .update-entry-container .edit-slider .noUi-base .noUi-handle .handle-label:after, .results .update-dialog-container td .update-entry-container .edit-slider.noUi-horizontal .noUi-handle .handle-label:after {
+                content: '';
+                height: 0px;
+                width: 0px;
+                position: absolute;
+                bottom: -5px;
+                left: 9px;
+                border-left: 5px solid transparent;
+                border-right: 5px solid transparent;
+                border-top: 5px solid #007ab8; }
+            .results .update-dialog-container td .update-entry-container .edit-slider .noUi-base .noUi-handle .handle-change-label, .results .update-dialog-container td .update-entry-container .edit-slider.noUi-horizontal .noUi-handle .handle-change-label {
+              position: absolute;
+              width: 100%;
+              text-align: center;
+              bottom: -25px;
+              background-color: white;
+              color: #007ab8; }
         .results .update-dialog-container td .update-entry-container .edit-slider.active {
           display: initial; }
 

diff --git a/akvo/rsr/static/styles-src/main.scss b/akvo/rsr/static/styles-src/main.scss
@@ -3358,13 +3358,15 @@ body {
                         position:absolute;
                         background-color: #B5B5B5;
                         top: -3px;
+                        z-index: 102;
                     }
                     .change-indicator {
                         position: absolute;
                         background-color: green;
-                        height: 20px;
-                        top: -40px;
+                        height: 12px;
+                        top: 1px;
                         z-index: 101;
+                        opacity: 0.5;
                         &.negative {
                             background-color: red;
                         }
@@ -3382,6 +3384,7 @@ body {
                             @include border-radius(4px);
                         }
                         .noUi-handle {
+                            position: relative;
                             width: 28px;
                             height: 28px;
                             z-index: 9999;
@@ -3414,6 +3417,33 @@ body {
                             &:active {
                                 background-color: $flowOrange;
                             }
+                            .handle-label {
+                                position: absolute;
+                                top: -32px;
+                                background-color: rgb(0, 122, 184);
+                                padding: 3px;
+                                width: 100%;
+                                text-align: center;
+                                &:after {
+                                    content: '';
+                                    height: 0px;
+                                    width: 0px;
+                                    position: absolute;
+                                    bottom: -5px;
+                                    left: 9px;
+                                    border-left: 5px solid transparent;
+                                    border-right: 5px solid transparent;
+                                    border-top: 5px solid rgb(0, 122, 184);
+                                }
+                            }
+                            .handle-change-label {
+                                position: absolute;
+                                width: 100%;
+                                text-align: center;
+                                bottom: -25px;
+                                background-color: white;
+                                color: rgb(0, 122, 184);
+                            }
                         }
                     }
                     &.active {