Compare commits
2 Commits
agent/rex/
...
agent/hex/
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
040d4cb54d | ||
|
|
47cbeed456 |
@@ -13,6 +13,7 @@
|
|||||||
<PrivateAssets>all</PrivateAssets>
|
<PrivateAssets>all</PrivateAssets>
|
||||||
</PackageReference>
|
</PackageReference>
|
||||||
<PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
|
<PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="9.0.4" />
|
||||||
|
<PackageReference Include="Swashbuckle.AspNetCore" Version="10.1.7" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
</Project>
|
</Project>
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
export * from './quick-jump-button/quick-jump-button.component';
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
<button
|
|
||||||
mat-icon-button
|
|
||||||
class="quick-jump-button"
|
|
||||||
[attr.aria-label]="'Jump to agent session'"
|
|
||||||
(click)="onJumpClick()"
|
|
||||||
>
|
|
||||||
<mat-icon>arrow_forward</mat-icon>
|
|
||||||
</button>
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
// ============================================================================
|
|
||||||
// Quick-Jump Button — M3 FilledTonalIconButton
|
|
||||||
// Per spec Section 7.3: Agent Card Quick-Jump action
|
|
||||||
// M3 spec: FilledTonalIconButton uses secondary container color
|
|
||||||
// with 8% state layer overlay for hover/focus.
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
.quick-jump-button {
|
|
||||||
// M3 FilledTonalIconButton: secondary-container background
|
|
||||||
// Angular Material mat-icon-button sets up the base shape (40x40, round).
|
|
||||||
// We override the color tokens to match FilledTonal style.
|
|
||||||
--mdc-icon-button-icon-color: var(--mat-sys-on-secondary-container);
|
|
||||||
background-color: var(--mat-sys-secondary-container);
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
|
|
||||||
// M3 State Layer: 8% overlay on hover
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--mat-sys-secondary-container);
|
|
||||||
// State layer overlay using a pseudo-element for precise 8% opacity
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var(--mat-sys-on-secondary-container);
|
|
||||||
opacity: 0.08;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// M3 State Layer: 12% overlay on focus-visible (slightly stronger for accessibility)
|
|
||||||
&:focus-visible {
|
|
||||||
background-color: var(--mat-sys-secondary-container);
|
|
||||||
outline: 3px solid var(--status-active);
|
|
||||||
outline-offset: 2px;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var(--mat-sys-on-secondary-container);
|
|
||||||
opacity: 0.12;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// M3 State Layer: 12% overlay on active/pressed
|
|
||||||
&:active {
|
|
||||||
background-color: var(--mat-sys-secondary-container);
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var(--mat-sys-on-secondary-container);
|
|
||||||
opacity: 0.12;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon color stays on-secondary-container across all states
|
|
||||||
.mat-icon {
|
|
||||||
color: var(--mat-sys-on-secondary-container);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
|
|
||||||
import { MatIconButton } from '@angular/material/button';
|
|
||||||
import { MatIcon } from '@angular/material/icon';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Quick-Jump Button — M3 FilledTonalIconButton
|
|
||||||
*
|
|
||||||
* An icon button that emits a navigation event for jumping to an agent session.
|
|
||||||
* Uses the Material Design 3 FilledTonalIconButton style with 8% state layer
|
|
||||||
* overlay on hover and focus.
|
|
||||||
*
|
|
||||||
* Per spec Section 7.3: Agent Card Component Interface
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
selector: 'app-quick-jump-button',
|
|
||||||
standalone: true,
|
|
||||||
imports: [MatIconButton, MatIcon],
|
|
||||||
templateUrl: './quick-jump-button.component.html',
|
|
||||||
styleUrl: './quick-jump-button.component.scss',
|
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
||||||
})
|
|
||||||
export class QuickJumpButtonComponent {
|
|
||||||
/** Emitted when the button is clicked, carrying the session key for navigation. */
|
|
||||||
@Output() jumpClick = new EventEmitter<string>();
|
|
||||||
|
|
||||||
/** The session key to navigate to. Set by the parent agent card. */
|
|
||||||
sessionKey = '';
|
|
||||||
|
|
||||||
onJumpClick(): void {
|
|
||||||
this.jumpClick.emit(this.sessionKey);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user