From 800d88397a31ac6dcaa0f691a04c76939a356bb7 Mon Sep 17 00:00:00 2001 From: "Dominik Schilling (ocean90)" Date: Sun, 28 Apr 2013 10:56:57 +0000 Subject: [PATCH] Revisions UI update: * Style status loading as a regular update message like on the other screens * Move compare two checkbox to diff header to avoid an overlap on long post titles * Restore color shades for the scope of changes visualisation * Show tooltips while moving the slider handle * Diff header styling * Move color declarations to classic/fresh stylesheets * Sync admin color stylesheets props jrbeilke for initial patch. see #23935. git-svn-id: https://develop.svn.wordpress.org/trunk@24119 602fd350-edb4-49c9-b593-d223f7449a82 --- wp-admin/css/colors-classic.css | 66 +++++++++++++++++++++++---------- wp-admin/css/colors-fresh.css | 44 ++++++++++++++++++---- wp-admin/css/wp-admin.css | 59 +++++++++++++++++------------ wp-admin/js/revisions.js | 29 +++------------ wp-admin/revision.php | 34 +++++++++-------- 5 files changed, 145 insertions(+), 87 deletions(-) diff --git a/wp-admin/css/colors-classic.css b/wp-admin/css/colors-classic.css index c8963fc6c6..abb65bb514 100644 --- a/wp-admin/css/colors-classic.css +++ b/wp-admin/css/colors-classic.css @@ -164,6 +164,7 @@ textarea.disabled { color: #fff; } +#diff-header, .post-format-options, .widget .widget-top, .postbox h3, @@ -1477,12 +1478,17 @@ table.diff .diff-addedline ins { background-color: #afa; } -.diff-header { - background-color: #f7f7f7; +#diff-header { + border: 1px solid #d1e5ee; +} + +#diff-slider .ui-slider-tooltip { + border-color: #d1e5ee; + background-color: #fff; } #diff-title-to strong { - color: #0080aa; + color: #08a; } .revision-tick.completed-false { @@ -1492,10 +1498,30 @@ table.diff .diff-addedline ins { background-size: 1px 10px; } -.revision-tick.completed-true { +.revision-tick.completed-false { + background-image: none; +} + +.revision-tick.scope-of-changes-vsmall { background-color: #d1e5ee; } +.revision-tick.scope-of-changes-small { + background-color: #b4d5e3; +} + +.revision-tick.scope-of-changes-med { + background-color: #98c5d9; +} + +.revision-tick.scope-of-changes-large { + background-color: #7bb4ce; +} + +.revision-tick.scope-of-changes-vlarge { + background-color: #5ea4c4; +} + .diff-label { color: #666; } @@ -1507,28 +1533,30 @@ table.diff .diff-addedline ins { } .wp-slider .ui-slider-handle { - border-color: #acd; - background: #f4f9fc; - background-image: -webkit-gradient(linear, left bottom, left top, from(#f4f9fc), to(#fff)); - background-image: -webkit-linear-gradient(bottom, #f4f9fc, #fff); - background-image: -moz-linear-gradient(bottom, #f4f9fc, #fff); - background-image: -o-linear-gradient(bottom, #f4f9fc, #fff); - background-image: linear-gradient(to top, #f4f9fc, #fff); + color: #333; + 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); } .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.ui-state-focus { - border-color: #79afca; + border-color: none; + outline: none; } .wp-slider .ui-slider-handle.ui-state-active { - border-color: #79afca; - background: #eff8ff; - background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#f4f9fc)); - background-image: -webkit-linear-gradient(bottom, #fff, #f4f9fc); - background-image: -moz-linear-gradient(bottom, #fff, #f4f9fc); - background-image: -o-linear-gradient(bottom, #fff, #f4f9fc); - background-image: linear-gradient(to top, #fff, #f4f9fc); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAA51BMVEUgZpDkzc0yd6f///8mcqFJm8cjbZZzr80mg78lh8BDk8UngLl+s9AmfKk4hrGeweBaoMhNlMORwt4nd6Zdm8BAjMEnf7RYmsMkb50mhsFWlsYhZ5ImhbwocZg0f61Lk8E9i7twqNBgo8VSmMUofLBcm8o3faUpfK8mh8Aia5MgZpFMmcgpeapDmcJjo8sliMEmh70nhLkkcKAqgLF2sc8sc5ojbZsngrMkh8EnfKw1eaUjbpkkapImeKQgaJAohb0mh8MmhcMng7kkcKEpf68iZ48haJMmhb8kicEmc6MibJkia5UnhLsw1mWvAAAATXRSTlP/AP8A/////////////////////////////////////////////////////////////////////////////////////////////////9/iR18AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACaSURBVBiVVc15D8FAEIfh+Ymj6761LIrSiCNVVyjbRGgifP/PQ6q22/evyZPJDNXzD6G0qNDq5PtO3DJDFyfRpk+po2Eo0h5Qx9U0LRa3SejdlR2rDMLI41yKh6/AtOSzUiuU4kvemSMUDBsRXGuRIHj/CvCXyTNcSXelQBQYY1uBWMY651xfK4KzbdgzqJI73LK7hGC6r0bTB5apIhqIH/YIAAAAAElFTkSuQmCC); } /* edit image */ diff --git a/wp-admin/css/colors-fresh.css b/wp-admin/css/colors-fresh.css index 1941f513b9..20853e1c33 100644 --- a/wp-admin/css/colors-fresh.css +++ b/wp-admin/css/colors-fresh.css @@ -164,6 +164,7 @@ textarea.disabled { color: #fff; } +#diff-header, .post-format-options, .widget .widget-top, .postbox h3, @@ -1371,8 +1372,17 @@ table.diff .diff-addedline ins { background-color: #afa; } +#diff-header { + border: 1px solid #dfdfdf; +} + +#diff-slider .ui-slider-tooltip { + border-color: #d7d7d7; + background-color: #fff; +} + #diff-title-to strong { - color: #0080aa; + color: #08a; } .diff-header { @@ -1381,15 +1391,35 @@ table.diff .diff-addedline ins { .revision-tick.completed-false { background-color: #99c; - background: url(../images/wpspin_light.gif) no-repeat; + background-image: url(../images/wpspin_light.gif) no-repeat; background-position: middle; background-size: 1px 10px; } -.revision-tick.completed-true { +.revision-tick.completed-false { + background-image: none; +} + +.revision-tick.scope-of-changes-vsmall { background-color: #d7d7d7; } +.revision-tick.scope-of-changes-small { + background-color: #c3c3c3; +} + +.revision-tick.scope-of-changes-med { + background-color: #b0b0b0; +} + +.revision-tick.scope-of-changes-large { + background-color: #9c9c9c; +} + +.revision-tick.scope-of-changes-vlarge { + background-color: #898989; +} + .diff-label { color: #666; } @@ -1407,19 +1437,19 @@ body .ui-tooltip { .wp-slider .ui-slider-handle { border-color: none; + 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==); + 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); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAAzFBMVEXZ5ejU4eXM3ODG2NzE1tvB1Nq90deux86sxs2qxcynwsqlwcmjwMihvseevMWdvMSbusOXuMGTtb6IrbiHrLeCqbSBqLN/p7J3oa11oKxzn6tvnKhrmaZqmKVpmKVol6RllaJhk6Bej51djptaiZZZiJVYhpNWg5BUf4xSfYlRfIhPeYRMdYBKcXxFaXNDZnA+X2g9XmY8XGU4VV43VFw2U1s0UFgyTVQxS1IwSVAuR00sREosQ0orQkgqQEYpPkQoPkMoPUMoPUL///8pY4MvAAAARHRSTlP/////////////////////////////////////////////////////////////////////////////////////////AHHSjxIAAAAJcEhZcwAACusAAArrAYKLDVoAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACUSURBVBiVVctXEoJQEETRMaIo5qwF5hwxYOY9ev97EiQ43q+pUz2EYk9n5UElU0rpRO016toO79WhxlVysWqkroRgsswSjAsbnasgpGdsMk25gooZvR3K8CQxCuU9jH8FhZ3022rwJTZ4CK9nnwJBbiO8yVpFKDButm1bOn6iLFyZt5igeZLHOrhgfJ8k/yXTVoLrAxo1P5iCdUg7AAAAAElFTkSuQmCC); } .wp-slider .ui-slider-handle { - /* Slider drag Triangle CSS */ -background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAA8FBMVEU2dZipwNBJl8VGmcX///+EpLlBgqpymrNFjru3ydNWiKs6eZzY4uuRrL08faPL3OZBjLSBqsCTssRHlMJEf59cj657o7xKl8OEqsE9gag2dJtEkb+ct8iZs8BHmMePq8BejKZAiK5llK5FjrlJl8c6dZdGl8avxdBJlcZ4nbc6ep6XrbpKgZ+Lqr5KmcdIkbqsws1Gk8E+f6c4dptaiadFirRKl8V8pblImcNIl8eGpruVscZCh7BMlsdIlcFImchEkbs9eJpCjbdGjbk8fJ84dp02dpo8gatMlsM2dps8faVAg61Ej71Ek75IksFIlcOaLCw7AAAAUHRSTlP/////AP///////////////////////////////////////////////////////////////////////////////////////////////////xB6m5UAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACaSURBVBiVVcxZD8FAGIXhjxzUVktQgqKmo7ZYhkgsiS1tQuj//zeomo736uS5OFSo2W6UXc/R5hxXW5foxDlXqUKZx0GFZpXynuM4kXhjgjgyJkGzQIjpvi9Fx1uQ0iQUh4GkR/Ini0CQ2IfQ24YC4X8T+Mn0zj8lO1IgnqZpzlxE0m4YhrFsKYJVn126UGV+W1wHf4LdpByuF0goFKI7tv/dAAAAAElFTkSuQmCC); + 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.ui-state-hover, diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 7712dd0193..c6a6cc0b59 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -3548,7 +3548,7 @@ table.diff col.content.diffsplit { } table.diff col.diffsplit.middle { - width: 4%; + width: auto; } table.diff col.ltype { @@ -3571,7 +3571,7 @@ table.diff .diff-addedline ins { text-decoration: none; } -#revision-diff-container { +#revisions-diff { position: relative; } @@ -3579,24 +3579,20 @@ table.diff .diff-addedline ins { position: absolute; top: 0; right: 0; - padding-top: 15px; + padding: 9px 9px 0 0; } #loading-status { - position: absolute; - top: 0; - right: 170px; - line-height: 30px; display: none; - margin: 9px 0 0; } #loading-status .spinner { - float: left; + display: inline-block; + float: none; + margin: -4px 0; } #revision-interact { - border-bottom: 1px solid #dfdfdf; padding: 20px 0; } @@ -3613,7 +3609,7 @@ table.diff .diff-addedline ins { float: left; } -#diff-slider{ +#diff-slider { width: 70%; margin: 0 auto; } @@ -3622,6 +3618,19 @@ table.diff .diff-addedline ins { width: 95%; } +#diff-slider .ui-slider-tooltip { + display: none; + position: absolute; + bottom: 20px; + margin-left: -4em; +} + +#diff-slider .ui-state-active .ui-slider-tooltip, +#diff-slider .ui-state-focus .ui-slider-tooltip, +#diff-slider .ui-state-hover .ui-slider-tooltip { + display: block; +} + #diff-title-to strong { display: none; } @@ -3647,6 +3656,11 @@ table.diff .diff-addedline ins { font-size: 13px; } +#diff-header { + -webkit-border-radius: 3px; + border-radius: 3px; +} + .diff-header { height: 35px; line-height: 35px; @@ -3688,8 +3702,6 @@ table.diff .diff-addedline ins { .comparing-two-revisions #diff-title-from, .left-model-loading #loading-status, .right-model-loading #loading-status, -.left-model-loading #loading-status .spinner, -.right-model-loading #loading-status .spinner, .comparing-two-revisions #diff-header-from { display: block; } @@ -3705,31 +3717,26 @@ table.diff .diff-addedline ins { .revision-tick.scope-of-changes-vsmall { width: 1px; - background-color: #aaa; } .revision-tick.scope-of-changes-small { width: 2px; - background-color: #aaa; margin-left: -1px; } .revision-tick.scope-of-changes-med { width: 3px; margin-left: -2px; - background-color: #666; } .revision-tick.scope-of-changes-large { width: 4px; margin-left: -3px; - background-color: #333; } .revision-tick.scope-of-changes-vlarge { margin-left: -3px; width: 4px; - background-color: #111; left: 1; } @@ -3747,7 +3754,8 @@ table.diff .diff-addedline ins { float: none; } -.ui-tooltip-content img { +.ui-tooltip-content img, +.ui-slider-tooltip img { float: left; margin-right: 5px; } @@ -3755,7 +3763,8 @@ table.diff .diff-addedline ins { /* jQuery UI Tooltip 1.10.1 */ -.ui-tooltip { +.ui-tooltip, +.ui-slider-tooltip { padding: 8px; position: absolute; z-index: 9999; @@ -3763,15 +3772,19 @@ table.diff .diff-addedline ins { min-width: 130px; } -body .ui-tooltip { +body .ui-tooltip, +body .ui-slider-tooltip { border-width: 1px; } -.ui-tooltip, .arrow:after { +.ui-tooltip, +.ui-slider-tooltip, +.arrow:after { border: 1px solid #d7d7d7; } -.ui-tooltip { +.ui-tooltip, +.ui-slider-tooltip { padding: 5px 10px; } diff --git a/wp-admin/js/revisions.js b/wp-admin/js/revisions.js index 9513ce1db1..be5ff87140 100644 --- a/wp-admin/js/revisions.js +++ b/wp-admin/js/revisions.js @@ -397,28 +397,7 @@ window.wp = window.wp || {}; }, addTooltip: function( handle, message ) { - handle.attr( 'title', '' ).tooltip({ - track: false, - - position: { - my: "left-30 top-66", - at: "top left", - using: function( position, feedback ) { - $( this ).css( position ); - $( "
" ) - .addClass( "arrow" ) - .addClass( feedback.vertical ) - .addClass( feedback.horizontal ) - .appendTo( $( this ) ); - } - }, - show: false, - hide: false, - content: function() { - return message; - } - - } ); + handle.find( '.ui-slider-tooltip' ).html( message ); }, width: function() { @@ -426,12 +405,16 @@ window.wp = window.wp || {}; }, setWidth: function( width ) { - return $( '#diff-slider' ).width( width ); + $( '#diff-slider' ).width( width ); }, refresh: function( options, slide ) { $( '#diff-slider' ).slider( 'option', options ); + // reset all of the slider tooltips during a refresh, but not on prev/next button actions + if ( ! slide ) + $( 'a.ui-slider-handle' ).html( '' ); + // Triggers the slide event if ( slide ) $( '#diff-slider' ).trigger( 'slide' ); diff --git a/wp-admin/revision.php b/wp-admin/revision.php index 1927da2683..33dd7a6b79 100644 --- a/wp-admin/revision.php +++ b/wp-admin/revision.php @@ -99,12 +99,12 @@ require_once( './admin-header.php' );
-
- -
-

+
+

+
+
@@ -123,22 +123,26 @@ require_once( './admin-header.php' );
-
-
- %1$s %2$s.' , __( 'From:' ), __( 'the current version' ) ); ?> +
+
+
+ %1$s %2$s.' , __( 'From:' ), __( 'the current version' ) ); ?> +
+ +
+ {{{ data.titleFrom }}} +
-
- {{{ data.titleFrom }}} +
+
+ {{{ data.titleTo }}} +
+ +
-
-
- {{{ data.titleTo }}} -
- -
{{{ data.diff }}}