Add selection validation and improve tooltip component
- Add validation system to prevent contradicting conditions: - Same entity in include/exclude detection - Parent-child conflict detection for tree entities - Redundant selection prevention - Toast notifications for validation errors - Fix entity icons (employees: briefcase, taxes: calculator) - Improve tooltip component: - Use Material Icons instead of broken FA4 icons - Fix positioning using getBoundingClientRect for viewport coords - Add click-to-pin functionality with close button - Pinned tooltips show X icon and close button in corner - Add lightweight test suite (31 tests) for validation logic Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,13 +1,12 @@
|
||||
/**
|
||||
* Tooltip Component
|
||||
* Info tooltips and help popovers
|
||||
* Info tooltips for method help
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// =============================================================================
|
||||
// MPR Info Wrapper (hover tooltip trigger)
|
||||
// Info Wrapper (tooltip trigger)
|
||||
// =============================================================================
|
||||
|
||||
.mpr-info-wrapper {
|
||||
@@ -16,67 +15,21 @@
|
||||
position: relative;
|
||||
cursor: help;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
margin-left: 0.25rem;
|
||||
|
||||
// Tooltip (absolute positioned, follows element)
|
||||
.mpr-info-wrapper .mpr-tooltip {
|
||||
position: absolute;
|
||||
background: $es-white;
|
||||
color: $es-slate-800;
|
||||
padding: $es-spacing-md $es-spacing-lg;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: 13px;
|
||||
line-height: 1.625;
|
||||
white-space: normal;
|
||||
z-index: 1050;
|
||||
max-width: 350px;
|
||||
min-width: 200px;
|
||||
text-align: left;
|
||||
bottom: calc(100% + 10px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(64, 68, 82, 0.16) 0px 0px 0px 1px,
|
||||
rgba(64, 68, 82, 0.08) 0px 2px 5px 0px;
|
||||
|
||||
// Arrow (border)
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 9px solid transparent;
|
||||
border-top-color: rgba(64, 68, 82, 0.16);
|
||||
.material-icons {
|
||||
font-size: 16px;
|
||||
color: $es-text-muted;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
// Arrow (fill)
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 8px solid transparent;
|
||||
border-top-color: $es-white;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: $es-text-secondary;
|
||||
&:hover .material-icons {
|
||||
color: $es-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Fixed Tooltip (appended to body)
|
||||
// Fixed Tooltip (appended to body on hover)
|
||||
// =============================================================================
|
||||
|
||||
.mpr-tooltip-fixed {
|
||||
@@ -86,55 +39,69 @@
|
||||
padding: $es-spacing-md $es-spacing-lg;
|
||||
border-radius: $es-radius-md;
|
||||
font-size: 13px;
|
||||
line-height: 1.625;
|
||||
line-height: 1.5;
|
||||
white-space: normal;
|
||||
z-index: 10500;
|
||||
max-width: 350px;
|
||||
min-width: 200px;
|
||||
max-width: 320px;
|
||||
min-width: 180px;
|
||||
text-align: left;
|
||||
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
|
||||
rgba(64, 68, 82, 0.16) 0px 0px 0px 1px,
|
||||
rgba(64, 68, 82, 0.08) 0px 2px 5px 0px;
|
||||
pointer-events: none;
|
||||
|
||||
// Pinned tooltip allows interaction
|
||||
&.pinned {
|
||||
pointer-events: auto;
|
||||
padding-right: $es-spacing-xl + 1rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 0.375rem;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: #337ab7;
|
||||
color: $es-primary;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Tooltip Content Styling
|
||||
// =============================================================================
|
||||
ul {
|
||||
margin: 0.5rem 0 0;
|
||||
padding-left: 1.25rem;
|
||||
|
||||
.tooltip-list {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
> div {
|
||||
margin: 0.25rem 0;
|
||||
padding-left: 0.5rem;
|
||||
li {
|
||||
margin: 0.25rem 0;
|
||||
color: $es-text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-example {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
background: $es-slate-100;
|
||||
padding: 0.25rem 0.5rem;
|
||||
// Close button for pinned tooltips
|
||||
.mpr-tooltip-close {
|
||||
position: absolute;
|
||||
top: 0.375rem;
|
||||
right: 0.375rem;
|
||||
padding: 0.125rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: $es-radius-sm;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
line-height: 1;
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
.tooltip-logic {
|
||||
font-size: 11px;
|
||||
color: $es-text-muted;
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid $es-border-color;
|
||||
.material-icons {
|
||||
font-size: 16px;
|
||||
color: $es-text-muted;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
|
||||
.material-icons {
|
||||
color: $es-slate-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
87
sources/scss/components/_validation.scss
Normal file
87
sources/scss/components/_validation.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
/**
|
||||
* Validation Toast Component
|
||||
* Error notifications for selection conflicts
|
||||
*/
|
||||
|
||||
@use '../variables' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
// Validation error toast
|
||||
.es-validation-toast {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $es-spacing-sm;
|
||||
padding: $es-spacing-md;
|
||||
background: $es-white;
|
||||
border: 1px solid $es-danger;
|
||||
border-left: 4px solid $es-danger;
|
||||
border-radius: $es-radius-md;
|
||||
box-shadow: $es-shadow-lg;
|
||||
max-width: 400px;
|
||||
animation: es-toast-slide-in 0.2s ease-out;
|
||||
|
||||
.es-toast-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $es-danger;
|
||||
flex-shrink: 0;
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.es-toast-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.es-toast-title {
|
||||
font-size: $es-font-size-sm;
|
||||
font-weight: $es-font-weight-semibold;
|
||||
color: $es-danger;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.es-toast-message {
|
||||
font-size: $es-font-size-xs;
|
||||
color: $es-text-secondary;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.es-toast-close {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: $es-text-muted;
|
||||
border-radius: $es-radius-sm;
|
||||
flex-shrink: 0;
|
||||
transition: all $es-transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $es-slate-100;
|
||||
color: $es-text-primary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes es-toast-slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -29,3 +29,4 @@
|
||||
@use 'components/method-dropdown';
|
||||
@use 'components/tooltip';
|
||||
@use 'components/tree';
|
||||
@use 'components/validation';
|
||||
|
||||
Reference in New Issue
Block a user