Making WordPress.org

Ticket #758: 758.diff

File 758.diff, 6.0 KB (added by ryelle, 10 years ago)
  • js/page-dashicons.js

     
    3737                        var tmpl = wp.template( 'glyphs' );
    3838
    3939                        jQuery( '#glyph' ).html( tmpl({
    40                                 cssClass: cssClass,
     40                                cssClass: 'dashicons-' + permalink,
    4141                                attr: attr,
    4242                                html: htmltext,
    4343                                glyph: glyphtext
    4444                        }) );
     45
     46                        jQuery( '#wp-class-example' ).text( permalink );
    4547                }
    4648        };
    4749
     
    5052        jQuery(document).ready(function() {
    5153
    5254                // pick random icon if no permalink, otherwise go to permalink
    53                 if ( window.location.hash ) {
     55                if ( window.location.hash && '#instructions' !== window.location.hash ) {
    5456                        permalink = "dashicons-" + window.location.hash.split('#')[1];
    5557
    5658                        // sanitize
  • page-dashicons.php

     
    302302
    303303                        <div id="instructions">
    304304
    305                                 <h3><?php _e( 'Photoshop Usage', 'wporg' ); ?></h3>
     305                                <h3><?php _e( 'WordPress Usage', 'wporg' ); ?></h3>
    306306
    307                                 <p><?php _e( 'Use the .OTF version of the font for Photoshop mockups, the web-font versions won\'t work. For most accurate results, pick the "Sharp" font smoothing.', 'wporg' ); ?></p>
     307                                <p><?php  printf( __( 'Admin menu items can be added with <code>register_post_type</code> and <code>add_menu_page</code>, which both have an option to set an icon. To show the current icon, you should pass in %s.', 'wporg' ), '<code>\'dashicons-<span id="wp-class-example">{icon}</span>\'</code>' ); ?></p>
    308308
    309                                 <h3><?php _e( 'CSS Usage', 'wporg' ); ?></h3>
     309                                <h4><?php _e( 'Examples', 'wporg' ); ?></h4>
    310310
    311                                 <p><?php _e( 'Link the stylesheet:', 'wporg' ); ?></p>
     311                                <p><?php _e( 'In <code>register_post_type</code>, set <code>menu_icon</code> in the arguments array.', 'wporg' ); ?></p>
    312312
    313                                 <pre>&lt;link rel="stylesheet" href="css/dashicons.css"></pre>
     313<pre>&lt;?php
     314add_action( 'init', 'create_post_type' );
     315//Registers the Product's post type
     316function create_post_type() {
     317    register_post_type( 'acme_product',
     318        array(
     319            'labels' => array(
     320                'name' => __( 'Products' ),
     321                'singular_name' => __( 'Product' )
     322            ),
     323            'public' => true,
     324            'has_archive' => true,
     325            'menu_icon' => 'dashicons-products',
     326        )
     327    );
     328}
     329</pre>
    314330
    315                                 <p><?php printf( __( 'Now add the icons using the %s selector. You can insert the Star icon like this:', 'wporg' ), '<code>:before</code>' ); ?></p>
     331                                <p><?php _e( 'The function <code>add_menu_page</code> accepts a parameter after the callback function for an icon URL, which can also accept a dashicons class.', 'wporg' ); ?></p>
    316332
    317 <textarea class="code" onclick="select();">
    318 .myicon:before {
    319         content: "\f155";
    320         display: inline-block;
    321         -webkit-font-smoothing: antialiased;
    322         font: normal 20px/1 'dashicons';
    323         vertical-align: top;
    324 }</textarea>
     333<pre>&lt;?php
     334function add_my_custom_menu() {
     335    //add an item to the menu
     336    add_menu_page (
     337        'My Page',
     338        'My Title',
     339        'manage_options',
     340        'my-page',
     341        'my_admin_page_function',
     342        'dashicons-admin-media',
     343    );
     344}</pre>
    325345
     346                                <h3><?php _e( 'CSS/HTML Usage', 'wporg' ); ?></h3>
     347
     348                                <p><?php _e( "If you want to use dashicons in the admin outside of the menu, there are two helper classes you can use. These are <code>dashicons-before</code> and <code>dashicons</code>, and they can be thought of as setting up dashicons (since you still need your icon's class, too).", 'wporg' ); ?></p>
     349
     350                                <h4><?php _e( 'Examples', 'wporg' ); ?></h4>
     351
     352                                <p><?php _e( 'Adding an icon to a header, with the dashicons-before class. This can be added right to the element with text.', 'wporg' ); ?></p>
     353
     354<pre>
     355&lt;h2 class="dashicons-before dashicons-smiley"&gt;<?php _e( 'A Cheerful Headline', 'wporg' ); ?>&lt;/h2&gt;
     356</pre>
     357
     358                                <p><?php _e( 'Adding an icon to a header, with the dashicons class. Note that here, you need extra markup specifically for the icon.', 'wporg' ); ?></p>
     359
     360<pre>
     361&lt;h2&gt;&lt;span class="dashicons dashicons-smiley"&gt;&lt;/span&gt; <?php _e( 'A Cheerful Headline', 'wporg' ); ?>&lt;/h2&gt;
     362</pre>
     363
     364                                <h3><?php _e( 'Photoshop Usage', 'wporg' ); ?></h3>
     365
     366                                <p><?php _e( 'Use the .OTF version of the font for Photoshop mockups, the web-font versions won\'t work. For most accurate results, pick the "Sharp" font smoothing.', 'wporg' ); ?></p>
     367
    326368                        </div><!-- /#instructions -->
    327369
    328370                </main><!-- #main -->
     
    333375                <script type="text/html" id="tmpl-glyphs">
    334376                        <div class="dashicons {{data.cssClass}}"></div>
    335377                        <div class="info">
    336                                 <span class="name">← {{data.cssClass}}</span>
     378                                <span class="name"><code>{{data.cssClass}}</code></span>
    337379                                <span class="link"><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'><?php _e( 'Copy CSS', 'wporg' ); ?></a></span>
    338380                                <span class="link"><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )"><?php _e( 'Copy HTML', 'wporg' ); ?></a></span>
    339381                                <span class="link"><a href="javascript:dashicons.copy( '{{data.glyph}}' )"><?php _e( 'Copy Glyph', 'wporg' ); ?></a></span>
  • scss/page-dashicons.scss

     
    133133                h3 {
    134134                        margin: 1.5em 0 0.75em;
    135135                }
     136
     137                h4 {
     138                        margin-top: 0;
     139                        padding-top: 0;
     140                        border-top: none;
     141                }
    136142        }
    137143
    138144        .code {
  • stylesheets/page-dashicons.css

     
    111111.dashicons-page #instructions h3 {
    112112  margin: 1.5em 0 0.75em;
    113113}
     114.dashicons-page #instructions h4 {
     115  margin-top: 0;
     116  padding-top: 0;
     117  border-top: none;
     118}
    114119.dashicons-page .code {
    115120  display: block;
    116121  font: 14px/1.5 monospace;