diff --git a/public/javascripts/SVValidate/src/Main.js b/public/javascripts/SVValidate/src/Main.js
index 2642733fb..c165b0c11 100644
--- a/public/javascripts/SVValidate/src/Main.js
+++ b/public/javascripts/SVValidate/src/Main.js
@@ -75,6 +75,8 @@ function Main (param) {
svv.ui.newValidateBeta.tagsMenu = $("#validate-tags-section");
svv.ui.newValidateBeta.severityMenu = $("#validate-severity-section");
+ svv.ui.newValidateBeta.optionalCommentSection = $("#validate-optional-comment-section");
+ svv.ui.newValidateBeta.optionalCommentTextBox = $("#add-optional-comment");
svv.ui.newValidateBeta.noMenu = $("#validate-why-no-section");
svv.ui.newValidateBeta.disagreeReasonOptions = $("#no-reason-options");
svv.ui.newValidateBeta.disagreeReasonTextBox = $("#add-disagree-comment")
diff --git a/public/javascripts/SVValidate/src/keyboard/Keyboard.js b/public/javascripts/SVValidate/src/keyboard/Keyboard.js
index b13a09a74..30295605d 100644
--- a/public/javascripts/SVValidate/src/keyboard/Keyboard.js
+++ b/public/javascripts/SVValidate/src/keyboard/Keyboard.js
@@ -19,6 +19,7 @@ function Keyboard(menuUI) {
// Set the addingComment status based on whether the user is currently typing in a validation comment text field.
function checkIfTextAreaSelected() {
if (document.activeElement === menuUI.comment[0] ||
+ (svv.newValidateBeta && document.activeElement === svv.ui.newValidateBeta.optionalCommentTextBox[0]) ||
(svv.newValidateBeta && document.activeElement === svv.ui.newValidateBeta.disagreeReasonTextBox[0]) ||
(svv.newValidateBeta && document.activeElement === svv.ui.newValidateBeta.unsureReasonTextBox[0]) ||
(svv.newValidateBeta && document.activeElement === document.getElementById('select-tag-selectized'))) {
diff --git a/public/javascripts/SVValidate/src/label/Label.js b/public/javascripts/SVValidate/src/label/Label.js
index d010eedca..483d0d9be 100644
--- a/public/javascripts/SVValidate/src/label/Label.js
+++ b/public/javascripts/SVValidate/src/label/Label.js
@@ -44,6 +44,7 @@ function Label(params) {
newSeverity: undefined,
oldTags: undefined,
newTags: undefined,
+ agreeComment: '',
disagreeOption: undefined,
disagreeReasonTextBox: '',
unsureOption: undefined,
diff --git a/public/javascripts/SVValidate/src/menu/RightMenu.js b/public/javascripts/SVValidate/src/menu/RightMenu.js
index 0fa2dc2e9..877ef1d6e 100644
--- a/public/javascripts/SVValidate/src/menu/RightMenu.js
+++ b/public/javascripts/SVValidate/src/menu/RightMenu.js
@@ -74,11 +74,12 @@ function RightMenu(menuUI) {
};
}
- // Log clicks to disagree and unsure text boxes.
+ // Log clicks to the three text boxes.
+ menuUI.optionalCommentTextBox.click(function() { svv.tracker.push('Click=AgreeCommentTextbox'); });
menuUI.disagreeReasonTextBox.click(function() { svv.tracker.push('Click=DisagreeReasonTextbox'); });
menuUI.unsureReasonTextBox.click(function() { svv.tracker.push('Click=UnsureReasonTextbox'); });
- // Add oninput for disagree and unsure other reason text box.
+ // Add oninput for disagree and unsure other reason text boxes.
menuUI.disagreeReasonTextBox.on('input', function() {
if (menuUI.disagreeReasonTextBox.val() === '') {
menuUI.disagreeReasonTextBox.removeClass('chosen');
@@ -113,6 +114,8 @@ function RightMenu(menuUI) {
menuUI.unsureButton.removeClass('chosen');
menuUI.tagsMenu.css('display', 'none');
menuUI.severityMenu.css('display', 'none');
+ menuUI.optionalCommentSection.css('display', 'none');
+ menuUI.optionalCommentTextBox.val('');
// Update the text on each disagree button.
menuUI.noMenu.css('display', 'none');
@@ -157,6 +160,8 @@ function RightMenu(menuUI) {
menuUI.submitButton.prop('disabled', true);
} else {
// This is a validation that they are going back to, so update all the views to match what they had before.
+ menuUI.optionalCommentTextBox.val(label.getProperty('agreeComment'));
+
let disagreeOption = label.getProperty('disagreeOption');
$disagreeReasonButtons.removeClass('chosen');
if (disagreeOption === 'other') {
@@ -197,6 +202,7 @@ function RightMenu(menuUI) {
// Pedestrian Signal label type doesn't have severity ratings.
menuUI.severityMenu.css('display', 'block');
}
+ menuUI.optionalCommentSection.css('display', 'block');
menuUI.noMenu.css('display', 'none');
menuUI.unsureMenu.css('display', 'none');
menuUI.submitButton.prop('disabled', false);
@@ -308,6 +314,7 @@ function RightMenu(menuUI) {
function saveValidationState() {
let currLabel = svv.panorama.getCurrentLabel();
+ currLabel.setProperty('agreeComment', menuUI.optionalCommentTextBox.val());
currLabel.setProperty('disagreeReasonTextBox', menuUI.disagreeReasonTextBox.val());
currLabel.setProperty('unsureReasonTextBox', menuUI.unsureReasonTextBox.val());
}
@@ -333,7 +340,9 @@ function RightMenu(menuUI) {
// Fill in the comment based on the disagree options they picked or one of the free form text boxes.
let comment = '';
- if (action === 'Disagree') {
+ if (action === 'Agree') {
+ comment = currLabel.getProperty('agreeComment');
+ } else if (action === 'Disagree') {
let disagreeReason = currLabel.getProperty('disagreeOption');
if (disagreeReason === 'other') {
comment = currLabel.getProperty('disagreeReasonTextBox');
diff --git a/public/stylesheets/newValidateBeta.css b/public/stylesheets/newValidateBeta.css
index 5c112afaf..7e59d0213 100644
--- a/public/stylesheets/newValidateBeta.css
+++ b/public/stylesheets/newValidateBeta.css
@@ -146,7 +146,7 @@
display: block;
}
-.validate-submit-section {
+#validate-submit-section {
display: flex;
justify-content: space-between;
margin-top: auto; /* Pushes the section to the bottom of the right-ui-holder. */
@@ -424,6 +424,10 @@
gap: 20px; /* This can be used to control the distance between the severity icons. */
}
+#optional-comment-input {
+ margin-top: 0px; /* Overrides .validate-text-input margin, since the textbox for agreeing looks different. */
+}
+
#no-reason-options, #unsure-reason-options {
display: flex;
flex-direction: column;