Wrap Condition and Action Editor column wise when display too small
All checks were successful
E2E Testing / test (push) Successful in 1m33s

This commit is contained in:
Sebastian Böckelmann 2024-03-22 18:36:53 +01:00
parent 413d16392b
commit eff7069cae
7 changed files with 68 additions and 4 deletions

View File

@ -82,6 +82,9 @@ import {
MatExpansionPanelHeader, MatExpansionPanelHeader,
MatExpansionPanelTitle MatExpansionPanelTitle
} from "@angular/material/expansion"; } from "@angular/material/expansion";
import {
TemplateTransitionEditorComponent
} from "./editor/gamesystem-editor/template-gamesystem-editor/template-transition-editor/template-transition-editor.component";
// AoT requires an exported function for factories // AoT requires an exported function for factories
const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json'); const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@ -107,7 +110,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
CharacterOverviewComponent, CharacterOverviewComponent,
CharacterEditorComponent, CharacterEditorComponent,
TemplateGamesystemEditorComponent, TemplateGamesystemEditorComponent,
TemplateStateEditorComponent TemplateStateEditorComponent,
TemplateTransitionEditorComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
@ -172,7 +176,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
], ],
providers: [], providers: [],
exports: [ exports: [
ProductGamesystemEditorComponent ProductGamesystemEditorComponent,
SimpleTransitionEditorComponent
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })

View File

@ -1,3 +1,4 @@
<app-template-state-editor [templateGamesystem]="gamesystem" [scriptAccounts]="scriptAccunts" <app-template-state-editor [templateGamesystem]="gamesystem" [scriptAccounts]="scriptAccunts"
(onAddFirstTemplateState)="onAddFirstTemplateState()" (onRemoveLastTemplateState)="onRemoveLastTemplateState()" (onAddFirstTemplateState)="onAddFirstTemplateState()" (onRemoveLastTemplateState)="onRemoveLastTemplateState()"
></app-template-state-editor> ></app-template-state-editor>
<app-template-transition-editor [templateGamesystem]="gamesystem"></app-template-transition-editor>

View File

@ -0,0 +1,9 @@
<div class="parentContainer">
<div class="template-editor">
<app-simple-transition-editor [gamesystem]="templateGamesystem!.referenceGamesystem"></app-simple-transition-editor>
</div>
<div class="reference-editor">
<app-simple-transition-editor [gamesystem]="templateGamesystem!.referenceGamesystem"></app-simple-transition-editor>
</div>
</div>

View File

@ -0,0 +1,12 @@
.parentContainer {
display: flex;
}
.reference-editor, {
width: 40%;
max-width: 50%;
}
.template-editor {
}

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TemplateTransitionEditorComponent } from './template-transition-editor.component';
describe('TemplateTransitionEditorComponent', () => {
let component: TemplateTransitionEditorComponent;
let fixture: ComponentFixture<TemplateTransitionEditorComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TemplateTransitionEditorComponent]
})
.compileComponents();
fixture = TestBed.createComponent(TemplateTransitionEditorComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,13 @@
import {Component, Input} from '@angular/core';
import {TemplateGamesystem} from "../../../../project/game-model/gamesystems/TemplateGamesystem";
import {AppModule} from "../../../../app.module";
@Component({
selector: 'app-template-transition-editor',
templateUrl: './template-transition-editor.component.html',
styleUrl: './template-transition-editor.component.scss'
})
export class TemplateTransitionEditorComponent {
@Input() templateGamesystem: TemplateGamesystem | undefined
}

View File

@ -64,13 +64,14 @@ tr.example-element-row:not(.example-expanded-row):active {
.condition-action-container { .condition-action-container {
display: flex; display: flex;
flex-wrap: wrap;
width: 100% width: 100%
} }
.condition-container { .condition-container {
width: 45%; flex: 1;
} }
.action-container { .action-container {
width: 45%; flex: 1;
} }