From 0259c5e3c751691f11ecfbf43697781e2d39f077 Mon Sep 17 00:00:00 2001 From: Max Chopart Date: Tue, 4 Oct 2022 14:46:10 +0200 Subject: [PATCH 1/3] [Upd #71] Added new custom legend component --- src/assets/PlanningTool.css | 12 ----------- src/components/Legend.jsx | 24 ++++++++++++++++++++++ src/components/PlanningTool.jsx | 35 +++++++++++++++++++-------------- 3 files changed, 44 insertions(+), 27 deletions(-) create mode 100644 src/components/Legend.jsx diff --git a/src/assets/PlanningTool.css b/src/assets/PlanningTool.css index 5255075..2e90aa0 100644 --- a/src/assets/PlanningTool.css +++ b/src/assets/PlanningTool.css @@ -66,18 +66,6 @@ margin-right: 1.3rem; } -.explanatory-notes .note .color.scheduled-wo { - background-color: #aa0000; -} - -.explanatory-notes .note .color.task-card { - background-color: #00aa00; -} - -.explanatory-notes .note .color.maintenance-wo { - background-color: #0000aa; -} - .static-item:after { content: ''; display: block; diff --git a/src/components/Legend.jsx b/src/components/Legend.jsx new file mode 100644 index 0000000..64b603f --- /dev/null +++ b/src/components/Legend.jsx @@ -0,0 +1,24 @@ +import React from "react"; + +const Legend = ({ title, legendItems }) => { + return ( +
+

{title}

+ + {legendItems.map((item, index) => { + return ( +
+ + {item.name} +
+ ); + })} + +
+ ); +}; + +export default Legend; diff --git a/src/components/PlanningTool.jsx b/src/components/PlanningTool.jsx index 53bd67a..cbe0f68 100644 --- a/src/components/PlanningTool.jsx +++ b/src/components/PlanningTool.jsx @@ -15,6 +15,7 @@ import Popup from './Popup' import Modal from './Modal' import EditItemModal from './EditItemModal' import Constants from '../constants/Constants' +import Legend from "./Legend"; const keys = { groupIdKey: "id", @@ -1627,21 +1628,7 @@ class PlanningTool extends Component { }
-
-

Task types

-
- - Scheduled_wo -
-
- - Task_card -
-
- - Maintenance_wo -
-
+ {this.renderPopup(popup)} {/*undo redo*/}
@@ -1710,6 +1697,10 @@ PlanningTool date: PropTypes.instanceOf(moment).isRequired, label: PropTypes.string, color: PropTypes.string, + })), + legendItems: PropTypes.arrayOf(PropTypes.shape({ + name: PropTypes.string, + color: PropTypes.string })) } @@ -1734,5 +1725,19 @@ PlanningTool ], groups: [], popup: Popup, + legendItems: [ + { + name: "scheduled_wo", + color: "red" + }, + { + name: "maintenance_wo", + color: "green" + }, + { + name: "task group", + color: "blue" + } + ] } export default PlanningTool \ No newline at end of file From ad0c2d9a391d590327995bb81af2b26394f223dc Mon Sep 17 00:00:00 2001 From: Max Chopart Date: Wed, 5 Oct 2022 10:06:37 +0200 Subject: [PATCH 2/3] [Upd #71] Added default legend items --- src/assets/PlanningTool.css | 21 +++++++-------------- src/components/Legend.jsx | 24 +++++++++++++++++++----- src/constants/Constants.js | 11 +++++++++++ 3 files changed, 37 insertions(+), 19 deletions(-) diff --git a/src/assets/PlanningTool.css b/src/assets/PlanningTool.css index 2e90aa0..0588976 100644 --- a/src/assets/PlanningTool.css +++ b/src/assets/PlanningTool.css @@ -9,18 +9,6 @@ width: calc(100% - 30rem); } -.task_card { - background: #0000aa; -} - -.scheduled_wo { - background: #00aa00; -} - -.maintenance_wo { - background: #aa0000; -} - .rct-sidebar { position: relative; padding-right: 0.25rem; @@ -58,8 +46,13 @@ margin-bottom: 1.25rem; } -.explanatory-notes .note .color { - display: inline-block; +.explanatory-notes .note { + display: flex; + align-items: center; + padding: .2rem; +} + +.explanatory-notes .note .legend-color { background-color: #000; width: 1.5rem; height: 0.8rem; diff --git a/src/components/Legend.jsx b/src/components/Legend.jsx index 64b603f..b910bc5 100644 --- a/src/components/Legend.jsx +++ b/src/components/Legend.jsx @@ -1,6 +1,9 @@ import React from "react"; +import Constants from "../constants/Constants"; const Legend = ({ title, legendItems }) => { + let defaultItems = Constants.DEFAULT_LEGEND_ITEMS; + return (

{title}

@@ -8,11 +11,22 @@ const Legend = ({ title, legendItems }) => { {legendItems.map((item, index) => { return (
- - {item.name} +
+
{item.name}
+
+ ); + })} + {defaultItems.map((item, index) => { + return ( +
+
+
{item.name}
); })} diff --git a/src/constants/Constants.js b/src/constants/Constants.js index 14f4ef5..50a639d 100644 --- a/src/constants/Constants.js +++ b/src/constants/Constants.js @@ -7,4 +7,15 @@ export default class Constants{ static RESOURCE_REORDER = 'resource-reorder' static MILESTONE_ADD = 'milestone-add' static MILESTONE_EDIT = 'milestone-edit' + static DEFAULT_LEGEND_ITEMS = [ + { + name: "current selection & parents/children", + color: "#FFC107", + }, + { + name: "non movable item", + color: + "repeating-linear-gradient( -45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #465298 2px, #465298 4px )", + }, + ]; } \ No newline at end of file From a5fb8e959953d858e30b8d74cf099cdd3a7c1a61 Mon Sep 17 00:00:00 2001 From: Max Chopart Date: Wed, 5 Oct 2022 10:56:30 +0200 Subject: [PATCH 3/3] [Upd #71] Improve legend UI --- src/assets/PlanningTool.css | 2 +- src/constants/Constants.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/assets/PlanningTool.css b/src/assets/PlanningTool.css index 0588976..a5389e0 100644 --- a/src/assets/PlanningTool.css +++ b/src/assets/PlanningTool.css @@ -49,7 +49,7 @@ .explanatory-notes .note { display: flex; align-items: center; - padding: .2rem; + padding-top: .5rem; } .explanatory-notes .note .legend-color { diff --git a/src/constants/Constants.js b/src/constants/Constants.js index 50a639d..1164b7a 100644 --- a/src/constants/Constants.js +++ b/src/constants/Constants.js @@ -9,11 +9,11 @@ export default class Constants{ static MILESTONE_EDIT = 'milestone-edit' static DEFAULT_LEGEND_ITEMS = [ { - name: "current selection & parents/children", + name: "Current selection & parents/children", color: "#FFC107", }, { - name: "non movable item", + name: "Non-movable item", color: "repeating-linear-gradient( -45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #465298 2px, #465298 4px )", },