Make WordPress Core

Changeset 24219


Ignore:
Timestamp:
05/09/2013 10:07:26 AM (12 years ago)
Author:
ocean90
Message:

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.

Location:
trunk/wp-admin
Files:
2 added
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/colors-classic.css

    r24174 r24219  
    14651465    background-color: #fdd;
    14661466    text-decoration: line-through;
     1467    border-color: #ffc0c0;
    14671468}
    14681469
     
    14731474table.diff .diff-addedline {
    14741475    background-color: #dfd;
     1476    border-color: #aef9ae;
    14751477}
    14761478
     
    15431545}
    15441546
    1545 .wp-slider .ui-slider-handle.left-handle {
    1546     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==);
    1547 }
    1548 
    1549 .wp-slider .ui-slider-handle.ui-state-active.left-handle {
    1550     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAAzFBMVEXZ5ejU4eXM3ODG2NzE1tvB1Nq90deux86sxs2qxcynwsqlwcmjwMihvseevMWdvMSbusOXuMGTtb6IrbiHrLeCqbSBqLN/p7J3oa11oKxzn6tvnKhrmaZqmKVpmKVol6RllaJhk6Bej51djptaiZZZiJVYhpNWg5BUf4xSfYlRfIhPeYRMdYBKcXxFaXNDZnA+X2g9XmY8XGU4VV43VFw2U1s0UFgyTVQxS1IwSVAuR00sREosQ0orQkgqQEYpPkQoPkMoPUMoPUL///8pY4MvAAAARHRSTlP/////////////////////////////////////////////////////////////////////////////////////////AHHSjxIAAAAJcEhZcwAACusAAArrAYKLDVoAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACUSURBVBiVVctXEoJQEETRMaIo5qwF5hwxYOY9ev97EiQ43q+pUz2EYk9n5UElU0rpRO016toO79WhxlVysWqkroRgsswSjAsbnasgpGdsMk25gooZvR3K8CQxCuU9jH8FhZ3022rwJTZ4CK9nnwJBbiO8yVpFKDButm1bOn6iLFyZt5igeZLHOrhgfJ8k/yXTVoLrAxo1P5iCdUg7AAAAAElFTkSuQmCC);
    1551 }
    1552 
    15531547.wp-slider .ui-slider-handle {
    1554     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAA8FBMVEU2dZipwNBJl8VGmcX///+EpLlBgqpymrNFjru3ydNWiKs6eZzY4uuRrL08faPL3OZBjLSBqsCTssRHlMJEf59cj657o7xKl8OEqsE9gag2dJtEkb+ct8iZs8BHmMePq8BejKZAiK5llK5FjrlJl8c6dZdGl8avxdBJlcZ4nbc6ep6XrbpKgZ+Lqr5KmcdIkbqsws1Gk8E+f6c4dptaiadFirRKl8V8pblImcNIl8eGpruVscZCh7BMlsdIlcFImchEkbs9eJpCjbdGjbk8fJ84dp02dpo8gatMlsM2dps8faVAg61Ej71Ek75IksFIlcOaLCw7AAAAUHRSTlP/////AP///////////////////////////////////////////////////////////////////////////////////////////////////xB6m5UAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACaSURBVBiVVcxZD8FAGIXhjxzUVktQgqKmo7ZYhkgsiS1tQuj//zeomo736uS5OFSo2W6UXc/R5hxXW5foxDlXqUKZx0GFZpXynuM4kXhjgjgyJkGzQIjpvi9Fx1uQ0iQUh4GkR/Ini0CQ2IfQ24YC4X8T+Mn0zj8lO1IgnqZpzlxE0m4YhrFsKYJVn126UGV+W1wHf4LdpByuF0goFKI7tv/dAAAAAElFTkSuQmCC);
     1548    border-color: #ccc;
     1549    border-color: #d0dfe9;
     1550    background: #eff8ff;
     1551    background-image: -webkit-gradient(linear, left bottom, left top, from(#eff8ff), to(#fff));
     1552    background-image: -webkit-linear-gradient(bottom, #eff8ff, #fff);
     1553    background-image:    -moz-linear-gradient(bottom, #eff8ff, #fff);
     1554    background-image:      -o-linear-gradient(bottom, #eff8ff, #fff);
     1555    background-image: linear-gradient(to top, #eff8ff, #fff);
     1556}
     1557
     1558.wp-slider .ui-slider-handle:hover,
     1559.wp-slider .ui-slider-handle:focus {
     1560    border-color: #a0c3d5;
    15551561}
    15561562
    15571563.wp-slider .ui-slider-handle.ui-state-hover,
    15581564.wp-slider .ui-slider-handle.ui-state-focus {
    1559     border-color: none;
     1565    border-color: #a0c3d5;
    15601566    outline: none;
    1561 }
    1562 
    1563 .wp-slider .ui-slider-handle.ui-state-active {
    1564     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAA51BMVEUgZpDkzc0yd6f///8mcqFJm8cjbZZzr80mg78lh8BDk8UngLl+s9AmfKk4hrGeweBaoMhNlMORwt4nd6Zdm8BAjMEnf7RYmsMkb50mhsFWlsYhZ5ImhbwocZg0f61Lk8E9i7twqNBgo8VSmMUofLBcm8o3faUpfK8mh8Aia5MgZpFMmcgpeapDmcJjo8sliMEmh70nhLkkcKAqgLF2sc8sc5ojbZsngrMkh8EnfKw1eaUjbpkkapImeKQgaJAohb0mh8MmhcMng7kkcKEpf68iZ48haJMmhb8kicEmc6MibJkia5UnhLsw1mWvAAAATXRSTlP/AP8A/////////////////////////////////////////////////////////////////////////////////////////////////9/iR18AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACaSURBVBiVVc15D8FAEIfh+Ymj6761LIrSiCNVVyjbRGgifP/PQ6q22/evyZPJDNXzD6G0qNDq5PtO3DJDFyfRpk+po2Eo0h5Qx9U0LRa3SejdlR2rDMLI41yKh6/AtOSzUiuU4kvemSMUDBsRXGuRIHj/CvCXyTNcSXelQBQYY1uBWMY651xfK4KzbdgzqJI73LK7hGC6r0bTB5apIhqIH/YIAAAAAElFTkSuQmCC);
    15651567}
    15661568
  • trunk/wp-admin/css/colors-fresh.css

    r24174 r24219  
    13591359    background-color: #fdd;
    13601360    text-decoration: line-through;
     1361    border-color: #ffc0c0;
    13611362}
    13621363
     
    13671368table.diff .diff-addedline {
    13681369    background-color: #dfd;
     1370    border-color: #aef9ae;
    13691371}
    13701372
     
    13851387#diff-title-to strong {
    13861388    color: #08a;
    1387 }
    1388 
    1389 .diff-header {
    1390     background-color: #f7f7f7;
    13911389}
    13921390
     
    14371435
    14381436.wp-slider .ui-slider-handle {
    1439     border-color: none;
     1437    border-color: #ccc;
     1438    border-radius: 50%;
     1439    background: #f4f4f4;
     1440    background-image: -webkit-gradient(linear, left bottom, left top, from(#dfdfdf), to(#fff));
     1441    background-image: -webkit-linear-gradient(bottom, #dfdfdf, #fff);
     1442    background-image:    -moz-linear-gradient(bottom, #dfdfdf, #fff);
     1443    background-image:      -o-linear-gradient(bottom, #dfdfdf, #fff);
     1444    background-image: linear-gradient(to top, #dfdfdf, #fff);
    14401445    color: #333;
    14411446}
    14421447
    1443 .wp-slider .ui-slider-handle.left-handle {
    1444     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==);
    1445 }
    1446 
    1447 .wp-slider .ui-slider-handle.ui-state-active.left-handle {
    1448     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAAzFBMVEXZ5ejU4eXM3ODG2NzE1tvB1Nq90deux86sxs2qxcynwsqlwcmjwMihvseevMWdvMSbusOXuMGTtb6IrbiHrLeCqbSBqLN/p7J3oa11oKxzn6tvnKhrmaZqmKVpmKVol6RllaJhk6Bej51djptaiZZZiJVYhpNWg5BUf4xSfYlRfIhPeYRMdYBKcXxFaXNDZnA+X2g9XmY8XGU4VV43VFw2U1s0UFgyTVQxS1IwSVAuR00sREosQ0orQkgqQEYpPkQoPkMoPUMoPUL///8pY4MvAAAARHRSTlP/////////////////////////////////////////////////////////////////////////////////////////AHHSjxIAAAAJcEhZcwAACusAAArrAYKLDVoAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACUSURBVBiVVctXEoJQEETRMaIo5qwF5hwxYOY9ev97EiQ43q+pUz2EYk9n5UElU0rpRO016toO79WhxlVysWqkroRgsswSjAsbnasgpGdsMk25gooZvR3K8CQxCuU9jH8FhZ3022rwJTZ4CK9nnwJBbiO8yVpFKDButm1bOn6iLFyZt5igeZLHOrhgfJ8k/yXTVoLrAxo1P5iCdUg7AAAAAElFTkSuQmCC);
    1449 }
    1450 
    1451 .wp-slider .ui-slider-handle {
    1452     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAA8FBMVEU2dZipwNBJl8VGmcX///+EpLlBgqpymrNFjru3ydNWiKs6eZzY4uuRrL08faPL3OZBjLSBqsCTssRHlMJEf59cj657o7xKl8OEqsE9gag2dJtEkb+ct8iZs8BHmMePq8BejKZAiK5llK5FjrlJl8c6dZdGl8avxdBJlcZ4nbc6ep6XrbpKgZ+Lqr5KmcdIkbqsws1Gk8E+f6c4dptaiadFirRKl8V8pblImcNIl8eGpruVscZCh7BMlsdIlcFImchEkbs9eJpCjbdGjbk8fJ84dp02dpo8gatMlsM2dps8faVAg61Ej71Ek75IksFIlcOaLCw7AAAAUHRSTlP/////AP///////////////////////////////////////////////////////////////////////////////////////////////////xB6m5UAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACaSURBVBiVVcxZD8FAGIXhjxzUVktQgqKmo7ZYhkgsiS1tQuj//zeomo736uS5OFSo2W6UXc/R5hxXW5foxDlXqUKZx0GFZpXynuM4kXhjgjgyJkGzQIjpvi9Fx1uQ0iQUh4GkR/Ini0CQ2IfQ24YC4X8T+Mn0zj8lO1IgnqZpzlxE0m4YhrFsKYJVn126UGV+W1wHf4LdpByuF0goFKI7tv/dAAAAAElFTkSuQmCC);
     1448.wp-slider .ui-slider-handle:hover,
     1449.wp-slider .ui-slider-handle:focus {
     1450    border-color: #aaa;
    14531451}
    14541452
    14551453.wp-slider .ui-slider-handle.ui-state-hover,
    14561454.wp-slider .ui-slider-handle.ui-state-focus {
    1457     border-color: none;
     1455    border-color: #aaa;
    14581456    outline: none;
    1459 }
    1460 
    1461 .wp-slider .ui-slider-handle.ui-state-active {
    1462     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAA3NCSVQICAjb4U/gAAAA51BMVEUgZpDkzc0yd6f///8mcqFJm8cjbZZzr80mg78lh8BDk8UngLl+s9AmfKk4hrGeweBaoMhNlMORwt4nd6Zdm8BAjMEnf7RYmsMkb50mhsFWlsYhZ5ImhbwocZg0f61Lk8E9i7twqNBgo8VSmMUofLBcm8o3faUpfK8mh8Aia5MgZpFMmcgpeapDmcJjo8sliMEmh70nhLkkcKAqgLF2sc8sc5ojbZsngrMkh8EnfKw1eaUjbpkkapImeKQgaJAohb0mh8MmhcMng7kkcKEpf68iZ48haJMmhb8kicEmc6MibJkia5UnhLsw1mWvAAAATXRSTlP/AP8A/////////////////////////////////////////////////////////////////////////////////////////////////9/iR18AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy85LzEzrdD8jAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAACaSURBVBiVVc15D8FAEIfh+Ymj6761LIrSiCNVVyjbRGgifP/PQ6q22/evyZPJDNXzD6G0qNDq5PtO3DJDFyfRpk+po2Eo0h5Qx9U0LRa3SejdlR2rDMLI41yKh6/AtOSzUiuU4kvemSMUDBsRXGuRIHj/CvCXyTNcSXelQBQYY1uBWMY651xfK4KzbdgzqJI73LK7hGC6r0bTB5apIhqIH/YIAAAAAElFTkSuQmCC);
    14631457}
    14641458
  • trunk/wp-admin/css/wp-admin-rtl.css

    r24205 r24219  
    956956------------------------------------------------------------------------------*/
    957957
     958#diff-slider .ui-slider-tooltip,
     959#diff-slider-ticks .ui-slider-tooltip {
     960    margin-left: 0;
     961    margin-right: -78px;
     962}
     963
     964.wp-slider .ui-slider-handle.left-handle:before,
     965.wp-slider .ui-slider-handle.right-handle:before {
     966    height: 8px;
     967    width: 7px;
     968}
     969.wp-slider .ui-slider-handle.left-handle:before {
     970    background-position: -5px -10px;
     971    left: 6px;
     972}
     973.wp-slider .ui-slider-handle.right-handle:before {
     974    background-position: -4px -29px;
     975    left: 6px;
     976}
     977
    958978#toggle-revision-compare-mode {
    959979    right: auto;
    960980    left: 0;
    961981    padding: 9px 0 0 9px;
    962 
    963 }
    964 
     982}
    965983
    966984#diff-next-revision {
     
    970988#diff-previous-revision {
    971989    float: right;
     990}
     991
     992#diff-header {
     993    padding: 5px 5px 5px 200px;
    972994}
    973995
     
    9811003    margin-right: 0;
    9821004    margin-left: 5px;
     1005}
     1006
     1007.diff-title img {
     1008    margin-left: 0;
     1009    margin-right: 5px;
    9831010}
    9841011
     
    27242751        background: transparent url('../images/resize-rtl-2x.gif') no-repeat scroll left bottom;
    27252752    }
     2753
     2754    .wp-slider .ui-slider-handle:before {
     2755        background-image: url(../images/arrows-pr-2x.png);
     2756        background-size: 16px 102px;
     2757    }
     2758
    27262759}
    27272760
  • trunk/wp-admin/css/wp-admin.css

    r24205 r24219  
    35653565    padding: .5em;
    35663566    font-family: Consolas, Monaco, monospace;
    3567     border: none;
     3567    border-radius: 3px;
     3568}
     3569
     3570table.diff .diff-deletedline,
     3571table.diff .diff-addedline {
     3572    border-width: 1px;
     3573    border-style: solid;
    35683574}
    35693575
     
    36543660    -webkit-border-radius: 3px;
    36553661    border-radius: 3px;
     3662    padding: 5px 200px 5px 5px;
    36563663}
    36573664
    36583665.diff-header {
    3659     height: 35px;
     3666    min-height: 35px;
    36603667    line-height: 35px;
    36613668}
     
    38563863    position: absolute;
    38573864    z-index: 2;
    3858     width: 17px;
    3859     height: 17px;
    3860     border: none;
     3865    margin-top: -3px;
     3866    width: 19px;
     3867    height: 19px;
     3868    border-width: 1px;
     3869    border-style: solid;
     3870    border-radius: 50%;
     3871}
     3872
     3873.wp-slider .ui-slider-handle:before {
     3874    content: "";
     3875    position: absolute;
     3876    top: 6px;
     3877    left: 4px;
     3878    height: 8px;
     3879    width: 12px;
     3880    background: url(../images/arrows-pr.png) no-repeat -2px -47px;
     3881}
     3882
     3883.wp-slider .ui-slider-handle.left-handle:before,
     3884.wp-slider .ui-slider-handle.right-handle:before {
     3885    height: 8px;
     3886    width: 7px;
     3887}
     3888
     3889.wp-slider .ui-slider-handle.left-handle:before {
     3890    background-position: -5px -84px;
     3891    left: 7px;
     3892}
     3893
     3894.wp-slider .ui-slider-handle.right-handle:before {
     3895    background-position: -4px -65px;
     3896    left: 5px;
    38613897}
    38623898
     
    95869622        background-image: url(../images/wpspin_light-2x.gif);
    95879623    }
     9624
     9625    .wp-slider .ui-slider-handle:before {
     9626        background-image: url(../images/arrows-pr-2x.png);
     9627        background-size: 16px 102px;
     9628    }
     9629
    95889630}
    95899631
  • trunk/wp-admin/revision.php

    r24174 r24219  
    9393$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>';
    9494$revisions_overview .= '<p>' . __( 'From this screen you can review, compare, and restore revisions:' ) . '</p>';
    95 $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>';
     95$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>';
    9696$revisions_overview .= '<li>' . __( 'Compare two different revisions by <strong>selecting the &#8220;Compare two revisions&#8221; box</strong> to the side.' ) . '</li>';
    9797$revisions_overview .= '<li>' . __( 'To restore a revision, <strong>click Restore This Revision</strong>.' ) . '</li></ul>';
     
    145145                <strong><?php _ex( 'From:', 'Followed by post revision info' ); ?></strong> {{{ data.titleFrom }}}
    146146            </div>
     147            <div class="clear"></div>
    147148        </div>
    148149
     
    153154
    154155            <input type="button" id="restore-revision" class="button button-primary" data-restore-link="{{{ data.restoreLink }}}" value="<?php esc_attr_e( 'Restore This Revision' )?>" />
     156            <div class="clear"></div>
    155157        </div>
    156158    </div>
Note: See TracChangeset for help on using the changeset viewer.