👻 add ghost module (#638)

cyclops-ui · Oct 19, 2024 · e180580 · e180580
1 parent b4a9107
commit e180580
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 2 deletions.
diff --git a/cyclops-ui/src/components/pages/EditModule/EditModule.tsx b/cyclops-ui/src/components/pages/EditModule/EditModule.tsx
@@ -415,7 +415,9 @@ const EditModule = () => {
       {contextHolder}
       <Row gutter={[40, 0]}>
         <Col span={24}>
-          <Title level={2}>{moduleName}</Title>
+          <Title level={2}>
+            <span style={{ color: "#888" }}>Edit module</span> {moduleName}
+          </Title>
         </Col>
       </Row>
       <Row gutter={[40, 0]}>

diff --git a/cyclops-ui/src/components/pages/Modules/Modules.tsx b/cyclops-ui/src/components/pages/Modules/Modules.tsx
@@ -153,11 +153,40 @@ const Modules = () => {
     if (filteredData.length === 0) {
       return (
         <div style={{ width: "100%" }}>
+          <Col
+            key={filteredData.length + 1}
+            xs={24}
+            sm={12}
+            md={8}
+            lg={8}
+            xl={6}
+          >
+            <a href={"/modules/new"}>
+              <Card className={styles.addmodulecard}>
+                <Row
+                  style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    height: "50px",
+                  }}
+                >
+                  <PlusCircleOutlined
+                    style={{ fontSize: "24px", paddingBottom: "8px" }}
+                  />
+                </Row>
+                <Row>
+                  <h3 style={{ margin: 0 }}>Add new module</h3>
+                </Row>
+              </Card>
+            </a>
+          </Col>
           <Empty description="No Modules Found"></Empty>
         </div>
       );
     }
-    return filteredData.map((module: any, index) => (
+
+    let moduleCards = filteredData.map((module: any, index) => (
       <Col key={index} xs={24} sm={12} md={8} lg={8} xl={6}>
         <a href={"/modules/" + module.name}>
           <Card
@@ -255,6 +284,32 @@ const Modules = () => {
         </a>
       </Col>
     ));
+
+    moduleCards.push(
+      <Col key={filteredData.length + 1} xs={24} sm={12} md={8} lg={8} xl={6}>
+        <a href={"/modules/new"}>
+          <Card className={styles.addmodulecard}>
+            <Row
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "100%",
+              }}
+            >
+              <PlusCircleOutlined
+                style={{ fontSize: "24px", paddingBottom: "8px" }}
+              />
+            </Row>
+            <Row>
+              <h3>Add new module</h3>
+            </Row>
+          </Card>
+        </a>
+      </Col>,
+    );
+
+    return moduleCards;
   };
 
   return (

diff --git a/cyclops-ui/src/components/pages/Modules/styles.module.css b/cyclops-ui/src/components/pages/Modules/styles.module.css
@@ -5,3 +5,23 @@
 .modulecard:hover {
   transform: scale(1.05);
 }
+
+.addmodulecard {
+  transition:
+    transform 0.2s,
+    color 0.2s;
+  border: 2px dashed #d3d3d3;
+  width: 100%;
+  height: 100%;
+  max-width: 500px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #888;
+}
+
+.addmodulecard:hover {
+  transform: scale(1.05);
+  border-color: #fe8801;
+  color: #fe8801;
+}