Merge pull request #2 from maliknajjar/support_comments

support description to objectContainer fields
maliknajjar · Jan 28, 2024 · 357aaf1 · 357aaf1
2 parents 1e45422 + c89895e
commit 357aaf1
Show file tree

Hide file tree

Showing 10 changed files with 234 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "vite": "^4.3.1"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.5.4",
     "clone": "^2.1.2",
     "fast-xml-parser": "^4.2.6",
     "js-yaml": "^4.1.0",

diff --git a/src/dataExamples.ts b/src/dataExamples.ts
@@ -1,22 +1,39 @@
 export const exampleData = `{
-  "test": {},
-  "test2": [
-    [
-      {
-        "array": [
-          {},
-          []
-        ]
-      },
+  "test2": {
+    "_value": [
       [
+        {
+          "array": [
+            {},
+            []
+          ]
+        },
         [
-          {},
-          []
+          [
+            {},
+            []
+          ]
         ]
       ]
-    ]
-  ],
+    ],
+    "_params": {
+      "description": "this is a nested array I created for test purposes"
+    }
+  },
+  "userName": {
+    "_value": "rim",
+    "_fieldType": "text",
+    "_params": {
+      "fullWidth": true
+    }
+  },
   "name": "Alice",
+  "userAge": {
+    "_value": 22,
+    "_params": {
+      "description": "this is the age of the user"
+    }
+  },
   "brother": null,
   "age": 25,
   "isStudent": true,

diff --git a/src/guifier/fields/Field/types.ts b/src/guifier/fields/Field/types.ts
@@ -1,7 +1,8 @@
 import * as z from 'zod'
 
 export const fieldLocalParameterSchema = z.object({
-    fullWidth: z.boolean().optional().default(false)
+    fullWidth: z.boolean().default(false),
+    description: z.string().optional()
 })
 export type FieldLocalParam = z.input<typeof fieldLocalParameterSchema>
 export type FieldLocalParamInternal = z.infer<typeof fieldLocalParameterSchema>
diff --git a/src/guifier/fields/containers/Container/Container.css b/src/guifier/fields/containers/Container/Container.css
@@ -12,6 +12,7 @@
 }
 
 .guifierContainerHeader {
+    position: relative;
     display: flex;
     justify-content: space-between;
     font-size: larger;
@@ -20,6 +21,14 @@
     padding-right: 15px;
 }
 
+.guifierContainerHeader .guifierDescriptionTooltip {
+    width: 95%;
+}
+
+.guifierContainerHeader:hover .guifierDescriptionTooltip {
+    opacity: 1;
+}
+
 .guifierContainerHeaderButtons {
     display: flex;
     align-items: center;

diff --git a/src/guifier/fields/containers/Container/Container.ts b/src/guifier/fields/containers/Container/Container.ts
@@ -4,7 +4,8 @@ import type { ObjectContainer } from '../ObjectContainer/ObjectContainer'
 import type { ArrayContainer } from '../ArrayContainer/ArrayContainer'
 
 import { Field } from '../../../fields/Field/Field'
-import { drawOutlineIcon } from '../../../utils'
+import { drawDescriptionSymbol, drawOutlineIcon, drawDescriptionToolTip } from '../../../utils'
+import { isEmpty } from 'lodash'
 
 export abstract class Container extends Field {
     /**
@@ -149,6 +150,7 @@ export abstract class Container extends Field {
         // creating the key part of the header
         const objectName = this.property._key
         const guifierContainerHeaderKeyName = document.createElement('div')
+
         // adding an icon
         if (this.property._path.length !== 1) {
             guifierContainerHeaderKeyName.append(drawOutlineIcon(this.property._valueType === 'array' ? 'data_array' : 'data_object'))
@@ -157,6 +159,12 @@ export abstract class Container extends Field {
         guifierContainerHeaderKeyName.append(this.property._path.length === 1 ? this.params.rootContainerName : objectName.toString())
         guifierContainerHeader.append(guifierContainerHeaderKeyName)
 
+        // showing tooltip
+        if (!isEmpty(this.property._params.description)) {
+            guifierContainerHeaderKeyName.append(drawDescriptionSymbol())
+            drawDescriptionToolTip(this, guifierContainerHeader)
+        }
+
         // todo: add this part to a function
         const guifierContainerHeaderButtons = this.drawContainerHeaderButtons()
         guifierContainerHeader.append(guifierContainerHeaderButtons)

diff --git a/src/guifier/fields/containers/ObjectContainer/ObjectContainer.ts b/src/guifier/fields/containers/ObjectContainer/ObjectContainer.ts
@@ -6,9 +6,9 @@ import type { Field } from '../../Field/Field'
 import type { CardSchemaInternal } from '../../CustomFields/CardSelectField/types'
 
 import { Container } from '../Container/Container'
-import { drawOutlineIcon, fieldsMetaData, getDefaultValueByFieldType, getFieldInstance, getType } from '../../../utils'
+import { drawDescriptionSymbol, drawOutlineIcon, fieldsMetaData, drawDescriptionToolTip, getDefaultValueByFieldType, getFieldInstance, getType } from '../../../utils'
 
-import lodash from 'lodash'
+import lodash, { isEmpty } from 'lodash'
 import { Dialog } from '../../../dialogue/dialog'
 
 /**
@@ -115,8 +115,10 @@ export class ObjectContainer extends Container {
 
             const textPart = document.createElement('div')
             textPart.classList.add('guifierObjectLabelTextPart')
+
             const labelName = property._key
-            textPart.innerHTML = labelName.toString()
+            textPart.append(labelName.toString())
+
             labelContainer.append(textPart)
 
             const buttonsPart = document.createElement('div')
@@ -137,8 +139,15 @@ export class ObjectContainer extends Container {
             const fieldInnerContainer = document.createElement('div')
             fieldInnerContainer.classList.add('guifierObjectfieldInnerContainer')
             fieldInnerContainer.append(fieldElement)
+
             guifierObjectFieldContainer.append(fieldInnerContainer)
 
+            // showing tooltip
+            if (!isEmpty(field.property._params.description)) {
+                textPart.append(drawDescriptionSymbol())
+                drawDescriptionToolTip(field, guifierObjectFieldContainer)
+            }
+
             propertyElement = guifierObjectFieldContainer
         }
 

diff --git a/src/guifier/fields/containers/ObjectContainer/objectContainerStyle.css b/src/guifier/fields/containers/ObjectContainer/objectContainerStyle.css
@@ -14,12 +14,43 @@
 }
 
 .guifierObjectLabelTextPart {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 5px;
     transition: 300ms;
     transform-origin: left bottom;
     transform: translateY(0px);
     font-weight: bold;
 }
 
+.guifierDescriptionSymbol {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100%;
+    border: var(--second-border);
+    width: 20px;
+    height: 20px;
+    font-size: small;
+    font-weight: bolder;
+    color: var(--second-color);
+    cursor: pointer;
+}
+
+.descriptionTooltipRefrence {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.guifierObjectLabelContainer:hover ~ .guifierDescriptionTooltip {
+    opacity: 1;
+}
+
 .guifierObjectFieldContainer:hover > .guifierObjectLabelContainer > .guifierObjectLabelTextPart {
     transform: translateY(-7px);
 }

diff --git a/src/guifier/guifierStyle.css b/src/guifier/guifierStyle.css
@@ -5,15 +5,16 @@
     --third-color: #575757;
     --fourth-color: #F5F7FB;
     --fifth-color: #FFFFFF;
+    --sixth-color: #CDD0DE;
     --primary-padding: 20px;
     --second-padding: 10px;
     --primary-grid-gap: 20px;
     --header-horizontal-padding: 15px;
     --primary-border-radius: 10px;
     --primary-border-width: 2px;
-    --primary-border: var(--primary-border-width) solid #CDD0DE;
-    --second-border: 1px solid #CDD0DE;
-    --primary-dashed-border: var(--primary-border-width) dashed #CDD0DE;
+    --primary-border: var(--primary-border-width) solid var(--sixth-color);
+    --second-border: 1px solid var(--sixth-color);
+    --primary-dashed-border: var(--primary-border-width) dashed var(--sixth-color);
     --primary-selected-border: var(--primary-border-width) solid #1D5EFF;
 }
 
@@ -32,6 +33,10 @@
     font-family: Material Icons Outlined;
 }
 
+.material-icons-outlined::selection {
+    background-color: transparent;
+}
+
 /* global classes */
 .guifierFullHeight {
     height: 100%;
@@ -115,3 +120,47 @@
     font-weight: bold;
     color: rgb(182, 0, 0);
 }
+
+.guifierDescriptionTooltip {
+    position: absolute;
+    bottom: 15px;
+    left: 15px;
+    width: 100%;
+    background-color: white;
+    opacity: 0;
+    height: fit-content;
+    font-weight: normal;
+    font-size: medium;
+    z-index: 1;
+    transition: 250ms;
+    pointer-events: none;
+    color: var(--third-color);
+    /* transform: translateX(7.5px); */
+    border-radius: var(--primary-border-radius);
+}
+
+.guifierDescriptionTooltip .descriptionHeader {
+    display: flex;
+    align-items: center;
+    gap: 7.5px;
+    border: var(--primary-border);
+    padding: 7.5px;
+    border-radius: var(--primary-border-radius) var(--primary-border-radius) 0 0;
+    font-weight: bold;
+}
+
+.guifierDescriptionTooltip .descriptionHeader .guifierDescriptionSymbol {
+    color: rgba(0, 0, 0, 0.5);
+    border-color: rgba(0, 0, 0, 0.5);
+}
+
+.guifierDescriptionTooltip .descriptionHeader .descriptionFieldType {
+    color: mediumslateblue;
+}
+
+.guifierDescriptionTooltip .descriptionBody {
+    border: var(--primary-border);
+    border-top: none;
+    padding: var(--second-padding);
+    border-radius: 0 0 var(--primary-border-radius) var(--primary-border-radius);
+}