Revisions UI: Redesigned slider handlers.

Also:
* Fix diff header styling in grey admin theme
* Prevent an overlap of the compare two checkbox on smaller screens

props melchoyce, DrewAPicture, adamsilverstein. fixes #24276.

git-svn-id: http://core.svn.wordpress.org/trunk@24219 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Dominik Schilling 2013-05-09 10:07:26 +00:00
parent 8eeb2fe48d
commit 62b1b71b02
7 changed files with 115 additions and 42 deletions

View File

@ -1464,6 +1464,7 @@ div.wp-menu-image {
table.diff .diff-deletedline {
background-color: #fdd;
text-decoration: line-through;
border-color: #ffc0c0;
}
table.diff .diff-deletedline del {
@ -1472,6 +1473,7 @@ table.diff .diff-deletedline del {
table.diff .diff-addedline {
background-color: #dfd;
border-color: #aef9ae;
}
table.diff .diff-addedline ins {
@ -1542,28 +1544,28 @@ table.diff .diff-addedline ins {
border-color: none;
}
.wp-slider .ui-slider-handle.left-handle {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAABAlBMVEXR2uHM1dzCzNW4ydOzxtSxw9Gqwc+bs7+Ss8SVscaZrLqQq7yNrMCKqr+EqsGDqb6GpruCpbl8pL15o7t1n7hwnLVika1djq5giqJXiqlYiqNJgp9ieYlDfqA/epw3dpk7dpg2dpo3dZo6dZc4dJY4dJg3cZY2bpE1bosxaIYxZIMrYX0tXnwtXHYsWHEnVW0mTmglT2cjTGIhRVsfQlYaN0kYM0QULDgTKTYRJzQTJzINISoLHCYNGyYKGCEIFxwJEhcJEhsHEhQDDAkHCg8EBwwCBwoEBAQBAwIBAQEBAQMAAgEBAAAAAAQAAQMBAAIAAAICAAEBAQAAAQAAAAD///+62qV+AAAAVnRSTlP/////////////////////////////////////////////////////////////////////////////////////////////////////////////////AEpNbNkAAAAJcEhZcwAACusAAArrAYKLDVoAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACbSURBVBiVVcvVDoNQEEXRqbu781B3d/dQQknh/P+vtBQKt/tpsnKGEOW4klkQFFvIsqwYzUJUvCts1wJl9gIruxT5hpLEyMBLKG+Z0ToJgrPLTDqOjyCxNN7mcahiaz50uDWsX0Fk+tKahKGJpX55qp1qpAsCY0lt5MdPUD2KoniowBRXn+f5Xp4RZDfCKg1W0D637P/iznn06w0M+083NZW9ZwAAAABJRU5ErkJggg==);
}
.wp-slider .ui-slider-handle.ui-state-active.left-handle {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAAzFBMVEXZ5ejU4eXM3ODG2NzE1tvB1Nq90deux86sxs2qxcynwsqlwcmjwMihvseevMWdvMSbusOXuMGTtb6IrbiHrLeCqbSBqLN/p7J3oa11oKxzn6tvnKhrmaZqmKVpmKVol6RllaJhk6Bej51djptaiZZZiJVYhpNWg5BUf4xSfYlRfIhPeYRMdYBKcXxFaXNDZnA+X2g9XmY8XGU4VV43VFw2U1s0UFgyTVQxS1IwSVAuR00sREosQ0orQkgqQEYpPkQoPkMoPUMoPUL///8pY4MvAAAARHRSTlP/////////////////////////////////////////////////////////////////////////////////////////AHHSjxIAAAAJcEhZcwAACusAAArrAYKLDVoAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACUSURBVBiVVctXEoJQEETRMaIo5qwF5hwxYOY9ev97EiQ43q+pUz2EYk9n5UElU0rpRO016toO79WhxlVysWqkroRgsswSjAsbnasgpGdsMk25gooZvR3K8CQxCuU9jH8FhZ3022rwJTZ4CK9nnwJBbiO8yVpFKDButm1bOn6iLFyZt5igeZLHOrhgfJ8k/yXTVoLrAxo1P5iCdUg7AAAAAElFTkSuQmCC);
}
.wp-slider .ui-slider-handle {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAA8FBMVEU2dZipwNBJl8VGmcX///+EpLlBgqpymrNFjru3ydNWiKs6eZzY4uuRrL08faPL3OZBjLSBqsCTssRHlMJEf59cj657o7xKl8OEqsE9gag2dJtEkb+ct8iZs8BHmMePq8BejKZAiK5llK5FjrlJl8c6dZdGl8avxdBJlcZ4nbc6ep6XrbpKgZ+Lqr5KmcdIkbqsws1Gk8E+f6c4dptaiadFirRKl8V8pblImcNIl8eGpruVscZCh7BMlsdIlcFImchEkbs9eJpCjbdGjbk8fJ84dp02dpo8gatMlsM2dps8faVAg61Ej71Ek75IksFIlcOaLCw7AAAAUHRSTlP/////AP///////////////////////////////////////////////////////////////////////////////////////////////////xB6m5UAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACaSURBVBiVVcxZD8FAGIXhjxzUVktQgqKmo7ZYhkgsiS1tQuj//zeomo736uS5OFSo2W6UXc/R5hxXW5foxDlXqUKZx0GFZpXynuM4kXhjgjgyJkGzQIjpvi9Fx1uQ0iQUh4GkR/Ini0CQ2IfQ24YC4X8T+Mn0zj8lO1IgnqZpzlxE0m4YhrFsKYJVn126UGV+W1wHf4LdpByuF0goFKI7tv/dAAAAAElFTkSuQmCC);
border-color: #ccc;
border-color: #d0dfe9;
background: #eff8ff;
background-image: -webkit-gradient(linear, left bottom, left top, from(#eff8ff), to(#fff));
background-image: -webkit-linear-gradient(bottom, #eff8ff, #fff);
background-image: -moz-linear-gradient(bottom, #eff8ff, #fff);
background-image: -o-linear-gradient(bottom, #eff8ff, #fff);
background-image: linear-gradient(to top, #eff8ff, #fff);
}
.wp-slider .ui-slider-handle:hover,
.wp-slider .ui-slider-handle:focus {
border-color: #a0c3d5;
}
.wp-slider .ui-slider-handle.ui-state-hover,
.wp-slider .ui-slider-handle.ui-state-focus {
border-color: none;
border-color: #a0c3d5;
outline: none;
}
.wp-slider .ui-slider-handle.ui-state-active {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAA51BMVEUgZpDkzc0yd6f///8mcqFJm8cjbZZzr80mg78lh8BDk8UngLl+s9AmfKk4hrGeweBaoMhNlMORwt4nd6Zdm8BAjMEnf7RYmsMkb50mhsFWlsYhZ5ImhbwocZg0f61Lk8E9i7twqNBgo8VSmMUofLBcm8o3faUpfK8mh8Aia5MgZpFMmcgpeapDmcJjo8sliMEmh70nhLkkcKAqgLF2sc8sc5ojbZsngrMkh8EnfKw1eaUjbpkkapImeKQgaJAohb0mh8MmhcMng7kkcKEpf68iZ48haJMmhb8kicEmc6MibJkia5UnhLsw1mWvAAAATXRSTlP/AP8A/////////////////////////////////////////////////////////////////////////////////////////////////9/iR18AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACaSURBVBiVVc15D8FAEIfh+Ymj6761LIrSiCNVVyjbRGgifP/PQ6q22/evyZPJDNXzD6G0qNDq5PtO3DJDFyfRpk+po2Eo0h5Qx9U0LRa3SejdlR2rDMLI41yKh6/AtOSzUiuU4kvemSMUDBsRXGuRIHj/CvCXyTNcSXelQBQYY1uBWMY651xfK4KzbdgzqJI73LK7hGC6r0bTB5apIhqIH/YIAAAAAElFTkSuQmCC);
}
/* edit image */
#sidemenu a {
background-color: #f9f9f9;

View File

@ -1358,6 +1358,7 @@ div.wp-menu-image {
table.diff .diff-deletedline {
background-color: #fdd;
text-decoration: line-through;
border-color: #ffc0c0;
}
table.diff .diff-deletedline del {
@ -1366,6 +1367,7 @@ table.diff .diff-deletedline del {
table.diff .diff-addedline {
background-color: #dfd;
border-color: #aef9ae;
}
table.diff .diff-addedline ins {
@ -1386,10 +1388,6 @@ table.diff .diff-addedline ins {
color: #08a;
}
.diff-header {
background-color: #f7f7f7;
}
.revision-tick.completed-false {
background-color: #99c;
background-image: url(../images/wpspin_light.gif) no-repeat;
@ -1436,32 +1434,28 @@ table.diff .diff-addedline ins {
}
.wp-slider .ui-slider-handle {
border-color: none;
border-color: #ccc;
border-radius: 50%;
background: #f4f4f4;
background-image: -webkit-gradient(linear, left bottom, left top, from(#dfdfdf), to(#fff));
background-image: -webkit-linear-gradient(bottom, #dfdfdf, #fff);
background-image: -moz-linear-gradient(bottom, #dfdfdf, #fff);
background-image: -o-linear-gradient(bottom, #dfdfdf, #fff);
background-image: linear-gradient(to top, #dfdfdf, #fff);
color: #333;
}
.wp-slider .ui-slider-handle.left-handle {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAABAlBMVEXR2uHM1dzCzNW4ydOzxtSxw9Gqwc+bs7+Ss8SVscaZrLqQq7yNrMCKqr+EqsGDqb6GpruCpbl8pL15o7t1n7hwnLVika1djq5giqJXiqlYiqNJgp9ieYlDfqA/epw3dpk7dpg2dpo3dZo6dZc4dJY4dJg3cZY2bpE1bosxaIYxZIMrYX0tXnwtXHYsWHEnVW0mTmglT2cjTGIhRVsfQlYaN0kYM0QULDgTKTYRJzQTJzINISoLHCYNGyYKGCEIFxwJEhcJEhsHEhQDDAkHCg8EBwwCBwoEBAQBAwIBAQEBAQMAAgEBAAAAAAQAAQMBAAIAAAICAAEBAQAAAQAAAAD///+62qV+AAAAVnRSTlP/////////////////////////////////////////////////////////////////////////////////////////////////////////////////AEpNbNkAAAAJcEhZcwAACusAAArrAYKLDVoAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACbSURBVBiVVcvVDoNQEEXRqbu781B3d/dQQknh/P+vtBQKt/tpsnKGEOW4klkQFFvIsqwYzUJUvCts1wJl9gIruxT5hpLEyMBLKG+Z0ToJgrPLTDqOjyCxNN7mcahiaz50uDWsX0Fk+tKahKGJpX55qp1qpAsCY0lt5MdPUD2KoniowBRXn+f5Xp4RZDfCKg1W0D637P/iznn06w0M+083NZW9ZwAAAABJRU5ErkJggg==);
}
.wp-slider .ui-slider-handle.ui-state-active.left-handle {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAAzFBMVEXZ5ejU4eXM3ODG2NzE1tvB1Nq90deux86sxs2qxcynwsqlwcmjwMihvseevMWdvMSbusOXuMGTtb6IrbiHrLeCqbSBqLN/p7J3oa11oKxzn6tvnKhrmaZqmKVpmKVol6RllaJhk6Bej51djptaiZZZiJVYhpNWg5BUf4xSfYlRfIhPeYRMdYBKcXxFaXNDZnA+X2g9XmY8XGU4VV43VFw2U1s0UFgyTVQxS1IwSVAuR00sREosQ0orQkgqQEYpPkQoPkMoPUMoPUL///8pY4MvAAAARHRSTlP/////////////////////////////////////////////////////////////////////////////////////////AHHSjxIAAAAJcEhZcwAACusAAArrAYKLDVoAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACUSURBVBiVVctXEoJQEETRMaIo5qwF5hwxYOY9ev97EiQ43q+pUz2EYk9n5UElU0rpRO016toO79WhxlVysWqkroRgsswSjAsbnasgpGdsMk25gooZvR3K8CQxCuU9jH8FhZ3022rwJTZ4CK9nnwJBbiO8yVpFKDButm1bOn6iLFyZt5igeZLHOrhgfJ8k/yXTVoLrAxo1P5iCdUg7AAAAAElFTkSuQmCC);
}
.wp-slider .ui-slider-handle {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAA8FBMVEU2dZipwNBJl8VGmcX///+EpLlBgqpymrNFjru3ydNWiKs6eZzY4uuRrL08faPL3OZBjLSBqsCTssRHlMJEf59cj657o7xKl8OEqsE9gag2dJtEkb+ct8iZs8BHmMePq8BejKZAiK5llK5FjrlJl8c6dZdGl8avxdBJlcZ4nbc6ep6XrbpKgZ+Lqr5KmcdIkbqsws1Gk8E+f6c4dptaiadFirRKl8V8pblImcNIl8eGpruVscZCh7BMlsdIlcFImchEkbs9eJpCjbdGjbk8fJ84dp02dpo8gatMlsM2dps8faVAg61Ej71Ek75IksFIlcOaLCw7AAAAUHRSTlP/////AP///////////////////////////////////////////////////////////////////////////////////////////////////xB6m5UAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACaSURBVBiVVcxZD8FAGIXhjxzUVktQgqKmo7ZYhkgsiS1tQuj//zeomo736uS5OFSo2W6UXc/R5hxXW5foxDlXqUKZx0GFZpXynuM4kXhjgjgyJkGzQIjpvi9Fx1uQ0iQUh4GkR/Ini0CQ2IfQ24YC4X8T+Mn0zj8lO1IgnqZpzlxE0m4YhrFsKYJVn126UGV+W1wHf4LdpByuF0goFKI7tv/dAAAAAElFTkSuQmCC);
.wp-slider .ui-slider-handle:hover,
.wp-slider .ui-slider-handle:focus {
border-color: #aaa;
}
.wp-slider .ui-slider-handle.ui-state-hover,
.wp-slider .ui-slider-handle.ui-state-focus {
border-color: none;
border-color: #aaa;
outline: none;
}
.wp-slider .ui-slider-handle.ui-state-active {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAA51BMVEUgZpDkzc0yd6f///8mcqFJm8cjbZZzr80mg78lh8BDk8UngLl+s9AmfKk4hrGeweBaoMhNlMORwt4nd6Zdm8BAjMEnf7RYmsMkb50mhsFWlsYhZ5ImhbwocZg0f61Lk8E9i7twqNBgo8VSmMUofLBcm8o3faUpfK8mh8Aia5MgZpFMmcgpeapDmcJjo8sliMEmh70nhLkkcKAqgLF2sc8sc5ojbZsngrMkh8EnfKw1eaUjbpkkapImeKQgaJAohb0mh8MmhcMng7kkcKEpf68iZ48haJMmhb8kicEmc6MibJkia5UnhLsw1mWvAAAATXRSTlP/AP8A/////////////////////////////////////////////////////////////////////////////////////////////////9/iR18AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACaSURBVBiVVc15D8FAEIfh+Ymj6761LIrSiCNVVyjbRGgifP/PQ6q22/evyZPJDNXzD6G0qNDq5PtO3DJDFyfRpk+po2Eo0h5Qx9U0LRa3SejdlR2rDMLI41yKh6/AtOSzUiuU4kvemSMUDBsRXGuRIHj/CvCXyTNcSXelQBQYY1uBWMY651xfK4KzbdgzqJI73LK7hGC6r0bTB5apIhqIH/YIAAAAAElFTkSuQmCC);
}
/* edit image */
#sidemenu a {
background-color: #f9f9f9;

View File

@ -955,14 +955,32 @@ th.sorted a span {
11.2 - Post Revisions
------------------------------------------------------------------------------*/
#diff-slider .ui-slider-tooltip,
#diff-slider-ticks .ui-slider-tooltip {
margin-left: 0;
margin-right: -78px;
}
.wp-slider .ui-slider-handle.left-handle:before,
.wp-slider .ui-slider-handle.right-handle:before {
height: 8px;
width: 7px;
}
.wp-slider .ui-slider-handle.left-handle:before {
background-position: -5px -10px;
left: 6px;
}
.wp-slider .ui-slider-handle.right-handle:before {
background-position: -4px -29px;
left: 6px;
}
#toggle-revision-compare-mode {
right: auto;
left: 0;
padding: 9px 0 0 9px;
}
#diff-next-revision {
float: left;
}
@ -971,6 +989,10 @@ th.sorted a span {
float: right;
}
#diff-header {
padding: 5px 5px 5px 200px;
}
.diff-title {
float: right;
}
@ -982,6 +1004,11 @@ th.sorted a span {
margin-left: 5px;
}
.diff-title img {
margin-left: 0;
margin-right: 5px;
}
#restore-revision {
margin-left: 0;
margin-right: 10px;
@ -2723,6 +2750,12 @@ div.sidebar-name h3 {
#content-resize-handle {
background: transparent url('../images/resize-rtl-2x.gif') no-repeat scroll left bottom;
}
.wp-slider .ui-slider-handle:before {
background-image: url(../images/arrows-pr-2x.png);
background-size: 16px 102px;
}
}
/* =Localized CSS

View File

@ -3564,7 +3564,13 @@ table.diff td,
table.diff th {
padding: .5em;
font-family: Consolas, Monaco, monospace;
border: none;
border-radius: 3px;
}
table.diff .diff-deletedline,
table.diff .diff-addedline {
border-width: 1px;
border-style: solid;
}
table.diff .diff-deletedline del,
@ -3653,10 +3659,11 @@ table.diff .diff-addedline ins {
#diff-header {
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 5px 200px 5px 5px;
}
.diff-header {
height: 35px;
min-height: 35px;
line-height: 35px;
}
@ -3855,9 +3862,38 @@ body .ui-slider-tooltip {
.wp-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 17px;
height: 17px;
border: none;
margin-top: -3px;
width: 19px;
height: 19px;
border-width: 1px;
border-style: solid;
border-radius: 50%;
}
.wp-slider .ui-slider-handle:before {
content: "";
position: absolute;
top: 6px;
left: 4px;
height: 8px;
width: 12px;
background: url(../images/arrows-pr.png) no-repeat -2px -47px;
}
.wp-slider .ui-slider-handle.left-handle:before,
.wp-slider .ui-slider-handle.right-handle:before {
height: 8px;
width: 7px;
}
.wp-slider .ui-slider-handle.left-handle:before {
background-position: -5px -84px;
left: 7px;
}
.wp-slider .ui-slider-handle.right-handle:before {
background-position: -4px -65px;
left: 5px;
}
.wp-slider .ui-slider-range {
@ -9585,6 +9621,12 @@ a.widget-control-edit {
.customize-loading #customize-container {
background-image: url(../images/wpspin_light-2x.gif);
}
.wp-slider .ui-slider-handle:before {
background-image: url(../images/arrows-pr-2x.png);
background-size: 16px 102px;
}
}
/* =Localized CSS

Binary file not shown.

After

Width:  |  Height:  |  Size: 674 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 381 B

View File

@ -92,7 +92,7 @@ wp_localize_script( 'revisions', 'wpRevisionsSettings', $settings );
$revisions_overview = '<p>' . __( 'This screen is used for managing your content revisions.' ) . '</p>';
$revisions_overview .= '<p>' . __( 'Revisions are saved copies of your post or page, which are periodically created as you update your content. The red text on the left shows the content that was removed. The green text on the right shows the content that was added.' ) . '</p>';
$revisions_overview .= '<p>' . __( 'From this screen you can review, compare, and restore revisions:' ) . '</p>';
$revisions_overview .= '<ul><li>' . __( 'To navigate between revisions, <strong>drag the slider arrow left or right</strong> or <strong>use the Previous or Next buttons</strong>.' ) . '</li>';
$revisions_overview .= '<ul><li>' . __( 'To navigate between revisions, <strong>drag the slider handle left or right</strong> or <strong>use the Previous or Next buttons</strong>.' ) . '</li>';
$revisions_overview .= '<li>' . __( 'Compare two different revisions by <strong>selecting the &#8220;Compare two revisions&#8221; box</strong> to the side.' ) . '</li>';
$revisions_overview .= '<li>' . __( 'To restore a revision, <strong>click Restore This Revision</strong>.' ) . '</li></ul>';
@ -144,6 +144,7 @@ require_once( './admin-header.php' );
<div id="diff-title-from" class="diff-title">
<strong><?php _ex( 'From:', 'Followed by post revision info' ); ?></strong> {{{ data.titleFrom }}}
</div>
<div class="clear"></div>
</div>
<div id="diff-header-to" class="diff-header">
@ -152,6 +153,7 @@ require_once( './admin-header.php' );
</div>
<input type="button" id="restore-revision" class="button button-primary" data-restore-link="{{{ data.restoreLink }}}" value="<?php esc_attr_e( 'Restore This Revision' )?>" />
<div class="clear"></div>
</div>
</div>