Changeset 52196

Timestamp:

11/17/2021 03:54:40 PM (5 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>
+                <button type="button" class="button upload-dismiss-errors"><?php _e( 'Dismiss errors' ); ?></button>
         </script>