From 4b8138432de0c3f6de4fabed70e7ac79b62e7a02 Mon Sep 17 00:00:00 2001 From: Maxim Chistyakov Date: Thu, 15 Apr 2021 20:54:05 +0300 Subject: [PATCH 1/9] Create palette.js --- src/Cards/palette.js | 72 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 src/Cards/palette.js diff --git a/src/Cards/palette.js b/src/Cards/palette.js new file mode 100644 index 0000000..ea28dca --- /dev/null +++ b/src/Cards/palette.js @@ -0,0 +1,72 @@ +import React from "react"; +import PropTypes from 'prop-types' + +export const colorItems = [ + "#F38181", + "#FCE38A", + "#EAFFD0", + "#F9FFEA", + "#8785A2", + "#DBE2EF", + "#D4A5A5", + "#6EF3D6" +]; + + +function Palette({ setColor, style, className, disabled }) { + return ( + + + + +
+
+
+ {colorItems.map((color, key) => ( + + ))} +
+
+
+ + + ); +} + +Palette.propTypes = { + setColor: PropTypes.func, + style: PropTypes.object, + className: PropTypes.string, +} + +export default Palette; + + + + + + From 010f0eecad7d376c50b4b1d073230a0e3d651f3a Mon Sep 17 00:00:00 2001 From: Maxim Chistyakov Date: Thu, 15 Apr 2021 20:59:43 +0300 Subject: [PATCH 2/9] change card verification --- src/Services/DataService.js | 9 +-------- src/Shared/Card.js | 6 +++--- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/src/Services/DataService.js b/src/Services/DataService.js index f79c435..81f86db 100644 --- a/src/Services/DataService.js +++ b/src/Services/DataService.js @@ -65,18 +65,11 @@ export default function DataService() { //////////////////////////////////////////////////////////// function tryParce(str) { try { - return JSON.parse(str, reviver); + return JSON.parse(str); } catch (e) { return str; } } - function reviver(key, value) { - if (typeof value == 'string' && (Boolean(value) !== undefined)) { - if (value === "false") return false; - if (value === "true") return true; - } - return value; - } function checkData(data) { //console.log('start check data') diff --git a/src/Shared/Card.js b/src/Shared/Card.js index b390e46..dc5c049 100644 --- a/src/Shared/Card.js +++ b/src/Shared/Card.js @@ -14,17 +14,17 @@ const checkCard = (card) => { return ( (typeof card.id === "number" || typeof card.id === "string") && !isNaN(card.id) && typeof card.name === "string" && - typeof card.completed === "boolean" && + typeof card.color === "string" && typeof card.text === "string" && card instanceof Card ) } export class Card { - constructor({ id, name, completed, text }) { + constructor({ id, name, color, text }) { this.id = Number(id) this.name = String(name) - this.completed = Boolean(completed) + this.color = String(color) this.text = String(text) } } From e206343f07b666a62bc311d8ff245658b6a9b014 Mon Sep 17 00:00:00 2001 From: Maxim Chistyakov Date: Thu, 15 Apr 2021 21:00:49 +0300 Subject: [PATCH 3/9] import bt bundle --- src/Cards/palette.js | 4 ++-- src/index.js | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Cards/palette.js b/src/Cards/palette.js index ea28dca..03a6e01 100644 --- a/src/Cards/palette.js +++ b/src/Cards/palette.js @@ -1,7 +1,7 @@ import React from "react"; import PropTypes from 'prop-types' -export const colorItems = [ +export const colors = [ "#F38181", "#FCE38A", "#EAFFD0", @@ -33,7 +33,7 @@ function Palette({ setColor, style, className, disabled }) {
- {colorItems.map((color, key) => ( + {colors.map((color, key) => ( - + setColor={tryChangeColor} + >
diff --git a/src/Cards/ModalCardEdit.js b/src/Cards/ModalCardEdit.js index 46cae21..6eeaf26 100644 --- a/src/Cards/ModalCardEdit.js +++ b/src/Cards/ModalCardEdit.js @@ -5,6 +5,7 @@ import TextareaAutosize from 'react-textarea-autosize' import Modal, { ModalProps } from "../Shared/Modal/Modal" import debounce from '../Shared/debounce' import Card from '../Shared/Card' +import Palette from './palette' function calcMaxRows() { const small = 576 @@ -20,7 +21,7 @@ function calcMaxRows() { } function ModalCardEdit(props) { - const { removeCard, changeCardState, unsetEditCard, editCardContent } = React.useContext(Context) + const { removeCard, changeCardColor, unsetEditCard, editCardContent } = React.useContext(Context) const { card, index } = props React.useEffect(() => { if (card !== null) open() }, [card]) @@ -57,8 +58,8 @@ function ModalCardEdit(props) { save(name, text) } - function tryStateChange() { - changeCardState(index) + function tryChangeColor(color) { + changeCardColor(index, color) } function tryRemove() { unsetEditCard(); @@ -70,9 +71,6 @@ function ModalCardEdit(props) { close() } - // eslint-disable-next-line no-unused-vars - const [color, btcolor] = cardEdit && cardEdit.completed ? ["green", "success"] : ["red", "danger"] - return (
@@ -91,9 +89,9 @@ function ModalCardEdit(props) { />

- Completed: - - {String(cardEdit.completed)} + Color: + +  

@@ -114,11 +112,11 @@ function ModalCardEdit(props) {
- + setColor={tryChangeColor} + > +
+
-
- +
+
diff --git a/src/Cards/palette.js b/src/Cards/palette.js index 03a6e01..a7dfbd5 100644 --- a/src/Cards/palette.js +++ b/src/Cards/palette.js @@ -2,6 +2,7 @@ import React from "react"; import PropTypes from 'prop-types' export const colors = [ + "#f8f9fa", "#F38181", "#FCE38A", "#EAFFD0", From 0ed97650d061df79fb0158bf0d2ac28fd3e8b103 Mon Sep 17 00:00:00 2001 From: Maxim Chistyakov Date: Thu, 15 Apr 2021 23:20:17 +0300 Subject: [PATCH 6/9] border for color indicator --- src/Cards/ModalCardEdit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Cards/ModalCardEdit.js b/src/Cards/ModalCardEdit.js index 6eeaf26..389a285 100644 --- a/src/Cards/ModalCardEdit.js +++ b/src/Cards/ModalCardEdit.js @@ -90,7 +90,7 @@ function ModalCardEdit(props) {

Color: - +  

From 10441edf7f82ec3637be5895083ed9cd7f790bb9 Mon Sep 17 00:00:00 2001 From: Maxim Chistyakov Date: Tue, 20 Apr 2021 13:32:51 +0300 Subject: [PATCH 7/9] hide palette from card item --- src/Cards/CardItem.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Cards/CardItem.js b/src/Cards/CardItem.js index 3dd9b18..9e7375a 100644 --- a/src/Cards/CardItem.js +++ b/src/Cards/CardItem.js @@ -2,7 +2,7 @@ import React, { useContext } from 'react' import PropTypes from 'prop-types' import Context from '../context' import Card from '../Shared/Card' -import Palette from './palette' +//import Palette from './palette' function createHTML(text) { let el = document.createElement("p") @@ -11,14 +11,14 @@ function createHTML(text) { } function CardItem(props) { - const { removeCard, changeCardColor, setEditCard } = useContext(Context) + const { removeCard, /*changeCardColor,*/ setEditCard } = useContext(Context) const { card, index } = props const cardItem = card && new Card(card) const lineClip = 12 const bgColor = cardItem.color - function tryChangeColor(color) { + /*function tryChangeColor(color) { changeCardColor(index, color) - } + }*/ return (
@@ -41,11 +41,11 @@ function CardItem(props) { > ✗ - + >*/}
From c384a6023317a6a225c1694cffe7646071e9fb45 Mon Sep 17 00:00:00 2001 From: Maxim Chistyakov Date: Tue, 20 Apr 2021 14:44:54 +0300 Subject: [PATCH 8/9] refolder --- src/App.css | 12 ------------ src/Cards/AddCard.js | 2 +- src/Cards/ModalCardEdit.js | 2 +- src/Cards/palette/palette.css | 11 +++++++++++ src/Cards/{ => palette}/palette.js | 1 + 5 files changed, 14 insertions(+), 14 deletions(-) create mode 100644 src/Cards/palette/palette.css rename src/Cards/{ => palette}/palette.js (98%) diff --git a/src/App.css b/src/App.css index 19608cf..bb94e15 100644 --- a/src/App.css +++ b/src/App.css @@ -50,15 +50,3 @@ transform: rotate(360deg); } } - -.palitra-blackOnHover:hover { - color: black !important; -} - -.palitra-blackOnHover { - border-color: lightgray !important; -} - -.palitra-btn:focus { - box-shadow: 0 0 0 0.2rem rgb(216 217 219 / 50%) !important; -} diff --git a/src/Cards/AddCard.js b/src/Cards/AddCard.js index 8c91156..bd9e707 100644 --- a/src/Cards/AddCard.js +++ b/src/Cards/AddCard.js @@ -1,7 +1,7 @@ import React, { useState } from 'react' import PropTypes from 'prop-types' import TextareaAutosize from 'react-textarea-autosize' -import Palette, { colors } from './palette' +import Palette, { colors } from './palette/palette' function useInputValue(defaultValue) { const [value, setValue] = useState(defaultValue) diff --git a/src/Cards/ModalCardEdit.js b/src/Cards/ModalCardEdit.js index 389a285..737fde0 100644 --- a/src/Cards/ModalCardEdit.js +++ b/src/Cards/ModalCardEdit.js @@ -5,7 +5,7 @@ import TextareaAutosize from 'react-textarea-autosize' import Modal, { ModalProps } from "../Shared/Modal/Modal" import debounce from '../Shared/debounce' import Card from '../Shared/Card' -import Palette from './palette' +import Palette from './palette/palette' function calcMaxRows() { const small = 576 diff --git a/src/Cards/palette/palette.css b/src/Cards/palette/palette.css new file mode 100644 index 0000000..39e2006 --- /dev/null +++ b/src/Cards/palette/palette.css @@ -0,0 +1,11 @@ +.palitra-blackOnHover:hover { + color: black !important; +} + +.palitra-blackOnHover { + border-color: lightgray !important; +} + +.palitra-btn:focus { + box-shadow: 0 0 0 0.2rem rgb(216 217 219 / 50%) !important; +} diff --git a/src/Cards/palette.js b/src/Cards/palette/palette.js similarity index 98% rename from src/Cards/palette.js rename to src/Cards/palette/palette.js index a7dfbd5..5373f70 100644 --- a/src/Cards/palette.js +++ b/src/Cards/palette/palette.js @@ -1,5 +1,6 @@ import React from "react"; import PropTypes from 'prop-types' +import "./palette.css" export const colors = [ "#f8f9fa", From 19c720ae15c8b6d70a18bd2e6beb7115f17a6936 Mon Sep 17 00:00:00 2001 From: Maxim Chistyakov Date: Tue, 20 Apr 2021 15:02:56 +0300 Subject: [PATCH 9/9] recolor --- src/Cards/AddCard.js | 2 +- src/Cards/palette/palette.css | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/Cards/AddCard.js b/src/Cards/AddCard.js index bd9e707..075bb29 100644 --- a/src/Cards/AddCard.js +++ b/src/Cards/AddCard.js @@ -57,7 +57,7 @@ function AddCard({ onCreate, onDeleteAll }) {
- +
diff --git a/src/Cards/palette/palette.css b/src/Cards/palette/palette.css index 39e2006..aa35035 100644 --- a/src/Cards/palette/palette.css +++ b/src/Cards/palette/palette.css @@ -6,6 +6,15 @@ border-color: lightgray !important; } +.palitra-lightOnHover { + border-color: #868e96 !important; + color: #495057 !important; +} + +.palitra-lightOnHover:hover { + color: white !important; +} + .palitra-btn:focus { box-shadow: 0 0 0 0.2rem rgb(216 217 219 / 50%) !important; }