From ddcbdd33602fafcb02c161194085d54528144c93 Mon Sep 17 00:00:00 2001 From: Siddhartha Gudipati Date: Wed, 29 Jan 2020 10:42:13 -0800 Subject: [PATCH] Added the figma ds css --- package.json | 3 +- src/app/components/App.tsx | 72 +- src/app/components/EmptyState.tsx | 11 +- src/app/components/ErrorList.tsx | 7 +- src/app/components/ListItem.tsx | 13 +- src/app/components/NextButton.tsx | 4 +- src/app/components/NodeList.tsx | 82 +- .../components/{ErrorPanel.tsx => Panel.tsx} | 69 +- src/app/components/PanelHeader.tsx | 6 +- src/app/components/PrevButton.tsx | 4 +- src/app/components/SettingsForm.tsx | 41 +- src/app/components/SettingsPanel.tsx | 26 +- src/app/components/TotalErrorCount.tsx | 21 +- src/app/index.html | 2 +- src/app/index.tsx | 2 +- src/app/styles/bottom-controls.css | 130 -- src/app/styles/empty-state.css | 15 +- src/app/styles/figma.ds.css | 1639 +++++++++++++++++ src/app/styles/panel.css | 81 +- src/app/styles/ui.css | 115 +- src/plugin/controller.ts | 1 - yarn.lock | 5 - 22 files changed, 1936 insertions(+), 413 deletions(-) rename src/app/components/{ErrorPanel.tsx => Panel.tsx} (80%) create mode 100644 src/app/styles/figma.ds.css diff --git a/package.json b/package.json index ff55971..271220e 100755 --- a/package.json +++ b/package.json @@ -14,8 +14,7 @@ "framer-motion": "^1.6.17", "react": "^16.8.6", "react-contextmenu": "^2.13.0", - "react-dom": "^16.8.6", - "react-truncate": "^2.4.0" + "react-dom": "^16.8.6" }, "devDependencies": { "@types/react": "^16.8.24", diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx index a499173..59fab38 100644 --- a/src/app/components/App.tsx +++ b/src/app/components/App.tsx @@ -1,13 +1,15 @@ import * as React from "react"; import { useState } from "react"; -import ErrorPanel from "./ErrorPanel"; +import { AnimatePresence } from "../../../node_modules/framer-motion"; + import NodeList from "./NodeList"; import Preloader from "./Preloader"; import EmptyState from "./EmptyState"; -import "../styles/reset.css"; +import Panel from "./Panel"; + +import "../styles/figma.ds.css"; import "../styles/ui.css"; import "../styles/empty-state.css"; -import { AnimatePresence } from "../../../node_modules/framer-motion"; const App = ({}) => { const [errorArray, setErrorArray] = useState([]); @@ -204,42 +206,40 @@ const App = ({}) => { }, []); return ( -
-
- - {activeNodeIds.length !== 0 ? ( - - ) : timedLoad === false ? ( - - ) : ( - - )} - - {Object.keys(activeError).length !== 0 && errorArray.length ? ( - + + {activeNodeIds.length !== 0 ? ( + - ) : null} -
+ ) : timedLoad === false ? ( + + ) : ( + + )} + + {Object.keys(activeError).length !== 0 && errorArray.length ? ( + + ) : null}
); }; diff --git a/src/app/components/EmptyState.tsx b/src/app/components/EmptyState.tsx index 13f7717..97ac6f6 100644 --- a/src/app/components/EmptyState.tsx +++ b/src/app/components/EmptyState.tsx @@ -22,13 +22,16 @@ function EmptyState(props) {
-

+
Select a frame or multiple frames -

+ -
+
+ ); } diff --git a/src/app/components/ErrorList.tsx b/src/app/components/ErrorList.tsx index c5c9c0a..f4269bf 100644 --- a/src/app/components/ErrorList.tsx +++ b/src/app/components/ErrorList.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu"; -import Truncate from "react-truncate"; function ErrorList(props) { // Pass the error we want to ignore back to our parent. @@ -45,11 +44,7 @@ function ErrorList(props) { - {error.value ? ( - - {error.value} - - ) : null} + {error.value ?
{error.value}
: null} - - - {node.name} - - - {childErrorsCount >= 1 && ( - {/* {childErrorsCount} */} - )} + {node.name} + {childErrorsCount >= 1 && } {errorObject.errors.length >= 1 && ( - {errorObject.errors.length} + {errorObject.errors.length} )} {childNodes ?
    {childNodes}
: null} diff --git a/src/app/components/NextButton.tsx b/src/app/components/NextButton.tsx index 10be90c..b052e7e 100644 --- a/src/app/components/NextButton.tsx +++ b/src/app/components/NextButton.tsx @@ -19,7 +19,7 @@ function NextButton(props) { nextButton = ( @@ -29,7 +29,7 @@ function NextButton(props) { diff --git a/src/app/components/NodeList.tsx b/src/app/components/NodeList.tsx index b29b4b8..aa34bb7 100644 --- a/src/app/components/NodeList.tsx +++ b/src/app/components/NodeList.tsx @@ -1,9 +1,9 @@ import * as React from "react"; import { motion } from "framer-motion"; + import ListItem from "./ListItem"; import TotalErrorCount from "./TotalErrorCount"; import SettingsPanel from "./SettingsPanel"; -import "../styles/bottom-controls.css"; function NodeList(props) { const [panelVisible, setPanelVisible] = React.useState(false); @@ -87,7 +87,7 @@ function NodeList(props) { return (
    {listItems}
- -
-
{ - event.stopPropagation(); - handleOpenFirstError(); - }} - > - Jump to next error → +
+ +
+ +
+ +
+
- { - event.stopPropagation(); - handleRefreshSelection(); - }} - > - Lint a new set of layers - - - { - event.stopPropagation(); - handlePanelVisible(true); - }} - > - Settings - - +
- ); } else { diff --git a/src/app/components/ErrorPanel.tsx b/src/app/components/Panel.tsx similarity index 80% rename from src/app/components/ErrorPanel.tsx rename to src/app/components/Panel.tsx index a505181..a81d396 100644 --- a/src/app/components/ErrorPanel.tsx +++ b/src/app/components/Panel.tsx @@ -1,12 +1,14 @@ import * as React from "react"; +import { motion, AnimatePresence } from "framer-motion"; + import ErrorList from "./ErrorList"; import NextButton from "./NextButton"; import PrevButton from "./PrevButton"; import PanelHeader from "./PanelHeader"; -import { motion, AnimatePresence } from "framer-motion"; + import "../styles/panel.css"; -function ErrorPanel(props) { +function Panel(props) { const isVisible = props.visibility; const node = props.node; @@ -158,35 +160,38 @@ function ErrorPanel(props) { handleHide={handleChange} > - {errors.length ? ( - -

Errors — {errors.length}

- - - ) : ( - - -
- -
- All errors fixed! - - - )} -
+
+ {errors.length ? ( + +
Errors — {errors.length}
+ + + ) : ( + + +
+ +
+ All errors fixed in the selection + + + )} +
+ +
-
+
+
-

{props.title}

+
{props.title}
); } diff --git a/src/app/components/PrevButton.tsx b/src/app/components/PrevButton.tsx index 5def39b..0f426cf 100644 --- a/src/app/components/PrevButton.tsx +++ b/src/app/components/PrevButton.tsx @@ -19,7 +19,7 @@ function PrevButton(props) { prevButton = ( @@ -29,7 +29,7 @@ function PrevButton(props) { diff --git a/src/app/components/SettingsForm.tsx b/src/app/components/SettingsForm.tsx index 159345f..53aa32a 100644 --- a/src/app/components/SettingsForm.tsx +++ b/src/app/components/SettingsForm.tsx @@ -33,31 +33,32 @@ function SettingsForm(props) { return (
-
-

Border Radius

-