Make WordPress Core

Changeset 26664


Ignore:
Timestamp:
12/05/2013 06:37:20 AM (11 years ago)
Author:
nacin
Message:

Allow for Dashicons and base64-encoded data:image/svg+xml URIs when specifying menu icons.

Both of these icons can be colored to match the color scheme, including hover states.
Both are accepted for register_post_type()'s menu_icon argument, and also add_menu_page()'s $icon_url argument.

To use a Dashicon, pass the name of the helper class, e.g. 'dashicons-piechart'.
To use an SVG, pass a valid data URI string starting with 'data:image/svg+xml;base64,'.

props helen.
fixes #25147.

Location:
trunk/src
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/wp-admin.css

    r26660 r26664  
    18751875    height: 30px;
    18761876    margin: 0;
     1877    background-repeat: no-repeat;
     1878    background-position: center;
    18771879    text-align: center;
    18781880}
  • trunk/src/wp-admin/includes/misc.php

    r26601 r26664  
    619619    $color_scheme = get_user_option( 'admin_color' );
    620620
     621    // It's possible to have a color scheme set that is no longer registered.
     622    if ( empty( $_wp_admin_css_colors[ $color_scheme ] ) ) {
     623        $color_scheme = 'fresh';
     624    }
     625
    621626    if ( ! empty( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
    622         echo '<script type="text/javascript">var _wpColorScheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
    623     }
     627        $icon_colors = $_wp_admin_css_colors[ $color_scheme ]->icon_colors;
     628    } elseif ( ! empty( $_wp_admin_css_colors['fresh']->icon_colors ) ) {
     629        $icon_colors = $_wp_admin_css_colors['fresh']->icon_colors;
     630    } else {
     631        // Fall back to the default set of icon colors if the default scheme is missing.
     632        $icon_colors = array( 'base' => '#999', 'focus' => '#2ea2cc', 'current' => '#fff' );
     633    }
     634
     635    echo '<script type="text/javascript">var _wpColorScheme = ' . json_encode( array( 'icons' => $icon_colors ) ) . ";</script>\n";
    624636}
    625637add_action( 'admin_head', 'wp_color_scheme_settings' );
  • trunk/src/wp-admin/includes/plugin.php

    r26590 r26664  
    967967 * @param string $menu_slug The slug name to refer to this menu by (should be unique for this menu)
    968968 * @param callback $function The function to be called to output the content for this page.
    969  * @param string $icon_url The url to the icon to be used for this menu. Using 'none' would leave div.wp-menu-image empty
    970  *                         so an icon can be added as background with CSS.
     969 * @param string $icon_url The url to the icon to be used for this menu.
     970 *     * Pass a base64-encoded SVG using a data URI, which will be colored to match the color scheme.
     971 *       This should begin with 'data:image/svg+xml;base64,'.
     972 *     * Pass the name of a Dashicons helper class to use a font icon, e.g. 'dashicons-piechart'.
     973 *     * Pass 'none' to leave div.wp-menu-image empty so an icon can be added via CSS.
    971974 * @param int $position The position in the menu order this one should appear
    972975 *
  • trunk/src/wp-admin/menu-header.php

    r26182 r26664  
    6868        $class = $class ? ' class="' . join( ' ', $class ) . '"' : '';
    6969        $id = ! empty( $item[5] ) ? ' id="' . preg_replace( '|[^a-zA-Z0-9_:.]|', '-', $item[5] ) . '"' : '';
    70         $img = '';
     70        $img = $img_style = $img_class = '';
     71
    7172        // if the string 'none' (previously 'div') is passed instead of an URL, don't output the default menu image
    7273        // so an icon can be added to div.wp-menu-image as background with CSS.
    73         if ( ! empty( $item[6] ) )
    74             $img = ( 'none' === $item[6] || 'div' === $item[6] ) ? '<br />' : '<img src="' . $item[6] . '" alt="" />';
     74        // Dashicons and base64-encoded data:image/svg_xml URIs are also handled as special cases.
     75        if ( ! empty( $item[6] ) ) {
     76            $img = '<img src="' . $item[6] . '" alt="" />';
     77
     78            if ( 'none' === $item[6] || 'div' === $item[6] ) {
     79                $img = '<br />';
     80            } elseif ( 0 === strpos( $item[6], 'data:image/svg+xml;base64,' ) ) {
     81                $img = '<br />';
     82                $img_style = ' style="background-image:url(\'' . esc_attr( $item[6] ) . '\')"';
     83            } elseif ( 0 === strpos( $item[6], 'dashicons-' ) ) {
     84                $img = '<br />';
     85                $img_class = ' dashicons ' . sanitize_html_class( $item[6] );
     86            }
     87        }
    7588        $arrow = '<div class="wp-menu-arrow"><div></div></div>';
    7689
     
    89102            if ( ! empty( $menu_hook ) || ( ( 'index.php' != $submenu_items[0][2] ) && file_exists( WP_PLUGIN_DIR . "/$menu_file" ) && ! file_exists( ABSPATH . "/wp-admin/$menu_file" ) ) ) {
    90103                $admin_is_parent = true;
    91                 echo "<a href='admin.php?page={$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>$title</div></a>";
     104                echo "<a href='admin.php?page={$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>$title</div></a>";
    92105            } else {
    93                 echo "\n\t<a href='{$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>$title</div></a>";
     106                echo "\n\t<a href='{$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>$title</div></a>";
    94107            }
    95108        } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) {
     
    100113            if ( ! empty( $menu_hook ) || ( ( 'index.php' != $item[2] ) && file_exists( WP_PLUGIN_DIR . "/$menu_file" ) && ! file_exists( ABSPATH . "/wp-admin/$menu_file" ) ) ) {
    101114                $admin_is_parent = true;
    102                 echo "\n\t<a href='admin.php?page={$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
     115                echo "\n\t<a href='admin.php?page={$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
    103116            } else {
    104                 echo "\n\t<a href='{$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
     117                echo "\n\t<a href='{$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
    105118            }
    106119        }
  • trunk/src/wp-admin/menu.php

    r25133 r26664  
    108108    $ptype_menu_position = is_int( $ptype_obj->menu_position ) ? $ptype_obj->menu_position : ++$_wp_last_object_menu; // If we're to use $_wp_last_object_menu, increment it first.
    109109    $ptype_for_id = sanitize_html_class( $ptype );
     110
    110111    if ( is_string( $ptype_obj->menu_icon ) ) {
    111         $menu_icon   = esc_url( $ptype_obj->menu_icon );
     112        // Special handling for data:image/svg+xml and Dashicons.
     113        if ( 0 === strpos( $ptype_obj->menu_icon, 'data:image/svg+xml;base64,' ) || 0 === strpos( $ptype_obj->menu_icon, 'dashicons-' ) ) {
     114            $menu_icon = $ptype_obj->menu_icon;
     115        } else {
     116            $menu_icon = esc_url( $ptype_obj->menu_icon );
     117        }
    112118        $ptype_class = $ptype_for_id;
    113119    } else {
  • trunk/src/wp-includes/js/svg-painter.js

    r26663 r26664  
    201201            }
    202202
    203             $element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
     203            $element.css( 'background-image', 'url("data:image/svg+xml;base64,' + xml + '")' );
    204204        }
    205205    };
  • trunk/src/wp-includes/post.php

    r26543 r26664  
    11301130 *     * Defaults to null, which places it at the bottom of its area.
    11311131 * - menu_icon - The url to the icon to be used for this menu. Defaults to use the posts icon.
     1132 *     * Pass a base64-encoded SVG using a data URI, which will be colored to match the color scheme.
     1133 *      This should begin with 'data:image/svg+xml;base64,'.
     1134 *     * Pass the name of a Dashicons helper class to use a font icon, e.g. 'dashicons-piechart'.
     1135 *     * Pass 'none' to leave div.wp-menu-image empty so an icon can be added via CSS.
    11321136 * - capability_type - The string to use to build the read, edit, and delete capabilities. Defaults to 'post'.
    11331137 *     * May be passed as an array to allow for alternative plurals when using this argument as a base to construct the
Note: See TracChangeset for help on using the changeset viewer.