Skip to content

Commit e3e69f2

Browse files
maxchisttmaxchistt
authored
Merge pull request #1 from maxchistt/palette
Palette
2 parents 4aac54f + 19c720a commit e3e69f2

File tree

9 files changed

+154
-54
lines changed

9 files changed

+154
-54
lines changed

‎src/App.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -163,23 +163,22 @@ function App() {
163163

164164
function addCard(cardData = {}) {
165165
setCards(
166-
cardsArr.concat([new Card({ id: ++cardCount, name: cardData.name, completed: cardData.sel, text: cardData.text })])
166+
cardsArr.concat([new Card({ id: ++cardCount, name: cardData.name, color: cardData.color, text: cardData.text })])
167167
)
168168
}
169169

170-
function changeCardState(index) {
171-
cardsArr[index].completed = !cardsArr[index].completed
170+
function changeCardColor(index, color) {
171+
cardsArr[index].color = color
172172
setCards([...cardsArr])
173173
}
174174

175175
function editCardContent(index, name, text) {
176-
177176
if (cardsArr[index]) {
178177
let card
179178
card = new Card(cardsArr[index])
180179
card.name = name
181180
card.text = text
182-
cardsArr[index]=card
181+
cardsArr[index] = card
183182
}
184183
setCards([...cardsArr])
185184
}
@@ -198,7 +197,7 @@ function App() {
198197
///////////
199198

200199
return (
201-
<Context.Provider value={{ removeCard, changeCardState, setEditCard, unsetEditCard, editCardContent, editCardId }}>
200+
<Context.Provider value={{ removeCard, changeCardColor, setEditCard, unsetEditCard, editCardContent, editCardId }}>
202201
<div className="App pb-3 mb-3">
203202
<header className="p-1">
204203
<nav className="d-flex container px-0 flex-wrap-reverse justify-content-around">

‎src/Cards/AddCard.js‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from 'react'
22
import PropTypes from 'prop-types'
33
import TextareaAutosize from 'react-textarea-autosize'
4+
import Palette, { colors } from './palette/palette'
45

56
function useInputValue(defaultValue) {
67
const [value, setValue] = useState(defaultValue)
@@ -16,20 +17,36 @@ function useInputValue(defaultValue) {
1617

1718
function AddCard({ onCreate, onDeleteAll }) {
1819
const input = useInputValue('')
19-
const select = useInputValue(0)
20+
21+
const defColor = colors[0]
22+
const [color, setColor] = React.useState(defColor)
23+
const blackOnHover = () => {
24+
switch (color) {
25+
case colors[0]:
26+
case colors[2]:
27+
case colors[3]:
28+
case colors[4]:
29+
case colors[6]:
30+
case colors[8]:
31+
return true
32+
default:
33+
return false
34+
}
35+
}
2036

2137
function submitHandler() {
22-
if (String(input.value()).trim() && String(select.value()).trim()) {
23-
onCreate({ name: String(input.value()).trim(), text: "", sel: Boolean(Number(select.value())) })
38+
if (String(input.value()).trim() && String(color).trim()) {
39+
onCreate({ name: String(input.value()).trim(), text: "", color: String(color) })
2440
input.clear()
41+
setColor(defColor)
2542
}
2643
}
2744

2845
return (
2946
<div className="container">
3047
<div className="row my-2 text-center">
3148

32-
<div className="col-lg-12 col-md-12 p-1">
49+
<div className="col-lg-9 col-md-10 col-12 p-1">
3350
<TextareaAutosize type="text" className="form-control" placeholder="Card name" id="Text"
3451
{...input.bind}
3552
style={{ resize: "none" }}
@@ -39,19 +56,15 @@ function AddCard({ onCreate, onDeleteAll }) {
3956
/>
4057
</div>
4158

42-
<div className="col-lg-8 col-md-6 col-sm-4 p-1">
43-
<select className="custom-select" id="Status" {...select.bind}>
44-
<option value="1">Done</option>
45-
<option value="0">Not done</option>
46-
</select>
47-
</div>
48-
49-
<div className="col-lg-2 col-md-3 col-sm-4 col-6 p-1">
50-
<button disabled={!input.value().trim()} className="btn btn-success btn-block" onClick={submitHandler}><i className="bi bi-clipboard-plus"></i> Add card</button>
59+
<div className="col-lg-1 col-md-1 col-sm-3 col-4 p-1">
60+
<Palette setColor={setColor} className={`btn btn-outline-secondary palitra-btn ${blackOnHover() ? "palitra-blackOnHover" : "palitra-lightOnHover"}`} style={{ width: "100%", background: color }}></Palette>
5161
</div>
5262

53-
<div className="col-lg-2 col-md-3 col-sm-4 col-6 p-1">
54-
<button className="btn btn-danger btn-block" onClick={onDeleteAll}><i className="bi bi-x-square"></i> Delete All</button>
63+
<div className="col-lg-2 col-md-1 col p-1">
64+
<button disabled={!input.value().trim()} className="btn btn-success btn-block" onClick={submitHandler}>
65+
<i className="bi bi-clipboard-plus"></i>
66+
<span className='d-lg-inline d-none'> Add card</span>
67+
</button>
5568
</div>
5669

5770
</div>

‎src/Cards/CardItem.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useContext } from 'react'
22
import PropTypes from 'prop-types'
33
import Context from '../context'
44
import Card from '../Shared/Card'
5+
//import Palette from './palette'
56

67
function createHTML(text) {
78
let el = document.createElement("p")
@@ -10,15 +11,18 @@ function createHTML(text) {
1011
}
1112

1213
function CardItem(props) {
13-
const { removeCard, changeCardState, setEditCard } = useContext(Context)
14+
const { removeCard, /*changeCardColor,*/ setEditCard } = useContext(Context)
1415
const { card, index } = props
1516
const cardItem = card && new Card(card)
1617
const lineClip = 12
17-
const [color, btcolor] = cardItem && cardItem.completed ? ["green", "success"] : ["red", "danger"]
18+
const bgColor = cardItem.color
19+
/*function tryChangeColor(color) {
20+
changeCardColor(index, color)
21+
}*/
1822
return (
1923

2024
<div className="p-1" >
21-
<div className="card" style={{ color: "white", backgroundColor: color }} >
25+
<div className="card" style={{ backgroundColor: bgColor }} >
2226

2327
<div className="card-body" onClick={() => setEditCard(index)} >
2428
<h5 className="card-title">{cardItem.name}</h5>
@@ -31,19 +35,17 @@ function CardItem(props) {
3135

3236
<div className="card-body pt-0">
3337
<button
34-
className={`btn btn-${btcolor} p-0`}
38+
className={`btn btn-light p-0`}
3539
style={{ width: "1.8em", height: "1.8em", float: "right", borderColor: "transparent", backgroundColor: "transparent" }}
3640
onClick={() => removeCard(index)}
3741
>
3842
&#10007;
3943
</button>
40-
<button
41-
className={`btn btn-${btcolor} p-0 mx-2`}
44+
{/*<Palette
45+
className={`btn btn-light p-0 mx-2`}
4246
style={{ width: "1.8em", height: "1.8em", float: "right", borderColor: "transparent", backgroundColor: "transparent" }}
43-
onClick={() => changeCardState(index)}
44-
>
45-
&#10003;
46-
</button>
47+
setColor={tryChangeColor}
48+
></Palette>*/}
4749
</div>
4850

4951
</div>

‎src/Cards/ModalCardEdit.js‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import TextareaAutosize from 'react-textarea-autosize'
55
import Modal, { ModalProps } from "../Shared/Modal/Modal"
66
import debounce from '../Shared/debounce'
77
import Card from '../Shared/Card'
8+
import Palette from './palette/palette'
89

910
function calcMaxRows() {
1011
const small = 576
@@ -20,7 +21,7 @@ function calcMaxRows() {
2021
}
2122

2223
function ModalCardEdit(props) {
23-
const { removeCard, changeCardState, unsetEditCard, editCardContent } = React.useContext(Context)
24+
const { removeCard, changeCardColor, unsetEditCard, editCardContent } = React.useContext(Context)
2425
const { card, index } = props
2526
React.useEffect(() => { if (card !== null) open() }, [card])
2627

@@ -57,8 +58,8 @@ function ModalCardEdit(props) {
5758
save(name, text)
5859
}
5960

60-
function tryStateChange() {
61-
changeCardState(index)
61+
function tryChangeColor(color) {
62+
changeCardColor(index, color)
6263
}
6364
function tryRemove() {
6465
unsetEditCard();
@@ -70,9 +71,6 @@ function ModalCardEdit(props) {
7071
close()
7172
}
7273

73-
// eslint-disable-next-line no-unused-vars
74-
const [color, btcolor] = cardEdit && cardEdit.completed ? ["green", "success"] : ["red", "danger"]
75-
7674
return (
7775
<Modal {...modalProps.bind()}>
7876
<div className="container p-2">
@@ -91,9 +89,9 @@ function ModalCardEdit(props) {
9189
/>
9290

9391
<p style={{ fontWeight: "500" }} className="mb-2 text-dark">
94-
Completed:
95-
<span className={`m-1 d-inline-block text-center badge badge-${btcolor}`} style={{ width: "3em" }}>
96-
{String(cardEdit.completed)}
92+
Color:
93+
<span className={`m-1 d-inline-block text-center badge border border-secondary`} style={{ width: "3em", backgroundColor: cardEdit.color }}>
94+
&nbsp;
9795
</span>
9896
</p>
9997

@@ -114,11 +112,11 @@ function ModalCardEdit(props) {
114112

115113
<div style={{ display: "flex", justifyContent: "space-around", alignItems: "center", flexWrap: "wrap" }}>
116114
<div>
117-
<button
115+
<Palette
118116
className="btn btn-light mx-1"
119117
disabled={!cardEdit}
120-
onClick={tryStateChange}
121-
>&#10003;</button>
118+
setColor={tryChangeColor}
119+
></Palette>
122120
<button
123121
className="btn btn-light"
124122
disabled={!cardEdit}

‎src/Cards/palette/palette.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.palitra-blackOnHover:hover {
2+
color: black !important;
3+
}
4+
5+
.palitra-blackOnHover {
6+
border-color: lightgray !important;
7+
}
8+
9+
.palitra-lightOnHover {
10+
border-color: #868e96 !important;
11+
color: #495057 !important;
12+
}
13+
14+
.palitra-lightOnHover:hover {
15+
color: white !important;
16+
}
17+
18+
.palitra-btn:focus {
19+
box-shadow: 0 0 0 0.2rem rgb(216 217 219 / 50%) !important;
20+
}

‎src/Cards/palette/palette.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from "react";
2+
import PropTypes from 'prop-types'
3+
import "./palette.css"
4+
5+
export const colors = [
6+
"#f8f9fa",
7+
"#F38181",
8+
"#FCE38A",
9+
"#EAFFD0",
10+
"#F9FFEA",
11+
"#8785A2",
12+
"#DBE2EF",
13+
"#D4A5A5",
14+
"#6EF3D6"
15+
];
16+
17+
18+
function Palette({ setColor, style, className, disabled }) {
19+
return (
20+
<span className="dropdown">
21+
22+
<button
23+
disabled={disabled}
24+
className={`btn ${className}`}
25+
style={style}
26+
type="button"
27+
id="dropdownMenuButton"
28+
data-toggle="dropdown"
29+
aria-haspopup="true"
30+
aria-expanded="false"
31+
>
32+
<i className="bi bi-palette" ></i>
33+
</button>
34+
35+
<div className="dropdown-menu tab-content mt-1" aria-labelledby="dropdownMenuButton">
36+
<form>
37+
<div className="d-flex flex-row flex-wrap justify-content-center">
38+
{colors.map((color, key) => (
39+
<button
40+
style={{
41+
borderRadius: "100%",
42+
width: "32px", //поменять на rem
43+
height: "32px",
44+
backgroundColor: color,
45+
}}
46+
type="button"
47+
key={key}
48+
className={`m-1 btn`}
49+
onClick={() => setColor(color)}
50+
>
51+
{` `}
52+
</button>
53+
))}
54+
</div>
55+
</form>
56+
</div>
57+
58+
</span>
59+
);
60+
}
61+
62+
Palette.propTypes = {
63+
setColor: PropTypes.func,
64+
style: PropTypes.object,
65+
className: PropTypes.string,
66+
}
67+
68+
export default Palette;
69+
70+
71+
72+
73+
74+

‎src/Services/DataService.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -65,18 +65,11 @@ export default function DataService() {
6565
////////////////////////////////////////////////////////////
6666
function tryParce(str) {
6767
try {
68-
return JSON.parse(str, reviver);
68+
return JSON.parse(str);
6969
} catch (e) {
7070
return str;
7171
}
7272
}
73-
function reviver(key, value) {
74-
if (typeof value == 'string' && (Boolean(value) !== undefined)) {
75-
if (value === "false") return false;
76-
if (value === "true") return true;
77-
}
78-
return value;
79-
}
8073

8174
function checkData(data) {
8275
//console.log('start check data')

‎src/Shared/Card.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@ const checkCard = (card) => {
1414
return (
1515
(typeof card.id === "number" || typeof card.id === "string") && !isNaN(card.id) &&
1616
typeof card.name === "string" &&
17-
typeof card.completed === "boolean" &&
17+
typeof card.color === "string" &&
1818
typeof card.text === "string" &&
1919
card instanceof Card
2020
)
2121
}
2222

2323
export class Card {
24-
constructor({ id, name, completed, text }) {
24+
constructor({ id, name, color, text }) {
2525
this.id = Number(id)
2626
this.name = String(name)
27-
this.completed = Boolean(completed)
27+
this.color = String(color)
2828
this.text = String(text)
2929
}
3030
}

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import reportWebVitals from './reportWebVitals';
77

88
import 'bootstrap/dist/css/bootstrap.min.css';
99
import 'bootstrap-icons/font/bootstrap-icons.css';
10+
import "bootstrap/dist/js/bootstrap.bundle.min";
1011

1112
ReactDOM.render(
1213
<React.StrictMode>

0 commit comments

Comments
 (0)