new color picker

frontend-react/src/components/plans/DraggableToolsSelector.tsx

@@ -2,7 +2,15 @@ import React, { useState, useContext } from "react"
 import Draggable from "react-draggable"
 import { Tools } from "@sendou/react-sketch"
 import { useHotkeys } from "react-hotkeys-hook"
-import { Box, Flex, IconButton } from "@chakra-ui/core"
+import {
+  Box,
+  Flex,
+  IconButton,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+} from "@chakra-ui/core"
 import {
   FaPencilAlt,
   FaRegSquare,
@@ -11,9 +19,47 @@ import {
   FaTrashAlt,
   FaRedo,
   FaUndo,
+  FaFont,
 } from "react-icons/fa"
 import { AiOutlineLine } from "react-icons/ai"
 import MyThemeContext from "../../themeContext"
+import { CirclePicker, ColorResult } from "react-color"
+
+interface PlannerColorPickerProps {
+  color: string
+  setColor: (newColor: string) => void
+}
+
+const PlannerColorPicker: React.FC<PlannerColorPickerProps> = ({
+  color,
+  setColor,
+}) => {
+  const { darkerBgColor } = useContext(MyThemeContext)
+  return (
+    <Popover placement="bottom">
+      <PopoverTrigger>
+        <Box
+          cursor="pointer"
+          height="27px"
+          width="27px"
+          backgroundColor={color}
+          borderRadius="50%"
+          display="inline-block"
+          mr="11px"
+          ml="10px"
+        />
+      </PopoverTrigger>
+      <PopoverContent zIndex={4} width="260px" backgroundColor={darkerBgColor}>
+        <PopoverBody textAlign="center">
+          <CirclePicker
+            width="260px"
+            onChangeComplete={(color: ColorResult) => setColor(color.hex)}
+          />
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  )
+}
 
 interface DraggableToolsSelectorProps {
   tool: any
@@ -24,6 +70,9 @@ interface DraggableToolsSelectorProps {
   undoIsDisabled: boolean
   removeSelected: () => void
   removeIsDisabled: boolean
+  addText: () => void
+  color: string
+  setColor: (newColor: string) => void
 }
 
 const DraggableToolsSelector: React.FC<DraggableToolsSelectorProps> = ({
@@ -35,6 +84,9 @@ const DraggableToolsSelector: React.FC<DraggableToolsSelectorProps> = ({
   undoIsDisabled,
   removeSelected,
   removeIsDisabled,
+  addText,
+  color,
+  setColor,
 }) => {
   const { darkerBgColor, themeColorHex } = useContext(MyThemeContext)
   const [activeDrags, setActiveDrags] = useState(0)
@@ -150,6 +202,17 @@ const DraggableToolsSelector: React.FC<DraggableToolsSelectorProps> = ({
             icon={FaRedo}
             title="Redo"
           />
+          <IconButton
+            onClick={() => addText()}
+            variant="ghost"
+            size="lg"
+            aria-label="Add text"
+            icon={FaFont}
+            title="Add text"
+          />
+          <Flex justify="center" align="center">
+            <PlannerColorPicker color={color} setColor={setColor} />
+          </Flex>
         </Flex>
       </Box>
     </Draggable>

frontend-react/src/components/plans/MapPlannerPage.tsx

@@ -100,7 +100,6 @@ const MapPlannerPage: React.FC<RouteComponentProps> = () => {
   const [color, setColor] = useState("#f44336")
   const [canUndo, setCanUndo] = useState(false)
   const [canRedo, setCanRedo] = useState(false)
-  const [text, setText] = useState("")
   const [bg, setBg] = useState<PlannerMapBg>(REEFTW)
   const [uploadError, setUploadError] = useState<string | null>(null)
   const [controlledValue, setControlledValue] = useState(defaultValue)
@@ -121,7 +120,7 @@ const MapPlannerPage: React.FC<RouteComponentProps> = () => {
   }
 
   const addTextToSketch = () => {
-    sketch.addText(text, {
+    sketch.addText("Double-click to edit", {
       fill: color,
       fontFamily: "lato",
       stroke: "#000000",
@@ -170,10 +169,9 @@ const MapPlannerPage: React.FC<RouteComponentProps> = () => {
     document.body.appendChild(a)
     a.style.display = "none"
     a.href = dataUrl
-    /*a.download = `${
-      bg.replace("/static/media/", "").split("-")[0]
-    } plans ${getDateFormatted()}.${extension}`*/
-    a.download = "asd"
+    a.download = `${bg.view}-${stageToCode.get(bg.stage)}-${
+      bg.mode
+    } plans ${getDateFormatted()}.${extension}`
     a.click()
     window.URL.revokeObjectURL(dataUrl)
   }
@@ -217,6 +215,9 @@ const MapPlannerPage: React.FC<RouteComponentProps> = () => {
         undoIsDisabled={!canUndo}
         removeSelected={removeSelected}
         removeIsDisabled={tool !== Tools.Select}
+        addText={addTextToSketch}
+        color={color}
+        setColor={(newColor) => setColor(newColor)}
       />
       <Box ml="950px">
         <DraggableWeaponSelector
@@ -269,53 +270,7 @@ const MapPlannerPage: React.FC<RouteComponentProps> = () => {
         <input type="file" accept=".json" ref={fileInput} />
       </Flex>
       {uploadError && <span style={{ color: "red" }}>{uploadError}</span>}
-      <InputGroup size="md">
-        <Input
-          pr="7rem"
-          width="430px"
-          onChange={(e: React.FormEvent<HTMLInputElement>) =>
-            setText(e.currentTarget.value)
-          }
-        />
-        <InputRightElement width="7rem">
-          <Button
-            size="sm"
-            onClick={() => addTextToSketch()}
-            disabled={text === ""}
-          >
-            Add to picture
-          </Button>
-        </InputRightElement>
-      </InputGroup>
-      <Box>
-        <MapSelect bg={bg} setBg={setBg} />
-      </Box>
-      {/*<Label basic color="red" pointing="above">
-                Please note that changing the map also clears all the drawings
-        </Label>*/}
-      <CirclePicker
-        color={color}
-        width="220px"
-        onChangeComplete={(newColor) => setColor(newColor.hex)}
-        colors={[
-          "#f44336",
-          "#e91e63",
-          "#9c27b0",
-          "#673ab7",
-          "#3f51b5",
-          "#2196f3",
-          "#03a9f4",
-          "#00bcd4",
-          "#009688",
-          "#4caf50",
-          "#8bc34a",
-          "#cddc39",
-          "#ffeb3b",
-          "#ffc107",
-          "#ff9800",
-        ]}
-      />
-      <Box />
+      <MapSelect bg={bg} setBg={setBg} />
     </>
   )
 }