transparent popup

src/app/dashboard/dashboard.component.html

@@ -1,54 +1,8 @@
 <p>dashboard works!</p>
 
-<div class="example-wrapper">
-    <div class="row">
-        <div class="col-xs-12 col-sm-6 example-col">
-            <p>ColorGradient</p>
-            <kendo-colorgradient [value]="'#7e16c8'"></kendo-colorgradient>
-        </div>
-        <div class="col-xs-12 col-sm-6 example-col">
-            <p>ColorPalette</p>
-            <kendo-colorpalette [tileSize]="30"></kendo-colorpalette>
-        </div>
-        <div class="col-xs-12 col-sm-6 example-col">
-            <p>ColorPicker</p>
-            <kendo-colorpicker [value]="'#7e16c8'"></kendo-colorpicker>
-        </div>
-        <div class="col-xs-12 col-sm-6 example-col">
-            <p>MaskedTextBox</p>
-            <kendo-maskedtextbox
-                [mask]="'9-000'"
-            ></kendo-maskedtextbox>
-        </div>
-    </div>
- </div>
-<hr> 
-
-<kendo-grid [data]="gridData" >
-    <kendo-grid-column field="ProductID" title="ID" width="40">
-    </kendo-grid-column>
-    <kendo-grid-column field="ProductName" title="Name" width="250">
-    </kendo-grid-column>
-    <kendo-grid-column field="Category.CategoryName" title="Category">
-    </kendo-grid-column>
-    <kendo-grid-column field="UnitPrice" title="Price" width="80">
-    </kendo-grid-column>
-    <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
-    </kendo-grid-column>
-    <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
-        <ng-template kendoGridCellTemplate let-dataItem>
-            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
-        </ng-template>
-    </kendo-grid-column>
-</kendo-grid>
-
+<kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon>
 
-<!-- <div #target class="target">
-    <p class="placeholder">Right-click to open Context menu</p>
-  </div>
-  <kendo-contextmenu [target]="target" [items]="items">  </kendo-contextmenu> -->
-
-  <div class="example-wrapper">
+<div class="example-wrapper" style="opacity:0.8;">
     <button kendoButton *ngIf="!dialogOpened && !windowOpened" (click)="open('dialog')">Open dialog</button>
     <button kendoButton *ngIf="!dialogOpened && !windowOpened" (click)="open('window')">Open window</button>
     
@@ -110,23 +64,54 @@
 
     <kendo-window [minWidth]="200" [minHeight]="125" title="About" *ngIf="windowOpened" (close)="close('window')">
       <p style="text-align: center;">Additional info</p>
-      <kendo-grid [data]="gridData" [height]="410">
-        <kendo-grid-column field="ProductID" title="ID" width="40">
-        </kendo-grid-column>
-        <kendo-grid-column field="ProductName" title="Name" width="250">
-        </kendo-grid-column>
-        <kendo-grid-column field="Category.CategoryName" title="Category">
-        </kendo-grid-column>
-        <kendo-grid-column field="UnitPrice" title="Price" width="80">
-        </kendo-grid-column>
-        <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
-        </kendo-grid-column>
-        <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
-            <ng-template kendoGridCellTemplate let-dataItem>
-                <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
-            </ng-template>
-        </kendo-grid-column>
-    </kendo-grid>
+     </kendo-window>
+  </div>
+
+<div class="example-wrapper">
+    <div class="row">
+        <div class="col-xs-12 col-sm-6 example-col">
+            <p>ColorGradient</p>
+            <kendo-colorgradient [value]="'#7e16c8'"></kendo-colorgradient>
+        </div>
+        <div class="col-xs-12 col-sm-6 example-col">
+            <p>ColorPalette</p>
+            <kendo-colorpalette [tileSize]="30"></kendo-colorpalette>
+        </div>
+        <div class="col-xs-12 col-sm-6 example-col">
+            <p>ColorPicker</p>
+            <kendo-colorpicker [value]="'#7e16c8'"></kendo-colorpicker>
+        </div>
+        <div class="col-xs-12 col-sm-6 example-col">
+            <p>MaskedTextBox</p>
+            <kendo-maskedtextbox
+                [mask]="'9-000'"
+            ></kendo-maskedtextbox>
+        </div>
+    </div>
+ </div>
+<hr> 
+
+<kendo-grid [data]="gridData" >
+    <kendo-grid-column field="ProductID" title="ID" width="40">
+    </kendo-grid-column>
+    <kendo-grid-column field="ProductName" title="Name" width="250">
+    </kendo-grid-column>
+    <kendo-grid-column field="Category.CategoryName" title="Category">
+    </kendo-grid-column>
+    <kendo-grid-column field="UnitPrice" title="Price" width="80">
+    </kendo-grid-column>
+    <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
+    </kendo-grid-column>
+    <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
+        <ng-template kendoGridCellTemplate let-dataItem>
+            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
+        </ng-template>
+    </kendo-grid-column>
+</kendo-grid>
+
+
+<!-- <div #target class="target">
+    <p class="placeholder">Right-click to open Context menu</p>
+  </div>
+  <kendo-contextmenu [target]="target" [items]="items">  </kendo-contextmenu> -->
 
-    </kendo-window>
-  </div>