[FUNCTIONAL] Add Basic Admin UI Enhancements feature
This commit is contained in:
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);
|
Reference in New Issue
Block a user