Update plugin browser to match standard WordPress interface
This commit is contained in:
Marcus Quinn
203
admin/css/wp-allstars-plugins.css
Normal file
203
admin/css/wp-allstars-plugins.css
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
/* Plugin List Container */
|
||||||
|
.wp-list-table-container {
|
||||||
|
margin-top: 20px;
|
||||||
|
position: relative;
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Plugin Cards */
|
||||||
|
.plugin-card {
|
||||||
|
float: left;
|
||||||
|
margin: 0 8px 16px;
|
||||||
|
width: calc(50% - 16px);
|
||||||
|
border: 1px solid #dcdcde;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 1px 1px rgba(0,0,0,.04);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card-top {
|
||||||
|
padding: 20px 20px 10px;
|
||||||
|
position: relative;
|
||||||
|
min-height: 135px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .name,
|
||||||
|
.plugin-card .desc {
|
||||||
|
margin-right: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .name h3 {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin: 0 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .desc {
|
||||||
|
color: #646970;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .plugin-card-bottom {
|
||||||
|
clear: both;
|
||||||
|
padding: 12px 20px;
|
||||||
|
background-color: #f6f7f7;
|
||||||
|
border-top: 1px solid #dcdcde;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .column-rating {
|
||||||
|
line-height: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .column-updated,
|
||||||
|
.plugin-card .column-downloaded {
|
||||||
|
text-align: right;
|
||||||
|
color: #646970;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .plugin-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card .action-links {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-action-buttons {
|
||||||
|
clear: right;
|
||||||
|
float: right;
|
||||||
|
margin-left: 2em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-action-buttons .button {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-card-bottom .star-rating {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Plugin Filters */
|
||||||
|
.wpa-plugin-filters {
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 12px 15px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #c3c4c7;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wpa-plugin-filters a {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading Overlay */
|
||||||
|
.wpa-loading-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Theme Browser */
|
||||||
|
.theme-browser .theme {
|
||||||
|
cursor: pointer;
|
||||||
|
float: left;
|
||||||
|
margin: 0 4% 4% 0;
|
||||||
|
position: relative;
|
||||||
|
width: 30.6%;
|
||||||
|
border: 1px solid #dcdcde;
|
||||||
|
box-shadow: 0 1px 1px rgba(0,0,0,.04);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-browser .theme .theme-screenshot {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-browser .theme .theme-screenshot img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-browser .theme .theme-name {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 15px;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
background: #f6f7f7;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-browser .theme .theme-actions {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: auto;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 5px;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
padding: 20px 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity .1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-browser .theme:hover .theme-actions {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-browser .theme .theme-actions .button {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Adjustments */
|
||||||
|
@media screen and (max-width: 1100px) {
|
||||||
|
.plugin-card {
|
||||||
|
width: calc(100% - 16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-browser .theme {
|
||||||
|
width: 47%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 782px) {
|
||||||
|
.theme-browser .theme {
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -215,29 +215,8 @@ function wp_allstars_ajax_get_plugins() {
|
|||||||
if ($cached_data !== false) {
|
if ($cached_data !== false) {
|
||||||
error_log('Using cached data for category: ' . $category);
|
error_log('Using cached data for category: ' . $category);
|
||||||
try {
|
try {
|
||||||
// Setup the list table with cached data
|
// Generate plugin cards HTML
|
||||||
$GLOBALS['tab'] = 'plugin-install';
|
$html = wp_allstars_generate_plugin_cards($cached_data->plugins);
|
||||||
$_REQUEST['tab'] = 'plugin-install';
|
|
||||||
$_REQUEST['type'] = 'plugin-install';
|
|
||||||
set_current_screen('plugin-install');
|
|
||||||
|
|
||||||
$wp_list_table = _get_list_table('WP_Plugin_Install_List_Table', array(
|
|
||||||
'screen' => 'plugin-install'
|
|
||||||
));
|
|
||||||
|
|
||||||
// Override the items with our cached data
|
|
||||||
$wp_list_table->items = $cached_data->plugins;
|
|
||||||
$wp_list_table->set_pagination_args(array(
|
|
||||||
'total_items' => count($cached_data->plugins),
|
|
||||||
'per_page' => count($cached_data->plugins),
|
|
||||||
));
|
|
||||||
|
|
||||||
add_filter('plugin_install_action_links', 'wp_allstars_add_pro_button', 10, 2);
|
|
||||||
|
|
||||||
ob_start();
|
|
||||||
$wp_list_table->display();
|
|
||||||
$html = ob_get_clean();
|
|
||||||
|
|
||||||
wp_send_json_success($html);
|
wp_send_json_success($html);
|
||||||
return;
|
return;
|
||||||
} catch (Exception $e) {
|
} catch (Exception $e) {
|
||||||
@ -313,34 +292,8 @@ function wp_allstars_ajax_get_plugins() {
|
|||||||
// Cache the results
|
// Cache the results
|
||||||
wp_allstars_set_cached_plugins($category, $res);
|
wp_allstars_set_cached_plugins($category, $res);
|
||||||
|
|
||||||
// Setup the list table
|
// Generate plugin cards HTML
|
||||||
$GLOBALS['tab'] = 'plugin-install';
|
$html = wp_allstars_generate_plugin_cards($plugins);
|
||||||
$_REQUEST['tab'] = 'plugin-install';
|
|
||||||
$_REQUEST['type'] = 'plugin-install';
|
|
||||||
set_current_screen('plugin-install');
|
|
||||||
|
|
||||||
$wp_list_table = _get_list_table('WP_Plugin_Install_List_Table', array(
|
|
||||||
'screen' => 'plugin-install'
|
|
||||||
));
|
|
||||||
|
|
||||||
// Set the items directly
|
|
||||||
$wp_list_table->items = $plugins;
|
|
||||||
$wp_list_table->set_pagination_args(array(
|
|
||||||
'total_items' => count($plugins),
|
|
||||||
'per_page' => count($plugins),
|
|
||||||
));
|
|
||||||
|
|
||||||
add_filter('plugin_install_action_links', 'wp_allstars_add_pro_button', 10, 2);
|
|
||||||
|
|
||||||
ob_start();
|
|
||||||
$wp_list_table->display();
|
|
||||||
$html = ob_get_clean();
|
|
||||||
|
|
||||||
if (empty($html)) {
|
|
||||||
wp_send_json_error('Failed to generate plugin display HTML');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
wp_send_json_success($html);
|
wp_send_json_success($html);
|
||||||
|
|
||||||
} catch (Exception $e) {
|
} catch (Exception $e) {
|
||||||
@ -350,6 +303,88 @@ function wp_allstars_ajax_get_plugins() {
|
|||||||
}
|
}
|
||||||
add_action('wp_ajax_wp_allstars_get_plugins', 'wp_allstars_ajax_get_plugins');
|
add_action('wp_ajax_wp_allstars_get_plugins', 'wp_allstars_ajax_get_plugins');
|
||||||
|
|
||||||
|
// Function to generate plugin cards HTML
|
||||||
|
function wp_allstars_generate_plugin_cards($plugins) {
|
||||||
|
if (empty($plugins)) {
|
||||||
|
return '<div class="notice notice-error"><p>No plugins found.</p></div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
ob_start();
|
||||||
|
?>
|
||||||
|
<div class="wp-list-table widefat plugin-install">
|
||||||
|
<div id="the-list">
|
||||||
|
<?php foreach ($plugins as $plugin): ?>
|
||||||
|
<div class="plugin-card plugin-card-<?php echo esc_attr($plugin->slug); ?>">
|
||||||
|
<div class="plugin-card-top">
|
||||||
|
<div class="name column-name">
|
||||||
|
<h3>
|
||||||
|
<a href="<?php echo esc_url($plugin->homepage); ?>" target="_blank">
|
||||||
|
<?php echo esc_html($plugin->name); ?>
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="action-links">
|
||||||
|
<ul class="plugin-action-buttons">
|
||||||
|
<?php
|
||||||
|
$status = install_plugin_install_status($plugin);
|
||||||
|
switch ($status['status']) {
|
||||||
|
case 'install':
|
||||||
|
echo '<li><a class="button button-primary install-now" data-slug="' . esc_attr($plugin->slug) . '" href="' . esc_url($status['url']) . '" aria-label="' . esc_attr(sprintf(__('Install %s now'), $plugin->name)) . '">' . __('Install Now') . '</a></li>';
|
||||||
|
break;
|
||||||
|
case 'update_available':
|
||||||
|
echo '<li><a class="button button-primary update-now" data-slug="' . esc_attr($plugin->slug) . '" href="' . esc_url($status['url']) . '" aria-label="' . esc_attr(sprintf(__('Update %s now'), $plugin->name)) . '">' . __('Update Now') . '</a></li>';
|
||||||
|
break;
|
||||||
|
case 'latest_installed':
|
||||||
|
case 'newer_installed':
|
||||||
|
if (is_plugin_active($status['file'])) {
|
||||||
|
echo '<li><button type="button" class="button button-disabled" disabled="disabled">' . __('Active') . '</button></li>';
|
||||||
|
} else {
|
||||||
|
echo '<li><a class="button activate-now" href="' . esc_url(wp_nonce_url(admin_url('plugins.php?action=activate&plugin=' . $status['file']), 'activate-plugin_' . $status['file'])) . '" aria-label="' . esc_attr(sprintf(__('Activate %s'), $plugin->name)) . '">' . __('Activate') . '</a></li>';
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add "Go Pro" button if applicable
|
||||||
|
$pro_plugins = wp_allstars_get_pro_plugins_config();
|
||||||
|
foreach ($pro_plugins as $pro_plugin) {
|
||||||
|
if (isset($pro_plugin['free_slug']) && $pro_plugin['free_slug'] === $plugin->slug) {
|
||||||
|
echo '<li><a class="button button-primary" href="' . esc_url($pro_plugin['url']) . '" target="_blank">' . esc_html__('Go Pro', 'wp-allstars') . '</a></li>';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="desc column-description">
|
||||||
|
<p><?php echo esc_html($plugin->short_description); ?></p>
|
||||||
|
</div>
|
||||||
|
<?php if (!empty($plugin->icons) && !empty($plugin->icons['1x'])): ?>
|
||||||
|
<div class="plugin-icon">
|
||||||
|
<img src="<?php echo esc_url($plugin->icons['1x']); ?>" alt="">
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<div class="plugin-card-bottom">
|
||||||
|
<div class="vers column-rating">
|
||||||
|
<?php wp_star_rating(array('rating' => $plugin->rating, 'type' => 'percent', 'number' => $plugin->num_ratings)); ?>
|
||||||
|
<span class="num-ratings">(<?php echo number_format_i18n($plugin->num_ratings); ?>)</span>
|
||||||
|
</div>
|
||||||
|
<div class="column-updated">
|
||||||
|
<strong><?php _e('Last Updated:'); ?></strong>
|
||||||
|
<?php printf(__('%s ago'), human_time_diff(strtotime($plugin->last_updated))); ?>
|
||||||
|
</div>
|
||||||
|
<div class="column-downloaded">
|
||||||
|
<?php echo sprintf(_n('%s download', '%s downloads', $plugin->downloaded), number_format_i18n($plugin->downloaded)); ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
return ob_get_clean();
|
||||||
|
}
|
||||||
|
|
||||||
// Helper function to add pro button to plugin cards
|
// Helper function to add pro button to plugin cards
|
||||||
function wp_allstars_add_pro_button($action_links, $plugin) {
|
function wp_allstars_add_pro_button($action_links, $plugin) {
|
||||||
// Get pro plugins configuration
|
// Get pro plugins configuration
|
||||||
@ -622,6 +657,7 @@ function wp_allstars_settings_page() {
|
|||||||
wp_enqueue_script('updates');
|
wp_enqueue_script('updates');
|
||||||
add_thickbox();
|
add_thickbox();
|
||||||
wp_enqueue_style('wp-allstars-admin', plugins_url('css/wp-allstars-admin.css', __FILE__));
|
wp_enqueue_style('wp-allstars-admin', plugins_url('css/wp-allstars-admin.css', __FILE__));
|
||||||
|
wp_enqueue_style('wp-allstars-plugins', plugins_url('css/wp-allstars-plugins.css', __FILE__));
|
||||||
} elseif ($active_tab === 'theme') {
|
} elseif ($active_tab === 'theme') {
|
||||||
wp_allstars_clear_theme_cache();
|
wp_allstars_clear_theme_cache();
|
||||||
require_once ABSPATH . 'wp-admin/includes/theme.php';
|
require_once ABSPATH . 'wp-admin/includes/theme.php';
|
||||||
@ -629,6 +665,7 @@ function wp_allstars_settings_page() {
|
|||||||
wp_enqueue_script('updates');
|
wp_enqueue_script('updates');
|
||||||
add_thickbox();
|
add_thickbox();
|
||||||
wp_enqueue_style('wp-allstars-admin', plugins_url('css/wp-allstars-admin.css', __FILE__));
|
wp_enqueue_style('wp-allstars-admin', plugins_url('css/wp-allstars-admin.css', __FILE__));
|
||||||
|
wp_enqueue_style('wp-allstars-plugins', plugins_url('css/wp-allstars-plugins.css', __FILE__));
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<div class="wrap wp-allstars-wrap">
|
<div class="wrap wp-allstars-wrap">
|
||||||
|
|||||||
Reference in New Issue
Block a user