Make WordPress Core

Changeset 24219


Ignore:
Timestamp:
05/09/2013 10:07:26 AM (13 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.