File
|
Public
expand
|
Default value : true
|
|
|
|
Public
windowService
|
Type : WindowService
|
Decorators :
@Inject(WindowService)
|
|
|
import {
Component,
Inject,
InjectionToken,
Optional,
} from '@angular/core';
import { WindowService } from '../../window.service';
import { WindowTaskBarComponent } from '../window-task-bar.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import {
NgClass,
NgIf,
} from '@angular/common';
export interface WindowTaskBarContainerSettings {
expand?: boolean;
}
export const RXAP_WINDOW_TASK_BAR_CONTAINER_SETTINGS = new InjectionToken('rxap/window-system/task-bar-container');
@Component({
selector: 'rxap-window-task-bar-container',
templateUrl: './window-task-bar-container.component.html',
styleUrls: ['./window-task-bar-container.component.scss'],
imports: [
NgIf,
MatButtonModule,
MatBadgeModule,
MatIconModule,
MatToolbarModule,
WindowTaskBarComponent,
NgClass,
]
})
export class WindowTaskBarContainerComponent {
public expand = true;
constructor(
@Inject(WindowService)
public windowService: WindowService,
@Optional()
@Inject(RXAP_WINDOW_TASK_BAR_CONTAINER_SETTINGS)
settings: WindowTaskBarContainerSettings | null = null,
) {
if (settings) {
if (settings.expand !== undefined) {
this.expand = settings.expand;
}
}
}
}
<div *ngIf="windowService.hasActiveWindows" class="rxap-container flex flex-col">
<div class="flex flex-row justify-end items-end">
<button (click)="expand = !expand"
[matBadgeHidden]="!windowService.hasActiveWindows"
[matBadge]="windowService.activeWindowCount.toFixed(0)"
class="pin"
color="primary"
mat-icon-button
matBadgePosition="above before"
type="button">
<mat-icon *ngIf="!expand">keyboard_arrow_up</mat-icon>
<mat-icon *ngIf="expand">keyboard_arrow_down</mat-icon>
</button>
</div>
<mat-toolbar [ngClass]="{ hidden: !expand }" class="tasks">
<rxap-window-task-bar></rxap-window-task-bar>
</mat-toolbar>
</div>
.rxap-container {
.pin {
border: none;
border-radius: 50% 50% 0 0;
cursor: pointer;
}
.tasks {
height: auto;
padding: 16px;
}
}
Legend
Html element with directive