Skip to content

Commit

Permalink
feat: Add tiling window manager with slider
Browse files Browse the repository at this point in the history
  • Loading branch information
dominik003 committed Nov 6, 2023
1 parent 56540c6 commit 3e18712
Show file tree
Hide file tree
Showing 10 changed files with 342 additions and 13 deletions.
4 changes: 4 additions & 0 deletions frontend/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ import { VersionComponent } from './general/metadata/version/version.component';
import { NavBarMenuComponent } from './general/nav-bar-menu/nav-bar-menu.component';
import { NoticeComponent } from './general/notice/notice.component';
import { ConfirmationDialogComponent } from './helpers/confirmation-dialog/confirmation-dialog.component';
import { DefaultValuePipe } from './helpers/default-value.pipe';
import { DisplayValueComponent } from './helpers/display-value/display-value.component';
import { InputDialogComponent } from './helpers/input-dialog/input-dialog.component';
import { MatIconComponent } from './helpers/mat-icon/mat-icon.component';
Expand Down Expand Up @@ -109,6 +110,7 @@ import { WhitespaceUrlInterceptor } from './services/encoder/encoder.interceptor
import { DeleteSessionDialogComponent } from './sessions/delete-session-dialog/delete-session-dialog.component';
import { FloatingWindowManagerComponent } from './sessions/session/floating-window-manager/floating-window-manager.component';
import { SessionComponent } from './sessions/session/session.component';
import { TilingWindowManagerComponent } from './sessions/session/tiling-window-manager/tiling-window-manager.component';
import { SessionOverviewComponent } from './sessions/session-overview/session-overview.component';
import { SessionsComponent } from './sessions/sessions.component';
import { ActiveSessionsComponent } from './sessions/user-sessions-wrapper/active-sessions/active-sessions.component';
Expand Down Expand Up @@ -164,6 +166,7 @@ import { SettingsComponent } from './settings/settings.component';
CreateReadonlySessionComponent,
CreateReadonlySessionDialogComponent,
CreateT4cModelNewRepositoryComponent,
DefaultValuePipe,
DeleteGitSettingsDialogComponent,
DeleteSessionDialogComponent,
DisplayValueComponent,
Expand Down Expand Up @@ -222,6 +225,7 @@ import { SettingsComponent } from './settings/settings.component';
T4CSettingsComponent,
T4CSettingsWrapperComponent,
TextLineSkeletonLoaderComponent,
TilingWindowManagerComponent,
ToolDeletionDialogComponent,
ToolDetailsComponent,
ToolIntegrationsComponent,
Expand Down
15 changes: 15 additions & 0 deletions frontend/src/app/helpers/default-value.pipe.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/*
* SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'defaultValue',
})
export class DefaultValuePipe implements PipeTransform {
transform(value: string | undefined, defaultValue: string): string {
return value ?? defaultValue;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,10 @@
height: calc(100vh - 2vh - 65px - 110px);
}

.iframe-overlay {
#iframe-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

z-index: 40;
}
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,13 @@
></div>
<div [ngClass]="draggingActive ? 'iframe-overlay' : ''"></div>
<iframe
[title]="
(session.version?.tool?.name | defaultValue: 'unknown tool name') +
'-' +
(session.version?.name | defaultValue: 'unknown version name') +
'-' +
session.type
"
[id]="'session-' + session.id"
[src]="session.safeResourceURL"
class="h-full w-full"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export class FloatingWindowManagerComponent implements OnInit {
unfocusSession(focusedSession: Session) {
this.sessions
.filter((session) => session !== focusedSession)
.map((session) => (session.focused = false));
.forEach((session) => (session.focused = false));
}

dragStart() {
Expand Down
25 changes: 19 additions & 6 deletions frontend/src/app/sessions/session/session.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,10 @@
</div>
<div class="mt-2">
<mat-radio-group [(ngModel)]="selectedWindowType">
<mat-radio-button value="floating">Floating window</mat-radio-button>
<mat-radio-button value="tailing">Tailing window</mat-radio-button>
<mat-radio-button value="floating"
>Floating window manager</mat-radio-button
>
<mat-radio-button value="tiling">Tiling window manager</mat-radio-button>
</mat-radio-group>
</div>

Expand All @@ -69,10 +71,21 @@
</div>
</div>

<app-floating-window-manager
*ngIf="selectedSessions.length"
[sessions]="selectedSessions"
></app-floating-window-manager>
<ng-container *ngIf="selectedSessions.length">
<app-floating-window-manager
*ngIf="isFloatingWindowManager; else tilingWindow"
[sessions]="selectedSessions"
>
</app-floating-window-manager>

<ng-template #tilingWindow>
<app-tiling-window-manager
*ngIf="isTilingWindowManager"
[sessions]="selectedSessions"
>
</app-tiling-window-manager>
</ng-template>
</ng-container>

<div class="fixed bottom-4 right-4 z-50">
<button
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/app/sessions/session/session.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,11 @@ export class SessionComponent implements OnInit {
return this.cachedSessions?.filter((session) => session.checked);
}

get isTailingWindow(): boolean {
return this.selectedWindowType === 'tailing';
get isTilingWindowManager(): boolean {
return this.selectedWindowType === 'tiling';
}

get isFloatingWindow() {
get isFloatingWindowManager(): boolean {
return this.selectedWindowType === 'floating';
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/*
* SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
* SPDX-License-Identifier: Apache-2.0
*/

.height {
height: calc(100vh - 2vh - 65px - 110px);
}

.iframe-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

cursor: col-resize;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!--
~ SPDX-FileCopyrightText: Copyright DB Netz AG and the capella-collab-manager contributors
~ SPDX-License-Identifier: Apache-2.0
-->

<div class="flex gap-0.5">
<ng-container *ngFor="let session of sessions">
<div
class="flex flex-col"
[ngClass]="{
height: (fullscreenService.isFullscreen$ | async) === false,
'h-screen': fullscreenService.isFullscreen$ | async
}"
[style.width]="session.width + 'px'"
>
<div
class="flex items-center justify-between gap-2 rounded-t bg-slate-100 p-1"
>
<span>
{{ session.version?.tool?.name }} {{ session.version?.name }},
{{ session.type }}
<span *ngIf="session.type === 'readonly'"
>(project {{ session.project!.name }})</span
>
{{ session.id }}
</span>

<div class="flex items-center">
<mat-icon
*ngIf="session.index !== 0"
class="cursor-pointer text-lg text-gray-600 hover:text-gray-800"
(click)="onLeftClick(session)"
>
arrow_back
</mat-icon>

<mat-icon
*ngIf="session.index !== sessions.length - 1"
class="cursor-pointer text-lg text-gray-600 hover:text-gray-800"
(click)="onRightClick(session)"
>
arrow_forward
</mat-icon>
</div>
</div>

<div class="relative grow">
<div
class="iframe-overlay"
*ngIf="isValidResizeState(this.resizeState)"
></div>
<iframe
[title]="
(session.version?.tool?.name | defaultValue: 'unknown tool name') +
'-' +
(session.version?.name | defaultValue: 'unknown version name') +
'-' +
session.type
"
[id]="'session-' + session.id"
[src]="session.safeResourceURL"
class="h-full w-full"
allow="clipboard-read; clipboard-write"
>
</iframe>
</div>
</div>

<div
*ngIf="session.index < sessions.length - 1"
class="my-2 w-2 cursor-col-resize bg-gray-300"
(mousedown)="onMouseDown($event, session.index)"
></div>
</ng-container>
</div>
Loading

0 comments on commit 3e18712

Please sign in to comment.