diff --git a/assets/css/amp-validation-error-taxonomy.css b/assets/css/amp-validation-error-taxonomy.css
index cc6fa294636..3ac05a9613b 100644
--- a/assets/css/amp-validation-error-taxonomy.css
+++ b/assets/css/amp-validation-error-taxonomy.css
@@ -52,7 +52,7 @@ details[open] .details-attributes__summary {
content: "";
}
-details[open] .details-attributes__summary::after,
+tr.expanded .details-attributes__summary::after,
details.single-error-detail[open] .single-error-detail-summary::after {
transform: rotate(180deg);
}
@@ -185,11 +185,16 @@ details.single-error-detail[open] .single-error-detail-summary::after {
}
body.taxonomy-amp_validation_error .wp-list-table .new th,
-body.taxonomy-amp_validation_error .wp-list-table .new td {
+body.taxonomy-amp_validation_error .wp-list-table .new td,
+tr.expanded.new + tr > td:first-of-type,
+body.post-type-amp_invalid_url .wp-list-table .new th,
+body.post-type-amp_invalid_url .wp-list-table .new td {
background-color: #fef7f1;
}
-body.taxonomy-amp_validation_error .wp-list-table .new th.check-column {
+body.taxonomy-amp_validation_error .wp-list-table .new th.check-column,
+tr.expanded.new + tr > td:first-of-type,
+body.post-type-amp_invalid_url .wp-list-table .new th.check-column {
border-left: 4px solid #d54e21;
}
diff --git a/assets/js/amp-invalid-url-post-edit-screen.js b/assets/js/amp-invalid-url-post-edit-screen.js
index 5d5c86c1eec..4a56afeb0a1 100644
--- a/assets/js/amp-invalid-url-post-edit-screen.js
+++ b/assets/js/amp-invalid-url-post-edit-screen.js
@@ -1,9 +1,7 @@
/* exported ampInvalidUrlPostEditScreen */
-var ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unused-vars
- var component;
-
- component = {
+const ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unused-vars
+ let component = {
data: {
l10n: {
unsaved_changes: '',
@@ -287,14 +285,32 @@ var ampInvalidUrlPostEditScreen = ( function() { // eslint-disable-line no-unuse
* And sets this as the src of the status icon .
*/
component.handleStatusChange = function handleStatusChange() {
- const onChange = function( event ) {
+ const setRowStatusClass = function( { row, select } ) {
+ const acceptedValue = 3;
+ const rejectedValue = 2;
+ const status = parseInt( select.options[ select.selectedIndex ].value );
+
+ row.classList.toggle( 'new', isNaN( status ) );
+ row.classList.toggle( 'accepted', acceptedValue === status );
+ row.classList.toggle( 'rejected', rejectedValue === status );
+ };
+
+ const onChange = function( { event, row, select } ) {
if ( event.target.matches( 'select' ) ) {
component.updateSelectIcon( event.target );
+ setRowStatusClass( { row, select } );
}
};
- document.querySelectorAll( '.amp-validation-error-status' ).forEach( function( element ) {
- element.addEventListener( 'change', onChange );
+ document.querySelectorAll( 'tr[id^="tag-"]' ).forEach( function( row ) {
+ const select = row.querySelector( '.amp-validation-error-status' );
+
+ if ( select ) {
+ setRowStatusClass( { row, select } );
+ select.addEventListener( 'change', function( event ) {
+ onChange( { event, row, select } );
+ } );
+ }
} );
};
diff --git a/assets/js/amp-invalid-urls-index.js b/assets/js/amp-invalid-urls-index.js
new file mode 100644
index 00000000000..49ff6b7d887
--- /dev/null
+++ b/assets/js/amp-invalid-urls-index.js
@@ -0,0 +1,34 @@
+/* exported ampInvalidUrlsIndex */
+
+const ampInvalidUrlsIndex = ( function() { // eslint-disable-line no-unused-vars
+ let component = {
+ classes: {}
+ };
+
+ /**
+ * The class for the new status
+ *
+ * @type {string}
+ */
+ component.classes.new = 'new';
+
+ /**
+ * Boot.
+ */
+ component.boot = function boot() {
+ component.highlightRowsWithNewStatus();
+ };
+
+ /**
+ * Highlight rows with new status.
+ */
+ component.highlightRowsWithNewStatus = function highlightRowsWithNewStatus() {
+ document.querySelectorAll( 'tr[id^="post-"]' ).forEach( function( row ) {
+ if ( row.querySelector( 'span.status-text.' + component.classes.new ) ) {
+ row.classList.add( 'new' );
+ }
+ } );
+ };
+
+ return component;
+}() );
diff --git a/assets/src/amp-validation-detail-toggle.js b/assets/src/amp-validation-detail-toggle.js
index 2ce496b6608..ab5028b9a2d 100644
--- a/assets/src/amp-validation-detail-toggle.js
+++ b/assets/src/amp-validation-detail-toggle.js
@@ -14,7 +14,7 @@ const OPEN_CLASS = 'is-open';
* Adds detail toggle buttons to the header and footer rows of the validation error "details" column.
* The buttons are added via JS because there's no easy way to append them to the heading of a sortable
* table column via backend code.
- *
+ *
* @param {string} containerSelector Selector for elements that will have the button added.
* @param {string} ariaLabel Screen reader label for the button.
* @return {Array} Array of added buttons.
@@ -61,6 +61,24 @@ function addToggleAllListener( { btn, toggleAllButtonSelector = null, targetDeta
btn.addEventListener( 'click', onButtonClick );
}
+/**
+ * Adds classes to the rows for the amp_validation_error term list table.
+ *
+ * This is needed because \WP_Terms_List_Table::single_row() does not allow for additional
+ * attributes to be added to the