Ticket #49288: 49288.6.diff
File 49288.6.diff, 11.4 KB (added by , 4 years ago) |
---|
-
src/js/_enqueues/admin/postbox.js
7 7 * @output wp-admin/js/postbox.js 8 8 */ 9 9 10 /* global ajaxurl, post BoxL10n, postboxes */10 /* global ajaxurl, postboxes */ 11 11 12 12 (function($) { 13 var $document = $( document ); 13 var $document = $( document ), 14 __ = wp.i18n.__; 14 15 15 16 /** 16 17 * This object contains all function to handle the behaviour of the post boxes. The post boxes are the boxes you see … … 235 236 .end(); 236 237 }, 237 238 opacity: 0.65, 239 start: function() { 240 $( 'body' ).addClass( 'is-dragging-metaboxes' ); 241 }, 238 242 stop: function() { 239 243 var $el = $( this ); 240 244 245 $( 'body' ).removeClass( 'is-dragging-metaboxes' ); 246 241 247 if ( $el.find( '#dashboard_browser_nag' ).is( ':visible' ) && 'dashboard_browser_nag' != this.firstChild.id ) { 242 248 $el.sortable('cancel'); 243 249 return; 244 250 } 245 246 251 postboxes.save_order(page); 247 252 }, 248 253 receive: function(e,ui) { … … 345 350 * @return {void} 346 351 */ 347 352 _mark_area : function() { 348 var visible = $('div.postbox:visible').length, side = $('#post-body #side-sortables'); 353 var visibleSortables = $( '#dashboard-widgets .meta-box-sortables:visible, #post-body .meta-box-sortables:visible' ), 354 areAllVisibleSortablesEmpty = true; 349 355 350 $( '#dashboard-widgets .meta-box-sortables:visible' ).each( function() {356 visibleSortables.each( function() { 351 357 var t = $(this); 352 358 353 if ( visible == 1 ||t.children('.postbox:visible').length ) {359 if ( t.children('.postbox:visible').length ) { 354 360 t.removeClass('empty-container'); 361 areAllVisibleSortablesEmpty = false; 355 362 } 356 363 else { 357 364 t.addClass('empty-container'); 358 t.attr('data-emptyString', postBoxL10n.postBoxEmptyString);359 365 } 360 366 }); 361 367 362 if ( side.length ) { 363 if ( side.children('.postbox:visible').length ) 364 side.removeClass('empty-container'); 365 else if ( $('#postbox-container-1').css('width') == '280px' ) 366 side.addClass('empty-container'); 368 postboxes.updateEmptySortablesText( visibleSortables, areAllVisibleSortablesEmpty ); 369 }, 370 371 /** 372 * Updates the text for the empty sortable areas on the Dashboard. 373 * 374 * @since 5.5.0 375 * 376 * @return {void} 377 */ 378 updateEmptySortablesText: function( visibleSortables, areAllVisibleSortablesEmpty ) { 379 var isDashboard = $( '#dashboard-widgets' ).length, 380 emptySortableText = areAllVisibleSortablesEmpty ? __( 'Add boxes from the Screen Options menu' ) : __( 'Drag boxes here' ); 381 382 if ( ! isDashboard ) { 383 return; 367 384 } 385 386 visibleSortables.each( function() { 387 if ( $( this ).hasClass( 'empty-container' ) ) { 388 $( this ).attr( 'data-emptyString', emptySortableText ); 389 } 390 } ); 368 391 }, 369 392 370 393 /** -
src/wp-admin/css/common.css
29 29 overflow: visible; 30 30 } 31 31 32 /* inner 2 column liquid layout */33 34 .inner-sidebar {35 float: right;36 clear: right;37 display: none;38 width: 281px;39 position: relative;40 }41 42 .columns-2 .inner-sidebar {43 margin-right: auto;44 width: 286px;45 display: block;46 }47 48 .inner-sidebar #side-sortables,49 .columns-2 .inner-sidebar #side-sortables {50 min-height: 300px;51 width: 280px;52 padding: 0;53 }54 55 .has-right-sidebar .inner-sidebar {56 display: block;57 }58 59 .has-right-sidebar #post-body {60 float: left;61 clear: left;62 width: 100%;63 margin-right: -2000px;64 }65 66 .has-right-sidebar #post-body-content {67 margin-right: 300px;68 float: none;69 width: auto;70 }71 72 32 /* 2 columns main area */ 73 33 74 34 #col-left { … … 1971 1931 } 1972 1932 1973 1933 .metabox-holder .postbox-container .empty-container { 1974 border: 3px dashed #b4b9be;1934 outline: 3px dashed #b4b9be; 1975 1935 height: 250px; 1976 1936 position: relative; 1977 1937 } 1978 1938 1979 .metabox-holder .postbox-container .empty-container:after {1980 content: attr(data-emptystring);1981 margin: auto;1982 position: absolute;1983 top: 0;1984 left: 0;1985 bottom: 0;1986 right: 0;1987 height: 1em;1988 width: 200px;1989 text-align: center;1990 color: #ccc;1991 font-size: 18px;1992 display: none;1993 }1994 1995 .metabox-holder.columns-1 .postbox-container .empty-container,1996 .columns-2 #postbox-container-3 .empty-container,1997 .columns-2 #postbox-container-4 .empty-container,1998 .columns-3 #postbox-container-4 .empty-container {1999 border: 0 none;2000 height: 0;2001 min-height: 0;2002 }2003 2004 1939 #post-body-content { 2005 1940 width: 100%; 2006 1941 min-width: 463px; … … 2020 1955 /* one column on the dash */ 2021 1956 @media only screen and (max-width: 799px) { 2022 1957 #wpbody-content .metabox-holder .postbox-container .empty-container { 2023 border: 0none;1958 outline: none; 2024 1959 height: 0; 2025 1960 min-height: 0; 2026 1961 } -
src/wp-admin/css/dashboard.css
48 48 } 49 49 50 50 #dashboard-widgets .meta-box-sortables { 51 margin: 0 8px;51 /* Required min-height to make the jQuery UI Sortable drop zone work. */ 52 52 min-height: 100px; 53 margin: 0 8px 20px; 53 54 } 54 55 56 /* Only highlight drop zones when dragging and only in the 2 columns layout. */ 57 .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables { 58 outline: 3px dashed #606a73; 59 /* Prevent margin on the child from collapsing with margin on the parent. */ 60 display: flow-root; 61 } 62 63 #dashboard-widgets .postbox-container .empty-container:after { 64 content: attr(data-emptystring); 65 margin: auto; 66 position: absolute; 67 top: 50%; 68 left: 0; 69 right: 0; 70 transform: translateY( -50% ); 71 padding: 0 2em; 72 text-align: center; 73 color: #606a73; 74 font-size: 16px; 75 line-height: 1.5; 76 display: none; 77 } 78 79 55 80 /* @todo: this was originally in this section, but likely belongs elsewhere */ 56 81 #the-comment-list td.comment p.comment-author { 57 82 margin-top: 0; … … 1078 1103 #wpbody-content #dashboard-widgets .postbox-container { 1079 1104 width: 100%; 1080 1105 } 1106 1107 #dashboard-widgets .meta-box-sortables { 1108 min-height: 0; 1109 } 1110 1111 .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables { 1112 min-height: 100px; 1113 } 1114 1115 #dashboard-widgets .meta-box-sortables.empty-container { 1116 margin-bottom: 0; 1117 } 1081 1118 } 1082 1119 1083 1120 /* two columns on the dash, but keep the setting if one is selected */ … … 1095 1132 1096 1133 #dashboard-widgets #postbox-container-3 .empty-container, 1097 1134 #dashboard-widgets #postbox-container-4 .empty-container { 1098 border: 0none;1135 outline: none; 1099 1136 height: 0; 1100 1137 min-height: 0; 1138 margin-bottom: 0; 1101 1139 } 1102 1140 1103 1141 #dashboard-widgets #postbox-container-3 .empty-container:after, … … 1109 1147 width: 100%; 1110 1148 } 1111 1149 1112 #wpbody # wpbody-content.metabox-holder.columns-1 .postbox-container .empty-container {1113 border: 0none;1150 #wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container { 1151 outline: none; 1114 1152 height: 0; 1115 1153 min-height: 0; 1154 margin-bottom: 0; 1116 1155 } 1117 1156 1118 1157 /* show the radio buttons for column prefs only for one or two columns */ … … 1126 1165 display: none; 1127 1166 } 1128 1167 1129 .metabox-holder.postbox-container .empty-container:after {1168 #dashboard-widgets .postbox-container .empty-container:after { 1130 1169 display: block; 1131 1170 } 1132 1171 } … … 1147 1186 } 1148 1187 1149 1188 #dashboard-widgets #postbox-container-4 .empty-container { 1150 border: 0none;1189 outline: none; 1151 1190 height: 0; 1152 1191 min-height: 0; 1192 margin-bottom: 0; 1153 1193 } 1154 1194 1155 1195 #dashboard-widgets #postbox-container-4 .empty-container:after { … … 1156 1196 display: none; 1157 1197 } 1158 1198 1159 .metabox-holder.postbox-container .empty-container:after {1199 #dashboard-widgets .postbox-container .empty-container:after { 1160 1200 display: block; 1161 1201 } 1162 1202 } 1163 1203 1204 /* Always show the "Drag boxes here" CSS generated content on large screens. */ 1205 @media only screen and (min-width: 1801px) { 1206 #dashboard-widgets .postbox-container .empty-container:after { 1207 display: block; 1208 } 1209 } 1210 1164 1211 @media screen and (max-width: 870px) { 1165 1212 .welcome-panel .welcome-panel-column, 1166 1213 .welcome-panel .welcome-panel-column:first-child { -
src/wp-admin/css/edit.css
147 147 } 148 148 149 149 /* Post Screen */ 150 #post-body #normal-sortables { 151 min-height: 50px; 150 151 /* Only target the sortables in the post screen excluding the ones in the Dashboard. */ 152 #post-body .meta-box-sortables { 153 /* Required min-height to make the jQuery UI Sortable drop zone work. */ 154 min-height: 1px; 152 155 } 153 156 157 /* Resets height and outline inherited from common.css. */ 158 #post-body.columns-1 #side-sortables.empty-container, 159 #post-body #normal-sortables.empty-container, 160 #post-body #advanced-sortables.empty-container { 161 height: auto; 162 outline: none; 163 } 164 165 /* Only highlight drop zones when dragging and only in the 2 columns layout. */ 166 .is-dragging-metaboxes #post-body.columns-2 #side-sortables, 167 .is-dragging-metaboxes #post-body #normal-sortables, 168 .is-dragging-metaboxes #post-body #advanced-sortables { 169 outline: 3px dashed #606a73; 170 /* Prevent margin on the child from collapsing with margin on the parent. */ 171 display: flow-root; 172 /* 173 * This min-height is meant to limit jumpiness while dragging. It's equivalent 174 * to the minimum height of the sortable-placeholder which is given by the height 175 * of a collapsed post box (36px + 1px top and bottom borders) + the placeholder 176 * bottom margin (20px) + 2 additional pixels to compensate browsers rounding. 177 */ 178 min-height: 60px; 179 margin-bottom: 20px; 180 } 181 154 182 .postbox { 155 183 position: relative; 156 184 min-width: 255px; … … 1453 1481 } 1454 1482 } 1455 1483 1456 /* one column on the attachment editor screen */ 1484 /* 1485 * The edit attachment screen auto-switches to one column layout when the 1486 * viewport is smaller than 1200 pixels. 1487 */ 1457 1488 @media only screen and (max-width: 1200px) { 1458 1489 .post-type-attachment #poststuff { 1459 1490 min-width: 0; … … 1470 1501 1471 1502 .post-type-attachment #poststuff #postbox-container-1 .empty-container, 1472 1503 .post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty { 1473 border: 0none;1504 outline: none; 1474 1505 height: 0; 1475 1506 min-height: 0; 1476 1507 } … … 1480 1511 width: auto; 1481 1512 } 1482 1513 1514 .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables { 1515 outline: none; 1516 min-height: 0; 1517 margin-bottom: 0; 1518 } 1519 1483 1520 /* hide the radio buttons for column prefs */ 1484 1521 .post-type-attachment .screen-layout, 1485 1522 .post-type-attachment .columns-prefs { … … 1504 1541 1505 1542 #poststuff #postbox-container-1 .empty-container, 1506 1543 #poststuff #postbox-container-1 #side-sortables:empty { 1507 border: 0none;1544 outline: none; 1508 1545 height: 0; 1509 1546 min-height: 0; 1510 1547 } -
src/wp-includes/script-loader.php
1270 1270 1271 1271 $scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", array( 'jquery' ), false, 1 ); 1272 1272 1273 $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array( 'jquery-ui-sortable' ), false, 1 ); 1274 did_action( 'init' ) && $scripts->localize( 1275 'postbox', 1276 'postBoxL10n', 1277 array( 1278 'postBoxEmptyString' => __( 'Drag boxes here' ), 1279 ) 1280 ); 1273 $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array( 'jquery-ui-sortable', 'wp-i18n' ), false, 1 ); 1274 $scripts->set_translations( 'postbox' ); 1281 1275 1282 1276 $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'tags-suggest' ), false, 1 ); 1283 1277