Skip to content

Commit 2be8258

Browse files
yanmariomenevyanmariomenev
committed
chore: add dialogs and minor format update
1 parent 6a6a0ad commit 2be8258

File tree

9 files changed

+520
-260
lines changed

9 files changed

+520
-260
lines changed

‎examples-standalone/kendoangular-landing-page/src/app/app.routes.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ export const routes: Routes = [
4242
path: "editor",
4343
loadComponent: () => import("./components/editor/editor.component").then((m) => m.EditorComponent),
4444
},
45+
{
46+
path: "dialogs",
47+
loadComponent: () => import("./components/dialogs/dialogs.component").then((m) => m.DialogsComponent),
48+
},
4549
{ path: "home", redirectTo: "header", pathMatch: "full" },
4650
{ path: "", redirectTo: "header", pathMatch: "full" },
4751
];

‎examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.css

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
.example-wrapper {
2+
padding: 20px;
3+
font-family: Arial, Helvetica, sans-serif;
4+
}
5+
6+
.controls-container {
7+
display: flex;
8+
flex-wrap: wrap;
9+
gap: 30px;
10+
margin-bottom: 30px;
11+
}
12+
13+
.demo-section {
14+
flex: 1;
15+
min-width: 300px;
16+
padding: 20px;
17+
border-radius: 8px;
18+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
19+
background-color: #ffffff;
20+
}
21+
22+
.demo-section h4 {
23+
margin-top: 0;
24+
color: #333;
25+
font-size: 20px;
26+
}
27+
28+
.window-content {
29+
padding: 15px;
30+
}
31+
32+
.window-header {
33+
display: flex;
34+
align-items: center;
35+
margin-bottom: 20px;
36+
padding-bottom: 15px;
37+
border-bottom: 1px solid #eee;
38+
}
39+
40+
.window-header .k-icon {
41+
font-size: 24px;
42+
margin-right: 10px;
43+
color: #ff6358;
44+
}
45+
46+
.success-message,
47+
.dialog-result {
48+
margin-top: 15px;
49+
padding: 12px;
50+
border-radius: 6px;
51+
background-color: #e8f5e9;
52+
border-left: 4px solid #4caf50;
53+
}
54+
55+
.dialog-result {
56+
background-color: #e3f2fd;
57+
border-left-color: #2196f3;
58+
}
59+
60+
kendo-window {
61+
--kendo-window-titlebar-bg: #3f51b5;
62+
--kendo-window-titlebar-text: white;
63+
}
64+
65+
.k-form-field {
66+
margin-bottom: 15px;
67+
}
68+
69+
fieldset {
70+
border: 1px solid #e0e0e0;
71+
border-radius: 4px;
72+
padding: 15px;
73+
margin-bottom: 20px;
74+
}
75+
76+
legend {
77+
padding: 0 10px;
78+
font-weight: 500;
79+
color: #455a64;
80+
}
81+
82+
.k-actions {
83+
margin-top: 20px;
84+
}
85+
86+
@media (max-width: 768px) {
87+
.controls-container {
88+
flex-direction: column;
89+
}
90+
}

‎examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<div class="example-wrapper">
2+
<div class="controls-container">
3+
<div class="demo-section">
4+
<h4>Kendo Window</h4>
5+
<p>Windows are perfect for complex forms and detailed content that requires more screen space.</p>
6+
<button kendoButton themeColor="primary" (click)="openWindow()">Open User Profile Window</button>
7+
@if (formSubmitted) {
8+
<div class="success-message">
9+
<p>Profile saved successfully for {{ firstName }} {{ lastName }}</p>
10+
<button kendoButton themeColor="light" (click)="reset()">Reset Demo</button>
11+
</div>
12+
}
13+
</div>
14+
15+
<div class="demo-section">
16+
<h4>Kendo Dialog</h4>
17+
<p>Dialogs are ideal for confirmations, alerts, and simple interactions requiring immediate attention.</p>
18+
<button kendoButton themeColor="secondary" (click)="openDialog()">Show Confirmation Dialog</button>
19+
@if (confirmationResult) {
20+
<div class="dialog-result">
21+
<p>
22+
You chose: <strong>{{ confirmationResult }}</strong>
23+
</p>
24+
<button kendoButton themeColor="light" (click)="reset()">Reset Demo</button>
25+
</div>
26+
}
27+
</div>
28+
</div>
29+
30+
@if (windowOpened) {
31+
<kendo-window
32+
title="Complete Your Profile"
33+
[minWidth]="320"
34+
[width]="500"
35+
[height]="590"
36+
[top]="160"
37+
[resizable]="true"
38+
[draggable]="true"
39+
(close)="closeWindow()"
40+
>
41+
<div class="window-content">
42+
<div class="window-header">
43+
<span class="k-icon k-i-user"></span>
44+
<p>Please fill in your profile information to continue</p>
45+
</div>
46+
47+
<form class="k-form">
48+
<fieldset>
49+
<legend>Personal Information</legend>
50+
<div class="k-form-field">
51+
<label>First Name</label>
52+
<kendo-textbox
53+
[(ngModel)]="firstName"
54+
name="firstName"
55+
required
56+
placeholder="Your first name"
57+
></kendo-textbox>
58+
</div>
59+
<div class="k-form-field">
60+
<label>Last Name</label>
61+
<kendo-textbox
62+
[(ngModel)]="lastName"
63+
name="lastName"
64+
required
65+
placeholder="Your last name"
66+
></kendo-textbox>
67+
</div>
68+
<div class="k-form-field">
69+
<label>Date of Birth</label>
70+
<kendo-datepicker placeholder="Select your birth date"></kendo-datepicker>
71+
</div>
72+
<div class="k-form-field">
73+
<label>Bio</label>
74+
<kendo-textarea placeholder="Tell us about yourself" [rows]="3"></kendo-textarea>
75+
</div>
76+
</fieldset>
77+
78+
<div class="k-actions k-actions-end">
79+
<button kendoButton type="button" (click)="closeWindow()">Cancel</button>
80+
<button kendoButton themeColor="primary" type="button" (click)="submitWindow()">
81+
Save Profile
82+
</button>
83+
</div>
84+
</form>
85+
</div>
86+
</kendo-window>
87+
} @if (dialogOpened) {
88+
<kendo-dialog title="Confirm Action" [minWidth]="250" [width]="450" (close)="closeDialog()">
89+
<p style="margin: 30px; text-align: center">
90+
Are you sure you want to proceed with this action?<br />
91+
This change cannot be undone.
92+
</p>
93+
94+
<kendo-dialog-actions>
95+
<button kendoButton (click)="onDialogAction('Cancelled')" themeColor="light">Cancel</button>
96+
<button kendoButton (click)="onDialogAction('Confirmed')" themeColor="primary">Confirm</button>
97+
</kendo-dialog-actions>
98+
</kendo-dialog>
99+
}
100+
</div>

‎examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.ts

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Component } from "@angular/core";
2+
import { FormsModule } from "@angular/forms";
3+
import { KENDO_BUTTONS } from "@progress/kendo-angular-buttons";
4+
import { KENDO_DATEINPUTS } from "@progress/kendo-angular-dateinputs";
5+
import { KENDO_DIALOGS } from "@progress/kendo-angular-dialog";
6+
import { KENDO_INPUTS } from "@progress/kendo-angular-inputs";
7+
8+
@Component({
9+
selector: "app-dialogs",
10+
imports: [KENDO_DIALOGS, KENDO_BUTTONS, KENDO_INPUTS, KENDO_DATEINPUTS, FormsModule],
11+
templateUrl: "./dialogs.component.html",
12+
styleUrl: "./dialogs.component.css",
13+
})
14+
export class DialogsComponent {
15+
public windowOpened = true;
16+
public formSubmitted = false;
17+
public firstName = "";
18+
public lastName = "";
19+
public dialogOpened = false;
20+
public confirmationResult = "";
21+
22+
public openWindow(): void {
23+
this.windowOpened = true;
24+
}
25+
26+
public closeWindow(): void {
27+
this.windowOpened = false;
28+
}
29+
30+
public submitWindow(): void {
31+
this.formSubmitted = true;
32+
this.closeWindow();
33+
}
34+
35+
public openDialog(): void {
36+
this.dialogOpened = true;
37+
}
38+
39+
public closeDialog(): void {
40+
this.dialogOpened = false;
41+
}
42+
43+
public onDialogAction(action: string): void {
44+
this.confirmationResult = action;
45+
this.closeDialog();
46+
}
47+
48+
public reset(): void {
49+
this.formSubmitted = false;
50+
this.confirmationResult = "";
51+
this.firstName = "";
52+
this.lastName = "";
53+
}
54+
}

0 commit comments

Comments
 (0)