Update plugin browser to match standard WordPress interface
This commit is contained in:
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) {
|
||||
error_log('Using cached data for category: ' . $category);
|
||||
try {
|
||||
// Setup the list table with cached data
|
||||
$GLOBALS['tab'] = 'plugin-install';
|
||||
$_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();
|
||||
|
||||
// Generate plugin cards HTML
|
||||
$html = wp_allstars_generate_plugin_cards($cached_data->plugins);
|
||||
wp_send_json_success($html);
|
||||
return;
|
||||
} catch (Exception $e) {
|
||||
@ -313,34 +292,8 @@ function wp_allstars_ajax_get_plugins() {
|
||||
// Cache the results
|
||||
wp_allstars_set_cached_plugins($category, $res);
|
||||
|
||||
// Setup the list table
|
||||
$GLOBALS['tab'] = 'plugin-install';
|
||||
$_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;
|
||||
}
|
||||
|
||||
// Generate plugin cards HTML
|
||||
$html = wp_allstars_generate_plugin_cards($plugins);
|
||||
wp_send_json_success($html);
|
||||
|
||||
} 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');
|
||||
|
||||
// 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
|
||||
function wp_allstars_add_pro_button($action_links, $plugin) {
|
||||
// Get pro plugins configuration
|
||||
@ -622,6 +657,7 @@ function wp_allstars_settings_page() {
|
||||
wp_enqueue_script('updates');
|
||||
add_thickbox();
|
||||
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') {
|
||||
wp_allstars_clear_theme_cache();
|
||||
require_once ABSPATH . 'wp-admin/includes/theme.php';
|
||||
@ -629,6 +665,7 @@ function wp_allstars_settings_page() {
|
||||
wp_enqueue_script('updates');
|
||||
add_thickbox();
|
||||
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">
|
||||
|
Reference in New Issue
Block a user