CubeCraft-Creations/Control-Center
9
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

CUB-49: Global Action Modal component with tactical dark mode styling

Browse Source
This commit is contained in:
cubecraft-agents[bot]
2026-04-26 13:50:45 +00:00
parent 8d0adeb2e9
commit 4748ba0306
3 changed files with 496 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/app/components/global-action-modal/global-action-modal.component.html Normal file
View File

@@ -0,0 +1,78 @@
<!-- ============================================================================
Global Action Modal (CUB-49)
Four primary actions with tactical dark mode styling.
Close button (×) and backdrop click both dismiss.
========================================================================== -->
<!-- Close button -->
<button
class="global-action-modal__close"
mat-icon-button
aria-label="Close modal"
(click)="close()"
>
<mat-icon>close</mat-icon>
</button>
<!-- Modal header -->
<h2 class="global-action-modal__title">
<mat-icon class="global-action-modal__title-icon" aria-hidden="true">terminal</mat-icon>
Command Center
</h2>
<p class="global-action-modal__subtitle">
Select an action to execute across all agents.
</p>
<!-- Action grid -->
<div class="global-action-modal__actions">
<!-- Deploy All -->
<button
class="global-action-modal__action global-action-modal__action--deploy"
mat-flat-button
aria-label="Deploy all agents"
(click)="onDeployAll()"
>
<mat-icon class="global-action-modal__action-icon" aria-hidden="true">rocket_launch</mat-icon>
<span class="global-action-modal__action-label">Deploy All</span>
<span class="global-action-modal__action-desc">Activate all idle agents</span>
</button>
<!-- Pause All -->
<button
class="global-action-modal__action global-action-modal__action--pause"
mat-flat-button
aria-label="Pause all agents"
(click)="onPauseAll()"
>
<mat-icon class="global-action-modal__action-icon" aria-hidden="true">pause_circle</mat-icon>
<span class="global-action-modal__action-label">Pause All</span>
<span class="global-action-modal__action-desc">Suspend all running agents</span>
</button>
<!-- Emergency Stop -->
<button
class="global-action-modal__action global-action-modal__action--emergency"
mat-flat-button
aria-label="Emergency stop all agents"
(click)="onEmergencyStop()"
>
<mat-icon class="global-action-modal__action-icon" aria-hidden="true">emergency</mat-icon>
<span class="global-action-modal__action-label">Emergency Stop</span>
<span class="global-action-modal__action-desc">Immediately halt all operations</span>
</button>
<!-- Add Agent -->
<button
class="global-action-modal__action global-action-modal__action--add"
mat-flat-button
aria-label="Add a new agent"
(click)="onAddAgent()"
>
<mat-icon class="global-action-modal__action-icon" aria-hidden="true">add_circle</mat-icon>
<span class="global-action-modal__action-label">Add Agent</span>
<span class="global-action-modal__action-desc">Register a new agent to the fleet</span>
</button>
</div>

309
frontend/src/app/components/global-action-modal/global-action-modal.component.scss Normal file
View File

@@ -0,0 +1,309 @@
// ============================================================================
// Global Action Modal Styles — M3 Tactical Dark (CUB-49)
// Uses CUB-47 CSS custom properties for palette consistency.
// Smooth fade/scale animation on open/close.
// ============================================================================
// ---------------------------------------------------------------------------
// Dialog Container Override
// ---------------------------------------------------------------------------
// Override the MatDialog container to use tactical dark styling.
// ---------------------------------------------------------------------------
:host {
display: block;
position: relative;
outline: none;
}
// ---------------------------------------------------------------------------
// Close Button
// ---------------------------------------------------------------------------
.global-action-modal__close {
position: absolute;
top: 12px;
right: 12px;
z-index: 1;
color: var(--cc-on-surface-variant);
--mat-icon-button-state-layer-color: transparent;
&:hover,
&:focus {
color: var(--color-text-primary);
background-color: rgba(255, 255, 255, 0.08);
}
&:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
// ---------------------------------------------------------------------------
// Title & Subtitle
// ---------------------------------------------------------------------------
.global-action-modal__title {
margin: 0 0 4px 0;
font-size: 22px;
font-weight: 600;
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: 10px;
letter-spacing: -0.01em;
}
.global-action-modal__title-icon {
font-size: 24px;
width: 24px;
height: 24px;
color: var(--color-primary);
}
.global-action-modal__subtitle {
margin: 0 0 24px 0;
font-size: 14px;
color: var(--cc-on-surface-variant);
line-height: 1.5;
}
// ---------------------------------------------------------------------------
// Action Grid
// ---------------------------------------------------------------------------
.global-action-modal__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
// ---------------------------------------------------------------------------
// Action Buttons
// ---------------------------------------------------------------------------
.global-action-modal__action {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 16px;
border-radius: 16px;
min-height: 140px;
text-align: center;
transition: background-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
cursor: pointer;
border: 1px solid transparent;
// Reset default mat-button styles to let our custom styles take over
--mat-flat-button-state-layer-color: transparent;
// Hover lift effect
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
// Active press effect
&:active {
transform: translateY(0);
}
// Focus-visible for keyboard users
&:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
// ---------------------------------------------------------------------------
// Action Variants — each with distinct color personality
// ---------------------------------------------------------------------------
// Deploy All — Primary/cyan accent
.global-action-modal__action--deploy {
background-color: rgba(56, 189, 248, 0.12);
border-color: rgba(56, 189, 248, 0.25);
color: var(--color-primary);
&:hover {
background-color: rgba(56, 189, 248, 0.2);
}
.global-action-modal__action-icon {
color: var(--color-primary);
}
}
// Pause All — Secondary/teal accent
.global-action-modal__action--pause {
background-color: rgba(45, 212, 191, 0.12);
border-color: rgba(45, 212, 191, 0.25);
color: var(--color-secondary);
&:hover {
background-color: rgba(45, 212, 191, 0.2);
}
.global-action-modal__action-icon {
color: var(--color-secondary);
}
}
// Emergency Stop — Danger/red accent
.global-action-modal__action--emergency {
background-color: rgba(248, 113, 113, 0.12);
border-color: rgba(248, 113, 113, 0.25);
color: var(--color-danger);
&:hover {
background-color: rgba(248, 113, 113, 0.2);
}
.global-action-modal__action-icon {
color: var(--color-danger);
}
}
// Add Agent — Accent/violet
.global-action-modal__action--add {
background-color: rgba(167, 139, 250, 0.12);
border-color: rgba(167, 139, 250, 0.25);
color: var(--color-accent);
&:hover {
background-color: rgba(167, 139, 250, 0.2);
}
.global-action-modal__action-icon {
color: var(--color-accent);
}
}
// ---------------------------------------------------------------------------
// Action Icon
// ---------------------------------------------------------------------------
.global-action-modal__action-icon {
font-size: 36px;
width: 36px;
height: 36px;
}
// ---------------------------------------------------------------------------
// Action Label & Description
// ---------------------------------------------------------------------------
.global-action-modal__action-label {
font-size: 16px;
font-weight: 600;
letter-spacing: 0.01em;
}
.global-action-modal__action-desc {
font-size: 12px;
opacity: 0.7;
line-height: 1.4;
}
// ---------------------------------------------------------------------------
// MatDialog Overlay — tactical dark theme overrides
// ---------------------------------------------------------------------------
// These selectors target the Angular Material dialog overlay container
// and panel to apply our custom styling.
// ---------------------------------------------------------------------------
::ng-deep .mat-mdc-dialog-container {
background-color: var(--cc-surface-container) !important;
border-radius: 24px !important;
padding: 32px !important;
border: 1px solid var(--cc-outline);
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.6),
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
::ng-deep .mat-mdc-dialog-surface {
background-color: transparent !important;
box-shadow: none !important;
}
// Backdrop overlay styling
::ng-deep .cdk-overlay-dark-backdrop {
background-color: rgba(13, 15, 18, 0.85);
}
// ---------------------------------------------------------------------------
// Dialog Animation — fade + scale
// ---------------------------------------------------------------------------
// Material Dialog's default animation is overridden here with a
// smooth scale+fade for a tactical "materializing" effect.
// ---------------------------------------------------------------------------
::ng-deep .global-action-modal-dialog .mat-mdc-dialog-container {
animation: modalFadeScaleIn 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
::ng-deep .global-action-modal-dialog.cdk-dialog-exiting .mat-mdc-dialog-container {
animation: modalFadeScaleOut 150ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes modalFadeScaleIn {
from {
opacity: 0;
transform: scale(0.92);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes modalFadeScaleOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.92);
}
}
// ---------------------------------------------------------------------------
// Responsive: Mobile adjustments — single column on narrow screens
// ---------------------------------------------------------------------------
@media (max-width: 599px) {
.global-action-modal__actions {
grid-template-columns: 1fr;
gap: 12px;
}
.global-action-modal__action {
min-height: 100px;
padding: 16px;
}
.global-action-modal__title {
font-size: 18px;
}
::ng-deep .mat-mdc-dialog-container {
padding: 24px !important;
border-radius: 20px !important;
}
}
// ---------------------------------------------------------------------------
// Accessibility: Reduced Motion
// ---------------------------------------------------------------------------
@media (prefers-reduced-motion: reduce) {
.global-action-modal__action {
transition: none;
}
::ng-deep .global-action-modal-dialog .mat-mdc-dialog-container {
animation: none;
}
::ng-deep .global-action-modal-dialog.cdk-dialog-exiting .mat-mdc-dialog-container {
animation: none;
}
}

109
frontend/src/app/components/global-action-modal/global-action-modal.component.ts Normal file
View File

@@ -0,0 +1,109 @@
// ============================================================================
// Global Action Modal Component (CUB-49)
// Modal overlay with four primary actions: Deploy All, Pause All,
// Emergency Stop, and Add Agent. Uses Angular Material Dialog with
// tactical dark mode styling per CUB-47 CSS variables.
// ============================================================================
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
HostListener,
inject,
Output,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
/**
* GlobalActionModal presents four primary control-center actions in a
* modal overlay with tactical dark mode styling.
*
* Actions emit dedicated output events:
* - deployAll → emit when "Deploy All" is clicked
* - pauseAll → emit when "Pause All" is clicked
* - emergencyStop → emit when "Emergency Stop" is clicked
* - addAgent → emit when "Add Agent" is clicked
*
* Close button (×) and backdrop click both dismiss the modal.
* Smooth fade/scale animation on open and close.
*/
@Component({
selector: 'app-global-action-modal',
standalone: true,
imports: [
CommonModule,
MatDialogModule,
MatButtonModule,
MatIconModule,
],
templateUrl: './global-action-modal.component.html',
styleUrl: './global-action-modal.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GlobalActionModalComponent {
/** Emitted when Deploy All is clicked. */
@Output()
readonly deployAll = new EventEmitter<void>();
/** Emitted when Pause All is clicked. */
@Output()
readonly pauseAll = new EventEmitter<void>();
/** Emitted when Emergency Stop is clicked. */
@Output()
readonly emergencyStop = new EventEmitter<void>();
/** Emitted when Add Agent is clicked. */
@Output()
readonly addAgent = new EventEmitter<void>();
/** MatDialogRef injected when opened as a Material dialog. */
private readonly dialogRef = inject(MatDialogRef<GlobalActionModalComponent>, { optional: true });
// ---------------------------------------------------------------------------
// Action Handlers
// ---------------------------------------------------------------------------
/** Deploy All — emit and close. */
onDeployAll(): void {
this.deployAll.emit();
this.close();
}
/** Pause All — emit and close. */
onPauseAll(): void {
this.pauseAll.emit();
this.close();
}
/** Emergency Stop — emit and close. */
onEmergencyStop(): void {
this.emergencyStop.emit();
this.close();
}
/** Add Agent — emit and close. */
onAddAgent(): void {
this.addAgent.emit();
this.close();
}
// ---------------------------------------------------------------------------
// Close Handling
// ---------------------------------------------------------------------------
/** Close the modal. Works with MatDialog backdrop click and close button. */
close(): void {
this.dialogRef?.close();
}
/** Allow Escape key to close the dialog. */
@HostListener('document:keydown.escape')
onEscapeKey(): void {
this.close();
}
}