Custom field editing

src/App.tsx

@@ -66,6 +66,7 @@ function App() {
         setTasks(tasks);
         setColumnName(event.data.columnName);
         setColumnNames(Object.keys(event.data.index.columns));
+        setCustomFields(event.data.customFields);
         setPanelUuid(event.data.panelUuid);
         break;
 
@@ -118,6 +119,7 @@ function App() {
           tasks={tasks}
           columnName={columnName}
           columnNames={columnNames}
+          customFields={customFields}
           dateFormat={dateFormat}
           panelUuid={panelUuid}
           vscode={vscode}

src/TaskItem.tsx

@@ -102,7 +102,9 @@ const TaskItem = ({ task, columnName, customFields, position, dateFormat, vscode
                             <>
                               <i className="codicon codicon-json"></i>
                               <span title={customField.name}>
-                                {task.metadata[customField.name]}
+                                {customField.type === 'date'
+                                  ? formatDate(task.metadata[customField.name], dateFormat)
+                                  : task.metadata[customField.name]}
                               </span>
                             </>
                           )

src/index.css

@@ -351,10 +351,9 @@ Task editor styles
 -----------------------------------------------------------------------------*/
 
 .kanbn-task-editor-title {
+    display: inline-block;
     font-size: 1.5em;
     margin-top: 0;
-    padding-bottom: 0.5em;
-    border-bottom: 1px var(--vscode-activityBar-inactiveForeground) solid;
 }
 
 .kanbn-task-editor-dirty {
@@ -368,10 +367,12 @@ Task editor styles
     font-weight: normal;
     opacity: 0.8;
     float: right;
+    margin: 2px;
 }
 
 .kanbn-task-editor-form {
     display: flex;
+    border-top: 1px solid var(--vscode-activityBar-inactiveForeground);
 }
 
 .kanbn-task-editor-field .kanbn-task-editor-title,
@@ -439,6 +440,12 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
     text-align: right;
 }
 
+.kanbn-task-editor-main-buttons {
+    float: right;
+    position: relative;
+    top: -0.5em;
+}
+
 .kanbn-task-editor-button {
     outline: none;
     border: 1px transparent solid;
@@ -602,6 +609,14 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
     float: right;
 }
 
+.kanbn-task-editor-custom-checkbox {
+    float: left;
+    width: auto;
+    position: relative;
+    top: -.2em;
+    margin: .5em 1em .5em 0;
+}
+
 /*-----------------------------------------------------------------------------
 Burndown chart styles
 -----------------------------------------------------------------------------*/