Version 3.8 (#108)

* white fill * fix * refaactor filename form * image filename * data uri fetching
rossmoody · Aug 9, 2021 · c39d3c5 · c39d3c5
1 parent a8c9feb
commit c39d3c5
Show file tree

Hide file tree

Showing 13 changed files with 484 additions and 135 deletions.
diff --git a/src/build/components/card/card-action-footer.tsx b/src/build/components/card/card-action-footer.tsx
@@ -29,9 +29,15 @@ interface CardActionFooter {
   svgString: string
   height: number
   width: number
+  whiteFill: boolean
 }
 
-const CardActionFooter = ({ svgString, height, width }: CardActionFooter) => {
+const CardActionFooter = ({
+  svgString,
+  height,
+  width,
+  whiteFill,
+}: CardActionFooter) => {
   const [showModal, setShowModal] = useState(false)
   const [showDrawer, setShowDrawer] = useState(false)
   const [showOgModal, setShowOgModal] = useState(false)
@@ -84,7 +90,7 @@ const CardActionFooter = ({ svgString, height, width }: CardActionFooter) => {
           aria-label="Options"
           borderRadius="md"
         />
-        <MenuList>
+        <MenuList zIndex={100}>
           <MenuItem
             icon={<FiDownload />}
             onClick={() => setShowOptimizedModal(true)}
@@ -126,6 +132,7 @@ const CardActionFooter = ({ svgString, height, width }: CardActionFooter) => {
               svgString={svgString}
               height={height}
               width={width}
+              whiteFill={whiteFill}
             />
           )}
           <MenuDivider />

diff --git a/src/build/components/card/card-actions.tsx b/src/build/components/card/card-actions.tsx
@@ -10,7 +10,7 @@ interface CardActions {
 }
 
 const CardActions = ({ data }: CardActions) => {
-  const { cors, imgSrcHref, svgString, height, width } = data
+  const { cors, imgSrcHref, svgString, height, width, whiteFill } = data
 
   if (cors && imgSrcHref) {
     return <CardActionCors forwardingUrl={imgSrcHref} />
@@ -20,6 +20,7 @@ const CardActions = ({ data }: CardActions) => {
         svgString={svgString!}
         height={height || 24}
         width={width || 24}
+        whiteFill={whiteFill}
       />
     )
   }

diff --git a/src/build/components/card/filename-modal.tsx b/src/build/components/card/filename-modal.tsx
@@ -29,7 +29,6 @@ const FilenameModal = ({
   download,
 }: PopoverFormTypes) => {
   const [filename, setFilename] = useState('svg-gobbler')
-
   const firstFieldRef = useRef(null)
 
   return (
@@ -41,38 +40,37 @@ const FilenameModal = ({
       isCentered
     >
       <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>{title}</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <FormControl>
-            <FormLabel htmlFor="filename">Filename</FormLabel>
-            <InputGroup>
-              <Input
-                id="filename"
-                ref={firstFieldRef}
-                defaultValue={filename}
-                onChange={(event) => setFilename(event.target.value)}
-              />
-              <InputRightAddon>.svg</InputRightAddon>
-            </InputGroup>
-          </FormControl>
-        </ModalBody>
+      <form
+        onSubmit={() => {
+          download(svgString, filename)
+          callback(false)
+        }}
+      >
+        <ModalContent>
+          <ModalHeader>{title}</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <FormControl>
+              <FormLabel htmlFor="filename">Filename</FormLabel>
+              <InputGroup>
+                <Input
+                  id="filename"
+                  ref={firstFieldRef}
+                  defaultValue={filename}
+                  onChange={(event) => setFilename(event.target.value)}
+                />
+                <InputRightAddon>.svg</InputRightAddon>
+              </InputGroup>
+            </FormControl>
+          </ModalBody>
 
-        <ModalFooter>
-          <Button
-            colorScheme="red"
-            isFullWidth
-            onClick={() => {
-              download(svgString, filename)
-              callback(false)
-            }}
-            type="submit"
-          >
-            Save
-          </Button>
-        </ModalFooter>
-      </ModalContent>
+          <ModalFooter>
+            <Button colorScheme="red" isFullWidth type="submit">
+              Save
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </form>
     </Modal>
   )
 }

diff --git a/src/build/components/card/image-modal.tsx b/src/build/components/card/image-modal.tsx
@@ -9,7 +9,6 @@ import {
   ModalFooter,
   ModalBody,
   ModalCloseButton,
-  FormControl,
   FormLabel,
   Box,
   Center,
@@ -19,6 +18,7 @@ import {
   InputGroup,
   Text,
   useColorModeValue,
+  FormControl,
 } from '@chakra-ui/react'
 
 import handle from '../utils/actions'
@@ -29,17 +29,21 @@ interface ImageModalProps {
   svgString: string
   height: number
   width: number
+  whiteFill: boolean
 }
 
 const ImageModal = ({
   callback,
   svgString,
   height,
   width,
+  whiteFill,
 }: ImageModalProps) => {
   const [size, setSize] = React.useState({ height, width })
+  const [filename, setFilename] = React.useState('svg-image')
 
   const state = new SVGImage(svgString, height, width)
+  const whiteFillBg = useColorModeValue('gray.100', 'null')
 
   return (
     <Modal isOpen onClose={() => callback(false)} size="lg">
@@ -48,7 +52,7 @@ const ImageModal = ({
         <ModalHeader>Export image</ModalHeader>
         <ModalCloseButton />
         <ModalBody marginBottom={4}>
-          <Center width="100%" height="100%">
+          <Center width="100%" height="100%" position="relative">
             <Center
               padding={8}
               maxWidth="280px"
@@ -63,22 +67,33 @@ const ImageModal = ({
                 src={state.htmlImageElementSrc}
                 width="100%"
                 height="100%"
+                zIndex={1}
               />
             </Center>
+            {whiteFill && (
+              <Box
+                bg={whiteFillBg}
+                borderRadius="lg"
+                position="absolute"
+                width="100%"
+                height="100%"
+              />
+            )}
           </Center>
         </ModalBody>
 
         <ModalFooter flexDir="column" alignItems="flex-start">
           <Box marginBottom={5}>
-            <Text fontWeight="semibold">Resize</Text>
+            <Text fontWeight="semibold">Configure</Text>
             <Text
               color={useColorModeValue('gray.600', 'gray.400')}
               fontSize="sm"
             >
-              Specify height or width to resize the SVG proportionally before
-              export.
+              Specify height, width, or filename before export. The SVG will
+              proportionally resize based on height or width.
             </Text>
           </Box>
+
           <FormControl>
             <HStack>
               <FormLabel margin={0} fontSize="sm">
@@ -139,26 +154,38 @@ const ImageModal = ({
                 </InputGroup>
               </FormLabel>
             </HStack>
-
-            <Button
-              colorScheme="red"
-              marginBottom={4}
-              marginTop={8}
-              isFullWidth
-              onClick={() => {
-                state.setClassWidthHeight(size.height, size.width)
-                state.setSvgElementWidthHeight()
-                state.createImgSrc()
-                handle.exportPNG(
-                  state.htmlImageElementSrc,
-                  size.width,
-                  size.height
-                )
-              }}
-            >
-              Export PNG
-            </Button>
           </FormControl>
+          <FormControl marginTop={4}>
+            <FormLabel htmlFor="image-filename">Filename</FormLabel>
+            <InputGroup>
+              <Input
+                id="image-filename"
+                defaultValue={filename}
+                onChange={(event) => setFilename(event.target.value)}
+              />
+              <InputRightAddon>.png</InputRightAddon>
+            </InputGroup>
+          </FormControl>
+
+          <Button
+            colorScheme="red"
+            marginBottom={4}
+            marginTop={8}
+            isFullWidth
+            onClick={() => {
+              state.setClassWidthHeight(size.height, size.width)
+              state.setSvgElementWidthHeight()
+              state.createImgSrc()
+              handle.exportPNG(
+                state.htmlImageElementSrc,
+                size.width,
+                size.height,
+                filename
+              )
+            }}
+          >
+            Export PNG
+          </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>

diff --git a/src/build/components/card/index.tsx b/src/build/components/card/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   Center,
   Box,
@@ -18,29 +18,32 @@ interface CardData {
 }
 
 const Card = ({ data }: CardData) => {
-  const [showActions, setShowActions] = React.useState(false)
+  const [showActions, setShowActions] = useState(false)
+  const { presentationSvg, size, type, whiteFill } = data
 
-  const { presentationSvg, size, type } = data
+  const cardFillBg = useColorModeValue('white', 'gray.700')
+  const whiteFillBg = useColorModeValue('gray.200', 'null')
 
   return (
     <ScaleFade in initialScale={0.9}>
       <Box
-        bg={useColorModeValue('white', 'gray.700')}
+        bg={cardFillBg}
         rounded="xl"
         shadow="md"
         onFocus={() => setShowActions(true)}
         onMouseEnter={() => setShowActions(true)}
         onMouseLeave={() => setShowActions(false)}
         maxWidth="280px"
       >
-        <Center px={8} py={12} minHeight="140px">
+        <Center px={8} py={12} minHeight="140px" position="relative">
           <Box
             position="relative"
             height="0"
             width="100%"
             padding="0 0 100%"
             dangerouslySetInnerHTML={{ __html: presentationSvg! }}
             overflow="hidden"
+            zIndex={1}
             sx={{
               '& > svg': {
                 position: 'absolute',
@@ -55,6 +58,15 @@ const Card = ({ data }: CardData) => {
               },
             }}
           />
+          {whiteFill && (
+            <Box
+              bg={whiteFillBg}
+              borderRadius="lg"
+              position="absolute"
+              width="90%"
+              height="90%"
+            />
+          )}
         </Center>
         <Divider mx={5} width="auto" />
         <Box pt={2} pb={4} mx={5} position="relative">

diff --git a/src/build/components/drawer/drawer-content.tsx b/src/build/components/drawer/drawer-content.tsx
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Box, Center, Flex, Stack, Divider } from '@chakra-ui/react'
+import {
+  Box,
+  Center,
+  Flex,
+  Stack,
+  Divider,
+  useColorModeValue,
+} from '@chakra-ui/react'
 
 import { SVGOConfig } from '../../types'
 
@@ -27,6 +34,8 @@ function DrawerContent({ svgString }: DrawerContent) {
   const [radioGroup, setRadioGroup] = React.useState('default')
   const [isReact, setIsReact] = React.useState(false)
 
+  const whiteFillBg = useColorModeValue('gray.100', 'null')
+
   React.useEffect(() => {
     const newString = runSvgo(svgString, config)
     if (isReact) {
@@ -59,14 +68,16 @@ function DrawerContent({ svgString }: DrawerContent) {
             p={4}
             dangerouslySetInnerHTML={{ __html: svgString }}
             overflow="hidden"
+            bg={whiteFillBg}
             sx={{
               '& > svg': {
-                height: '90%',
-                width: '90%',
+                height: '80%',
+                width: '80%',
                 overflow: 'visible',
               },
             }}
           />
+
           <Box position="relative" width="100%" height="100%">
             <Box
               position="absolute"