diff --git a/projects/editor/src/app/components/properties-panel/position-properties-tab/input-groups/position-field-set.component.ts b/projects/editor/src/app/components/properties-panel/position-properties-tab/input-groups/position-field-set.component.ts
index dce82e0d427e161b7977661bfef4156fa89c824c..6afd92ee1ef0492ce2b5e285e79bb0e5cfb60f62 100644
--- a/projects/editor/src/app/components/properties-panel/position-properties-tab/input-groups/position-field-set.component.ts
+++ b/projects/editor/src/app/components/properties-panel/position-properties-tab/input-groups/position-field-set.component.ts
@@ -41,21 +41,6 @@ import { UnitService } from 'editor/src/app/services/unit-services/unit.service'
<ng-template #elseBlock>
{{'propertiesPanel.grid' | translate }}
- <div class="flex-row">
- <mat-form-field appearance="outline">
- <mat-label>{{'column' | translate }}</mat-label>
- <input matInput type="number" [ngModel]="positionProperties.gridColumn"
- (ngModelChange)="updateModel.emit({ property: 'gridColumn', value: $event })">
- </mat-form-field>
- <mat-form-field appearance="outline">
- <mat-label>{{'propertiesPanel.columnRange' | translate }}</mat-label>
- <input matInput type="number"
- [ngModel]="positionProperties.gridColumnRange"
- (ngModelChange)="updateModel.emit({ property: 'gridColumnRange', value: $event })"
- (change)="positionProperties.gridColumnRange = positionProperties.gridColumnRange ?
- positionProperties.gridColumnRange : 0">
- </mat-form-field>
- </div>
<div class="flex-row">
<mat-form-field appearance="outline">
<mat-label>{{'row' | translate }}</mat-label>
@@ -71,6 +56,21 @@ import { UnitService } from 'editor/src/app/services/unit-services/unit.service'
positionProperties.gridRowRange : 0">
</mat-form-field>
</div>
+ <div class="flex-row">
+ <mat-form-field appearance="outline">
+ <mat-label>{{'column' | translate }}</mat-label>
+ <input matInput type="number" [ngModel]="positionProperties.gridColumn"
+ (ngModelChange)="updateModel.emit({ property: 'gridColumn', value: $event })">
+ </mat-form-field>
+ <mat-form-field appearance="outline">
+ <mat-label>{{'propertiesPanel.columnRange' | translate }}</mat-label>
+ <input matInput type="number"
+ [ngModel]="positionProperties.gridColumnRange"
+ (ngModelChange)="updateModel.emit({ property: 'gridColumnRange', value: $event })"
+ (change)="positionProperties.gridColumnRange = positionProperties.gridColumnRange ?
+ positionProperties.gridColumnRange : 0">
+ </mat-form-field>
+ </div>
{{'propertiesPanel.margin' | translate }}
<div>
diff --git a/projects/editor/src/app/components/unit-view/canvas/section-dynamic/dynamic-section-helper-grid.component.ts b/projects/editor/src/app/components/unit-view/canvas/section-dynamic/dynamic-section-helper-grid.component.ts
index 412185e0b04b9329af238a8d5f4ab6491de54af4..b7154058e743fd2af487fa71254b448dafefcf3f 100644
--- a/projects/editor/src/app/components/unit-view/canvas/section-dynamic/dynamic-section-helper-grid.component.ts
+++ b/projects/editor/src/app/components/unit-view/canvas/section-dynamic/dynamic-section-helper-grid.component.ts
@@ -10,13 +10,13 @@ import { ElementService } from 'editor/src/app/services/unit-services/element.se
@Component({
selector: '[app-dynamic-section-helper-grid]',
template: `
- <ng-container *ngFor="let column of columnCountArray; let x = index">
- <ng-container *ngFor="let row of rowCountArray; let y = index">
+ <ng-container *ngFor="let row of rowCountArray; let x = index;">
+ <ng-container *ngFor="let column of columnCountArray; let y = index;">
<div class="grid-placeholder"
- [style.grid-column-start]="x + 1"
- [style.grid-column-end]="x + 1"
- [style.grid-row-start]="y + 1"
- [style.grid-row-end]="y + 1"
+ [style.grid-row-start]="x + 1"
+ [style.grid-row-end]="x + 1"
+ [style.grid-column-start]="y + 1"
+ [style.grid-column-end]="y + 1"
cdkDropList [cdkDropListData]="{ sectionIndex: sectionIndex, gridCoordinates: [x + 1, y + 1] }"
(cdkDropListDropped)="drop($event)"
id="list-{{sectionIndex}}-{{x+1}}-{{y+1}}"
@@ -117,7 +117,7 @@ export class DynamicSectionHelperGridComponent implements OnInit, OnChanges {
'gridRow',
event.container.data.gridCoordinates[1]
);
- } else if (event.item.data.dragType === 'resize') {
+ } else if (event.item.data.dragType === 'resize') { // TODO unused
this.elementService.updateElementsPositionProperty(
[dragItemData.element],
'gridColumnEnd',
diff --git a/projects/editor/src/app/components/unit-view/canvas/section-menu.component.ts b/projects/editor/src/app/components/unit-view/canvas/section-menu.component.ts
index ba2cafed8f5496959f998d8b18e8219a474f9074..ef9a7d8520276aba6fed2b098f8176680f10d63c 100644
--- a/projects/editor/src/app/components/unit-view/canvas/section-menu.component.ts
+++ b/projects/editor/src/app/components/unit-view/canvas/section-menu.component.ts
@@ -71,32 +71,6 @@ import { SectionService } from 'editor/src/app/services/unit-services/section.se
</mat-form-field>
</ng-container>
<div *ngIf="section.dynamicPositioning">
- <fieldset>
- <legend>{{'section-menu.columns' | translate }}</legend>
- <mat-checkbox class="menuItem" [checked]="section.autoColumnSize"
- (click)="$any($event).stopPropagation()"
- (change)="updateModel('autoColumnSize', $event.checked)">
- {{'section-menu.autoColumnSize' | translate }}
- </mat-checkbox>
- <ng-container *ngIf="!section.autoColumnSize">
- <mat-form-field appearance="outline">
- <mat-label>{{'section-menu.columnCount' | translate }}</mat-label>
- <input matInput type="number"
- [value]="$any(section.gridColumnSizes.length)"
- (click)="$any($event).stopPropagation()"
- (change)="modifySizeArray('gridColumnSizes', $any($event).target.value || 0)">
- </mat-form-field>
- <ng-container *ngFor="let size of section.gridColumnSizes; let i = index">
- <aspect-size-input-panel [label]="('section-menu.width' | translate) + ' ' + (i + 1)"
- [value]="size.value"
- [unit]="size.unit"
- [allowedUnits]="['px', 'fr']"
- (valueUpdated)="changeGridSize('gridColumnSizes', i, $event)">
- </aspect-size-input-panel>
- </ng-container>
- </ng-container>
- </fieldset>
-
<fieldset>
<legend>{{'section-menu.rows' | translate }}</legend>
<mat-checkbox class="menuItem" [checked]="section.autoRowSize"
@@ -130,6 +104,31 @@ import { SectionService } from 'editor/src/app/services/unit-services/section.se
</ng-container>
</ng-container>
</fieldset>
+ <fieldset>
+ <legend>{{'section-menu.columns' | translate }}</legend>
+ <mat-checkbox class="menuItem" [checked]="section.autoColumnSize"
+ (click)="$any($event).stopPropagation()"
+ (change)="updateModel('autoColumnSize', $event.checked)">
+ {{'section-menu.autoColumnSize' | translate }}
+ </mat-checkbox>
+ <ng-container *ngIf="!section.autoColumnSize">
+ <mat-form-field appearance="outline">
+ <mat-label>{{'section-menu.columnCount' | translate }}</mat-label>
+ <input matInput type="number"
+ [value]="$any(section.gridColumnSizes.length)"
+ (click)="$any($event).stopPropagation()"
+ (change)="modifySizeArray('gridColumnSizes', $any($event).target.value || 0)">
+ </mat-form-field>
+ <ng-container *ngFor="let size of section.gridColumnSizes; let i = index">
+ <aspect-size-input-panel [label]="('section-menu.width' | translate) + ' ' + (i + 1)"
+ [value]="size.value"
+ [unit]="size.unit"
+ [allowedUnits]="['px', 'fr']"
+ (valueUpdated)="changeGridSize('gridColumnSizes', i, $event)">
+ </aspect-size-input-panel>
+ </ng-container>
+ </ng-container>
+ </fieldset>
</div>
</div>
</mat-menu>