Changeset 29569

Timestamp:

08/21/2014 07:10:59 PM (10 years ago)

Author:

nacin

Message:

Introduce plugin icons in the installer.

See ​http://wp.me/p2AvED-2P8 for the announcement and how to implement these.

props tellyworth.
see #28785.

Location:

trunk/src/wp-admin

Files:

• css/list-tables.css (modified) (2 diffs)
• includes/class-wp-plugin-install-list-table.php (modified) (3 diffs)

trunk/src/wp-admin/css/list-tables.css

@@ -1298 +1298 @@
 
 .plugin-card h4 {
-    float: left;
     margin: 0 0 12px;
     font-size: 18px;
 }
 
-.plugin-card .desc {
-    clear: left;
-}
-
 .plugin-action-buttons {
+    clear: right;
     float: right;
     margin-left: 2em;
@@ -1349 +1345 @@
     float: right;
     clear: right;
+}
+
+.plugin-icon {
+    width: 128px;
+    height: 128px;
+    float: left;
+    margin: 0 1em 1em 0;
 }
 

trunk/src/wp-admin/includes/class-wp-plugin-install-list-table.php

@@ -99 +99 @@
             'page' => $paged,
             'per_page' => $per_page,
-            'fields' => array( 'last_updated' => true, 'downloaded' => true ),
+            'fields' => array( 'last_updated' => true, 'downloaded' => true, 'icons' => true ),
             // Send the locale and installed plugin slugs to the API so it can provide context-sensitive results.
             'locale' => get_locale(),
@@ -399 +399 @@
             $action_links[] = '<a href="' . esc_url( $details_link ) . '" class="thickbox" aria-label="' . esc_attr( sprintf( __( 'More information about %s' ), $name ) ) . '" data-title="' . esc_attr( $name ) . '">' . __( 'More Details' ) . '</a>';
 
+            if ( !empty( $plugin['icons']['svg'] ) ) {
+                $plugin_icon_url = $plugin['icons']['svg'];
+            } elseif ( !empty( $plugin['icons']['2x'] ) ) {
+                $plugin_icon_url = $plugin['icons']['2x'];
+            } elseif ( !empty( $plugin['icons']['1x'] ) ) {
+                $plugin_icon_url = $plugin['icons']['1x'];
+            } else {
+                $plugin_icon_url = $plugin['icons']['default'];
+            }
 
             /**
@@ -412 +421 @@
         <div class="plugin-card">
             <div class="plugin-card-top">
+                <a href="<?php echo esc_url( $details_link ); ?>" class="thickbox"><img src="<?php echo esc_attr( $plugin_icon_url ) ?>" class="plugin-icon" /></a>
+                <div class="action-links">
+                    <?php
+                        if ( $action_links ) {
+                            echo '<ul class="plugin-action-buttons"><li>' . implode( '</li><li>', $action_links ) . '</li></ul>';
+                        }
+                    ?>
+                </div>
                 <div class="name column-name">
                     <h4><a href="<?php echo esc_url( $details_link ); ?>" class="thickbox"><?php echo $title; ?></a></h4>
-                    <div class="action-links">
-                        <?php
-                            if ( ! empty( $action_links ) ) {
-                                echo '<ul class="plugin-action-buttons"><li>' . implode( '</li><li>', $action_links ) . '</li></ul>';
-                            }
-                        ?>
-                    </div>
                 </div>
                 <div class="desc column-description">