Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Further improve compatibility tool design and UX #3599

Merged
merged 17 commits into from
Oct 23, 2019
+289 −269
Merged

Further improve compatibility tool design and UX #3599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
2d57fcc
Linkify URLs in attribute table
westonruter Oct 22, 2019
bee41ad
Align styling of rows for validated URLs and validation errors with c…
westonruter Oct 22, 2019
42bc426
Replace "Found URLs" with just "URLs" in validation error list table
westonruter Oct 22, 2019
116fbcd
Improve styling of context details in error index list table
westonruter Oct 22, 2019
c493ced
Fix positoning of expand/collapse all button
westonruter Oct 22, 2019
adc7752
Prevent validation error contents shifting left when approved
westonruter Oct 22, 2019
16b39ca
Make details summary have cursor:pointer
westonruter Oct 22, 2019
6c9f259
Ensure the new state is removed from rows when clicking Accept/Reject…
westonruter Oct 22, 2019
45328c4
Remove underlines from links in validation errors screen
westonruter Oct 22, 2019
3a104da
Align styling of row actions with Comments list table
westonruter Oct 22, 2019
f88bb27
Improve column widths
westonruter Oct 22, 2019
3d6b9c0
Display of Accept/Reject buttons on validation error details screen
westonruter Oct 22, 2019
5dd98b9
Color the 'Showing X of Y validation errors' text as black since not …
westonruter Oct 22, 2019
831031f
Rename 'possible sources' to 'source stack'
westonruter Oct 22, 2019
f61b82e
Refactor sources list from ol to table so columns align
westonruter Oct 22, 2019
7eb38b4
Fix tests for changes to validation screens
westonruter Oct 22, 2019
308fb20
Improve vertical alignment of expand/collapse-all button
westonruter Oct 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 68 additions & 66 deletions assets/css/src/amp-validation-error-taxonomy.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,14 @@ th.column-error_type {
width: 15%;
}

td.column-error .error-code {
td.column-error_code .error-code {
font-family: Consolas, Monaco, monospace;
}

th.column-status {
width: 15%;
}

.fixed th.column-posts {
width: 10%;
}

/* Details column */
.column-details .details-attributes__summary {
display: flex;
Expand All @@ -47,6 +43,14 @@ details[open] .details-attributes__summary {
margin-bottom: 15px;
}

.details-attributes__summary {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}

.column-details .details-attributes__summary::-webkit-details-marker,
.column-details .notice details > summary::-webkit-details-marker {
display: none;
Expand All @@ -64,7 +68,8 @@ details[open] .details-attributes__summary {
}

tr.expanded .details-attributes__summary::after,
details.single-error-detail[open] .single-error-detail-summary::after {
details[open] > .details-attributes__summary::after,
details[open] > .single-error-detail-summary::after {
transform: rotate(180deg);
}

Expand Down Expand Up @@ -112,16 +117,25 @@ dl.detailed {
padding-bottom: 16px;
}

.details-attributes__title code,
dl.detailed details > summary {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.details-attributes__title,
.notice .detailed summary code {
display: inline-block;
min-width: 240px;
margin-left: 18px;
font-weight: 600;
}

.details-attributes__title code {
.details-attributes__title {
margin-left: 0;
font-weight: bold;
}

.details-attributes__list {
Expand Down Expand Up @@ -158,26 +172,27 @@ dl.detailed {
flex-direction: column;
height: 14px;
padding: 0;
margin-top: 4px;
margin: 0;
background: none;
border: none;
cursor: pointer;
}

.error-details-toggle.is-open {
transform: rotate(180deg);
}

.column-details .error-details-toggle::before,
.column-details .error-details-toggle::after {
width: 12px;
height: 12px;
height: 10px;
background-image: url("../images/down-triangle.svg");
background-size: cover;
background-position: center;
content: "";
}

.error-details-toggle.is-open::before,
.error-details-toggle.is-open::after {
transform: rotate(180deg);
}

/* Status text icons */
.status-text {
display: flex;
Expand Down Expand Up @@ -245,58 +260,48 @@ dl.detailed {
margin-left: 10px;
}

body.taxonomy-amp_validation_error .wp-list-table .new th,
body.taxonomy-amp_validation_error .wp-list-table .new td,
tr.expanded.new + tr > td:first-of-type,
body.post-type-amp_validated_url .wp-list-table .new th,
body.post-type-amp_validated_url .wp-list-table .new td {
.wp-list-table > tbody > .new > td,
.wp-list-table > tbody > .new > th {
background-color: #fef7f1;
}

body.taxonomy-amp_validation_error .wp-list-table .new.odd th,
body.taxonomy-amp_validation_error .wp-list-table .new.odd td,
tr.expanded.new.odd + tr > td:first-of-type,
body.post-type-amp_validated_url .wp-list-table .new.odd th,
body.post-type-amp_validated_url .wp-list-table .new.odd td {
background-color: #f9eee5;
tr.expanded + tr > td:first-of-type {
border-left: solid 4px transparent;
}

body.taxonomy-amp_validation_error .wp-list-table .new th.check-column,
tr.expanded.new + tr > td:first-of-type,
body.post-type-amp_validated_url .wp-list-table .new th.check-column {
.wp-list-table .new th.check-column {
border-left: 4px solid #d54e21;
}

body.taxonomy-amp_validation_error .wp-list-table .new th.check-column input {
margin-left: 4px;
.wp-list-table > tbody > tr > th,
.wp-list-table > tbody > tr > td {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.row-actions .amp_validation_error_accept > a {
color: #006505;
.wp-list-table > tbody > tr:last-child > th,
.wp-list-table > tbody > tr.expanded > th,
.wp-list-table > tbody > tr:last-child > td,
.wp-list-table > tbody > tr.expanded > td {
box-shadow: none;
}

.row-actions .amp_validation_error_reject > a {
color: #a00;
.wp-list-table > tbody > tr.unapproved + tr.approved th,
.wp-list-table > tbody > tr.unapproved + tr.approved td {
border-top: 1px solid rgba(0, 0, 0, 0.03);
}

.notice.accept-reject-error {
display: flex;
margin-bottom: 0;
body.taxonomy-amp_validation_error .wp-list-table .new th.check-column input {
margin-left: 4px;
}

.notice.accept-reject-error > p {
display: inline-block;
font-size: 14px;
flex-grow: 10;
margin-right: 20px;
.row-actions .amp_validation_error_accept > a {
color: #006505;
}

.notice.accept-reject-error > .button {
display: inline-block;
margin: 5px 5px 0 5px;
padding: 0 26px 2px;
flex-grow: 1;
text-align: center;
.row-actions .amp_validation_error_reject > a {
color: #a00;
}

.notice.accept-reject-error > .button.accept {
Expand Down Expand Up @@ -324,35 +329,32 @@ body.taxonomy-amp_validation_error .wp-list-table .new th.check-column input {
font-size: 1rem;
}

/** Details post action. */
.details button {
display: inline-block;
background: none;
border: none;
padding: 0;
text-align: left;
color: #0073aa;
cursor: pointer;
text-decoration: underline;
.validation-error-sources {
border-collapse: collapse;
}

.validation-error-sources th {
font-weight: bold;
text-align: right;
.validation-error-sources tbody:not(:first-child) {
border-top: solid 1px #ddd;
margin: 0;
}

.validation-error-sources td,
.validation-error-sources th {
vertical-align: top;
padding: 0 4px;
padding: 2px 4px;
}

.validation-error-sources > li {
border-top: solid 1px #ddd;
margin: 0;
padding: 6px 0;
.validation-error-sources tbody > tr:first-child > th,
.validation-error-sources tbody > tr:first-child > td {
padding-top: 0.75em;
}

.validation-error-sources tbody > tr:last-child > th,
.validation-error-sources tbody > tr:last-child > td {
padding-bottom: 0.75em;
}

.validation-error-sources > li:first-child {
border-top: 0;
.validation-error-sources th {
font-weight: bold;
text-align: right;
}
40 changes: 16 additions & 24 deletions assets/css/src/amp-validation-single-error-url.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/** Arrow icon on title in error column. */
.column-error > .single-url-detail-toggle {
.column-error_code > .single-url-detail-toggle {
position: relative;
width: 100%;
padding: 5px 36px 5px 0;
Expand All @@ -11,7 +11,7 @@
cursor: pointer;
}

.column-error > .single-url-detail-toggle::after {
.column-error_code > .single-url-detail-toggle::after {
position: absolute;
top: 0;
right: 0;
Expand Down Expand Up @@ -46,18 +46,6 @@ table.striped > tbody > tr.even {
display: none;
}

/** Details post action. */
.details button {
display: inline-block;
background: none;
border: none;
padding: 0;
text-align: left;
color: #0073aa;
cursor: pointer;
text-decoration: underline;
}

/** Details row styles. */
.details details.details-attributes:hover {
cursor: pointer;
Expand Down Expand Up @@ -87,7 +75,7 @@ table.striped > tbody > tr.even {
#number-errors {
text-align: center;
background-color: #d3d3d3b8;
color: #1e8cbecc;
color: #000;
}

#url-post-filter {
Expand All @@ -108,21 +96,25 @@ table.striped > tbody > tr.even {
margin-top: 0.5rem;
}

/* Give enough width to prevent the widest column status, 'New Accepted,' from forcing the <select> below the icon. */
.wp-list-table th.column-status {
width: 150px;
.wp-list-table th.column-error_code {
width: 30%;
}

.wp-list-table th.column-sources_with_invalid_output {
width: 20%;
.wp-list-table th.column-error_type {
width: 15%;
}

.wp-list-table th.column-error {
width: 25%;
.wp-list-table th.column-details {
width: 15%;
}

.wp-list-table th.column-details {
width: 20%;
.wp-list-table th.column-sources_with_invalid_output {
width: 30%;
}

/* Give enough width to prevent the widest column status, 'New Accepted,' from forcing the <select> below the icon. */
.wp-list-table th.column-status {
width: 150px;
}

/** Add space between list table and the filter and search box above it. */
Expand Down
34 changes: 21 additions & 13 deletions assets/src/amp-validation/amp-validated-url-post-edit-screen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,35 +285,41 @@ const updateSelectIcon = ( select ) => {
}
};

/**
* Set the row status class.
*
* @param {HTMLSelectElement} select Select element.
*/
const setRowStatusClass = ( select ) => {
const acceptedValue = 3;
const rejectedValue = 2;
const status = parseInt( select.options[ select.selectedIndex ].value );
const row = select.closest( 'tr' );

row.classList.toggle( 'new', isNaN( status ) );
row.classList.toggle( 'accepted', acceptedValue === status );
row.classList.toggle( 'rejected', rejectedValue === status );
};

/**
* Handles a change in the error status, like from 'New' to 'Accepted'.
*
* Gets the data-status-icon value from the newly-selected <option>.
* And sets this as the src of the status icon <img>.
*/
const handleStatusChange = () => {
const setRowStatusClass = ( { 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 = ( { event, row, select } ) => {
const onChange = ( { event, select } ) => {
if ( event.target.matches( 'select' ) ) {
updateSelectIcon( event.target );
setRowStatusClass( { row, select } );
setRowStatusClass( select );
}
};

document.querySelectorAll( 'tr[id^="tag-"]' ).forEach( ( row ) => {
const select = row.querySelector( '.amp-validation-error-status' );

if ( select ) {
setRowStatusClass( { row, select } );
setRowStatusClass( /** @type {HTMLSelectElement} */ select );
select.addEventListener( 'change', ( event ) => {
onChange( { event, row, select } );
} );
Expand Down Expand Up @@ -370,6 +376,7 @@ const handleBulkActions = () => {
if ( select.closest( 'tr' ).querySelector( '.check-column input[type=checkbox]' ).checked ) {
select.value = '3';
updateSelectIcon( select );
setRowStatusClass( select );
addBeforeUnloadPrompt();
}
} );
Expand All @@ -381,6 +388,7 @@ const handleBulkActions = () => {
if ( select.closest( 'tr' ).querySelector( '.check-column input[type=checkbox]' ).checked ) {
select.value = '2';
updateSelectIcon( select );
setRowStatusClass( select );
addBeforeUnloadPrompt();
}
} );
Expand Down
Loading