zmiany guziki klasy i stara szafa

This commit is contained in:
wrzesinski-hubert 2020-06-03 18:15:51 +02:00
parent 8990ee2837
commit 46668a6bdb
3 changed files with 40 additions and 14 deletions

View File

@ -13,9 +13,15 @@ function App() {
textChangeHandler={(e) => { textChangeHandler={(e) => {
setText(e.target.value); setText(e.target.value);
}} }}
handleOpen={(e) => { handleTransfer={(e) => {
setOpen(!isOpen); setOpen(!isOpen);
}} }}
handleLanguage={(e)=>{
alert("chuj1");
}}
handleProfile={(e)=>{
alert("chuj2");
}}
isOpen={isOpen} isOpen={isOpen}
/> />
<Transfer <Transfer

View File

@ -44,8 +44,21 @@
} }
} }
} }
@media only screen and (max-width: 870px) { @media only screen and (max-width: 670px) {
.top-bar__tekst { .top-bar {
display: none; &__tekst {
display: none;
}
&__icon {
width: 35px;
}
&__logo-image {
width: 60px;
height: 60px;
}
}
.MuiSvgIcon-root,
MuiSvgIcon-fontSizeLarge {
font-size: inherit !important;
} }
} }

View File

@ -5,7 +5,9 @@ import SearchIcon from "@material-ui/icons/Search";
import CloseIcon from "@material-ui/icons/Close"; import CloseIcon from "@material-ui/icons/Close";
interface TopBarProps { interface TopBarProps {
handleOpen: (e: React.MouseEvent) => void; handleTransfer: (e: React.MouseEvent) => void;
handleProfile: (e: React.MouseEvent) => void;
handleLanguage: (e: React.MouseEvent) => void;
textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void; textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
isOpen: boolean; isOpen: boolean;
} }
@ -15,15 +17,16 @@ interface TopBarState {}
export default class TopBar extends React.Component<TopBarProps, TopBarState> { export default class TopBar extends React.Component<TopBarProps, TopBarState> {
constructor(props: TopBarProps) { constructor(props: TopBarProps) {
super(props); super(props);
this.handleProfile = this.handleProfile.bind(this);
this.handleOpen = this.handleOpen.bind(this); this.handleLanguage = this.handleLanguage.bind(this);
this.handleTransfer = this.handleTransfer.bind(this);
this.state = { this.state = {
isOpen: false, isOpen: false,
}; };
} }
handleOpen(e: React.MouseEvent) { handleTransfer(e: React.MouseEvent) {
this.props.handleOpen(e); this.props.handleTransfer(e);
this.setState({ this.setState({
isOpen: true, isOpen: true,
}); });
@ -33,8 +36,12 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
this.props.textChangeHandler(e); this.props.textChangeHandler(e);
} }
funkcja() { handleProfile(e: React.MouseEvent) {
alert("chuj"); this.props.handleProfile(e);
}
handleLanguage(e: React.MouseEvent) {
this.props.handleLanguage(e);
} }
render() { render() {
@ -65,19 +72,19 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
className="top-bar__icon" className="top-bar__icon"
alt="transfer" alt="transfer"
src="https://plannaplan.pl/img/transfer.png" src="https://plannaplan.pl/img/transfer.png"
onClick={this.handleOpen} onClick={this.handleTransfer}
/> />
<img <img
className="top-bar__icon" className="top-bar__icon"
alt="change_language" alt="change_language"
src="https://plannaplan.pl/img/UK.png" src="https://plannaplan.pl/img/UK.png"
onClick={this.funkcja} onClick={this.handleLanguage}
/> />
<img <img
className="top-bar__icon" className="top-bar__icon"
alt="profile" alt="profile"
src="https://plannaplan.pl/img/user.png" src="https://plannaplan.pl/img/user.png"
onClick={this.funkcja} onClick={this.handleProfile}
/> />
</div> </div>
</div> </div>