Changeset 11207

Timestamp:

08/26/2021 11:50:05 PM (3 years ago)

Author:

coffee2code

Message:

Developer, Dashicons: Show dashicon character code in the selected icon info panel.

See #5014.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer

Files:

• js/page-dashicons.js (modified) (2 diffs)
• page-dashicons.php (modified) (2 diffs)
• scss/page-dashicons.scss (modified) (1 diff)
• stylesheets/page-dashicons.css (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/page-dashicons.js

@@ -35 +35 @@
             glyphtext = jQuery('#temp').text();
 
+            // icon code
+            var charCode = jQuery('#iconlist li.dashicons-' + permalink ).attr('data-code');
+
             var sectionName = jQuery('#iconlist li.dashicons-' + permalink ).parent().prevAll('h4').first().text();
 
@@ -40 +43 @@
 
             jQuery( '#glyph' ).html( tmpl({
+                charCode: charCode,
                 cssClass: 'dashicons-' + permalink,
                 sectionName: sectionName,

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/page-dashicons.php

@@ -10 +10 @@
 require_once __DIR__ . '/inc/dashicons.php';
 
-wp_enqueue_style(  'dashicons-page', get_template_directory_uri() . '/stylesheets/page-dashicons.css', array(), '20200427' );
+wp_enqueue_style(  'dashicons-page', get_template_directory_uri() . '/stylesheets/page-dashicons.css', array(), '20210826' );
 wp_enqueue_script( 'dashicons-page', get_template_directory_uri() . '/js/page-dashicons.js', array( 'jquery', 'wp-util' ), '20210826' );
 
@@ -195 +195 @@
                 <span><strong>{{data.sectionName}}</strong></span>
                 <span class="name"><code>{{data.cssClass}}</code></span>
+                <span class="charCode"><code>{{data.charCode}}</code></span>
                 <span class="link"><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'><?php _e( 'Copy CSS', 'wporg' ); ?></a></span>
                 <span class="link"><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )"><?php _e( 'Copy HTML', 'wporg' ); ?></a></span>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/page-dashicons.scss

@@ -59 +59 @@
         .info {
             float:right;
-            margin-top: $spacing*2;
+            margin-top: $spacing;
             width: 35%;
+
+            .charCode code {
+                color: #888;
+            }
         }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/page-dashicons.css

@@ -60 +60 @@
 .dashicons-page #glyph .info {
   float: right;
-  margin-top: 50px;
+  margin-top: 25px;
   width: 35%;
+}
+
+.dashicons-page #glyph .info .charCode code {
+  color: #888;
 }