From 525a289a2c85a43c6c37d3d0ab59613366134114 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Tue, 20 Jul 2021 15:17:48 +0200 Subject: [PATCH] New panel updates --- .vscode/launch.json | 12 + CHANGELOG.md | 5 + README.md | 2 +- assets/media/styles.css | 54 +++- assets/media/vscode.css | 12 +- package-lock.json | 247 ++++++++++++------- package.json | 10 +- src/viewpanel/ViewPanel.tsx | 85 ++++--- src/viewpanel/components/Actions.tsx | 7 +- src/viewpanel/components/Icon.tsx | 10 + src/viewpanel/components/SeoStatus.tsx | 9 +- src/viewpanel/components/Tag.tsx | 6 +- src/viewpanel/components/TagPicker.tsx | 7 +- src/viewpanel/components/VscodeComponents.ts | 3 + src/viewpanel/index.tsx | 2 + src/webview/ExplorerView.ts | 6 +- 16 files changed, 310 insertions(+), 167 deletions(-) create mode 100644 src/viewpanel/components/Icon.tsx create mode 100644 src/viewpanel/components/VscodeComponents.ts diff --git a/.vscode/launch.json b/.vscode/launch.json index a47e93c5..ae2fc84b 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -18,6 +18,18 @@ ], "preLaunchTask": "npm: build:ext" }, + { + "name": "Attach Extension", + "type": "extensionHost", + "request": "launch", + "runtimeExecutable": "${execPath}", + "args": [ + "--extensionDevelopmentPath=${workspaceFolder}" + ], + "outFiles": [ + "${workspaceFolder}/dist/**/*.js" + ] + }, { "name": "Extension Tests", "type": "extensionHost", diff --git a/CHANGELOG.md b/CHANGELOG.md index 10792c4b..9213bbc8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,13 @@ # Change Log +## [1.19.0] - 2020-07-20 + +- Sidebar background styling match the VSCode defined sidebar color + ## [1.18.0] - 2020-07-20 - Updated README + ## [1.17.1] - 2020-06-28 - [#34](https://github.com/estruyf/vscode-front-matter/issues/34): Fix that last modification date does not update the publication date diff --git a/README.md b/README.md index 904ae947..dc3a9a57 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ To leverage most of the capabilities of the extension. SEO information and every > **Info**: By default, the tags/categories picker allows you to insert existing and none tags/categories. When you enter a none existing tag/category, the panel shows an add `+` icon in front of that button. This functionality allows you to store this tag/category in your settings. If you want to disable this feature, you can do that by setting the `frontMatter.panel.freeform` setting to `false`. -Since version `1.15.0`, the extension allows you to create your own custom actions, by running Node.js scripts from your project. In order to use this functionality, you will need to configure the [`frontMatter.custom.scripts`](#frontMatter.custom.scripts) setting for your project. +Since version `1.15.0`, the extension allows you to create your own custom actions, by running Node.js scripts from your project. In order to use this functionality, you will need to configure the [`frontMatter.custom.scripts`](#frontmattercustomscripts) setting for your project. Once a custom action has been configured, it will appear on the Front Matter panel. diff --git a/assets/media/styles.css b/assets/media/styles.css index 90e9e57f..3c7b83a3 100644 --- a/assets/media/styles.css +++ b/assets/media/styles.css @@ -21,6 +21,10 @@ } } +#app, .frontmatter { + height: 100%; +} + .spinner, .spinner:before, .spinner:after { @@ -58,6 +62,12 @@ left: 3.5em; } +.frontmatter { + padding: var(--input-margin-vertical) 0; + display: flex; + flex-direction: column; + justify-content: space-between; +} .frontmatter h3 { margin-bottom: 1rem; @@ -69,6 +79,16 @@ margin-bottom: .5rem; } +.article__tags h3, +.seo__status h3 { + display: flex; + align-items: center; +} + +.section h3 i { + margin-right: 0.5rem; +} + .seo__status__details { margin-bottom: 2rem; } @@ -152,22 +172,28 @@ } .article__tags__items__item { - display: inline-block; + display: inline-flex; margin-bottom: .5rem; margin-right: .5rem; } -.article__tags__items__item_add, -.article__tags__items__item_delete { - display: inline-block; +.article__tags__items__item_add { + display: inline-flex; + align-items: center; width: auto; } -.article__tags__items__item svg { - display: inline; - vertical-align: bottom; +.article__tags__items__item_delete { + display: inline-flex; + align-items: center; + width: auto; } +.article__tags__items__item_delete i { + margin-left: 0.5rem; +} + + .article__tags__items__item_delete span { margin-left: .5rem; } @@ -199,9 +225,19 @@ filter: contrast(60%); } +.ext_settings > * + * { + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} + .ext_link_block { - margin-bottom: .5rem; - text-align: right; + display: flex; + align-items: center; +} + +.ext_link_block i { + margin-right: .5rem; } .ext_link_block a { diff --git a/assets/media/vscode.css b/assets/media/vscode.css index cb0a647b..8c491f11 100644 --- a/assets/media/vscode.css +++ b/assets/media/vscode.css @@ -6,13 +6,17 @@ --input-margin-horizontal: 0; } +html, body { + height: 100%; +} + body { padding: 0 var(--container-paddding); color: var(--vscode-foreground); font-size: var(--vscode-font-size); font-weight: var(--vscode-font-weight); font-family: var(--vscode-font-family); - background-color: var(--vscode-editor-background); + background-color: var(--vscode-sideBar-background); } ol, @@ -20,12 +24,6 @@ ul { padding-left: var(--container-paddding); } -body > *, -form > * { - margin-block-start: var(--input-margin-vertical); - margin-block-end: var(--input-margin-vertical); -} - *:focus { outline-color: var(--vscode-focusBorder) !important; } diff --git a/package-lock.json b/package-lock.json index 5000fc77..bd0eda2c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,15 @@ "regenerator-runtime": "^0.13.4" } }, + "@bendera/vscode-webview-elements": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@bendera/vscode-webview-elements/-/vscode-webview-elements-0.5.0.tgz", + "integrity": "sha512-mlZi8RG+tsqr1bDbA7H82spyWzZyj/tsyHb9eta7kE0xRhvx7ON6w6DG4PONew1rVJv1knTKOAW4iQKVBYQhVQ==", + "dev": true, + "requires": { + "lit-element": "^2.5.1" + } + }, "@emotion/hash": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", @@ -52,23 +61,36 @@ "dev": true }, "@material-ui/core": { - "version": "4.11.1", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.1.tgz", - "integrity": "sha512-aesI8lOaaw0DRIfNG+Anepf61NH5Q+cmkxJOZvI1oHkmD5cKubkZ0C7INqFKjfFpSFlFnqHkTasoM7ogFAvzOg==", + "version": "4.12.2", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.2.tgz", + "integrity": "sha512-Q1npB8V73IC+eV2X6as+g71MpEGQwqKHUI2iujY62npk35V8nMx/bUXAHjv5kKG1BZ8s8XUWoG6s/VkjYPjjQA==", "dev": true, "requires": { "@babel/runtime": "^7.4.4", - "@material-ui/styles": "^4.11.1", - "@material-ui/system": "^4.9.14", - "@material-ui/types": "^5.1.0", - "@material-ui/utils": "^4.10.2", + "@material-ui/styles": "^4.11.4", + "@material-ui/system": "^4.12.1", + "@material-ui/types": "5.1.0", + "@material-ui/utils": "^4.11.2", "@types/react-transition-group": "^4.2.0", "clsx": "^1.0.4", "hoist-non-react-statics": "^3.3.2", "popper.js": "1.16.1-lts", "prop-types": "^15.7.2", - "react-is": "^16.8.0", + "react-is": "^16.8.0 || ^17.0.0", "react-transition-group": "^4.4.0" + }, + "dependencies": { + "@material-ui/utils": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz", + "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0" + } + } } }, "@material-ui/icons": { @@ -81,66 +103,88 @@ } }, "@material-ui/lab": { - "version": "4.0.0-alpha.56", - "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz", - "integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==", + "version": "4.0.0-alpha.60", + "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz", + "integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==", "dev": true, "requires": { "@babel/runtime": "^7.4.4", - "@material-ui/utils": "^4.10.2", + "@material-ui/utils": "^4.11.2", "clsx": "^1.0.4", "prop-types": "^15.7.2", - "react-is": "^16.8.0" + "react-is": "^16.8.0 || ^17.0.0" } }, "@material-ui/styles": { - "version": "4.11.1", - "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.1.tgz", - "integrity": "sha512-GqzsFsVWT8jXa8OWAd1WD6WIaqtXr2mUPbRZ1EjkiM3Dlta4mCRaToDxkFVv6ZHfXlFjMJzdaIEvCpZOCvZTvg==", + "version": "4.11.4", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz", + "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==", "dev": true, "requires": { "@babel/runtime": "^7.4.4", "@emotion/hash": "^0.8.0", - "@material-ui/types": "^5.1.0", - "@material-ui/utils": "^4.9.6", + "@material-ui/types": "5.1.0", + "@material-ui/utils": "^4.11.2", "clsx": "^1.0.4", "csstype": "^2.5.2", "hoist-non-react-statics": "^3.3.2", - "jss": "^10.0.3", - "jss-plugin-camel-case": "^10.0.3", - "jss-plugin-default-unit": "^10.0.3", - "jss-plugin-global": "^10.0.3", - "jss-plugin-nested": "^10.0.3", - "jss-plugin-props-sort": "^10.0.3", - "jss-plugin-rule-value-function": "^10.0.3", - "jss-plugin-vendor-prefixer": "^10.0.3", + "jss": "^10.5.1", + "jss-plugin-camel-case": "^10.5.1", + "jss-plugin-default-unit": "^10.5.1", + "jss-plugin-global": "^10.5.1", + "jss-plugin-nested": "^10.5.1", + "jss-plugin-props-sort": "^10.5.1", + "jss-plugin-rule-value-function": "^10.5.1", + "jss-plugin-vendor-prefixer": "^10.5.1", "prop-types": "^15.7.2" }, "dependencies": { + "@material-ui/utils": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz", + "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0" + } + }, "csstype": { - "version": "2.6.14", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz", - "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==", + "version": "2.6.17", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz", + "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==", "dev": true } } }, "@material-ui/system": { - "version": "4.9.14", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.14.tgz", - "integrity": "sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==", + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz", + "integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==", "dev": true, "requires": { "@babel/runtime": "^7.4.4", - "@material-ui/utils": "^4.9.6", + "@material-ui/utils": "^4.11.2", "csstype": "^2.5.2", "prop-types": "^15.7.2" }, "dependencies": { + "@material-ui/utils": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz", + "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==", + "dev": true, + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0" + } + }, "csstype": { - "version": "2.6.14", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz", - "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==", + "version": "2.6.17", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz", + "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==", "dev": true } } @@ -152,14 +196,14 @@ "dev": true }, "@material-ui/utils": { - "version": "4.10.2", - "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz", - "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==", + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz", + "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==", "dev": true, "requires": { "@babel/runtime": "^7.4.4", "prop-types": "^15.7.2", - "react-is": "^16.8.0" + "react-is": "^16.8.0 || ^17.0.0" } }, "@types/anymatch": { @@ -240,9 +284,9 @@ } }, "@types/react-transition-group": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", - "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==", + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz", + "integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==", "dev": true, "requires": { "@types/react": "*" @@ -324,6 +368,12 @@ } } }, + "@vscode/codicons": { + "version": "0.0.20", + "resolved": "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.20.tgz", + "integrity": "sha512-LlO6K7nzrIWDCZN1Zi6J6ibxrpMibSAct+zNjAwpkNkwup6cJLx5diYvsOJODMPWOuQlBO21qkxtdkSRzW6+Jw==", + "dev": true + }, "@webassemblyjs/ast": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz", @@ -1427,9 +1477,9 @@ } }, "dom-helpers": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", - "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", "dev": true, "requires": { "@babel/runtime": "^7.8.7", @@ -2510,15 +2560,6 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, - "indefinite-observable": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz", - "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==", - "dev": true, - "requires": { - "symbol-observable": "1.2.0" - } - }, "infer-owner": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz", @@ -2797,90 +2838,89 @@ } }, "jss": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz", - "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.7.1.tgz", + "integrity": "sha512-5QN8JSVZR6cxpZNeGfzIjqPEP+ZJwJJfZbXmeABNdxiExyO+eJJDy6WDtqTf8SDKnbL5kZllEpAP71E/Lt7PXg==", "dev": true, "requires": { "@babel/runtime": "^7.3.1", "csstype": "^3.0.2", - "indefinite-observable": "^2.0.1", "is-in-browser": "^1.1.3", "tiny-warning": "^1.0.2" } }, "jss-plugin-camel-case": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz", - "integrity": "sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.7.1.tgz", + "integrity": "sha512-+ioIyWvmAfgDCWXsQcW1NMnLBvRinOVFkSYJUgewQ6TynOcSj5F1bSU23B7z0p1iqK0PPHIU62xY1iNJD33WGA==", "dev": true, "requires": { "@babel/runtime": "^7.3.1", "hyphenate-style-name": "^1.0.3", - "jss": "10.5.0" + "jss": "10.7.1" } }, "jss-plugin-default-unit": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz", - "integrity": "sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.7.1.tgz", + "integrity": "sha512-tW+dfYVNARBQb/ONzBwd8uyImigyzMiAEDai+AbH5rcHg5h3TtqhAkxx06iuZiT/dZUiFdSKlbe3q9jZGAPIwA==", "dev": true, "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.5.0" + "jss": "10.7.1" } }, "jss-plugin-global": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz", - "integrity": "sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.7.1.tgz", + "integrity": "sha512-FbxCnu44IkK/bw8X3CwZKmcAnJqjAb9LujlAc/aP0bMSdVa3/MugKQRyeQSu00uGL44feJJDoeXXiHOakBr/Zw==", "dev": true, "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.5.0" + "jss": "10.7.1" } }, "jss-plugin-nested": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz", - "integrity": "sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.7.1.tgz", + "integrity": "sha512-RNbICk7FlYKaJyv9tkMl7s6FFfeLA3ubNIFKvPqaWtADK0KUaPsPXVYBkAu4x1ItgsWx67xvReMrkcKA0jSXfA==", "dev": true, "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.5.0", + "jss": "10.7.1", "tiny-warning": "^1.0.2" } }, "jss-plugin-props-sort": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz", - "integrity": "sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.7.1.tgz", + "integrity": "sha512-eyd5FhA+J0QrpqXxO7YNF/HMSXXl4pB0EmUdY4vSJI4QG22F59vQ6AHtP6fSwhmBdQ98Qd9gjfO+RMxcE39P1A==", "dev": true, "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.5.0" + "jss": "10.7.1" } }, "jss-plugin-rule-value-function": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz", - "integrity": "sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.7.1.tgz", + "integrity": "sha512-fGAAImlbaHD3fXAHI3ooX6aRESOl5iBt3LjpVjxs9II5u9tzam7pqFUmgTcrip9VpRqYHn8J3gA7kCtm8xKwHg==", "dev": true, "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.5.0", + "jss": "10.7.1", "tiny-warning": "^1.0.2" } }, "jss-plugin-vendor-prefixer": { - "version": "10.5.0", - "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz", - "integrity": "sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.7.1.tgz", + "integrity": "sha512-1UHFmBn7hZNsHXTkLLOL8abRl8vi+D1EVzWD4WmLFj55vawHZfnH1oEz6TUf5Y61XHv0smdHabdXds6BgOXe3A==", "dev": true, "requires": { "@babel/runtime": "^7.3.1", "css-vendor": "^2.0.8", - "jss": "10.5.0" + "jss": "10.7.1" } }, "kind-of": { @@ -2889,6 +2929,21 @@ "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", "dev": true }, + "lit-element": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz", + "integrity": "sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ==", + "dev": true, + "requires": { + "lit-html": "^1.1.1" + } + }, + "lit-html": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.4.1.tgz", + "integrity": "sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==", + "dev": true + }, "loader-runner": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz", @@ -3664,9 +3719,9 @@ "dev": true }, "react-transition-group": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", - "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", + "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", "dev": true, "requires": { "@babel/runtime": "^7.5.5", @@ -4296,12 +4351,6 @@ "integrity": "sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=", "dev": true }, - "symbol-observable": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", - "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==", - "dev": true - }, "tapable": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", @@ -4979,6 +5028,12 @@ } } }, + "wc-react": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/wc-react/-/wc-react-0.5.0.tgz", + "integrity": "sha512-3c4KzBArlfCqCYqY8hoJAIvxmzpWvoQqsOmy9OiwbnopSTE270i3R+LVD7NjE00UJkjXq7kmhobnx0qhi/eOrA==", + "dev": true + }, "webpack": { "version": "4.44.2", "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz", diff --git a/package.json b/package.json index bebb3e8c..d3b5f7b4 100644 --- a/package.json +++ b/package.json @@ -238,10 +238,11 @@ "clean": "rm -rf dist" }, "devDependencies": { + "@bendera/vscode-webview-elements": "0.5.0", "@iarna/toml": "2.2.3", - "@material-ui/core": "4.11.1", + "@material-ui/core": "4.12.2", "@material-ui/icons": "4.11.2", - "@material-ui/lab": "4.0.0-alpha.56", + "@material-ui/lab": "4.0.0-alpha.60", "@types/glob": "7.1.3", "@types/js-yaml": "3.12.1", "@types/mocha": "^5.2.6", @@ -249,6 +250,7 @@ "@types/react": "17.0.0", "@types/react-dom": "17.0.0", "@types/vscode": "1.51.0", + "@vscode/codicons": "0.0.20", "date-fns": "2.0.1", "downshift": "6.0.6", "glob": "7.1.6", @@ -260,7 +262,9 @@ "ts-loader": "8.0.3", "tslint": "6.1.3", "typescript": "4.0.2", + "wc-react": "0.5.0", "webpack": "4.44.2", "webpack-cli": "3.3.12" - } + }, + "dependencies": {} } diff --git a/src/viewpanel/ViewPanel.tsx b/src/viewpanel/ViewPanel.tsx index cbdd9bae..8bdc5cfb 100644 --- a/src/viewpanel/ViewPanel.tsx +++ b/src/viewpanel/ViewPanel.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { CommandToCode } from './CommandToCode'; import { Actions } from './components/Actions'; +import { Icon } from './components/Icon'; import { SeoStatus } from './components/SeoStatus'; import { Spinner } from './components/Spinner'; import { TagPicker } from './components/TagPicker'; @@ -42,48 +43,58 @@ export const ViewPanel: React.FunctionComponent = (props: React return (
- { - settings && settings.seo && - } - { - settings && metadata && - } +
+ { + settings && settings.seo && + } + { + settings && metadata && + } - { - (settings && settings.tags && settings.tags.length > 0) && ( - - ) - } - { - (settings && settings.categories && settings.categories.length > 0) && ( - - ) - } - -
- Open settings + { + (settings && settings.tags && settings.tags.length > 0) && ( + } + crntSelected={metadata.tags || []} + options={settings.tags} + freeform={settings.freeform} + focussed={focusElm === TagType.tags} + unsetFocus={unsetFocus} /> + ) + } + { + (settings && settings.categories && settings.categories.length > 0) && ( + } + crntSelected={metadata.categories || []} + options={settings.categories} + freeform={settings.freeform} + focussed={focusElm === TagType.categories} + unsetFocus={unsetFocus} /> + ) + }
- + ); diff --git a/src/viewpanel/components/Actions.tsx b/src/viewpanel/components/Actions.tsx index 0871c9bf..630d4894 100644 --- a/src/viewpanel/components/Actions.tsx +++ b/src/viewpanel/components/Actions.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { PanelSettings } from '../../models/PanelSettings'; import { CustomScript } from './CustomScript'; import { DateAction } from './DateAction'; +import { Icon } from './Icon'; import { PublishAction } from './PublishAction'; import { SlugAction } from './SlugAction'; @@ -18,8 +19,8 @@ export const Actions: React.FunctionComponent = (props: React.Pro } return ( -
-

Actions

+
+

Actions

{ metadata && metadata.title && } @@ -30,7 +31,7 @@ export const Actions: React.FunctionComponent = (props: React.Pro { (settings && settings.scripts && settings.scripts.length > 0) && ( settings.scripts.map((value) => ( - + )) ) } diff --git a/src/viewpanel/components/Icon.tsx b/src/viewpanel/components/Icon.tsx new file mode 100644 index 00000000..81848dd3 --- /dev/null +++ b/src/viewpanel/components/Icon.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; + +export interface IIconProps { + name: string; +} + +export const Icon: React.FunctionComponent = ({ name }: React.PropsWithChildren) => { + + return (); +}; \ No newline at end of file diff --git a/src/viewpanel/components/SeoStatus.tsx b/src/viewpanel/components/SeoStatus.tsx index 71513739..448e2d59 100644 --- a/src/viewpanel/components/SeoStatus.tsx +++ b/src/viewpanel/components/SeoStatus.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { SEO } from '../../models/PanelSettings'; +import { Icon } from './Icon'; import { SeoDetails } from './SeoDetails'; export interface ISeoStatusProps { @@ -9,7 +10,7 @@ export interface ISeoStatusProps { export const SeoStatus: React.FunctionComponent = (props: React.PropsWithChildren) => { const { data, seo } = props; - const { title, description } = data; + const { title } = data; const { descriptionField } = seo; @@ -18,8 +19,10 @@ export const SeoStatus: React.FunctionComponent = (props: React } return ( -
-

SEO Status

+
+

+ SEO Status +

{ (title && seo.title > 0) && } { (data[descriptionField] && seo.description > 0) && }
diff --git a/src/viewpanel/components/Tag.tsx b/src/viewpanel/components/Tag.tsx index 3646ec5e..2f1b88c3 100644 --- a/src/viewpanel/components/Tag.tsx +++ b/src/viewpanel/components/Tag.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import AddIcon from '@material-ui/icons/Add'; import DeleteIcon from '@material-ui/icons/Delete'; +import { Icon } from './Icon'; export interface ITagProps { className: string; @@ -18,9 +19,10 @@ export const Tag: React.FunctionComponent = (props: React.PropsWithCh
{ onCreate && - + } - + +
); }; \ No newline at end of file diff --git a/src/viewpanel/components/TagPicker.tsx b/src/viewpanel/components/TagPicker.tsx index bf6d8551..5ab0c931 100644 --- a/src/viewpanel/components/TagPicker.tsx +++ b/src/viewpanel/components/TagPicker.tsx @@ -8,6 +8,7 @@ import Downshift from 'downshift'; export interface ITagPickerProps { type: string; + icon: JSX.Element; crntSelected: string[]; options: string[]; freeform: boolean; @@ -16,7 +17,7 @@ export interface ITagPickerProps { } export const TagPicker: React.FunctionComponent = (props: React.PropsWithChildren) => { - const { type, crntSelected, options, freeform, focussed, unsetFocus } = props; + const { icon, type, crntSelected, options, freeform, focussed, unsetFocus } = props; const [ selected, setSelected ] = React.useState([]); const [ inputValue, setInputValue ] = React.useState(""); const prevSelected = usePrevious(crntSelected); @@ -114,8 +115,8 @@ export const TagPicker: React.FunctionComponent = (props: React }, [crntSelected]); return ( -
-

{type}

+
+

{icon} {type}

onSelect(selected || "")} diff --git a/src/viewpanel/components/VscodeComponents.ts b/src/viewpanel/components/VscodeComponents.ts new file mode 100644 index 00000000..81a3b561 --- /dev/null +++ b/src/viewpanel/components/VscodeComponents.ts @@ -0,0 +1,3 @@ +import {wrapWc} from 'wc-react'; + +export const VscodeIcon = wrapWc(`vscode-icon`); \ No newline at end of file diff --git a/src/viewpanel/index.tsx b/src/viewpanel/index.tsx index e2afdfb9..4d5d7504 100644 --- a/src/viewpanel/index.tsx +++ b/src/viewpanel/index.tsx @@ -2,6 +2,8 @@ import * as React from "react"; import { render } from "react-dom"; import { ViewPanel } from "./ViewPanel"; +import '@bendera/vscode-webview-elements/dist/vscode-icon'; + declare const acquireVsCodeApi: () => { getState: () => T; setState: (data: T) => void; diff --git a/src/webview/ExplorerView.ts b/src/webview/ExplorerView.ts index 82d8fc24..c3856f3c 100644 --- a/src/webview/ExplorerView.ts +++ b/src/webview/ExplorerView.ts @@ -58,8 +58,6 @@ export class ExplorerView implements WebviewViewProvider, Disposable { */ public async resolveWebviewView(webviewView: WebviewView, context: WebviewViewResolveContext, token: CancellationToken): Promise { - console.log(context); - this.panel = webviewView; webviewView.webview.options = { @@ -314,6 +312,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable { const styleResetUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'assets/media', 'reset.css')); const stylesUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'assets/media', 'styles.css')); const scriptUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'dist', 'viewpanel.js')); + const codiconsUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'node_modules', '@vscode/codicons', 'dist', 'codicon.css')); const nonce = this.getNonce(); return ` @@ -325,8 +324,9 @@ export class ExplorerView implements WebviewViewProvider, Disposable { + - FrontMatter + Front Matter