Changeset 52196

Timestamp:

11/17/2021 03:54:40 PM (3 years ago)

Author:

joedolson

Message:

Media: Move dismiss upload errors button after errors.

Change the button that dismissess upload errors so it appears after the relevant errors. Change button from icon-only to text-based. Removes ambiguity about what you are cancelling when using the control.

Props ComputerGuru, melchoyce, vdwijngaert, alexislloyd, joedolson, shaunandrews, sabernhardt.
Fixes #42979.

Location:

trunk/src

Files:

• wp-admin/css/media.css (modified) (1 diff)
• wp-includes/css/media-views.css (modified) (1 diff)
• wp-includes/media-template.php (modified) (2 diffs)

trunk/src/wp-admin/css/media.css

@@ -506 +506 @@
     box-shadow: none;
     background: none;
-}
-
-.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
-    top: -10px;
-    right: -14px;
-    padding: 10px;
-}
-
-.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
-    content: "\f153";
-    display: block;
-    font: normal 16px/1 dashicons;
-    color: #787c82;
-}
-
-.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
-.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
-    color: #d63638;
 }
 

trunk/src/wp-includes/css/media-views.css

@@ -1438 +1438 @@
 
 .media-uploader-status .upload-dismiss-errors {
-    position: absolute;
-    top: -3px;
-    right: -5px;
-    padding: 5px;
-    border-radius: 50%;
     transition: none;
     text-decoration: none;
-}
-
-.uploader-inline .media-uploader-status .upload-dismiss-errors {
-    top: 2px;
-    right: 2px;
-}
-
-.media-uploader-status .upload-dismiss-errors::before {
-    content: "\f153";
-    display: block;
-    font: normal 16px/1 dashicons;
-    color: #787c82;
-}
-
-.uploader-inline .errors.media-uploader-status .upload-dismiss-errors::before {
-    color: #646970;
-}
-
-.errors.media-uploader-status .upload-dismiss-errors:hover::before,
-.errors.media-uploader-status .upload-dismiss-errors:focus::before {
-    color: #d63638;
 }
 

trunk/src/wp-includes/media-template.php

@@ -321 +321 @@
     <script type="text/html" id="tmpl-uploader-status">
         <h2><?php _e( 'Uploading' ); ?></h2>
-        <button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
 
         <div class="media-progress-bar"><div></div></div>
@@ -332 +331 @@
         </div>
         <div class="upload-errors"></div>
+
     </script>