Skip to content

Commit 1cf2959

Browse files
silviyabotevasilviyaboteva
committed
chore: finish setings pages
1 parent 85942b5 commit 1cf2959

File tree

5 files changed

+160
-81
lines changed

5 files changed

+160
-81
lines changed

‎examples/kendo-react-freemium/src/components/AppBarComponent.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default function AppBarComponent() {
1717

1818
const onNavigate = () => {
1919
navigate('/settings');
20+
setShow(false);
2021
};
2122
return (
2223
<AppBar positionMode="sticky" className="bg-surface-alt !p-4" themeColor='inherit'>

‎examples/kendo-react-freemium/src/index.css‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -198,44 +198,6 @@
198198
--kendo-h6-font-weight: 700;
199199
}
200200

201-
@layer base {
202-
h1 {
203-
font-size: var(--kendo-h1-font-size);
204-
line-height: var( --kendo-h1-line-height);
205-
font-weight: var(--kendo-h1-font-weight);
206-
}
207-
208-
h2 {
209-
font-size: var(--kendo-h2-font-size);
210-
line-height: var( --kendo-h2-line-height);
211-
font-weight: var(--kendo-h2-font-weight);
212-
}
213-
214-
h3 {
215-
font-size: var(--kendo-h3-font-size);
216-
line-height: var( --kendo-h3-line-height);
217-
font-weight: var(--kendo-h3-font-weight);
218-
}
219-
220-
h4 {
221-
font-size: var(--kendo-h4-font-size);
222-
line-height: var( --kendo-h4-line-height);
223-
font-weight: var(--kendo-h4-font-weight);
224-
}
225-
226-
h5 {
227-
font-size: var(--kendo-h5-font-size);
228-
line-height: var( --kendo-h5-line-height);
229-
font-weight: var(--kendo-h5-font-weight);
230-
}
231-
232-
h6 {
233-
font-size: var(--kendo-h6-font-size);
234-
line-height: var( --kendo-h6-line-height);
235-
font-weight: var(--kendo-h6-font-weight);
236-
}
237-
}
238-
239201
@theme inline {
240202
/* Misc */
241203
--color-app-surface: var( --kendo-color-app-surface );

‎examples/kendo-react-freemium/src/pages/Home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function Home() {
3030
return (
3131
<>
3232
<div style={{ minHeight: 'calc(100vh - 106px)'}} className="bg-linear-[119deg,_#F8F9FF_-1.78%,_#F3F2FF_47.75%,_#E6F5FF_97.28%] p-10">
33-
<h1 className="!text-4xl text-subtle pb-6">Welcome John Doe 👋</h1>
33+
<h1 className="text-4xl text-subtle pb-6">Welcome John Doe 👋</h1>
3434
<div className="grid grid-cols-[360px_1fr] lg:grid-cols-12 xl:grid-cols-[1fr_2fr_360px] gap-6">
3535
<div className="col-span-2 lg:col-span-6 xl:col-span-2">
3636
<Card className="rounded-2xl">

‎examples/kendo-react-freemium/src/pages/Projects.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ export default function Projects() {
185185
<Breadcrumb data={breadcrumbItems} className="!bg-app-surface" />
186186

187187
<div className="flex flex-wrap items-center justify-between">
188-
<h1 className="!text-4xl">Projects</h1>
188+
<h1 className="text-4xl">Projects</h1>
189189
<Button themeColor="primary" fillMode="outline" svgIcon={plusIcon} onClick={addNew}>Add new project</Button>
190190
</div>
191191

‎examples/kendo-react-freemium/src/pages/Settings.tsx‎

Lines changed: 157 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import { Avatar, Breadcrumb, Stepper, StepperChangeEvent } from "@progress/kendo
44
import { FloatingLabel } from "@progress/kendo-react-labels";
55
import { homeIcon, listUnorderedIcon, lockIcon, pencilIcon, wrenchIcon, xIcon } from "@progress/kendo-svg-icons";
66
import React from "react";
7-
import { ColorPalette, ColorPaletteChangeEvent, InputSuffix, TextBox } from "@progress/kendo-react-inputs";
7+
import { ColorPalette, ColorPaletteChangeEvent, InputSuffix, Switch, TextBox } from "@progress/kendo-react-inputs";
88
import { Popup } from "@progress/kendo-react-popup";
9+
import { AutoComplete, DropDownList } from "@progress/kendo-react-dropdowns";
910

1011
interface DataModel {
1112
id: string;
@@ -38,6 +39,17 @@ export default function Settings() {
3839
const [countryValue, setCountryValue] = React.useState('Country');
3940
const [cityValue, setCityValue] = React.useState('City');
4041
const [addressValue, setAddresslValue] = React.useState('Address');
42+
const [oldPassword, setOldPassword] = React.useState('Old Password');
43+
const [newPassword, setNewPassowrd] = React.useState('New Password');
44+
const [confirmPassword, setConfirmPassowrd] = React.useState('Confirm New Password');
45+
const [question1, setQuestion1] = React.useState('Question 1');
46+
const [answer1, setAnswer1] = React.useState('Answer 1');
47+
const [question2, setQuestion2] = React.useState('Question 2');
48+
const [answer2, setAnswer2] = React.useState('Answer 2');
49+
const [question3, setQuestion3] = React.useState('Question 3');
50+
const [answer3, setAnswer3] = React.useState('Answer 3');
51+
const [lang, setLang] = React.useState('-Select Language-');
52+
const [timeZone, setTimeZone] = React.useState('-Select Time Zone-');
4153
const anchor = React.useRef<any>(null);
4254
const [show, setShow] = React.useState(false);
4355
const [color, setColor] = React.useState<string>('');
@@ -59,11 +71,13 @@ export default function Settings() {
5971
<>
6072
<div style={{minHeight: 'calc(100vh - 106px)'}} className="flex flex-col p-10 gap-6">
6173
<Breadcrumb data={breadcrumbItems} className="!bg-app-surface" />
62-
<h1 className="!text-4xl">Settings</h1>
74+
<h1 className="text-4xl">Settings</h1>
6375

6476
<Stepper items={stepperItems} value={value} onChange={handleChange} />
6577

66-
<div className="grid grid-cols-2 xl:grid-cols-3">
78+
{value === 0 && (
79+
<>
80+
<div className="grid grid-cols-2 xl:grid-cols-3">
6781
<div className="col-span-2 flex flex-col gap-6">
6882
<span className="text-lg text-subtle font-bold">Details</span>
6983
<div className="flex items-center gap-2">
@@ -133,45 +147,106 @@ export default function Settings() {
133147
</FloatingLabel>
134148
</div>
135149
</div>
136-
137-
{/* Accont Security
150+
</div>
151+
<div className="flex gap-2 mt-4">
152+
<Button themeColor="primary" size="large">Save</Button>
153+
<Button themeColor="primary" fillMode="outline" size="large">Cancel</Button>
154+
</div>
155+
</>
156+
)}
157+
{value === 1 && (
158+
<>
159+
<div className="grid grid-cols-2 xl:grid-cols-3">
138160
<div className="col-span-2 flex flex-col gap-6">
139161
<span className="text-lg text-subtle font-bold">Password</span>
140162
<div className="grid grid-cols-2 gap-6">
141-
<FloatingLabel label="Old Password">
142-
<Textbox type="password" size="large" value="Old Password" />
143-
</FloatingLabel>
144-
<FloatingLabel label="New Password" className="col-start-1">
145-
<Textbox type="password" size="large" value="New Password" />
163+
<FloatingLabel label="Old Password" editorId={'old-password'} editorValue={oldPassword}>
164+
<TextBox type="password" size="large" value={oldPassword} onChange={e => setOldPassword(e.value as string)} suffix={() => {
165+
return (
166+
<InputSuffix>
167+
<SvgIcon icon={xIcon} onClick={() => setOldPassword('')} />
168+
</InputSuffix>)
169+
}} />
170+
</FloatingLabel>
171+
<FloatingLabel label="New Password" editorId={'new-password'} editorValue={newPassword} className="col-start-1">
172+
<TextBox type="password" size="large" value={newPassword} onChange={e => setNewPassowrd(e.value as string)} suffix={() => {
173+
return (
174+
<InputSuffix>
175+
<SvgIcon icon={xIcon} onClick={() => setNewPassowrd('')} />
176+
</InputSuffix>)
177+
}}/>
146178
</FloatingLabel>
147-
<FloatingLabel label="Confirm New Password">
148-
<Textbox type="password" size="large" value="Confirm New Password" />
179+
<FloatingLabel label="Confirm New Password" editorId={'confirm-password'} editorValue={confirmPassword}>
180+
<TextBox type="password" size="large" value={confirmPassword} onChange={e => setConfirmPassowrd(e.value as string)} suffix={() => {
181+
return (
182+
<InputSuffix>
183+
<SvgIcon icon={xIcon} onClick={() => setConfirmPassowrd('')} />
184+
</InputSuffix>)
185+
}}/>
149186
</FloatingLabel>
150187
</div>
151188
<span className="text-lg text-subtle font-bold">Security Questions:</span>
152189
<div className="grid grid-cols-2 gap-6">
153-
<FloatingLabel label="Question 1">
154-
<Textbox size="large" value="Question 1" />
155-
</FloatingLabel>
156-
<FloatingLabel label="Answer 1">
157-
<Textbox type="password" size="large" value="Answer 1" />
158-
</FloatingLabel>
159-
<FloatingLabel label="Question 2">
160-
<Textbox size="large" value="Question 2" />
161-
</FloatingLabel>
162-
<FloatingLabel label="Answer 2">
163-
<Textbox size="large" type="password" value="Answer 2" />
190+
<FloatingLabel label="Question 1" editorId={'question-1'} editorValue={question1}>
191+
<TextBox size="large" value={question1} onChange={e => setQuestion1(e.value as string)} suffix={() => {
192+
return (
193+
<InputSuffix>
194+
<SvgIcon icon={xIcon} onClick={() => setQuestion1('')} />
195+
</InputSuffix>)
196+
}} />
197+
</FloatingLabel>
198+
<FloatingLabel label="Answer 1" editorId={'answer-1'} editorValue={answer1}>
199+
<TextBox size="large" value={answer1} onChange={e => setAnswer1(e.value as string)} suffix={() => {
200+
return (
201+
<InputSuffix>
202+
<SvgIcon icon={xIcon} onClick={() => setAnswer1('')} />
203+
</InputSuffix>)
204+
}}/>
164205
</FloatingLabel>
165-
<FloatingLabel label="Question 3">
166-
<Textbox size="large" value="Question 3" />
206+
<FloatingLabel label="Question 2" editorId={'question-2'} editorValue={question2}>
207+
<TextBox size="large" value={question2} onChange={e => setQuestion2(e.value as string)} suffix={() => {
208+
return (
209+
<InputSuffix>
210+
<SvgIcon icon={xIcon} onClick={() => setQuestion2('')} />
211+
</InputSuffix>)
212+
}}/>
213+
</FloatingLabel>
214+
<FloatingLabel label="Answer 2" editorId={'answer-2'} editorValue={answer2}>
215+
<TextBox size="large" value={answer2} onChange={e => setAnswer2(e.value as string)} suffix={() => {
216+
return (
217+
<InputSuffix>
218+
<SvgIcon icon={xIcon} onClick={() => setAnswer2('')} />
219+
</InputSuffix>)
220+
}} />
221+
</FloatingLabel>
222+
<FloatingLabel label="Question 3" editorId={'question-3'} editorValue={question3}>
223+
<TextBox size="large" value={question3} onChange={e => setQuestion3(e.value as string)} suffix={() => {
224+
return (
225+
<InputSuffix>
226+
<SvgIcon icon={xIcon} onClick={() => setQuestion3('')} />
227+
</InputSuffix>)
228+
}}/>
167229
</FloatingLabel>
168-
<FloatingLabel label="Answer 3">
169-
<Textbox size="large" type="password" value="Answer 3" />
230+
<FloatingLabel label="Answer 3" editorId={'answer-3'} editorValue={answer3}>
231+
<TextBox size="large" value={answer3} onChange={e => setAnswer3(e.value as string)} suffix={() => {
232+
return (
233+
<InputSuffix>
234+
<SvgIcon icon={xIcon} onClick={() => setAnswer3('')} />
235+
</InputSuffix>)
236+
}}/>
170237
</FloatingLabel>
171238
</div>
172-
</div> */}
173-
174-
{/* Preferences
239+
</div>
240+
</div>
241+
<div className="flex gap-2 mt-4">
242+
<Button themeColor="primary" size="large">Save</Button>
243+
<Button themeColor="primary" fillMode="outline" size="large">Cancel</Button>
244+
</div>
245+
</>
246+
)}
247+
{value === 2 && (
248+
<>
249+
<div className="grid grid-cols-2 xl:grid-cols-3">
175250
<div className="col-span-1 col-start-1 flex flex-col gap-6">
176251
<span className="text-lg text-subtle font-bold">Notification Settings:</span>
177252
<div className="grid gap-6">
@@ -189,20 +264,61 @@ export default function Settings() {
189264
</div>
190265
</div>
191266
<span className="text-lg text-subtle font-bold">Language and Localization</span>
192-
<div className="grid gap-6">
193-
<FloatingLabel label="Preferred Language">
194-
<Autocomplete size="large" placeholder="-Select Language-" />
267+
<div className="grid gap-6">
268+
<FloatingLabel label="Preferred Language" editorId={'lang'} editorValue={lang}>
269+
<AutoComplete size="large" defaultValue="-Select Language-"
270+
data={["English",
271+
"Spanish",
272+
"French",
273+
"German",
274+
"Chinese",
275+
"Japanese",
276+
"Hindi",
277+
"Arabic",
278+
"Portuguese"]}
279+
value={lang} onChange={e => setLang(e.value as string)}
280+
suffix={() => {
281+
return (
282+
<InputSuffix>
283+
<SvgIcon icon={xIcon} onClick={() => setLang('-Select Language-')} />
284+
</InputSuffix>)
285+
}}/>
195286
</FloatingLabel>
196-
<FloatingLabel label="Time Zone">
197-
<DropdownList size="large" placeholder="-Select Time Zone-" />
287+
<FloatingLabel label="Time Zone"editorId={'time-zone'} editorValue={timeZone}>
288+
<DropDownList size="large" defaultValue="-Select Time Zone-"
289+
value={timeZone} onChange={e => setTimeZone(e.value as string)}
290+
data={[
291+
"PST (Pacific Standard Time)",
292+
"EST (Eastern Standard Time)",
293+
"CST (Central Standard Time)",
294+
"MST (Mountain Standard Time)",
295+
"GMT (Greenwich Mean Time)",
296+
"CET (Central European Time)",
297+
"EET (Eastern European Time)",
298+
"IST (Indian Standard Time)",
299+
"JST (Japan Standard Time)",
300+
"AEST (Australian Eastern Standard Time)",
301+
"NZST (New Zealand Standard Time)",
302+
"ART (Argentina Time)",
303+
"BRT (Brazilian Time)",
304+
"WAT (West Africa Time)",
305+
"SAST (South Africa Standard Time)",
306+
"ICT (Indochina Time)",
307+
"MSK (Moscow Time)",
308+
"HST (Hawaii-Aleutian Standard Time)",
309+
"AKST (Alaska Standard Time)",
310+
"UTC"
311+
]} />
198312
</FloatingLabel>
199313
</div>
200-
</div> */}
201-
</div>
202-
<div className="flex gap-2">
203-
<Button themeColor="primary" size="large">Save</Button>
204-
<Button themeColor="primary" fillMode="outline" size="large">Cancel</Button>
205-
</div>
314+
</div>
315+
</div>
316+
<div className="flex gap-2 mt-4">
317+
<Button themeColor="primary" size="large">Save</Button>
318+
<Button themeColor="primary" fillMode="outline" size="large">Cancel</Button>
319+
</div>
320+
</>
321+
)}
206322
</div>
207323
<div className="bg-surface-alt color-subtle p-2 text-center">
208324
<span>Copyright &#169; 2025 Progress Software. All rights reserved.</span>

0 commit comments

Comments
 (0)