mypresta.rocks/prestashop-entity-selector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add schedule preview dropdown styles and various improvements

Browse Source 
- Add .schedule-preview-dropdown and .schedule-preview-item CSS classes
- Add .btn-schedule-preview badge styling
- Add preview functionality for entity list views
- Improve modal and dropdown styling
- Various JS and SCSS enhancements

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
myprestarocks
2026-02-04 11:49:01 +00:00
parent 4eeb8d85ae
commit 451a47cdcd
22 changed files with 11860 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
sources/scss/components/_combinations.scss
View File

@@ -3,6 +3,7 @@
* Product attribute combination selection styles
*/
@use "sass:color";
@use '../variables' as *;
@use '../mixins' as *;
@@ -298,7 +299,7 @@
&:hover {
background: $es-primary-hover;
border-color: darken($es-primary-hover, 5%);
border-color: color.adjust($es-primary-hover, $lightness: -5%);
}
}
}

65
sources/scss/components/_condition-trait.scss
View File

@@ -88,6 +88,29 @@
text-overflow: ellipsis;
}
// Schedule summary (shows current config at a glance)
.trait-summary {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
font-size: $es-font-size-xs;
font-weight: $es-font-weight-medium;
color: $es-primary;
background: rgba($es-primary, 0.08);
border-radius: $es-radius-full;
white-space: nowrap;
margin-left: $es-spacing-md;
flex-shrink: 0;
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
&:empty {
display: none;
}
}
.trait-header-right {
display: flex;
align-items: center;
@@ -277,6 +300,48 @@
gap: $es-spacing-md;
}
// =============================================================================
// Collapse Header (form-content layout)
// =============================================================================
.entity-selector-collapse-header {
padding: 0;
margin-bottom: $es-spacing-sm;
.btn-collapse-toggle {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0;
background: none;
border: none;
color: $es-primary;
font-size: $es-font-size-sm;
cursor: pointer;
transition: color $es-transition-fast;
&:hover {
color: $es-primary-hover;
}
.collapse-icon {
font-size: 1.25rem;
transition: transform 0.2s;
}
.collapse-label {
font-weight: $es-font-weight-medium;
}
}
}
// When collapsed, rotate icon
.condition-trait.collapsed .entity-selector-collapse-header {
.collapse-icon {
// Icon already shows expand_more when collapsed
}
}
// =============================================================================
// Animations
// =============================================================================

49
sources/scss/components/_entity-selector.scss
View File

@@ -229,6 +229,55 @@
}
}
// Tabs row with actions (form-content layout)
.entity-selector-tabs-row {
display: flex;
align-items: stretch;
background: $es-slate-100;
border-bottom: 1px solid $es-border-color;
border-radius: $es-radius-lg $es-radius-lg 0 0;
.target-block-tabs {
flex: 1;
border-bottom: 0;
border-radius: $es-radius-lg 0 0 0;
}
}
// Expand/collapse toggle area (entire section is clickable)
.entity-selector-actions.btn-toggle-blocks {
display: flex;
align-items: center;
justify-content: center;
padding: 0 $es-spacing-md;
background: $es-slate-100;
border-left: 1px solid $es-border-color;
color: $es-slate-400;
cursor: pointer;
transition: all $es-transition-fast;
&:hover {
background: $es-slate-200;
color: $es-primary;
}
.material-icons {
font-size: 20px !important;
}
}
// When expanded - highlight the toggle area
.entity-selector-trait:not(.blocks-collapsed) .entity-selector-actions.btn-toggle-blocks {
background: $es-primary-light;
border-left-color: $es-primary;
color: $es-primary;
}
// Blocks content wrapper (for form-content layout collapse)
.entity-selector-blocks-content {
// Inherits styles from condition-trait-body context
}
// Block container
.target-block-container {
display: none;

14
sources/scss/components/_groups.scss
View File

@@ -954,6 +954,20 @@
color: $es-primary;
}
// Country holidays variant - use calendar icon style
&.country-holidays {
background: rgba(139, 92, 246, 0.1);
color: #8b5cf6;
&:hover {
background: rgba(139, 92, 246, 0.2);
}
&.clickable {
background: rgba(139, 92, 246, 0.15);
}
}
i {
font-size: 10px;
}

70
sources/scss/components/_list-preview.scss
View File

@@ -517,3 +517,73 @@
opacity: 0.9;
}
}
// =============================================================================
// Schedule Preview Dropdown (for admin list columns)
// =============================================================================
.schedule-preview-dropdown {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 4px;
z-index: 1000;
min-width: 180px;
padding: $es-spacing-sm;
background: $es-white;
border: 1px solid $es-border-color;
border-radius: $es-radius-md;
box-shadow: $es-shadow-lg;
font-size: $es-font-size-sm;
text-align: left;
white-space: nowrap;
}
.schedule-preview-item {
display: flex;
align-items: flex-start;
gap: $es-spacing-sm;
padding: $es-spacing-xs 0;
color: $es-text-primary;
.material-icons {
flex-shrink: 0;
font-size: 16px;
color: $es-text-muted;
}
strong {
font-weight: $es-font-weight-semibold;
}
.schedule-time {
color: $es-text-muted;
}
}
// Badge trigger for schedule preview
.btn-schedule-preview {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
min-width: 20px;
height: 20px;
padding: 0 0.5rem;
background: $es-primary;
color: $es-white;
font-size: $es-font-size-xs;
font-weight: $es-font-weight-semibold;
border-radius: 50rem;
cursor: pointer;
text-transform: none;
.icon-eye {
font-size: 10px;
line-height: 1;
opacity: 0.8;
}
}

215
sources/scss/components/_modal.scss
View File

@@ -3,6 +3,7 @@
* Preview modals, confirmation dialogs
*/
@use "sass:color";
@use '../variables' as *;
@use '../mixins' as *;
@@ -162,7 +163,7 @@
background: $es-danger;
&:hover {
background: darken($es-danger, 10%);
background: color.adjust($es-danger, $lightness: -10%);
}
}
@@ -273,3 +274,215 @@
border-top: none;
}
}
// ==========================================================================
// Holiday Preview Modal
// ==========================================================================
#mpr-holiday-preview-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: $es-z-modal;
&.show {
display: flex;
align-items: center;
justify-content: center;
}
.mpr-modal-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.mpr-modal-dialog {
position: relative;
width: 90%;
max-width: 480px;
max-height: 80vh;
background: $es-white;
border-radius: $es-radius-lg;
box-shadow: $es-shadow-xl;
display: flex;
flex-direction: column;
overflow: hidden;
}
.mpr-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: $es-spacing-md;
padding: $es-spacing-md $es-spacing-lg;
background: $es-bg-header;
border-bottom: 1px solid $es-border-color;
flex-shrink: 0;
}
.mpr-modal-title {
display: flex;
align-items: center;
gap: $es-spacing-sm;
font-size: $es-font-size-base;
font-weight: $es-font-weight-semibold;
color: $es-text-primary;
margin: 0;
i.material-icons {
font-size: 20px;
color: $es-primary;
}
}
.mpr-modal-close {
@include button-reset;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: $es-text-muted;
border-radius: $es-radius-md;
transition: all $es-transition-fast;
&:hover {
background: $es-slate-200;
color: $es-text-secondary;
}
i {
font-size: 18px;
}
}
.mpr-modal-body {
flex: 1;
overflow-y: auto;
padding: $es-spacing-lg;
@include custom-scrollbar;
}
// Loading state
.holiday-preview-loading {
display: flex;
align-items: center;
justify-content: center;
gap: $es-spacing-sm;
padding: $es-spacing-xl 0;
color: $es-text-muted;
font-size: $es-font-size-sm;
i {
font-size: $es-font-size-lg;
}
}
// Empty state
.holiday-preview-empty {
text-align: center;
padding: $es-spacing-xl 0;
color: $es-text-muted;
i.material-icons {
font-size: 48px;
opacity: 0.5;
margin-bottom: $es-spacing-md;
}
p {
margin: 0 0 $es-spacing-xs;
}
.hint {
font-size: $es-font-size-xs;
color: $es-text-muted;
}
}
// Holiday list
.holiday-list {
display: flex;
flex-direction: column;
gap: $es-spacing-sm;
}
.holiday-item {
display: flex;
align-items: flex-start;
gap: $es-spacing-md;
padding: $es-spacing-sm $es-spacing-md;
background: $es-slate-50;
border-radius: $es-radius-md;
border-left: 3px solid $es-success;
&.holiday-type-bank {
border-left-color: $es-info;
}
&.holiday-type-observance {
border-left-color: $es-warning;
}
&.holiday-type-regional {
border-left-color: #8b5cf6;
}
}
.holiday-date {
flex-shrink: 0;
min-width: 100px;
.holiday-day {
display: block;
font-size: $es-font-size-sm;
font-weight: $es-font-weight-semibold;
color: $es-text-primary;
}
.holiday-weekday {
display: block;
font-size: $es-font-size-xs;
color: $es-text-muted;
}
}
.holiday-info {
flex: 1;
min-width: 0;
}
.holiday-name {
display: block;
font-size: $es-font-size-sm;
color: $es-text-primary;
word-wrap: break-word;
}
.holiday-type-badge {
display: inline-block;
margin-top: $es-spacing-xs;
padding: 0.125rem 0.375rem;
font-size: 10px;
font-weight: $es-font-weight-medium;
text-transform: capitalize;
background: $es-slate-200;
color: $es-text-secondary;
border-radius: $es-radius-sm;
}
.holiday-preview-note {
margin-top: $es-spacing-md;
font-size: $es-font-size-xs;
color: $es-text-muted;
text-align: center;
}
}

3
sources/scss/components/_tree.scss
View File

@@ -3,6 +3,7 @@
* Hierarchical tree view for category selection inside dropdown
*/
@use "sass:color";
@use '../variables' as *;
@use '../mixins' as *;
@@ -231,7 +232,7 @@
}
&.popover-open {
background: darken($es-primary, 10%);
background: color.adjust($es-primary, $lightness: -10%);
}
}
}

26
sources/scss/components/_value-picker.scss
View File

@@ -201,28 +201,36 @@
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.375rem 0.625rem;
color: $es-text-secondary;
background: $es-slate-100;
border: 1px solid transparent;
border-radius: $es-radius-sm;
padding: 0.375rem 0.75rem;
color: $es-text-muted;
background: transparent;
border: 1px dashed $es-border-color;
border-radius: 100px; // Pill shape
font-size: $es-font-size-xs;
font-weight: $es-font-weight-medium;
font-weight: $es-font-weight-normal;
cursor: pointer;
transition: all $es-transition-fast;
&:hover {
background: $es-slate-200;
color: $es-text-secondary;
border-color: $es-slate-400;
border-style: solid;
}
&.selected {
color: $es-primary;
background: $es-primary-light;
border-color: $es-primary;
border: 1px solid $es-primary;
font-weight: $es-font-weight-medium;
}
i {
font-size: 12px;
font-size: 11px;
opacity: 0.6;
}
&.selected i {
opacity: 1;
}
}