#101 - Added now button to datetime

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - [#101](https://github.com/estruyf/vscode-front-matter/issues/101): Date picker available on the metadata section
 - [#102](https://github.com/estruyf/vscode-front-matter/issues/102): Support comma separated arrays in front matter
+- [#103](https://github.com/estruyf/vscode-front-matter/issues/103): Added title and description field to the metadata section
 
 ## [3.1.0] - 2021-09-10
 

assets/media/styles.css

@@ -437,6 +437,23 @@ input:checked + .field__toggle__slider:before {
   margin-top: .25rem;
 }
 
+.metadata_field__datetime {
+  display: flex;
+  justify-content: space-between;
+}
+
+.metadata_field__datetime > .react-datepicker-wrapper {
+  margin-right: 1rem;
+}
+
+.metadata_field__datetime > button {
+  color: var(--vscode-button-secondaryForeground);
+  background-color: var(--vscode-button-secondaryBackground);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  width: auto;
+}
+
 /* File list */
 .file_list vscode-label {
   border-bottom: 1px solid var(--vscode-foreground);

src/viewpanel/components/Fields/DateTimeField.tsx

@@ -4,7 +4,7 @@ import { ClockIcon } from '@heroicons/react/outline';
 import DatePicker from 'react-datepicker';
 import { forwardRef } from 'react';
 
-export interface IDateTimeProps {
+export interface IDateTimeFieldProps {
   label: string;
   date: Date | null;
   format?: string;
@@ -21,7 +21,7 @@ const CustomInput = forwardRef<HTMLInputElement, InputProps>(({ value, onClick }
   )
 });
 
-export const DateTime: React.FunctionComponent<IDateTimeProps> = ({label, date, format, onChange}: React.PropsWithChildren<IDateTimeProps>) => {
+export const DateTimeField: React.FunctionComponent<IDateTimeFieldProps> = ({label, date, format, onChange}: React.PropsWithChildren<IDateTimeFieldProps>) => {
   const [ dateValue, setDateValue ] = React.useState<Date | null>(date);
   
   const onDateChange = (date: Date) => {
@@ -43,14 +43,20 @@ export const DateTime: React.FunctionComponent<IDateTimeProps> = ({label, date,
         </div>
       </VsLabel>
       
-      <DatePicker
-        selected={dateValue as Date}
-        onChange={onDateChange}
-        timeInputLabel="Time:"
-        dateFormat={format || "MM/dd/yyyy HH:mm"}
-        customInput={(<CustomInput />)}
-        showTimeInput
-         />
+      <div className={`metadata_field__datetime`}>
+        <DatePicker
+          selected={dateValue as Date}
+          onChange={onDateChange}
+          timeInputLabel="Time:"
+          dateFormat={format || "MM/dd/yyyy HH:mm"}
+          customInput={(<CustomInput />)}
+          showTimeInput
+          />
+
+        <button className={`metadata_field__datetime__now`} onClick={() => onDateChange(new Date())}>
+          now
+        </button>
+      </div>
     </div>
   );
 };

src/viewpanel/components/Metadata.tsx

@@ -11,14 +11,12 @@ import { SymbolKeywordIcon } from './Icons/SymbolKeywordIcon';
 import { TagIcon } from './Icons/TagIcon';
 import { TagPicker } from './TagPicker';
 import { VsLabel } from './VscodeComponents';
-import { useState } from 'react';
-
-import "react-datepicker/dist/react-datepicker.css";
 import { parseJSON } from 'date-fns';
-import { DateTime } from './Fields/DateTime';
+import { DateTimeField } from './Fields/DateTimeField';
 import { TextField } from './Fields/TextField';
 import { DefaultFields } from '../../constants';
 
+import "react-datepicker/dist/react-datepicker.css";
 export interface IMetadataProps {
   settings: PanelSettings | undefined;
   metadata: { [prop: string]: string[] | string | null };
@@ -73,18 +71,18 @@ export const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, met
         onChange={(value) => sendUpdate(descriptionField, value)}
         value={metadata[descriptionField] as string || null} />
 
-      <DateTime
+      <DateTimeField
         label={`Article date`}
         date={publishing}
-        format={settings?.date?.format}
+        dateFormat={settings?.date?.format}
         onChange={(date => sendUpdate(settings?.date?.pubDate, date))} />
 
       {
         modifying && (
-          <DateTime
+          <DateTimeField
             label={`Modified date`}
             date={modifying}
-            format={settings?.date?.format}
+            dateFormat={settings?.date?.format}
             onChange={(date => sendUpdate(settings?.date?.modDate, date))} />
         )
       }