onClick functionality and pin change

2 files changed, 23 insertions, 0 deletions

diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 8cc591875..0701f3b96 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -196,6 +196,16 @@
         }
     }
 
+    .field {
+        display: flex;
+        font-size: 7px;
+        background-color: #e8e8e8;
+        padding-right: 3px;
+        border: 0.5px solid grey;
+        border-radius: 5px;
+        padding-left: 3px;
+    }
+
     .propertiesView-layout {
         padding: 8.5px;
 
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 3b8d782aa..0f59e2f79 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -113,6 +113,19 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     {contentElement}
                 </div>);
             }
+
+            rows.push(<div className="field" key={"newKeyValue"}>
+                <EditableView
+                    key="editableView"
+                    contents={"add key:value"}
+                    height={13}
+                    fontSize={12}
+                    GetValue={() => ""}
+                    SetValue={(value: string) => {
+                        value.indexOf(":") !== -1 && KeyValueBox.SetField(doc, value.substring(0, value.indexOf(":")), value.substring(value.indexOf(":") + 1, value.length), true);
+                        return true;
+                    }} />
+            </div>);
             return rows;
         }
     }