[editor] Fix row-column order

Row first.

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>

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',

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>