Skip to content

Commit 6137f59

Browse files
javadoffuadjavadoffuad
committed
new card - added select card color, translated into rus
1 parent 17a3a9d commit 6137f59

File tree

10 files changed

+70
-32
lines changed

10 files changed

+70
-32
lines changed

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
work correctly both with client-side routing and a non-root public URL.
2020
Learn how to configure a non-root public URL by running `npm run build`.
2121
-->
22-
<title>React App</title>
22+
<title>Web CİB</title>
2323

2424

2525
<!-- <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>-->

‎src/components/LeftNavigation.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Header from './Header';
66
export default () => {
77
return(
88
<div id="leftNavigation" className="pane pane-left">
9-
<Header title="Menu" />
9+
<Header title="Меню" />
1010

1111
<div className="pane pane-body">
1212
<div className="list nav-list">
@@ -15,28 +15,28 @@ export default () => {
1515
</div>
1616
<NavLink exact className="nav-item nav-card" to="/">
1717
<i className="icon icon-card"></i>
18-
<span className="nav-name">Cards</span>
18+
<span className="nav-name">Карты</span>
1919
</NavLink>
2020
<NavLink activeClassName="active" className="nav-item nav-history" to="/history">
2121
<i className="icon icon-history"></i>
22-
<span className="nav-name">History</span>
22+
<span className="nav-name">История оплат</span>
2323
</NavLink>
2424
<NavLink activeClassName="active" className="nav-item nav-template" to="/template">
2525
<i className="icon icon-template"></i>
26-
<span className="nav-name">Templates</span>
26+
<span className="nav-name">Шаблоны</span>
2727
</NavLink>
28-
<NavLink activeClassName="active" className="nav-item deactive" to="#">
28+
<a className="nav-item deactive" to="#">
2929
<i className="icon icon-map"></i>
30-
<span className="nav-name">Find on Map</span>
31-
</NavLink>
30+
<span className="nav-name">Искать на карте</span>
31+
</a>
3232
<NavLink activeClassName="active" className="nav-item nav-setting" to="/settings">
3333
<i className="icon icon-setting"></i>
34-
<span className="nav-name">Settings</span>
34+
<span className="nav-name">Настройки</span>
3535
</NavLink>
3636
</div>
3737
<NavLink activeClassName="active" className="nav-item nav-item-logout-default user-logout" to="/logout">
3838
<i className="icon icon-logout"></i>
39-
<span className="nav-name">Logout</span>
39+
<span className="nav-name">Выход</span>
4040
</NavLink>
4141
</div>
4242
</div>

‎src/components/NewCardItem.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import React from 'react';
22

33
export default (props) => {
4+
5+
const { color } = props;
6+
7+
console.log("color new card item", color)
8+
49
return(
510
<div className="pane newcard-sprite">
6-
<div className="pane newcard card-front" id="cardfront" style={{backgroundColor: "rgb(138, 190, 107)", margin: "0px 0px 0px 55px"}}>
11+
<div className="pane newcard card-front" id="cardfront" style={{backgroundColor: `${color}`}}>
712
<div className="pane input-sprite multiple">
813
<div className="input-block">
914
<div className="tooltip" data-pos="top-left">Номер карты (только цифры)</div>
@@ -35,7 +40,7 @@ export default (props) => {
3540
</div>
3641
</div>
3742
</div>
38-
<div className="pane newcard card-back" id="cardback" style={{backgroundColor: "rgb(138, 190, 107)", left: "55px"}}>
43+
<div className="pane newcard card-back" id="cardback" style={{backgroundColor: `${color}`}}>
3944
<div className="pane magnetic-strip"></div>
4045
<div className="pane input-sprite right">
4146
<div className="input-block cvv-block">

‎src/containers/Cards/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ class Cards extends Component {
4444
return (
4545
<div className="pane">
4646
<div className="pane pane-main">
47-
<Header title="Cards">
47+
<Header title="Карты">
4848
<CardControls>
4949
<CSSTransitionGroup {...options}>
5050
{
@@ -72,7 +72,7 @@ class Cards extends Component {
7272
card={card}/>
7373
)
7474
}
75-
<Link to="cards/add" className="card-wrap">
75+
<Link to="/cards/add" className="card-wrap">
7676
<div className="card card-new" title="Новая карта">
7777
<div className="card-new__icon"></div>
7878
<span className="card-new__text">Новая карта</span>
@@ -81,10 +81,10 @@ class Cards extends Component {
8181
</div>
8282
</div>
8383
</div>
84-
<RightPaneContainer title="Operations">
84+
<RightPaneContainer title="Операции">
8585
<div className="pane pane-right-fixed">
8686
<div className="latest-payment-header">
87-
<h2 className="title">Last payments</h2>
87+
<h2 className="title">Последние платежи</h2>
8888
</div>
8989
</div>
9090
<div id="latest-operation-container" className="pane pane-item-container">

‎src/containers/History/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ export default () => {
99
return (
1010
<div className="pane">
1111
<div className="pane pane-main">
12-
<Header title="History"/>
12+
<Header title="История оплат"/>
1313
<div className="pane pane-body">history page</div>
1414
</div>
15-
<RightPaneContainer title="Filter">
15+
<RightPaneContainer title="Фильтр">
1616
<RightFixedPane>
1717
<SearchPane />
1818
</RightFixedPane>

‎src/containers/NewCard.js

+38-8
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@ import { connect } from 'react-redux'
33
import { CirclePicker } from 'react-color'
44

55
import Header from 'components/Header';
6-
import { createCard } from 'actions/cardActions';
76
import NewCardItem from 'components/NewCardItem';
7+
import { createCard } from 'actions/cardActions';
8+
9+
const colors = [
10+
"#f44336", "#e91e63", "#9c27b0", "#673ab7",
11+
"#3f51b5", "#2196f3", "#03a9f4", "#607d8b",
12+
"#009688", "#4caf50", "#ff5722", "#795548"];
813

914
class NewCard extends Component {
1015
constructor(props) {
@@ -14,12 +19,17 @@ class NewCard extends Component {
1419
card: {
1520
type: null,
1621
title: null,
17-
color: null,
22+
color: '',
1823
expiry: null,
1924
number: null
2025
}
2126
}
2227
}
28+
29+
componentWillMount() {
30+
this.changeColor(colors[0]);
31+
}
32+
2333
handleCard() {
2434
let card = {
2535
id: 5,
@@ -35,11 +45,27 @@ class NewCard extends Component {
3545
this.props.dispatch(createCard(card));
3646
}
3747

48+
changeColor(color) {
49+
let newState = this.state.card;
50+
51+
newState = Object.assign({}, this.state.card, {
52+
color
53+
})
54+
this.setState({
55+
card: newState
56+
}, () => console.log("changes", color, this.state.card))
57+
}
58+
59+
handleChange = (color, event) => {
60+
console.log(color)
61+
this.changeColor(color.hex);
62+
};
63+
3864
render() {
3965
return (
4066
<div className="pane" style={{flex: 1}}>
4167
<div className="pane pane-main">
42-
<Header title="New card" />
68+
<Header title="Новая карта" />
4369
<div className="pane pane-body">
4470
<div className="pane pane-newcard" id="primary_block">
4571
<div id="newcard-form">
@@ -51,20 +77,24 @@ class NewCard extends Component {
5177
<p>Можно добавить желаемое число карт. <a href="https://cib.az#bl1-f">Подробная информация</a></p>
5278
</div>
5379
</div>
54-
<NewCardItem />
80+
<NewCardItem
81+
{...this.state.card}/>
5582
</div>
5683

5784
<div id="palette-block" className="pane newcard-info-block picker-width">
58-
<div class="pane newcard-txt">
59-
<h2 class="pane title">Цвет карты</h2>
85+
<div className="pane newcard-txt">
86+
<h2 className="pane title">Цвет карты</h2>
6087
<div className="picker">
61-
<CirclePicker />
88+
<CirclePicker
89+
color={this.state.card.color}
90+
colors={colors}
91+
onChange={ this.handleChange }/>
6292
</div>
6393
</div>
6494
<div className="pane buttons">
6595
<div className="fields field-button">
6696
<div className="field">
67-
<button onClick={() => this.handleCard()} className="btn primary">Добавить карту</button>
97+
<button onClick={() => this.handleCard()} className="btn primary">Сохранить карту</button>
6898
</div>
6999
</div>
70100
</div>

‎src/containers/Templates/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ export default () => {
99
return (
1010
<div className="pane">
1111
<div className="pane pane-main">
12-
<Header title="Template"/>
12+
<Header title="Шаблоны"/>
1313
<div className="pane pane-body">template page</div>
1414
</div>
15-
<RightPaneContainer title="Filter">
15+
<RightPaneContainer title="Фильтр">
1616
<RightFixedPane>
1717
<SearchPane />
1818
</RightFixedPane>

‎src/css/main.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -1024,7 +1024,7 @@
10241024
}
10251025

10261026
.pane-newcard .newcard-sprite{
1027-
margin-top: 20px;
1027+
margin-top: 30px;
10281028
position: relative;
10291029
width: 445px;
10301030
}
@@ -1040,7 +1040,7 @@
10401040
}
10411041

10421042
.pane-newcard .newcard.card-front{
1043-
margin-left: 55px;
1043+
margin: 0;
10441044
position: relative;
10451045
padding: 30px;
10461046
z-index: 2;
@@ -1050,7 +1050,7 @@
10501050
.pane-newcard .newcard.card-back{
10511051
position: absolute;
10521052
top: 0;
1053-
left: 55px;
1053+
left: 110px;
10541054
}
10551055

10561056
.pane-newcard .newcard.card-front,

‎src/css/reset.css

+4-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,10 @@ scrollbar[orient="vertical"] {
9393
color:silver;
9494
}
9595

96-
96+
@font-face{
97+
font-family: Ocraext;
98+
src: url(../fonts/OCRAEXT.TTF);
99+
}
97100

98101
#non_free_num_ui .skype_c2c_logo_img{
99102
display: none !important;

‎src/fonts/OCRAEXT.TTF

46.9 KB
Binary file not shown.

0 commit comments

Comments
 (0)