[FUNCTIONAL] Add Basic Admin UI Enhancements feature
This commit is contained in:
15
README.md
15
README.md
@ -1,7 +1,7 @@
|
||||
# WP Allstars
|
||||
|
||||
A WordPress plugin that enhances your WordPress experience with curated plugins, themes, and optimization tools.
|
||||
Testing a stable v0.2.3 version with rsync deployment.
|
||||
Current version: v0.2.3.3 (stable)
|
||||
|
||||
## Description
|
||||
|
||||
@ -9,6 +9,8 @@ WP Allstars is a powerful WordPress plugin designed to help site owners and deve
|
||||
|
||||
## Features
|
||||
|
||||
- **Modern Admin UI**: Enhanced admin interface with responsive design and interactive components.
|
||||
- **Admin Color Schemes**: Switch between default and modern admin color schemes.
|
||||
- **Curated Plugin Recommendations**: Browse and install recommended free plugins organized by category.
|
||||
- **Pro Plugin Showcase**: Discover premium plugins with direct links to purchase.
|
||||
- **Theme Integration**: Easily install and activate the Kadence theme.
|
||||
@ -29,6 +31,8 @@ After activation, you'll find the WP Allstars menu in your WordPress admin sideb
|
||||
### General
|
||||
|
||||
Basic settings for the plugin, including:
|
||||
- Admin UI Enhancements
|
||||
- Admin Color Schemes
|
||||
- Auto Upload Images
|
||||
- Image Optimization
|
||||
- Cache Management
|
||||
@ -78,6 +82,15 @@ Discover premium plugins with direct links to purchase.
|
||||
|
||||
Easily install and activate the Kadence theme.
|
||||
|
||||
## UI Components
|
||||
|
||||
The plugin includes several enhanced UI components:
|
||||
|
||||
- **Cards**: Flexible containers for displaying content with optional headers and footers
|
||||
- **Accordions**: Collapsible content panels for presenting information in a limited space
|
||||
- **Notifications**: Stylish notifications for providing user feedback
|
||||
- **Enhanced Form Elements**: Improved styling for inputs, buttons, and toggles
|
||||
|
||||
## Development
|
||||
|
||||
### Requirements
|
||||
|
||||
15
ROADMAP.md
15
ROADMAP.md
@ -9,8 +9,8 @@ This document outlines features from later versions that we plan to integrate in
|
||||
| Multisite Category | v0.2.6 | High | Low | Low | ✅ Implemented in v0.2.3-stable |
|
||||
| Sync Guard | v0.2.6-fix | High | Low | Low | ✅ Implemented in v0.2.3.1-stable |
|
||||
| More Robust File Loading | v0.2.6-fix | High | Low | Low | ✅ Implemented in v0.2.3-stable |
|
||||
| Admin Colors Feature | v0.2.4 | High | Low | Low | 🔄 To be implemented |
|
||||
| Basic Admin UI Enhancements | v0.2.5 | High | Medium | Medium | 🔄 To be implemented |
|
||||
| Admin Colors Feature | v0.2.4 | High | Low | Low | ✅ Implemented in v0.2.3.2-stable |
|
||||
| Basic Admin UI Enhancements | v0.2.5 | High | Medium | Medium | ✅ Implemented in v0.2.3.3-stable |
|
||||
| Advanced Admin UI Components | v0.2.5 | Medium | Medium | Medium | 🔄 To be implemented |
|
||||
| Access Manager Improvements | v0.2.5 | Medium | Medium | Medium | 🔄 To be implemented |
|
||||
| Role-Based Access Controls | v0.2.5.1 | High | Medium | Medium | 🔄 To be implemented |
|
||||
@ -51,10 +51,11 @@ This document outlines features from later versions that we plan to integrate in
|
||||
- **Description**: Improve the basic styling of admin interfaces
|
||||
- **Why it's valuable**: Better user experience and modern look
|
||||
- **Implementation plan**:
|
||||
1. Create/update wp-allstars-admin.css
|
||||
2. Implement basic styling for cards, panels, and buttons
|
||||
1. Create class-wp-allstars-ui-enhancements.php
|
||||
2. Implement UI components like cards, accordions, and notifications
|
||||
3. Add responsive design improvements
|
||||
- **Testing criteria**: Verify UI looks consistent across different screen sizes
|
||||
- **Testing criteria**: Verify UI components work correctly across different screen sizes
|
||||
- **Status**: ✅ Implemented in v0.2.3.3-stable
|
||||
|
||||
### Advanced Admin UI Components
|
||||
- **Description**: Add more sophisticated UI elements and interactions
|
||||
@ -123,8 +124,8 @@ This document outlines features from later versions that we plan to integrate in
|
||||
|
||||
The suggested implementation order is:
|
||||
|
||||
1. Admin Colors Feature (low complexity, enhances UI)
|
||||
2. Basic Admin UI Enhancements (foundation for other UI improvements)
|
||||
1. ✅ Admin Colors Feature (low complexity, enhances UI)
|
||||
2. ✅ Basic Admin UI Enhancements (foundation for other UI improvements)
|
||||
3. Role-Based Access Controls (security-related, high priority)
|
||||
4. Advanced Admin UI Components (builds on basic UI)
|
||||
5. Access Manager Improvements (depends on UI components and role controls)
|
||||
|
||||
11
STABILITY.md
11
STABILITY.md
@ -13,6 +13,9 @@ This document tracks the stability status of different versions of the WP Allsta
|
||||
|
||||
| Version | Status | Notes |
|
||||
|---------|--------|-------|
|
||||
| v0.2.3.3 | **[FUNCTIONAL]** | Stable version with Basic Admin UI Enhancements - adds improved components and responsive design. |
|
||||
| v0.2.3.2 | **[STABLE]** | Stable version with Admin Colors feature properly implemented. |
|
||||
| v0.2.3.1 | **[STABLE]** | Stable version with Sync Guard feature implemented. |
|
||||
| v0.2.3-stable-base | **[STABLE]** | Base stable version with robust file loading. All core functionality works properly. |
|
||||
| v0.2.4 | **[UNSTABLE]** | Contains critical errors - reference only for feature ideas. |
|
||||
| v0.2.6 | **[UNSTABLE]** | Contains file structure issues and critical errors - reference only for feature ideas. |
|
||||
@ -21,7 +24,13 @@ This document tracks the stability status of different versions of the WP Allsta
|
||||
|
||||
## Current Development
|
||||
|
||||
Current development is based on the v0.2.3-stable-base version. Features from later versions are being analyzed and reimplemented in a stable manner.
|
||||
Current development is based on the v0.2.3-stable-base version with incremental feature additions. We're implementing features from the roadmap while maintaining stability.
|
||||
|
||||
## Implemented Features
|
||||
1. Robust File Loading (v0.2.3-stable-base)
|
||||
2. Sync Guard (v0.2.3.1)
|
||||
3. Admin Colors Feature (v0.2.3.2)
|
||||
4. Basic Admin UI Enhancements (v0.2.3.3)
|
||||
|
||||
## Stability Guidelines
|
||||
|
||||
|
||||
97
TESTING.md
97
TESTING.md
@ -1,6 +1,99 @@
|
||||
# WP Allstars Plugin Testing Procedures
|
||||
# WP Allstars Plugin Testing Guide
|
||||
|
||||
This document outlines the testing procedures for the WP Allstars Plugin to ensure stability and reliability.
|
||||
This document provides testing checklist for the WP Allstars Plugin to ensure stability and functionality.
|
||||
|
||||
## General Testing Guidelines
|
||||
|
||||
1. Test each feature in isolation before testing integrated functionality
|
||||
2. Test on multiple WordPress versions (5.8+)
|
||||
3. Test with different themes activated
|
||||
4. Test with and without other plugins activated
|
||||
5. Test on different screen sizes (desktop, tablet, mobile)
|
||||
|
||||
## Feature-Specific Testing
|
||||
|
||||
### Multisite Category
|
||||
|
||||
- [ ] Verify "Multisite" category appears in plugin list filters
|
||||
- [ ] Verify plugins in the multisite category appear when the filter is selected
|
||||
- [ ] Verify network-plugin-auditor appears in multisite category
|
||||
- [ ] Test installation of network-plugin-auditor via the plugin interface
|
||||
|
||||
### Sync Guard
|
||||
|
||||
- [ ] Create a .syncing file in the plugin root directory
|
||||
- [ ] Verify plugin displays "syncing" notice instead of loading
|
||||
- [ ] Remove .syncing file
|
||||
- [ ] Verify plugin loads normally after removing .syncing file
|
||||
|
||||
### Admin Colors Feature
|
||||
|
||||
- [ ] Verify Admin Colors toggle appears in settings
|
||||
- [ ] Toggle the admin colors option to "Modern"
|
||||
- [ ] Verify admin UI updates with modern colors
|
||||
- [ ] Toggle back to "Default"
|
||||
- [ ] Verify admin UI returns to default colors
|
||||
- [ ] Test color switching on different pages of the admin
|
||||
- [ ] Verify setting is saved when toggling
|
||||
|
||||
### Basic Admin UI Enhancements
|
||||
|
||||
- [ ] Verify basic UI components are properly styled (buttons, forms, etc.)
|
||||
- [ ] Test responsive behavior on different screen sizes
|
||||
- [ ] Verify card components display properly with headers and footers
|
||||
- [ ] Test accordion functionality (expand/collapse)
|
||||
- [ ] Verify notification components display properly with different types (success, error, warning)
|
||||
- [ ] Test dismissible notifications
|
||||
- [ ] Verify that UI components are properly styled across different WordPress admin pages
|
||||
- [ ] Test keyboard accessibility for interactive components
|
||||
|
||||
## Integration Testing
|
||||
|
||||
- [ ] Verify all features work together without conflicts
|
||||
- [ ] Test performance impact with all features enabled
|
||||
- [ ] Verify plugin loads without errors on plugin activation
|
||||
- [ ] Test deactivation and reactivation
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
Test on the following browsers:
|
||||
- [ ] Chrome (latest)
|
||||
- [ ] Firefox (latest)
|
||||
- [ ] Safari (latest)
|
||||
- [ ] Edge (latest)
|
||||
|
||||
## Performance Testing
|
||||
|
||||
- [ ] Measure page load time before and after enabling the plugin
|
||||
- [ ] Check for any JavaScript errors in browser console
|
||||
- [ ] Verify CSS is properly cached
|
||||
- [ ] Ensure assets are properly minified
|
||||
|
||||
## Version Upgrade Testing
|
||||
|
||||
When testing a new version:
|
||||
- [ ] Test upgrading from previous version
|
||||
- [ ] Verify settings are preserved during upgrade
|
||||
- [ ] Check for any deprecation warnings or errors
|
||||
|
||||
## Security Testing
|
||||
|
||||
- [ ] Verify all admin pages are properly secured
|
||||
- [ ] Check for proper escaping of output
|
||||
- [ ] Verify nonce checks on form submissions
|
||||
- [ ] Test with user roles other than administrator
|
||||
|
||||
## Final Pre-Release Checklist
|
||||
|
||||
- [ ] All tests passed on multiple environments
|
||||
- [ ] Version numbers updated in all files
|
||||
- [ ] Changelog updated
|
||||
- [ ] Documentation reflects new features
|
||||
- [ ] All scripts and styles properly enqueued
|
||||
|
||||
## Regression Testing
|
||||
|
||||
After implementing new features, perform regression testing on previously implemented features to ensure they still function correctly.
|
||||
|
||||
## Pre-Merge Testing Checklist
|
||||
|
||||
|
||||
404
admin/css/wp-allstars-ui-enhancements.css
Normal file
404
admin/css/wp-allstars-ui-enhancements.css
Normal file
@ -0,0 +1,404 @@
|
||||
/**
|
||||
* WP Allstars UI Enhancements
|
||||
*
|
||||
* Provides enhanced UI components for the WP Allstars plugin
|
||||
* Building on the foundation of wp-allstars-admin.css
|
||||
*/
|
||||
|
||||
/*
|
||||
* Enhanced UI Base Styles
|
||||
* These styles apply to the entire admin area when the enhanced UI is activated
|
||||
*/
|
||||
.wp-allstars-enhanced-ui #wpcontent {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui .wp-allstars-wrap {
|
||||
padding: 0 20px 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Cards Component
|
||||
* A flexible container for displaying content with an optional header and footer
|
||||
*/
|
||||
.wp-allstars-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 20px;
|
||||
transition: box-shadow 0.3s ease, transform 0.2s ease;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.wp-allstars-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.wp-allstars-card-header {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fbfbfb;
|
||||
}
|
||||
|
||||
.wp-allstars-card-icon {
|
||||
margin-right: 12px;
|
||||
color: #2271b1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wp-allstars-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1d2327;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.wp-allstars-card-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.wp-allstars-card-footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fbfbfb;
|
||||
}
|
||||
|
||||
/*
|
||||
* Accordion Component
|
||||
* Collapsible content panels for presenting information in a limited space
|
||||
*/
|
||||
.wp-allstars-accordion {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 15px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.wp-allstars-accordion-header {
|
||||
padding: 15px 20px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fbfbfb;
|
||||
transition: background-color 0.2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.wp-allstars-accordion-header:hover {
|
||||
background: #f6f7f7;
|
||||
}
|
||||
|
||||
.wp-allstars-accordion-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1d2327;
|
||||
}
|
||||
|
||||
.wp-allstars-accordion-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.wp-allstars-accordion-icon::before,
|
||||
.wp-allstars-accordion-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: #2271b1;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.wp-allstars-accordion-icon::before {
|
||||
top: 9px;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.wp-allstars-accordion-icon::after {
|
||||
top: 0;
|
||||
left: 9px;
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.wp-allstars-accordion-header[aria-expanded="true"] .wp-allstars-accordion-icon::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.wp-allstars-accordion-content {
|
||||
display: none;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.wp-allstars-accordion-inner {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Enhanced Button Styles
|
||||
* Improved button appearance and interactions
|
||||
*/
|
||||
.wp-allstars-enhanced-ui .button {
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
border-color: #c3c4c7;
|
||||
padding: 0 12px;
|
||||
height: 36px;
|
||||
line-height: 34px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui .button:hover,
|
||||
.wp-allstars-enhanced-ui .button:focus {
|
||||
background: #f6f7f7;
|
||||
border-color: #8c8f94;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui .button-primary {
|
||||
background: #2271b1;
|
||||
border-color: #2271b1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui .button-primary:hover,
|
||||
.wp-allstars-enhanced-ui .button-primary:focus {
|
||||
background: #135e96;
|
||||
border-color: #135e96;
|
||||
color: #fff;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui .button-large {
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui .button-small {
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Enhanced Toggle Styles
|
||||
*/
|
||||
.wp-allstars-enhanced-ui .wp-toggle-switch {
|
||||
width: 46px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui .wp-toggle-slider {
|
||||
border-radius: 24px;
|
||||
background-color: #ccc;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui .wp-toggle-slider:before {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui input:checked + .wp-toggle-slider {
|
||||
background-color: #2271b1;
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui input:checked + .wp-toggle-slider:before {
|
||||
transform: translateX(22px);
|
||||
}
|
||||
|
||||
/*
|
||||
* Notification Component
|
||||
* Stylish notifications for providing user feedback
|
||||
*/
|
||||
.wp-allstars-notification {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 15px;
|
||||
border-left: 4px solid #2271b1;
|
||||
background: #f0f6fc;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
|
||||
position: relative;
|
||||
animation: wpaNotificationSlideIn 0.3s ease forwards;
|
||||
}
|
||||
|
||||
.wp-allstars-notification-success {
|
||||
background: #edfaef;
|
||||
border-left-color: #00a32a;
|
||||
}
|
||||
|
||||
.wp-allstars-notification-warning {
|
||||
background: #fcf9e8;
|
||||
border-left-color: #dba617;
|
||||
}
|
||||
|
||||
.wp-allstars-notification-error {
|
||||
background: #fcf0f1;
|
||||
border-left-color: #d63638;
|
||||
}
|
||||
|
||||
.wp-allstars-notification-icon {
|
||||
margin-right: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wp-allstars-notification-content {
|
||||
flex-grow: 1;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.wp-allstars-notification-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.wp-allstars-notification-message {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wp-allstars-notification-dismiss {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s ease;
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414L11.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414L10 11.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L8.586 10 5.293 6.707a1 1 0 0 1 1.414-1.414L10 8.586z"/></svg>') no-repeat center;
|
||||
}
|
||||
|
||||
.wp-allstars-notification-dismiss:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes wpaNotificationSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Form Enhancements
|
||||
*/
|
||||
.wp-allstars-enhanced-ui input[type="text"],
|
||||
.wp-allstars-enhanced-ui input[type="number"],
|
||||
.wp-allstars-enhanced-ui input[type="password"],
|
||||
.wp-allstars-enhanced-ui input[type="email"],
|
||||
.wp-allstars-enhanced-ui input[type="url"],
|
||||
.wp-allstars-enhanced-ui select,
|
||||
.wp-allstars-enhanced-ui textarea {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #8c8f94;
|
||||
padding: 8px 12px;
|
||||
box-shadow: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui input[type="text"]:focus,
|
||||
.wp-allstars-enhanced-ui input[type="number"]:focus,
|
||||
.wp-allstars-enhanced-ui input[type="password"]:focus,
|
||||
.wp-allstars-enhanced-ui input[type="email"]:focus,
|
||||
.wp-allstars-enhanced-ui input[type="url"]:focus,
|
||||
.wp-allstars-enhanced-ui select:focus,
|
||||
.wp-allstars-enhanced-ui textarea:focus {
|
||||
border-color: #2271b1;
|
||||
box-shadow: 0 0 0 1px #2271b1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Responsive Enhancements
|
||||
*/
|
||||
@media screen and (max-width: 960px) {
|
||||
.wp-allstars-enhanced-ui .wp-setting-main,
|
||||
.wp-allstars-enhanced-ui .wp-allstars-toggle-main {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui .wp-setting-left,
|
||||
.wp-allstars-enhanced-ui .wp-allstars-toggle-left {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.wp-allstars-enhanced-ui .wp-setting-row,
|
||||
.wp-allstars-enhanced-ui .wp-allstars-toggle {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui .wp-toggle-switch {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.wp-allstars-enhanced-ui .button {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wp-allstars-card-header,
|
||||
.wp-allstars-card-content,
|
||||
.wp-allstars-card-footer {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.wp-allstars-accordion-header {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.wp-allstars-accordion-inner {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.wp-allstars-enhanced-ui .wp-allstars-wrap {
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
|
||||
.wp-allstars-card-header,
|
||||
.wp-allstars-card-content,
|
||||
.wp-allstars-card-footer {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.wp-allstars-card-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.wp-allstars-notification {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
}
|
||||
184
admin/js/wp-allstars-ui-enhancements.js
Normal file
184
admin/js/wp-allstars-ui-enhancements.js
Normal file
@ -0,0 +1,184 @@
|
||||
/**
|
||||
* WP Allstars UI Enhancements
|
||||
*
|
||||
* Handles interactions for enhanced UI components
|
||||
*/
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
// UI Components Object
|
||||
var WPAallstarsUI = {
|
||||
/**
|
||||
* Initialize all UI components
|
||||
*/
|
||||
init: function() {
|
||||
this.initAccordions();
|
||||
this.initNotifications();
|
||||
this.initCards();
|
||||
|
||||
// Initialize templates
|
||||
this.initTemplates();
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize accordion functionality
|
||||
*/
|
||||
initAccordions: function() {
|
||||
// Handle accordion toggle
|
||||
$(document).on('click', '.wp-allstars-accordion-header', function() {
|
||||
var $header = $(this);
|
||||
var $content = $header.next('.wp-allstars-accordion-content');
|
||||
var isExpanded = $header.attr('aria-expanded') === 'true';
|
||||
|
||||
// Toggle aria-expanded attribute
|
||||
$header.attr('aria-expanded', !isExpanded);
|
||||
|
||||
// Toggle content visibility with animation
|
||||
$content.slideToggle(200);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize notification system
|
||||
*/
|
||||
initNotifications: function() {
|
||||
// Handle notification dismissal
|
||||
$(document).on('click', '.wp-allstars-notification-dismiss', function() {
|
||||
$(this).closest('.wp-allstars-notification').fadeOut(200, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
});
|
||||
|
||||
// Auto-dismiss success notifications after 5 seconds
|
||||
setTimeout(function() {
|
||||
$('.wp-allstars-notification-success').fadeOut(300, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}, 5000);
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize card components
|
||||
*/
|
||||
initCards: function() {
|
||||
// Add any card-specific interactions here
|
||||
$('.wp-allstars-card').on('mouseenter', function() {
|
||||
$(this).addClass('wp-allstars-card-hover');
|
||||
}).on('mouseleave', function() {
|
||||
$(this).removeClass('wp-allstars-card-hover');
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize Underscore.js templates
|
||||
*/
|
||||
initTemplates: function() {
|
||||
// Only proceed if wp.template is available (WordPress admin)
|
||||
if (typeof wp !== 'undefined' && wp.template) {
|
||||
// Store template functions for easy access
|
||||
this.templates = {
|
||||
accordion: wp.template('wp-allstars-accordion'),
|
||||
card: wp.template('wp-allstars-card'),
|
||||
notification: wp.template('wp-allstars-notification')
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Create an accordion
|
||||
*
|
||||
* @param {Object} data Accordion data with id, title, and content
|
||||
* @param {jQuery|String} target Where to append the accordion
|
||||
* @return {jQuery} The created accordion element
|
||||
*/
|
||||
createAccordion: function(data, target) {
|
||||
if (!this.templates || !this.templates.accordion) {
|
||||
return $('<div>').text('Template not available');
|
||||
}
|
||||
|
||||
var $accordion = $(this.templates.accordion(data));
|
||||
|
||||
if (target) {
|
||||
if (typeof target === 'string') {
|
||||
$(target).append($accordion);
|
||||
} else {
|
||||
target.append($accordion);
|
||||
}
|
||||
}
|
||||
|
||||
return $accordion;
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a card
|
||||
*
|
||||
* @param {Object} data Card data with header, content, footer, and icon
|
||||
* @param {jQuery|String} target Where to append the card
|
||||
* @return {jQuery} The created card element
|
||||
*/
|
||||
createCard: function(data, target) {
|
||||
if (!this.templates || !this.templates.card) {
|
||||
return $('<div>').text('Template not available');
|
||||
}
|
||||
|
||||
var $card = $(this.templates.card(data));
|
||||
|
||||
if (target) {
|
||||
if (typeof target === 'string') {
|
||||
$(target).append($card);
|
||||
} else {
|
||||
target.append($card);
|
||||
}
|
||||
}
|
||||
|
||||
return $card;
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a notification
|
||||
*
|
||||
* @param {Object} data Notification data with type, title, and message
|
||||
* @param {jQuery|String} target Where to append the notification
|
||||
* @return {jQuery} The created notification element
|
||||
*/
|
||||
createNotification: function(data, target) {
|
||||
if (!this.templates || !this.templates.notification) {
|
||||
return $('<div>').text('Template not available');
|
||||
}
|
||||
|
||||
// Set default type if not provided
|
||||
data.type = data.type || 'info';
|
||||
|
||||
var $notification = $(this.templates.notification(data));
|
||||
|
||||
if (target) {
|
||||
if (typeof target === 'string') {
|
||||
$(target).prepend($notification);
|
||||
} else {
|
||||
target.prepend($notification);
|
||||
}
|
||||
|
||||
// Auto-dismiss success notifications
|
||||
if (data.type === 'success') {
|
||||
setTimeout(function() {
|
||||
$notification.fadeOut(300, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
return $notification;
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize on document ready
|
||||
$(document).ready(function() {
|
||||
// Initialize UI components
|
||||
WPAallstarsUI.init();
|
||||
|
||||
// Make UI components available globally for use elsewhere
|
||||
window.WPAallstarsUI = WPAallstarsUI;
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
176
includes/class-wp-allstars-ui-enhancements.php
Normal file
176
includes/class-wp-allstars-ui-enhancements.php
Normal file
@ -0,0 +1,176 @@
|
||||
<?php
|
||||
/**
|
||||
* WP Allstars UI Enhancements
|
||||
*
|
||||
* Responsible for enhancing the WordPress admin interface with improved UI components
|
||||
* like cards, panels, buttons, and responsive design elements.
|
||||
*
|
||||
* @package WP_ALLSTARS
|
||||
* @version v0.2.3.3
|
||||
*/
|
||||
|
||||
if (!defined('WPINC')) {
|
||||
exit;
|
||||
}
|
||||
|
||||
class WP_Allstars_UI_Enhancements {
|
||||
/**
|
||||
* Constructor
|
||||
* Initialize hooks and settings
|
||||
*/
|
||||
public function __construct() {
|
||||
// Register scripts and styles
|
||||
add_action('admin_enqueue_scripts', array($this, 'enqueue_assets'));
|
||||
|
||||
// Add body class for enhanced UI
|
||||
add_filter('admin_body_class', array($this, 'add_body_class'));
|
||||
|
||||
// Initialize UI components
|
||||
$this->init_components();
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue CSS and JavaScript assets
|
||||
*/
|
||||
public function enqueue_assets($hook) {
|
||||
// Only load on WP Allstars pages
|
||||
if (strpos($hook, 'wp-allstars') === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Already registered in main plugin file, but ensure they're enqueued
|
||||
wp_enqueue_style('wp-allstars-admin');
|
||||
wp_enqueue_script('wp-allstars-admin');
|
||||
|
||||
// Add UI enhancements script
|
||||
wp_enqueue_script(
|
||||
'wp-allstars-ui-enhancements',
|
||||
plugin_dir_url(dirname(__FILE__)) . 'admin/js/wp-allstars-ui-enhancements.js',
|
||||
array('jquery', 'wp-allstars-admin'),
|
||||
WP_ALLSTARS_VERSION,
|
||||
true
|
||||
);
|
||||
|
||||
// Add enhanced UI styles
|
||||
wp_enqueue_style(
|
||||
'wp-allstars-ui-enhancements',
|
||||
plugin_dir_url(dirname(__FILE__)) . 'admin/css/wp-allstars-ui-enhancements.css',
|
||||
array('wp-allstars-admin'),
|
||||
WP_ALLSTARS_VERSION
|
||||
);
|
||||
|
||||
// Localize script with settings
|
||||
wp_localize_script('wp-allstars-ui-enhancements', 'wpAllstarsUI', array(
|
||||
'ajaxurl' => admin_url('ajax.php'),
|
||||
'nonce' => wp_create_nonce('wp_allstars_ui_nonce'),
|
||||
));
|
||||
}
|
||||
|
||||
/**
|
||||
* Add body class for enhanced UI
|
||||
*/
|
||||
public function add_body_class($classes) {
|
||||
if (isset($_GET['page']) && strpos($_GET['page'], 'wp-allstars') !== false) {
|
||||
$classes .= ' wp-allstars-enhanced-ui';
|
||||
}
|
||||
return $classes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize UI components
|
||||
*/
|
||||
private function init_components() {
|
||||
// Add accordion functionality
|
||||
add_action('admin_footer', array($this, 'render_accordion_template'));
|
||||
|
||||
// Add card component
|
||||
add_action('admin_footer', array($this, 'render_card_template'));
|
||||
|
||||
// Add notification system
|
||||
add_action('admin_footer', array($this, 'render_notification_template'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Render accordion template
|
||||
*/
|
||||
public function render_accordion_template() {
|
||||
// Only on WP Allstars pages
|
||||
if (!isset($_GET['page']) || strpos($_GET['page'], 'wp-allstars') === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
<script type="text/html" id="tmpl-wp-allstars-accordion">
|
||||
<div class="wp-allstars-accordion" role="tablist">
|
||||
<div class="wp-allstars-accordion-header" role="tab" id="accordion-header-{{data.id}}" aria-expanded="false">
|
||||
<div class="wp-allstars-accordion-title">{{data.title}}</div>
|
||||
<div class="wp-allstars-accordion-icon"></div>
|
||||
</div>
|
||||
<div class="wp-allstars-accordion-content" role="tabpanel" aria-labelledby="accordion-header-{{data.id}}">
|
||||
<div class="wp-allstars-accordion-inner">
|
||||
{{{data.content}}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Render card template
|
||||
*/
|
||||
public function render_card_template() {
|
||||
// Only on WP Allstars pages
|
||||
if (!isset($_GET['page']) || strpos($_GET['page'], 'wp-allstars') === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
<script type="text/html" id="tmpl-wp-allstars-card">
|
||||
<div class="wp-allstars-card">
|
||||
<# if (data.header) { #>
|
||||
<div class="wp-allstars-card-header">
|
||||
<# if (data.icon) { #>
|
||||
<div class="wp-allstars-card-icon">{{{data.icon}}}</div>
|
||||
<# } #>
|
||||
<div class="wp-allstars-card-title">{{data.header}}</div>
|
||||
</div>
|
||||
<# } #>
|
||||
<div class="wp-allstars-card-content">
|
||||
{{{data.content}}}
|
||||
</div>
|
||||
<# if (data.footer) { #>
|
||||
<div class="wp-allstars-card-footer">
|
||||
{{{data.footer}}}
|
||||
</div>
|
||||
<# } #>
|
||||
</div>
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Render notification template
|
||||
*/
|
||||
public function render_notification_template() {
|
||||
// Only on WP Allstars pages
|
||||
if (!isset($_GET['page']) || strpos($_GET['page'], 'wp-allstars') === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
<script type="text/html" id="tmpl-wp-allstars-notification">
|
||||
<div class="wp-allstars-notification wp-allstars-notification-{{data.type}}">
|
||||
<div class="wp-allstars-notification-icon"></div>
|
||||
<div class="wp-allstars-notification-content">
|
||||
<# if (data.title) { #>
|
||||
<div class="wp-allstars-notification-title">{{data.title}}</div>
|
||||
<# } #>
|
||||
<div class="wp-allstars-notification-message">{{data.message}}</div>
|
||||
</div>
|
||||
<div class="wp-allstars-notification-dismiss"></div>
|
||||
</div>
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@ -6,7 +6,7 @@
|
||||
* site performance, improve workflow, and provide recommendations for plugins and hosting.
|
||||
*
|
||||
* @package WP_ALLSTARS
|
||||
* @version v0.2.3.1
|
||||
* @version v0.2.3.3
|
||||
*
|
||||
* Plugin Name: WP Allstars
|
||||
* Plugin URI: https://wpallstars.com
|
||||
@ -15,13 +15,13 @@
|
||||
* Author URI: https://wpallstars.com
|
||||
* Text Domain: wp-allstars
|
||||
* Domain Path: /languages
|
||||
* @version v0.2.3.1
|
||||
* @version v0.2.3.3
|
||||
*
|
||||
* WP Allstars is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 2 of the License, or
|
||||
* any later version.
|
||||
* Version: v0.2.3.1 (Beta)
|
||||
* Version: v0.2.3.3 (Beta)
|
||||
*
|
||||
* WP Allstars is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
@ -36,7 +36,7 @@ if (!defined('WPINC')) {
|
||||
exit;
|
||||
}
|
||||
|
||||
define('WP_ALLSTARS_VERSION', 'v0.2.3.1');
|
||||
define('WP_ALLSTARS_VERSION', 'v0.2.3.3');
|
||||
|
||||
/**
|
||||
* Load files safely by checking if they exist first
|
||||
@ -79,6 +79,8 @@ register_activation_hook(__FILE__, 'wp_allstars_activate');
|
||||
|
||||
// Core includes
|
||||
wp_allstars_require_if_exists(plugin_dir_path(__FILE__) . 'includes/class-wp-allstars-auto-upload.php');
|
||||
wp_allstars_require_if_exists(plugin_dir_path(__FILE__) . 'includes/class-wp-allstars-admin-colors.php');
|
||||
wp_allstars_require_if_exists(plugin_dir_path(__FILE__) . 'includes/class-wp-allstars-ui-enhancements.php');
|
||||
|
||||
// Admin includes
|
||||
if (is_admin()) {
|
||||
@ -121,6 +123,17 @@ function wp_allstars_init_auto_upload() {
|
||||
add_action('init', 'wp_allstars_init_auto_upload');
|
||||
|
||||
/**
|
||||
* Initialize core plugin classes
|
||||
* Initialize core features
|
||||
*/
|
||||
$wp_allstars_auto_upload = new WP_Allstars_Auto_Upload();
|
||||
function wp_allstars_init_features() {
|
||||
// Initialize Admin Colors feature if the class exists
|
||||
if (class_exists('WP_Allstars_Admin_Colors')) {
|
||||
new WP_Allstars_Admin_Colors();
|
||||
}
|
||||
|
||||
// Initialize UI Enhancements if the class exists
|
||||
if (class_exists('WP_Allstars_UI_Enhancements')) {
|
||||
new WP_Allstars_UI_Enhancements();
|
||||
}
|
||||
}
|
||||
add_action('plugins_loaded', 'wp_allstars_init_features');
|
||||
Reference in New Issue
Block a user