Skip to content

Commit

Permalink
chore: finish setings pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@silviyaboteva
silviyaboteva committed Feb 27, 2025
1 parent 85942b5 commit 1cf2959
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 81 deletions.
1 change: 1 addition & 0 deletions examples/kendo-react-freemium/src/components/AppBarComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export default function AppBarComponent() {

const onNavigate = () => {
navigate('/settings');
setShow(false);
};
return (
<AppBar positionMode="sticky" className="bg-surface-alt !p-4" themeColor='inherit'>
Expand Down
38 changes: 0 additions & 38 deletions examples/kendo-react-freemium/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,44 +198,6 @@
--kendo-h6-font-weight: 700;
}

@layer base {
h1 {
font-size: var(--kendo-h1-font-size);
line-height: var( --kendo-h1-line-height);
font-weight: var(--kendo-h1-font-weight);
}

h2 {
font-size: var(--kendo-h2-font-size);
line-height: var( --kendo-h2-line-height);
font-weight: var(--kendo-h2-font-weight);
}

h3 {
font-size: var(--kendo-h3-font-size);
line-height: var( --kendo-h3-line-height);
font-weight: var(--kendo-h3-font-weight);
}

h4 {
font-size: var(--kendo-h4-font-size);
line-height: var( --kendo-h4-line-height);
font-weight: var(--kendo-h4-font-weight);
}

h5 {
font-size: var(--kendo-h5-font-size);
line-height: var( --kendo-h5-line-height);
font-weight: var(--kendo-h5-font-weight);
}

h6 {
font-size: var(--kendo-h6-font-size);
line-height: var( --kendo-h6-line-height);
font-weight: var(--kendo-h6-font-weight);
}
}

@theme inline {
/* Misc */
--color-app-surface: var( --kendo-color-app-surface );
Expand Down
2 changes: 1 addition & 1 deletion examples/kendo-react-freemium/src/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function Home() {
return (
<>
<div style={{ minHeight: 'calc(100vh - 106px)'}} className="bg-linear-[119deg,_#F8F9FF_-1.78%,_#F3F2FF_47.75%,_#E6F5FF_97.28%] p-10">
<h1 className="!text-4xl text-subtle pb-6">Welcome John Doe 👋</h1>
<h1 className="text-4xl text-subtle pb-6">Welcome John Doe 👋</h1>
<div className="grid grid-cols-[360px_1fr] lg:grid-cols-12 xl:grid-cols-[1fr_2fr_360px] gap-6">
<div className="col-span-2 lg:col-span-6 xl:col-span-2">
<Card className="rounded-2xl">
Expand Down
2 changes: 1 addition & 1 deletion examples/kendo-react-freemium/src/pages/Projects.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export default function Projects() {
<Breadcrumb data={breadcrumbItems} className="!bg-app-surface" />

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

Expand Down
198 changes: 157 additions & 41 deletions examples/kendo-react-freemium/src/pages/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import { Avatar, Breadcrumb, Stepper, StepperChangeEvent } from "@progress/kendo
import { FloatingLabel } from "@progress/kendo-react-labels";
import { homeIcon, listUnorderedIcon, lockIcon, pencilIcon, wrenchIcon, xIcon } from "@progress/kendo-svg-icons";
import React from "react";
import { ColorPalette, ColorPaletteChangeEvent, InputSuffix, TextBox } from "@progress/kendo-react-inputs";
import { ColorPalette, ColorPaletteChangeEvent, InputSuffix, Switch, TextBox } from "@progress/kendo-react-inputs";
import { Popup } from "@progress/kendo-react-popup";
import { AutoComplete, DropDownList } from "@progress/kendo-react-dropdowns";

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

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

<div className="grid grid-cols-2 xl:grid-cols-3">
{value === 0 && (
<>
<div className="grid grid-cols-2 xl:grid-cols-3">
<div className="col-span-2 flex flex-col gap-6">
<span className="text-lg text-subtle font-bold">Details</span>
<div className="flex items-center gap-2">
Expand Down Expand Up @@ -133,45 +147,106 @@ export default function Settings() {
</FloatingLabel>
</div>
</div>

{/* Accont Security
</div>
<div className="flex gap-2 mt-4">
<Button themeColor="primary" size="large">Save</Button>
<Button themeColor="primary" fillMode="outline" size="large">Cancel</Button>
</div>
</>
)}
{value === 1 && (
<>
<div className="grid grid-cols-2 xl:grid-cols-3">
<div className="col-span-2 flex flex-col gap-6">
<span className="text-lg text-subtle font-bold">Password</span>
<div className="grid grid-cols-2 gap-6">
<FloatingLabel label="Old Password">
<Textbox type="password" size="large" value="Old Password" />
</FloatingLabel>
<FloatingLabel label="New Password" className="col-start-1">
<Textbox type="password" size="large" value="New Password" />
<FloatingLabel label="Old Password" editorId={'old-password'} editorValue={oldPassword}>
<TextBox type="password" size="large" value={oldPassword} onChange={e => setOldPassword(e.value as string)} suffix={() => {
return (
<InputSuffix>
<SvgIcon icon={xIcon} onClick={() => setOldPassword('')} />
</InputSuffix>)
}} />
</FloatingLabel>
<FloatingLabel label="New Password" editorId={'new-password'} editorValue={newPassword} className="col-start-1">
<TextBox type="password" size="large" value={newPassword} onChange={e => setNewPassowrd(e.value as string)} suffix={() => {
return (
<InputSuffix>
<SvgIcon icon={xIcon} onClick={() => setNewPassowrd('')} />
</InputSuffix>)
}}/>
</FloatingLabel>
<FloatingLabel label="Confirm New Password">
<Textbox type="password" size="large" value="Confirm New Password" />
<FloatingLabel label="Confirm New Password" editorId={'confirm-password'} editorValue={confirmPassword}>
<TextBox type="password" size="large" value={confirmPassword} onChange={e => setConfirmPassowrd(e.value as string)} suffix={() => {
return (
<InputSuffix>
<SvgIcon icon={xIcon} onClick={() => setConfirmPassowrd('')} />
</InputSuffix>)
}}/>
</FloatingLabel>
</div>
<span className="text-lg text-subtle font-bold">Security Questions:</span>
<div className="grid grid-cols-2 gap-6">
<FloatingLabel label="Question 1">
<Textbox size="large" value="Question 1" />
</FloatingLabel>
<FloatingLabel label="Answer 1">
<Textbox type="password" size="large" value="Answer 1" />
</FloatingLabel>
<FloatingLabel label="Question 2">
<Textbox size="large" value="Question 2" />
</FloatingLabel>
<FloatingLabel label="Answer 2">
<Textbox size="large" type="password" value="Answer 2" />
<FloatingLabel label="Question 1" editorId={'question-1'} editorValue={question1}>
<TextBox size="large" value={question1} onChange={e => setQuestion1(e.value as string)} suffix={() => {
return (
<InputSuffix>
<SvgIcon icon={xIcon} onClick={() => setQuestion1('')} />
</InputSuffix>)
}} />
</FloatingLabel>
<FloatingLabel label="Answer 1" editorId={'answer-1'} editorValue={answer1}>
<TextBox size="large" value={answer1} onChange={e => setAnswer1(e.value as string)} suffix={() => {
return (
<InputSuffix>
<SvgIcon icon={xIcon} onClick={() => setAnswer1('')} />
</InputSuffix>)
}}/>
</FloatingLabel>
<FloatingLabel label="Question 3">
<Textbox size="large" value="Question 3" />
<FloatingLabel label="Question 2" editorId={'question-2'} editorValue={question2}>
<TextBox size="large" value={question2} onChange={e => setQuestion2(e.value as string)} suffix={() => {
return (
<InputSuffix>
<SvgIcon icon={xIcon} onClick={() => setQuestion2('')} />
</InputSuffix>)
}}/>
</FloatingLabel>
<FloatingLabel label="Answer 2" editorId={'answer-2'} editorValue={answer2}>
<TextBox size="large" value={answer2} onChange={e => setAnswer2(e.value as string)} suffix={() => {
return (
<InputSuffix>
<SvgIcon icon={xIcon} onClick={() => setAnswer2('')} />
</InputSuffix>)
}} />
</FloatingLabel>
<FloatingLabel label="Question 3" editorId={'question-3'} editorValue={question3}>
<TextBox size="large" value={question3} onChange={e => setQuestion3(e.value as string)} suffix={() => {
return (
<InputSuffix>
<SvgIcon icon={xIcon} onClick={() => setQuestion3('')} />
</InputSuffix>)
}}/>
</FloatingLabel>
<FloatingLabel label="Answer 3">
<Textbox size="large" type="password" value="Answer 3" />
<FloatingLabel label="Answer 3" editorId={'answer-3'} editorValue={answer3}>
<TextBox size="large" value={answer3} onChange={e => setAnswer3(e.value as string)} suffix={() => {
return (
<InputSuffix>
<SvgIcon icon={xIcon} onClick={() => setAnswer3('')} />
</InputSuffix>)
}}/>
</FloatingLabel>
</div>
</div> */}

{/* Preferences
</div>
</div>
<div className="flex gap-2 mt-4">
<Button themeColor="primary" size="large">Save</Button>
<Button themeColor="primary" fillMode="outline" size="large">Cancel</Button>
</div>
</>
)}
{value === 2 && (
<>
<div className="grid grid-cols-2 xl:grid-cols-3">
<div className="col-span-1 col-start-1 flex flex-col gap-6">
<span className="text-lg text-subtle font-bold">Notification Settings:</span>
<div className="grid gap-6">
Expand All @@ -189,20 +264,61 @@ export default function Settings() {
</div>
</div>
<span className="text-lg text-subtle font-bold">Language and Localization</span>
<div className="grid gap-6">
<FloatingLabel label="Preferred Language">
<Autocomplete size="large" placeholder="-Select Language-" />
<div className="grid gap-6">
<FloatingLabel label="Preferred Language" editorId={'lang'} editorValue={lang}>
<AutoComplete size="large" defaultValue="-Select Language-"
data={["English",
"Spanish",
"French",
"German",
"Chinese",
"Japanese",
"Hindi",
"Arabic",
"Portuguese"]}
value={lang} onChange={e => setLang(e.value as string)}
suffix={() => {
return (
<InputSuffix>
<SvgIcon icon={xIcon} onClick={() => setLang('-Select Language-')} />
</InputSuffix>)
}}/>
</FloatingLabel>
<FloatingLabel label="Time Zone">
<DropdownList size="large" placeholder="-Select Time Zone-" />
<FloatingLabel label="Time Zone"editorId={'time-zone'} editorValue={timeZone}>
<DropDownList size="large" defaultValue="-Select Time Zone-"
value={timeZone} onChange={e => setTimeZone(e.value as string)}
data={[
"PST (Pacific Standard Time)",
"EST (Eastern Standard Time)",
"CST (Central Standard Time)",
"MST (Mountain Standard Time)",
"GMT (Greenwich Mean Time)",
"CET (Central European Time)",
"EET (Eastern European Time)",
"IST (Indian Standard Time)",
"JST (Japan Standard Time)",
"AEST (Australian Eastern Standard Time)",
"NZST (New Zealand Standard Time)",
"ART (Argentina Time)",
"BRT (Brazilian Time)",
"WAT (West Africa Time)",
"SAST (South Africa Standard Time)",
"ICT (Indochina Time)",
"MSK (Moscow Time)",
"HST (Hawaii-Aleutian Standard Time)",
"AKST (Alaska Standard Time)",
"UTC"
]} />
</FloatingLabel>
</div>
</div> */}
</div>
<div className="flex gap-2">
<Button themeColor="primary" size="large">Save</Button>
<Button themeColor="primary" fillMode="outline" size="large">Cancel</Button>
</div>
</div>
</div>
<div className="flex gap-2 mt-4">
<Button themeColor="primary" size="large">Save</Button>
<Button themeColor="primary" fillMode="outline" size="large">Cancel</Button>
</div>
</>
)}
</div>
<div className="bg-surface-alt color-subtle p-2 text-center">
<span>Copyright &#169; 2025 Progress Software. All rights reserved.</span>
Expand Down

0 comments on commit 1cf2959

Please sign in to comment.