diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index bcd5dfd..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index e4d7faa..b63401e 100644 --- a/public/index.html +++ b/public/index.html @@ -2,18 +2,18 @@ - + - + - React App + PlanNaPlan diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..eed50b9 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,25 @@ + + + + + + + + + diff --git a/public/manifest.json b/public/manifest.json index cf83229..a43a8e1 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -3,9 +3,7 @@ "name": "PlanNaPlan", "icons": [ { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" + "src": "logo.svg" } ], "start_url": ".", diff --git a/src/App.tsx b/src/App.tsx index 701f953..8023cc0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,8 +7,11 @@ import { appointments } from "./components/Calendar/appointments"; import RightBar from "./components/RightBar"; function App() { - const [isOpen, setOpen] = useState(false); + const [isOpenTransfer, setOpenTransfer] = useState(false); + const [isOpenProfile, setOpenProfile] = useState(false); + const [isPolish, setLanguage] = useState(true); const [text, setText] = useState(""); + const [anchorEl, setAnchorEl] = React.useState(null); return (
@@ -17,20 +20,27 @@ function App() { setText(e.target.value); }} handleTransfer={(e) => { - setOpen(!isOpen); + setOpenTransfer(!isOpenTransfer); }} handleLanguage={(e) => { - alert("Language"); + setLanguage(!isPolish); }} handleProfile={(e) => { - alert("Profile"); + setOpenProfile(!isOpenProfile); + setAnchorEl(e.currentTarget as HTMLElement); }} - isOpen={isOpen} + handleClose={(e) => { + setOpenProfile(!isOpenProfile); + }} + isOpenTransfer={isOpenTransfer} + isOpenProfile={isOpenProfile} + isPolish={isPolish} + anchorEl={anchorEl} /> { - setOpen(!isOpen); + setOpenTransfer(!isOpenTransfer); }} />
diff --git a/src/components/Calendar/appointments.ts b/src/components/Calendar/appointments.ts index e6cf0dd..44a2562 100644 --- a/src/components/Calendar/appointments.ts +++ b/src/components/Calendar/appointments.ts @@ -20,4 +20,11 @@ export const appointments = [ id: 0, location: 'Room 1', }, + { + title: 'Twoja stara beszamel', + startDate: new Date(2020, 5, 1, 18, 45), + endDate: new Date(2020, 5, 1, 20, 0), + id: 0, + location: 'Room 1', + }, ]; diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx index 11d617b..c9831d6 100644 --- a/src/components/Calendar/index.tsx +++ b/src/components/Calendar/index.tsx @@ -1,24 +1,25 @@ import * as React from "react"; -import { ViewState } from "@devexpress/dx-react-scheduler"; +import { ViewState, IntegratedEditing, EditingState } from "@devexpress/dx-react-scheduler"; import { AppointmentModel } from "@devexpress/dx-react-scheduler"; import { Scheduler, WeekView, Appointments, AppointmentTooltip, + AppointmentForm, } from "@devexpress/dx-react-scheduler-material-ui"; import moment from "moment"; import "moment/locale/pl"; import "./index.scss"; import { makeStyles, Theme, createStyles } from "@material-ui/core/styles"; - interface CalendarProps { data: Array; - } -interface CalendarState {currentDate: Date;} +interface CalendarState { + currentDate: Date; +} const formatDayScaleDate = ( date: moment.MomentInput, @@ -103,26 +104,34 @@ export default class Calendar extends React.PureComponent< }; } + commitChanges() { + + } + render() { const { data } = this.props; const { currentDate } = this.state; - return ( - - - - - - + + + + + + + + + ); } } diff --git a/src/components/TopBar/3x.gif b/src/components/TopBar/3x.gif new file mode 100644 index 0000000..637763d Binary files /dev/null and b/src/components/TopBar/3x.gif differ diff --git a/src/components/TopBar/PL.png b/src/components/TopBar/PL.png new file mode 100644 index 0000000..656d382 Binary files /dev/null and b/src/components/TopBar/PL.png differ diff --git a/src/components/TopBar/index.scss b/src/components/TopBar/index.scss index 714d679..e0ae02a 100644 --- a/src/components/TopBar/index.scss +++ b/src/components/TopBar/index.scss @@ -47,6 +47,9 @@ flex-grow: 1.5; } } + &__menu{ +margin-top: 25px; + } } @media only screen and (max-width: 670px) { .top-bar { diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx index e276c28..f9f8b10 100644 --- a/src/components/TopBar/index.tsx +++ b/src/components/TopBar/index.tsx @@ -4,49 +4,58 @@ import Input from "@material-ui/core/Input"; import Transfer from "./transfer.png"; import Search from "./search.svg"; import UK from "./UK.png"; +import PL from "./PL.png"; import User from "./user.png"; import CloseIcon from "./close.svg"; +import Menu from "@material-ui/core/Menu"; +import MenuItem from "@material-ui/core/MenuItem"; interface TopBarProps { handleTransfer: (e: React.MouseEvent) => void; handleProfile: (e: React.MouseEvent) => void; + handleClose: (e: React.MouseEvent) => void; handleLanguage: (e: React.MouseEvent) => void; textChangeHandler: (e: React.ChangeEvent) => void; - isOpen: boolean; + isOpenTransfer: boolean; + isOpenProfile: boolean; + isPolish: boolean; + anchorEl: null | HTMLElement; } interface TopBarState {} -export default class TopBar extends React.Component { +export default class TopBar extends React.Component< + TopBarProps, + TopBarState +> { constructor(props: TopBarProps) { super(props); this.handleProfile = this.handleProfile.bind(this); + this.handleClose = this.handleProfile.bind(this); this.handleLanguage = this.handleLanguage.bind(this); this.handleTransfer = this.handleTransfer.bind(this); - this.state = { - isOpen: false, - }; - } - - handleTransfer(e: React.MouseEvent) { - this.props.handleTransfer(e); - this.setState({ - isOpen: true, - }); } handleChange(e: React.ChangeEvent) { this.props.textChangeHandler(e); } - handleProfile(e: React.MouseEvent) { - this.props.handleProfile(e); + handleTransfer(e: React.MouseEvent) { + this.props.handleTransfer(e); } handleLanguage(e: React.MouseEvent) { this.props.handleLanguage(e); } + handleProfile(e: React.MouseEvent) { + this.props.handleProfile(e); + } + + handleClose(e: React.MouseEvent) { + this.props.handleClose(e); + } + render() { return (
@@ -59,11 +68,7 @@ export default class TopBar extends React.Component {
plan na plan
- search + search { this.handleChange(e as ChangeEvent) } /> - close + close
{ change_language { src={User} onClick={this.handleProfile} /> + + Profile + My account + Logout +
); diff --git a/src/components/Transfer/index.tsx b/src/components/Transfer/index.tsx index 6ce2a29..0a87c73 100644 --- a/src/components/Transfer/index.tsx +++ b/src/components/Transfer/index.tsx @@ -17,16 +17,10 @@ export default class Transfer extends React.Component< super(props); this.handleClose = this.handleClose.bind(this); - this.state = { - isOpen: true, - }; } handleClose(e: React.MouseEvent) { this.props.handleClose(e); - this.setState({ - isOpen: false, - }); } render() {