Ticket #4495: 4495.diff
File 4495.diff, 10.4 KB (added by , 5 years ago) |
---|
-
wordpress.org/public_html/style/trac/wp-trac.css
697 697 top: auto; 698 698 left: auto; 699 699 } 700 /* hide focus while clicking the buttons, pending better focus styles */ 701 button:focus:active, 702 input[type=button]:focus:active, 703 input[type=submit]:focus:active, 704 input[type=reset]:focus:active { 705 outline: none; 706 } 700 707 input[type=text], input.textwidget, textarea { 701 708 -webkit-border-radius: 3px; 702 709 border-radius: 3px; … … 1026 1033 #propertyform[action*="/newticket"] #properties legend { 1027 1034 display: none; 1028 1035 } 1036 .core-focuses-legend { 1037 display: block !important; 1038 color: inherit; 1039 margin: 0 0 6px; 1040 padding: 0; 1041 font-size: inherit; 1042 font-weight: normal; 1043 transform: translateY(-2px); 1044 } 1045 #fieldset-focuses, 1029 1046 #propertyform[action*="/newticket"] fieldset { 1030 1047 padding: 0; 1031 1048 border: none; … … 1035 1052 display: none; 1036 1053 } 1037 1054 #propertyform[action*="/newticket"] #properties table.trac-properties > tbody > tr > td#focuses { 1038 padding-left: 0;1055 padding-left: 58px; 1039 1056 } 1040 1057 #propertyform > p, 1041 1058 #propertyform > .buttons { … … 1451 1468 #keyword-bin span[title] { 1452 1469 cursor: help; 1453 1470 } 1454 #keyword-bin span a{1471 #keyword-bin .keyword-button-remove { 1455 1472 margin: 1px 0 0 -15px; 1473 padding: 0; 1456 1474 cursor: pointer; 1457 1475 width: 15px; 1458 1476 height: 15px; … … 1466 1484 background: none; 1467 1485 color: #999; 1468 1486 } 1469 #keyword-bin span a:hover { 1487 #keyword-bin .keyword-button-remove:hover, 1488 #keyword-bin .keyword-button-remove:focus { 1470 1489 color: #c00; 1471 1490 } 1472 1491 #edit-keywords { 1473 1492 cursor: pointer; 1474 font-size: 8px; 1475 color: #999; 1476 margin: 6px 6px 0 6px; 1493 font-size: 13px; 1494 color: inherit; 1495 margin: 2px 0; 1496 border-radius: 3px; 1497 vertical-align: middle; 1498 background: #f7f7f7; 1499 border: 1px solid #ccc; 1500 box-shadow: 0 1px 0 #ccc; 1501 color: #555; 1502 box-shadow: none; 1477 1503 } 1504 #edit-keywords:hover, 1505 #edit-keywords:focus { 1506 background: #fafafa; 1507 color: #23282d; 1508 border-color: #999; 1509 } 1510 /* hide focus when moved programmatically, pending better focus styles */ 1511 #edit-keywords.hide-programmatic-focus:focus { 1512 outline: none; 1513 } 1478 1514 .has-js #field-keywords { 1479 1515 width: 92%; 1480 1516 display: none; … … 1483 1519 } 1484 1520 #keyword-label { 1485 1521 float: left; 1486 padding: 5px 6px 5px 0;1522 padding: 2px 0.4em 2px 0.1em; /* emulates table cell padding */ 1487 1523 text-align: right; 1524 white-space: nowrap; 1488 1525 } 1526 #keyword-add { 1527 margin-left: calc( 2px + .3em ); /* emulates table cell padding */ 1528 margin-right: 6px; 1529 } 1489 1530 1490 1531 /* =Focuses */ 1491 1532 body.core #reportfilters { … … 1495 1536 display: none; 1496 1537 } 1497 1538 #properties table.trac-properties > tbody > tr > td#focuses { 1498 padding: .6em 0 .3em 60px; 1499 height: 66px; 1539 padding: .6em 0 .3em 52px; 1500 1540 } 1501 1541 #focuses span { 1502 1542 float: left; … … 1510 1550 } 1511 1551 #focuses li { 1512 1552 font-size: 12px; 1513 display: inline-block;1514 1553 float: left; 1515 margin: 0 0 6px 6px; 1516 -webkit-border-radius: 3px; 1517 border-radius: 3px; 1518 background: #eee; 1519 color: #aaa; 1554 margin: 0 6px 6px 0; 1520 1555 } 1521 #focuses a{1556 #focuses .core-focuses-button { 1522 1557 display: inline-block; 1558 margin: 0; 1523 1559 padding: 4px 7px; 1524 1560 color: inherit; 1525 -webkit-border-radius: 3px;1561 border: 1px solid #ccc; 1526 1562 border-radius: 3px; 1527 background: inherit; 1528 text-decoration: none; 1529 border-bottom: none; 1530 } 1531 #focuses li:hover, 1532 #focuses a:focus { 1533 color: #000; 1563 background: #eee; 1534 1564 cursor: pointer; 1535 1565 } 1536 #focuses li.active, 1537 #focuses li.active a:focus { 1566 #focuses .core-focuses-button:hover, 1567 #focuses .core-focuses-button:focus { 1568 background: #fafafa; 1569 color: #23282d; 1570 border-color: #999; 1571 } 1572 #focuses li.active .core-focuses-button, 1573 #focuses li.active .core-focuses-button:focus { 1538 1574 background: #666; 1539 1575 color: #fff; 1576 border-color: #666; 1540 1577 } 1541 1578 1542 1579 /* -
wordpress.org/public_html/style/trac/wp-trac.js
923 923 924 924 return { 925 925 init: function() { 926 elements.hiddenEl = $('#field-keywords'); 926 elements.hiddenEl = $( '#field-keywords' ).attr( 'aria-label', 'Manual keywords' ); 927 927 928 if ( ! elements.hiddenEl.length ) { 928 929 return; 929 930 } 930 931 932 // Attach change event handler on the field-keywords input. 933 elements.hiddenEl.change( wpTrac.workflow.populate ); 934 931 935 // Designed so the list could have come from another file. 932 936 if ( typeof coreKeywordList === 'undefined' ) { 933 937 return; … … 946 950 elements.hiddenEl.parents('form').submit( wpTrac.workflow.submit ); 947 951 948 952 // Keyword removal. 949 elements.bin.on( 'click', 'a', function(e) { 950 e.preventDefault(); 953 elements.bin.on( 'click', '.keyword-button-remove', function() { 951 954 wpTrac.workflow.removeKeyword( $(this).parent() ); 955 // Move focus to the Manual keyword button to avoid focus loss on keyword removal. 956 $( '#edit-keywords' ) 957 .addClass( 'hide-programmatic-focus' ) 958 .focus() 959 .on( 'blur', function() { 960 $( this ).removeClass( 'hide-programmatic-focus' ); 961 } ); 952 962 }); 953 963 954 964 // Keyword adds. … … 965 975 $(this).val(''); 966 976 }); 967 977 968 // Manual link.978 // Manual keyword button. 969 979 $('#edit-keywords').click( function() { 980 if ( elements.hiddenEl.is( ':visible' ) ) { 981 elements.hiddenEl.hide(); 982 $( this ).attr( 'aria-expanded', 'false' ); 983 return; 984 } 985 986 $( this ).attr( 'aria-expanded', 'true' ); 970 987 elements.hiddenEl.show().focus(); 971 $(this).hide();972 elements.hiddenEl.change( wpTrac.workflow.populate );973 988 }); 989 990 // Handle keyboard interaction on the field-keywords field. 991 $( '#field-keywords' ).on( 'keydown', function( event ) { 992 // When pressing Enter or Escape. 993 if ( event.which === 13 || event.which === 27 ) { 994 // Prevent form submission. 995 event.preventDefault(); 996 // Hide the input field and populate the keywords. 997 elements.hiddenEl.hide(); 998 /* 999 * Move focus back to the Manual keyword button. 1000 * This blurs the field and triggers the `change` 1001 * event thus the keywords are populated. 1002 */ 1003 $( '#edit-keywords' ) 1004 .attr( 'aria-expanded', 'false' ) 1005 .focus(); 1006 } 1007 } ); 974 1008 }, 975 1009 976 1010 // Generates the workflow template. … … 977 1011 template : function() { 978 1012 var container = elements.hiddenEl.parent(), html, labelWidth; 979 1013 980 // Necessary to keep everything in line. The + 4 is a careful CSS balance.981 labelWidth = container.prev().width() + 4;1014 // Necessary to keep everything in line. 1015 labelWidth = container.prev().width(); 982 1016 983 1017 // Rearrange the table to suit our needs. 984 1018 container.prev().detach().end() … … 989 1023 $('#field-owner').parents('tr').hide(); 990 1024 991 1025 html = '<div><label id="keyword-label" for="keyword-add" style="width:' + labelWidth + 'px">Workflow Keywords:</label>'; 992 html += '<select id="keyword-add"><option value=""> - Add - </option></select> <a id="edit-keywords">manual</a></div>'; 1026 html += '<select id="keyword-add"><option value=""> - Add - </option></select>'; 1027 html += '<button type="button" id="edit-keywords" aria-label="Manual keyword" aria-expanded="false">Manual</button></div>'; 993 1028 html += '<div id="keyword-bin"></div>'; 994 1029 container.prepend( html ); 995 1030 elements.bin = $('#keyword-bin'); … … 1011 1046 // If we have a non-empty keyword, let's go through the process of adding the spans. 1012 1047 if ( 1 !== keywords.length || keywords[0] !== '' ) { 1013 1048 $.each( keywords, function( k, v ) { 1014 var html = $( '<span />').text(v).attr('data-keyword', v).prepend('<a class="dashicons dashicons-dismiss" href="#" />');1049 var html = $( '<span />' ).text( v ).attr( 'data-keyword', v ).prepend( '<button type="button" aria-label="Remove ' + v +' keyword" class="keyword-button-remove dashicons dashicons-dismiss" />' ); 1015 1050 if ( v in coreKeywordList ) { 1016 1051 html.attr('title', coreKeywordList[v]); 1017 1052 } … … 1086 1121 } 1087 1122 1088 1123 // Add it to the bin, and refresh the hidden input. 1089 html = $( '<span />').text(keyword).attr('data-keyword', keyword).prepend('<a class="dashicons dashicons-dismiss" href="#" />');1124 html = $( '<span />' ).text( keyword ).attr( 'data-keyword', keyword ).prepend( '<button type="button" aria-label="Remove ' + keyword +' keyword" class="keyword-button-remove dashicons dashicons-dismiss" />' ); 1090 1125 if ( title ) { 1091 1126 html.attr('title', title); 1092 1127 } … … 1171 1206 originalFocuses = $.merge( [], focuses ); 1172 1207 1173 1208 container = $( '#focuses' ); 1174 container.append( '<span>Focuses:</span>' ); 1209 1175 1210 ul = $( '<ul />' ); 1176 1211 $.each( coreFocusesList, function( focus, description ) { 1212 var ariaPressed = 'false'; 1177 1213 classes = focus.replace( ' ', '-' ); 1178 1214 if ( -1 !== $.inArray( focus, focuses ) ) { 1179 1215 classes += ' active'; 1216 ariaPressed = 'true'; 1180 1217 } 1181 1218 ul.append( $( '<li />', { 1182 1219 'data-focus' : focus, 1183 1220 title: description, 1184 1221 class: classes 1185 } ).html( '< a href="#">' + ( focus === 'administration' ? 'admin' : focus ) + '</a>' ) );1222 } ).html( '<button type="button" class="core-focuses-button" aria-pressed="' + ariaPressed + '">' + ( focus === 'administration' ? 'admin' : focus ) + '</a>' ) ); 1186 1223 }); 1187 1224 ul.appendTo( container ); 1225 ul.wrap( '<fieldset id="fieldset-focuses" />' ); 1226 ul.before( '<legend class="core-focuses-legend">Focuses:</legend>' ); 1188 1227 1189 container.on( 'click', ' a', addRemove );1228 container.on( 'click', '.core-focuses-button', addRemove ); 1190 1229 container.closest( 'form' ).on( 'submit', submit ); 1191 1230 $( '#field-component' ).on( 'change', componentSync ); 1192 1231 } … … 1198 1237 } else { 1199 1238 add( focus ); 1200 1239 } 1201 return false;1202 1240 } 1203 1241 1204 1242 function add( focus ) { … … 1206 1244 focus = container.find( 'li.' + focus ); 1207 1245 } 1208 1246 focus.addClass( 'active' ); 1247 focus.find( '.core-focuses-button' ).attr( 'aria-pressed', 'true' ); 1209 1248 focuses.push( focus.data( 'focus' ) ); 1210 1249 updateField(); 1211 1250 } … … 1215 1254 focus = container.find( 'li.' + focus ); 1216 1255 } 1217 1256 focus.removeClass( 'active' ); 1257 focus.find( '.core-focuses-button' ).attr( 'aria-pressed', 'false' ); 1218 1258 var remove = focus.data( 'focus' ); 1219 1259 focuses = $.grep( focuses, function( value ) { 1220 1260 return value !== remove;