Ticket #758: 758.diff
File 758.diff, 6.0 KB (added by , 10 years ago) |
---|
-
js/page-dashicons.js
37 37 var tmpl = wp.template( 'glyphs' ); 38 38 39 39 jQuery( '#glyph' ).html( tmpl({ 40 cssClass: cssClass,40 cssClass: 'dashicons-' + permalink, 41 41 attr: attr, 42 42 html: htmltext, 43 43 glyph: glyphtext 44 44 }) ); 45 46 jQuery( '#wp-class-example' ).text( permalink ); 45 47 } 46 48 }; 47 49 … … 50 52 jQuery(document).ready(function() { 51 53 52 54 // pick random icon if no permalink, otherwise go to permalink 53 if ( window.location.hash ) {55 if ( window.location.hash && '#instructions' !== window.location.hash ) { 54 56 permalink = "dashicons-" + window.location.hash.split('#')[1]; 55 57 56 58 // sanitize -
page-dashicons.php
302 302 303 303 <div id="instructions"> 304 304 305 <h3><?php _e( ' PhotoshopUsage', 'wporg' ); ?></h3>305 <h3><?php _e( 'WordPress Usage', 'wporg' ); ?></h3> 306 306 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> 308 308 309 <h 3><?php _e( 'CSS Usage', 'wporg' ); ?></h3>309 <h4><?php _e( 'Examples', 'wporg' ); ?></h4> 310 310 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> 312 312 313 <pre><link rel="stylesheet" href="css/dashicons.css"></pre> 313 <pre><?php 314 add_action( 'init', 'create_post_type' ); 315 //Registers the Product's post type 316 function 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> 314 330 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> 316 332 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><?php 334 function 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> 325 345 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 <h2 class="dashicons-before dashicons-smiley"><?php _e( 'A Cheerful Headline', 'wporg' ); ?></h2> 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 <h2><span class="dashicons dashicons-smiley"></span> <?php _e( 'A Cheerful Headline', 'wporg' ); ?></h2> 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 326 368 </div><!-- /#instructions --> 327 369 328 370 </main><!-- #main --> … … 333 375 <script type="text/html" id="tmpl-glyphs"> 334 376 <div class="dashicons {{data.cssClass}}"></div> 335 377 <div class="info"> 336 <span class="name"> ← {{data.cssClass}}</span>378 <span class="name"><code>{{data.cssClass}}</code></span> 337 379 <span class="link"><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'><?php _e( 'Copy CSS', 'wporg' ); ?></a></span> 338 380 <span class="link"><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )"><?php _e( 'Copy HTML', 'wporg' ); ?></a></span> 339 381 <span class="link"><a href="javascript:dashicons.copy( '{{data.glyph}}' )"><?php _e( 'Copy Glyph', 'wporg' ); ?></a></span> -
scss/page-dashicons.scss
133 133 h3 { 134 134 margin: 1.5em 0 0.75em; 135 135 } 136 137 h4 { 138 margin-top: 0; 139 padding-top: 0; 140 border-top: none; 141 } 136 142 } 137 143 138 144 .code { -
stylesheets/page-dashicons.css
111 111 .dashicons-page #instructions h3 { 112 112 margin: 1.5em 0 0.75em; 113 113 } 114 .dashicons-page #instructions h4 { 115 margin-top: 0; 116 padding-top: 0; 117 border-top: none; 118 } 114 119 .dashicons-page .code { 115 120 display: block; 116 121 font: 14px/1.5 monospace;