Merge pull request 'topbar' (#1) from topbar into master
Reviewed-by: filipizydorczyk <filip.izydorczyk@protonmail.com>
This commit is contained in:
wrzesinski-hubert
commit
31c1917909
@ -42,5 +42,6 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
},
|
||||
"optionalDependencies": {}
|
||||
}
|
||||
|
||||
39
src/App.tsx
39
src/App.tsx
@ -1,13 +1,38 @@
|
||||
import React from "react";
|
||||
import TopBar from "./components/TopBar/index"
|
||||
import React, { useState } from "react";
|
||||
import TopBar from "./components/TopBar/";
|
||||
import Transfer from "./components/Transfer/";
|
||||
import "./App.scss";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<TopBar></TopBar>
|
||||
</div>
|
||||
);
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [text, setText] = useState("");
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<TopBar
|
||||
textChangeHandler={(e) => {
|
||||
setText(e.target.value);
|
||||
}}
|
||||
handleTransfer={(e) => {
|
||||
setOpen(!isOpen);
|
||||
}}
|
||||
handleLanguage={(e)=>{
|
||||
alert("chuj1");
|
||||
}}
|
||||
handleProfile={(e)=>{
|
||||
alert("chuj2");
|
||||
}}
|
||||
isOpen={isOpen}
|
||||
/>
|
||||
<Transfer
|
||||
isOpen={isOpen}
|
||||
handleClose={(e) => {
|
||||
setOpen(!isOpen);
|
||||
}}
|
||||
/>
|
||||
<h1>{text}</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
BIN
src/components/TopBar/UK.png
Normal file
BIN
src/components/TopBar/UK.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
1
src/components/TopBar/close.svg
Normal file
1
src/components/TopBar/close.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M38 12.83l-2.83-2.83-11.17 11.17-11.17-11.17-2.83 2.83 11.17 11.17-11.17 11.17 2.83 2.83 11.17-11.17 11.17 11.17 2.83-2.83-11.17-11.17z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>
|
||||
|
After Width: | Height: | Size: 297 B |
@ -1,105 +0,0 @@
|
||||
.bar {
|
||||
background-color: #ffdc61;
|
||||
height: 80px;
|
||||
padding: 5px;
|
||||
font-family: comic sans MS;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.rest {
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tekst {
|
||||
width: 200px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.iconSearch {
|
||||
width: 35px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.inputdiv {
|
||||
width: 70%;
|
||||
float: left;
|
||||
transition: width 1s;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 96%;
|
||||
float: left;
|
||||
transition: width 1s;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1400px) {
|
||||
.inputdiv {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 76%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 870px) {
|
||||
.tekst {
|
||||
display: none;
|
||||
}
|
||||
.iconClose{
|
||||
display: none;
|
||||
}
|
||||
.iconUser {
|
||||
width: 37px !important;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.transfer {
|
||||
margin-left: 10px !important;
|
||||
width: 37px !important;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.UK {
|
||||
margin-left: 10px !important;
|
||||
width: 35px !important;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.iconClose {
|
||||
width: 35px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.iconUser {
|
||||
width: 47px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.transfer {
|
||||
margin-left: 25px;
|
||||
width: 47px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.UK {
|
||||
margin-left: 25px;
|
||||
width: 45px;
|
||||
float: right;
|
||||
}
|
||||
71
src/components/TopBar/index.scss
Normal file
71
src/components/TopBar/index.scss
Normal file
@ -0,0 +1,71 @@
|
||||
.top-bar {
|
||||
background-color: #ffdc61;
|
||||
height: 80px;
|
||||
padding: 5px;
|
||||
font-family: comic sans MS;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 0.5;
|
||||
justify-content: flex-start;
|
||||
|
||||
&-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
&-div {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 3;
|
||||
}
|
||||
|
||||
&-field {
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
&-icon{
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
&-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-grow: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 670px) {
|
||||
.top-bar {
|
||||
&__tekst {
|
||||
display: none;
|
||||
}
|
||||
&__icon {
|
||||
width: 35px;
|
||||
}
|
||||
&__logo-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
&__input-icon{
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,49 +1,101 @@
|
||||
import React from "react";
|
||||
import "./index.css";
|
||||
import React, { ChangeEvent } from "react";
|
||||
import "./index.scss";
|
||||
import Input from "@material-ui/core/Input";
|
||||
import SearchIcon from "@material-ui/icons/Search";
|
||||
import CloseIcon from "@material-ui/icons/Close";
|
||||
import Transfer from "./transfer.png";
|
||||
import Search from "./search.svg";
|
||||
import UK from "./UK.png";
|
||||
import User from "./user.png";
|
||||
import CloseIcon from "./close.svg";
|
||||
|
||||
interface TopBarProps {
|
||||
handleTransfer: (e: React.MouseEvent) => void;
|
||||
handleProfile: (e: React.MouseEvent) => void;
|
||||
handleLanguage: (e: React.MouseEvent) => void;
|
||||
textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
interface TopBarState {}
|
||||
|
||||
export default class TopBar extends React.Component<TopBarProps, TopBarState> {
|
||||
constructor(props: TopBarProps) {
|
||||
super(props);
|
||||
this.handleProfile = 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<HTMLInputElement>) {
|
||||
this.props.textChangeHandler(e);
|
||||
}
|
||||
|
||||
handleProfile(e: React.MouseEvent) {
|
||||
this.props.handleProfile(e);
|
||||
}
|
||||
|
||||
handleLanguage(e: React.MouseEvent) {
|
||||
this.props.handleLanguage(e);
|
||||
}
|
||||
|
||||
export default class TopBar extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="bar">
|
||||
<div className="top-bar">
|
||||
<div className="top-bar__logo">
|
||||
<img
|
||||
className="top-bar__logo-image"
|
||||
alt="logo"
|
||||
src="https://plannaplan.pl/img/logo.svg"
|
||||
/>
|
||||
<div className="top-bar__tekst"> plan na plan </div>
|
||||
</div>
|
||||
<div className="top-bar__input-div">
|
||||
<img
|
||||
className="logo"
|
||||
alt="logo"
|
||||
src="https://plannaplan.pl/img/logo.svg"
|
||||
/>
|
||||
<div className="rest">
|
||||
<div className="tekst"> plan na plan </div>
|
||||
<div className="inputdiv">
|
||||
<div className="iconSearch">
|
||||
<SearchIcon fontSize="large"></SearchIcon>
|
||||
</div>
|
||||
<div className="search">
|
||||
<Input
|
||||
placeholder="Wyszukaj..."
|
||||
inputProps={{ "aria-label": "description" }}
|
||||
className="input"
|
||||
/>
|
||||
<div className="iconClose">
|
||||
<CloseIcon fontSize="large"></CloseIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
className="top-bar__input-icon"
|
||||
alt="search"
|
||||
src={Search}
|
||||
/>
|
||||
<Input
|
||||
placeholder="Wyszukaj..."
|
||||
inputProps={{ "aria-label": "description" }}
|
||||
className="top-bar__input-field"
|
||||
onChange={(e) =>
|
||||
this.handleChange(e as ChangeEvent<HTMLInputElement>)
|
||||
}
|
||||
/>
|
||||
<img
|
||||
className="top-bar__input-icon"
|
||||
alt="close"
|
||||
src={CloseIcon}
|
||||
/>
|
||||
</div>
|
||||
<div className="top-bar__icon-box">
|
||||
<img
|
||||
className="transfer"
|
||||
alt="logo"
|
||||
src="https://plannaplan.pl/img/transfer.png"
|
||||
className="top-bar__icon"
|
||||
alt="transfer"
|
||||
src={Transfer}
|
||||
onClick={this.handleTransfer}
|
||||
/>
|
||||
<img
|
||||
className="UK"
|
||||
alt="logo"
|
||||
src="https://plannaplan.pl/img/UK.png"
|
||||
className="top-bar__icon"
|
||||
alt="change_language"
|
||||
src={UK}
|
||||
onClick={this.handleLanguage}
|
||||
/>
|
||||
<img
|
||||
className="iconUser"
|
||||
alt="logo"
|
||||
src="https://plannaplan.pl/img/user.svg"
|
||||
className="top-bar__icon"
|
||||
alt="profile"
|
||||
src={User}
|
||||
onClick={this.handleProfile}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
1
src/components/TopBar/search.svg
Normal file
1
src/components/TopBar/search.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M344.5,298c15-23.6,23.8-51.6,23.8-81.7c0-84.1-68.1-152.3-152.1-152.3C132.1,64,64,132.2,64,216.3 c0,84.1,68.1,152.3,152.1,152.3c30.5,0,58.9-9,82.7-24.4l6.9-4.8L414.3,448l33.7-34.3L339.5,305.1L344.5,298z M301.4,131.2 c22.7,22.7,35.2,52.9,35.2,85c0,32.1-12.5,62.3-35.2,85c-22.7,22.7-52.9,35.2-85,35.2c-32.1,0-62.3-12.5-85-35.2 c-22.7-22.7-35.2-52.9-35.2-85c0-32.1,12.5-62.3,35.2-85c22.7-22.7,52.9-35.2,85-35.2C248.5,96,278.7,108.5,301.4,131.2z"/></svg>
|
||||
|
After Width: | Height: | Size: 808 B |
BIN
src/components/TopBar/transfer.png
Normal file
BIN
src/components/TopBar/transfer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
src/components/TopBar/user.png
Normal file
BIN
src/components/TopBar/user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
16
src/components/Transfer/index.scss
Normal file
16
src/components/Transfer/index.scss
Normal file
@ -0,0 +1,16 @@
|
||||
.wrapper{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.transfer{
|
||||
display: flex;
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
background-color: purple;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
51
src/components/Transfer/index.tsx
Normal file
51
src/components/Transfer/index.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import Modal from "@material-ui/core/Modal";
|
||||
import "./index.scss";
|
||||
|
||||
interface TransferProps {
|
||||
handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
interface TransferState {}
|
||||
|
||||
export default class Transfer extends React.Component<
|
||||
TransferProps,
|
||||
TransferState
|
||||
> {
|
||||
constructor(props: TransferProps) {
|
||||
super(props);
|
||||
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
this.state = {
|
||||
isOpen: true,
|
||||
};
|
||||
}
|
||||
|
||||
handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
|
||||
this.props.handleClose(e);
|
||||
this.setState({
|
||||
isOpen: false,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Modal
|
||||
className="wrapper"
|
||||
open={this.props.isOpen}
|
||||
onClose={this.handleClose}
|
||||
aria-labelledby="simple-modal-title"
|
||||
aria-describedby="simple-modal-description"
|
||||
>
|
||||
<div className="transfer">
|
||||
<button type="button" onClick={this.handleClose}>
|
||||
Close Modal
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
dupa
|
||||
Loading…
Reference in New Issue
Block a user