2.0.1

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## [2.0.1] - 2020-07-27
+
+- [#42](https://github.com/estruyf/vscode-front-matter/issues/42): Small enhancement to the table layout
+- [#43](https://github.com/estruyf/vscode-front-matter/issues/43): Fix for collapsible sections and taxonomy picker
+
 ## [2.0.0] - 2020-07-23
 
 - Redesigned sidebar panel

assets/media/styles.css

@@ -21,6 +21,10 @@
   }
 }
 
+.absolute {
+  position: absolute !important;
+}
+
 .collapsible__body,
 .ext_settings {
 	padding: 1rem 1.25rem;

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "vscode-front-matter",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

package.json

@@ -3,7 +3,7 @@
 	"displayName": "Front Matter",
 	"description": "Simplifies working with front matter of your articles. Useful extension when you are using a static site generator like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...",
 	"icon": "assets/front-matter.png",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"preview": false,
 	"publisher": "eliostruyf",
 	"galleryBanner": {

src/viewpanel/ViewPanel.tsx

@@ -58,7 +58,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
           settings && metadata && <Actions metadata={metadata} settings={settings} />
         }
 
-        <Collapsible title="Metadata">
+        <Collapsible title="Metadata" className={`absolute`}>
           {
             <TagPicker type={TagType.keywords} 
                        icon={<SymbolKeywordIcon />}

src/viewpanel/components/Collapsible.tsx

@@ -3,10 +3,11 @@ import { VsCollapsible } from './VscodeComponents';
 
 export interface ICollapsibleProps {
   title: string;
+  className?: string;
   sendUpdate?: (open: boolean) => void;
 }
 
-export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({children, title, sendUpdate}: React.PropsWithChildren<ICollapsibleProps>) => {
+export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({children, title, sendUpdate, className}: React.PropsWithChildren<ICollapsibleProps>) => {
   const [ isOpen, setIsOpen ] = React.useState(true);
 
   // This is a work around for a lit-element issue of duplicate slot names
@@ -23,7 +24,7 @@ export const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({childre
 
   return (
     <VsCollapsible title={title} onClick={triggerClick} open={isOpen}>
-      <div className={`section collapsible__body`} slot="body">
+      <div className={`section collapsible__body ${className || ""}`} slot="body">
         {children}
       </div>
     </VsCollapsible>

src/viewpanel/components/SeoFieldInfo.tsx

@@ -13,8 +13,7 @@ export const SeoFieldInfo: React.FunctionComponent<ISeoFieldInfoProps> = ({ titl
   return (
     <VsTableRow>
       <VsTableCell className={`table__cell table__title`}>{title}</VsTableCell>
-      <VsTableCell className={`table__cell`}>{value}</VsTableCell>
-      <VsTableCell className={`table__cell`}>{recommendation}</VsTableCell>
+      <VsTableCell className={`table__cell`}>{value}/{recommendation}</VsTableCell>
       <VsTableCell className={`table__cell table__cell__validation`}>
         { isValid !== undefined ? <ValidInfo isValid={isValid} /> : <span>-</span> }
       </VsTableCell>

src/viewpanel/components/SeoStatus.tsx

@@ -38,25 +38,24 @@ export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React
             <VsTableHeader slot="header">
               <VsTableHeaderCell className={`table__cell`}>Property</VsTableHeaderCell>
               <VsTableHeaderCell className={`table__cell`}>Length</VsTableHeaderCell>
-              <VsTableHeaderCell className={`table__cell`}>Recommended</VsTableHeaderCell>
               <VsTableHeaderCell className={`table__cell`}>Valid</VsTableHeaderCell>
             </VsTableHeader>
             <VsTableBody slot="body">
               { 
                 (title && seo.title > 0) && (
-                  <SeoFieldInfo title={`title`} value={`${title.length} chars`} recommendation={`${seo.title} chars`} isValid={title.length <= seo.title} />
+                  <SeoFieldInfo title={`title`} value={title.length} recommendation={`${seo.title} chars`} isValid={title.length <= seo.title} />
                 )
               }
 
               {
                 (data[descriptionField] && seo.description > 0) && (
-                  <SeoFieldInfo title={descriptionField} value={`${data[descriptionField].length} chars`} recommendation={`${seo.description} chars`} isValid={data[descriptionField].length <= seo.description} />
+                  <SeoFieldInfo title={descriptionField} value={data[descriptionField].length} recommendation={`${seo.description} chars`} isValid={data[descriptionField].length <= seo.description} />
                 )
               }
 
               {
                 (seo.content > 0 && data?.articleDetails?.wordCount) && (
-                  <SeoFieldInfo title={`Article length`} value={`${data?.articleDetails?.wordCount} words`} recommendation={`${seo.content} words`} />
+                  <SeoFieldInfo title={`Article length`} value={data?.articleDetails?.wordCount} recommendation={`${seo.content} words`} />
                 )
               }
             </VsTableBody>

src/viewpanel/components/TagPicker.tsx

@@ -143,12 +143,6 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
                             ref: inputRef, 
                             onFocus: openMenu as any, 
                             onClick: openMenu as any,
-                            onKeyDown: (e) => {
-                              if (e.key === 'Enter') {
-                                e.preventDefault();
-                                insertUnkownTag(closeMenu);
-                              }
-                            },
                             onBlur: () => { 
                               closeMenu(); 
                               unsetFocus(); 
@@ -175,7 +169,7 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
               <ul className={`article__tags__dropbox ${isOpen ? "open" : "closed" }`} {...getMenuProps()}>
                 { 
                   isOpen ? options.filter((option) => filterList(option, inputValue)).map((item, index) => (
-                    <li {...getItemProps({ key: item, index, item })} >
+                    <li {...getItemProps({ key: item, index, item })}>
                       { item }
                     </li>
                   )) : null