Changeset 30505

Timestamp:

11/21/2014 04:40:29 PM (12 years ago)

Author:

helen

Message:

Admin notices: Add more variety and make more generically usable.

There is now a base class of notice, with additional classes of notice-success, notice-warning, notice-error, and a new blue notice-info.

Also corrects some misleading notice colors, such as plugin tested up to warnings and login messages.

props avryl, melchoyce.
fixes #27418.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (2 diffs)
• wp-admin/css/login.css (modified) (1 diff)
• wp-admin/edit-form-advanced.php (modified) (1 diff)
• wp-admin/includes/plugin-install.php (modified) (1 diff)
• wp-admin/includes/template.php (modified) (1 diff)
• wp-includes/js/autosave.js (modified) (2 diffs)

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

@@ -551 +551 @@
 }
 
-div.updated,
-div.error {
-        padding: 0 0.6em;
-        margin: 5px 15px 2px;
-}
-
-div.updated p,
-div.error p {
-        margin: 0.5em 0;
-        padding: 2px;
-}
-
-.wrap div.updated,
-.wrap div.error,
-.media-upload-form div.error {
-        margin: 5px 0 15px;
-}
-
-div.updated {
-        border-left: 4px solid #7ad03a;
-        padding: 1px 12px;
-        background-color: #fff;
-        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-}
-
-div.error {
-        border-left: 4px solid #dd3d36;
-        background: #fff;
-        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-        padding: 1px 12px;
-}
-
 .attention {
         color: #2ea2cc;
@@ -1248 +1214 @@
 }
 
-
 /*------------------------------------------------------------------------------
   4.0 - Notifications
 ------------------------------------------------------------------------------*/
+
+.notice,
+div.updated,
+div.error {
+        background: #fff;
+        border-left: 4px solid #fff;
+        -webkit-box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
+        box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
+        margin: 5px 15px 2px;
+        padding: 1px 12px;
+}
+
+.notice p,
+div.updated p,
+div.error p {
+        margin: 0.5em 0;
+        padding: 2px;
+}
+
+.notice-success,
+div.updated {
+     border-color: #7ad03a;
+}
+
+.notice-warning {
+    border-color: #ffba00;
+}
+
+.notice-error,
+div.error {
+    border-color: #dd3d36;
+}
+
+.notice-info {
+    border-color: #2ea2cc;
+}
+
+.wrap .notice,
+.wrap div.updated,
+.wrap div.error,
+.media-upload-form .notice,
+.media-upload-form div.error {
+        margin: 5px 0 15px;
+}
 
 #update-nag,

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

@@ -55 +55 @@
 
 .login .message {
-        border-left: 4px solid #7ad03a;
+        border-left: 4px solid #2ea2cc;
         padding: 1px 12px;
         background-color: #fff;

trunk/src/wp-admin/edit-form-advanced.php

@@ -389 +389 @@
 ?></h2>
 <?php if ( $notice ) : ?>
-<div id="notice" class="error"><p id="has-newer-autosave"><?php echo $notice ?></p></div>
+<div id="notice" class="notice notice-warning"><p id="has-newer-autosave"><?php echo $notice ?></p></div>
 <?php endif; ?>
 <?php if ( $message ) : ?>

trunk/src/wp-admin/includes/plugin-install.php

@@ -505 +505 @@
         <?php
                 if ( ! empty( $api->tested ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->tested ) ), $api->tested, '>' ) ) {
-                        echo '<div class="error"><p>' . __('<strong>Warning:</strong> This plugin has <strong>not been tested</strong> with your current version of WordPress.') . '</p></div>';
+                        echo '<div class="notice notice-warning"><p>' . __('<strong>Warning:</strong> This plugin has <strong>not been tested</strong> with your current version of WordPress.') . '</p></div>';
                 } else if ( ! empty( $api->requires ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->requires ) ), $api->requires, '<' ) ) {
-                        echo '<div class="error"><p>' . __('<strong>Warning:</strong> This plugin has <strong>not been marked as compatible</strong> with your version of WordPress.') . '</p></div>';
+                        echo '<div class="notice notice-warning"><p>' . __('<strong>Warning:</strong> This plugin has <strong>not been marked as compatible</strong> with your version of WordPress.') . '</p></div>';
                 }
 

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

@@ -2085 +2085 @@
 function _local_storage_notice() {
         ?>
-        <div id="local-storage-notice" class="hidden">
+        <div id="local-storage-notice" class="hidden notice">
         <p class="local-restore">
                 <?php _e('The backup of this post in your browser is different from the version below.'); ?>

trunk/src/wp-includes/js/autosave.js

@@ -346 +346 @@
 
                                 $notice = $( '#local-storage-notice' );
-                                $('.wrap h2').first().after( $notice.addClass( 'updated' ).show() );
+                                $('.wrap h2').first().after( $notice.addClass( 'notice-warning' ).show() );
 
                                 $notice.on( 'click.autosave-local', function( event ) {
@@ -355 +355 @@
                                                 $target.parent().hide();
                                                 $(this).find( 'p.undo-restore' ).show();
+                                                $notice.removeClass( 'notice-warning' ).addClass( 'notice-success' );
                                         } else if ( $target.hasClass( 'undo-restore-backup' ) ) {
                                                 restorePost( undoPostData );
                                                 $target.parent().hide();
                                                 $(this).find( 'p.local-restore' ).show();
+                                                $notice.removeClass( 'notice-success' ).addClass( 'notice-warning' );
                                         }