File

src/lib/window-task-bar/window-task-bar-container/window-task-bar-container.component.ts

Metadata

Index

Properties

Constructor

constructor(windowService: WindowService, settings: WindowTaskBarContainerSettings | null)
Parameters :
Name Type Optional
windowService WindowService No
settings WindowTaskBarContainerSettings | null No

Properties

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>

./window-task-bar-container.component.scss

.rxap-container {

  .pin {
    border: none;
    border-radius: 50% 50% 0 0;
    cursor: pointer;
  }

  .tasks {
    height: auto;
    padding: 16px;
  }

}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""