Skip to content

Commit

Permalink
Merge pull request #3599 from ampproject/update/compatibility-tool-st…
Browse files Browse the repository at this point in the history 
…yling

Further improve compatibility tool design and UX
  • Loading branch information
@amedina
amedina authored Oct 23, 2019
2 parents e2cb372 + 308fb20 commit 6a623c6
Show file tree
Hide file tree
Showing 7 changed files with 289 additions and 269 deletions.
134 changes: 68 additions & 66 deletions assets/css/src/amp-validation-error-taxonomy.css
View file
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
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
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

0 comments on commit 6a623c6

Please sign in to comment.