TCoreCard

Standalone card component with header, content area, footer with status panels, traffic light indicator, and drag/resize handles. Base class for dashboard cards.

CardDragResizeStatus

Overview

TCoreCard is the base card component providing a complete card structure with header, scrollable content area (TFormContainer), footer with configurable status panels, traffic light indicator, and corner resize handle. It supports pixel-based drag and resize operations with document-level mouse capture.

Component Structure

TCoreCard
├── HeaderDiv
│   ├── DragHandle (6-dot pattern, grab cursor)
│   └── TitleLabel
├── ContentDiv (TFormContainer - scrollable, embeds forms)
├── FooterDiv
│   ├── StatusPanels[0..n] (configurable count)
│   └── TrafficLightDiv (green/orange/red indicator)
└── ResizeHandle (bottom-right corner)

Published Properties

Property	Type	Default	Description
CardTitle	`STRING`	''	Title displayed in the header.
CardSubtitle	`STRING`	''	Subtitle (used by subclasses like TCoreHeaderCard).
TrafficLight	`TTrafficLight`	tlOrange	Traffic light state: tlGreen, tlOrange, tlRed.
ShowFooter	`Boolean`	True	Show/hide the footer section.
ShowTrafficLight	`Boolean`	True	Show/hide the traffic light indicator.
StatusCount	`Integer`	4	Number of status panels in the footer.
TrafficLightGlow	`Boolean`	False	Enable glow effect on traffic light.
AllowVerticalScroll	`Boolean`	True	Allow content area to scroll vertically.

Traffic Light States

State	Default Color	Use Case
tlGreen	`#28a745`	Good/OK status
tlOrange	`#fd7e14`	Warning/Pending status
tlRed	`#dc3545`	Error/Critical status

Status Panels

The footer contains configurable status panels - small boxes for displaying status text. Each panel has inset shadow styling and truncates overflow text.

PROCEDURE SetStatusCount(Count: Integer);

Sets the number of status panels.

PROCEDURE SetStatusText(Index: Integer; CONST Text: STRING);

Sets the text for a specific status panel by index (0-based).

FUNCTION GetStatusText(Index: Integer): STRING;

Gets the text from a specific status panel.

Bottom Message

TCoreCard includes TCoreBottomMessage for slide-up notifications:

PROCEDURE ShowBottomMessage(CONST MessageText: STRING; ResultType: TResultType = rtSuccess; Duration: Integer = 2000);

Shows a slide-up message at the bottom of the card. Auto-hides after Duration milliseconds.

Drag & Resize

TCoreCard provides pixel-based drag and resize operations:

Drag Handle: 6-dot pattern in header with grab cursor. Click and drag to move card.
Resize Handle: Bottom-right corner with diagonal gradient. Click and drag to resize.
Document Capture: Mouse events use document-level capture for smooth tracking outside card bounds.

Subclass Override: TDashboardGridCard overrides the drag/resize handlers to convert pixel movements to grid cell movements. The handler properties are public to allow this customization.

Event Handler Properties (pas2js)

Property	Description
DragHandleMouseDownHandler	Handler for drag handle mousedown
DocumentMouseMoveHandler	Handler for mousemove during drag
DocumentMouseUpHandler	Handler for mouseup after drag
ResizeHandleMouseDownHandler	Handler for resize handle mousedown
ResizeMouseMoveHandler	Handler for mousemove during resize
ResizeMouseUpHandler	Handler for mouseup after resize

Theme Integration

TCoreCard implements IThemeSubscriber. Theme styles applied from:

CardStyle - card background, footer background/border
StatusBoxStyle - status panel colors
TrafficLightStyle - traffic light colors, size, glow effects

Usage Example

Card := TCoreCard.Create(Self);
Card.Parent := Self;
Card.CardTitle := 'System Status';
Card.StatusCount := 3;
Card.SetStatusText(0, 'CPU: 45%');
Card.SetStatusText(1, 'Memory: 2.1GB');
Card.SetStatusText(2, 'Uptime: 14d');
Card.SetTrafficLightState(tlGreen, True);  /// Green with glow

/// Show notification
Card.ShowBottomMessage('Settings saved', rtSuccess, 3000);