Merge pull request #1 from IgniteUI/zdrawku-2024-10-16

NG Conf Demo updates
IgniteUI · Oct 16, 2024 · 792d63c · 792d63c
2 parents 6759c8b + e71e05d
commit 792d63c
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 11 deletions.
diff --git a/src/app/admin-panel/admin-panel.component.html b/src/app/admin-panel/admin-panel.component.html
@@ -12,9 +12,19 @@
     <igx-column field="id" dataType="number" header="id" [hidden]="true" [filterable]="true" [groupable]="true" [sortable]="true" [selectable]="false"></igx-column>
     <igx-column field="name" dataType="string" header="name" [filterable]="true" [groupable]="true" [sortable]="true" [selectable]="false"></igx-column>
     <igx-column field="categoryID" dataType="number" header="categoryID" [filterable]="true" [groupable]="true" [sortable]="true" [selectable]="false">
+      <ng-template igxCell let-cell="cell">
+        <igx-select type="border" [(ngModel)]="cell.value" class="select">
+          @for (item of ngConfToyStoreAPICategoryModel; track item) {
+            <igx-select-item [value]="item.id">
+              {{ item.name }}
+            </igx-select-item>
+          }
+          <label igxLabel>CategoryID</label>
+        </igx-select>
+      </ng-template>
       <ng-template igxCellEditor let-cell="cell">
         @if (selectVisible) {
-          <igx-select type="border" [(ngModel)]="cell.editValue" class="select">
+          <igx-select type="border" [(ngModel)]="cell.editValue" class="select_1">
             @for (item of ngConfToyStoreAPICategoryModel; track item) {
               <igx-select-item [value]="item.id">
                 {{ item.name }}
@@ -32,7 +42,7 @@
         </igx-radio-group>
       </ng-template>
     </igx-column>
-    <igx-column field="price" dataType="currency" header="price" [filterable]="true" [groupable]="true" [sortable]="true" [selectable]="false"></igx-column>
+    <igx-column field="price" dataType="currency" header="price" width="283px" [filterable]="true" [groupable]="true" [sortable]="true" [selectable]="false"></igx-column>
     <igx-action-strip>
       <igx-grid-pinning-actions></igx-grid-pinning-actions>
       <igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>

diff --git a/src/app/admin-panel/admin-panel.component.scss b/src/app/admin-panel/admin-panel.component.scss
@@ -28,6 +28,10 @@
   flex-basis: 0;
 }
 .select {
+  height: max-content;
+  min-width: min-content;
+}
+.select_1 {
   --ig-size: var(--ig-size-small);
   height: max-content;
   min-width: min-content;

diff --git a/src/app/admin-panel/admin-panel.component.ts b/src/app/admin-panel/admin-panel.component.ts
@@ -2,8 +2,8 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IGridEditDoneEventArgs, IGX_GRID_ACTION_STRIP_DIRECTIVES, IGX_GRID_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IGX_SELECT_DIRECTIVES, IgxRadioComponent, IgxRadioGroupDirective, IRowDataEventArgs } from 'igniteui-angular';
 import { Subject, takeUntil } from 'rxjs';
-import { CategoryModel } from '../models/ng-conf-toy-store-api/category-model';
 import { ToyModel } from '../models/my-api/toy-model';
+import { CategoryModel } from '../models/ng-conf-toy-store-api/category-model';
 import { NgConfToyStoreAPIService } from '../services/ng-conf-toy-store-api.service';
 import { MyAPIService } from '../services/my-api.service';
 
@@ -17,8 +17,8 @@ import { MyAPIService } from '../services/my-api.service';
 export class AdminPanelComponent implements OnInit, OnDestroy {
   private destroy$: Subject<void> = new Subject<void>();
   public myAPIToyModel: ToyModel[] = [];
-  public selectVisible: boolean = false;
   public ngConfToyStoreAPICategoryModel: CategoryModel[] = [];
+  public selectVisible: boolean = false;
 
   constructor(
     private myAPIService: MyAPIService,

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -10,7 +10,7 @@
   display: flex;
 }
 .header {
-  background-color: hsla(var(--ig-secondary-500));
+  background-color: hsla(var(--ig-secondary-400));
   border-color: hsla(var(--ig-gray-200));
   border-width: 0px 0px 1px;
   border-style: solid;
@@ -67,7 +67,7 @@
   flex-basis: 0;
 }
 .footer {
-  background-color: hsla(var(--ig-secondary-500));
+  background-color: hsla(var(--ig-secondary-400));
   border-color: hsla(var(--ig-gray-200));
   border-width: 2px 0px 0px;
   border-style: solid;
@@ -106,9 +106,9 @@
 .view-container {
   overflow: auto;
   position: relative;
-  width: 80%;
-  min-width: 80%;
-  max-width: 85%;
+  width: 85%;
+  min-width: 85%;
+  max-width: 90%;
   flex-grow: 1;
   flex-basis: 0;
 }
diff --git a/src/styles.scss b/src/styles.scss
@@ -8,8 +8,8 @@
 @include typography($font-family: "Boogaloo");
 
 $custom-palette: palette(
-  $primary: #89ccf8,
-  $secondary: #fca1ca,
+  $primary: #a7dcff,
+  $secondary: #fdb8d7,
   $surface: #fff);
 @include theme($palette: $custom-palette, $roundness: 0.5);