From c843e740775ffcfc66fb91b8d3d489ce2ae38b88 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Mon, 6 Feb 2023 18:26:11 +0100 Subject: [PATCH] #505 - Align to theme colors WIP --- package.json | 5 + pnpm-lock.yaml | 255 ++------ src/commands/Dashboard.ts | 7 +- src/constants/settings.ts | 2 + .../components/ChoiceButton.tsx | 17 +- .../components/Contents/ContentActions.tsx | 9 +- .../components/Contents/Item.tsx | 46 +- .../components/Header/FilterInput.tsx | 14 +- .../components/Header/Header.tsx | 22 +- .../components/Header/Pagination.tsx | 15 +- .../components/Header/PaginationButton.tsx | 10 +- .../components/Header/Searchbox.tsx | 13 +- .../components/Header/SyncButton.tsx | 9 +- .../components/Header/ViewSwitch.tsx | 8 +- .../components/Media/DetailsSlideOver.tsx | 23 +- .../components/Media/FolderCreation.tsx | 16 +- .../components/Media/Item.tsx | 69 ++- .../components/Media/Lightbox.tsx | 6 +- .../components/Media/MediaHeaderBottom.tsx | 9 +- .../components/Menu/MenuItem.tsx | 10 +- .../components/Menu/MenuItems.tsx | 10 +- .../components/Modals/Alert.tsx | 40 +- .../components/Modals/InfoDialog.tsx | 30 +- .../components/Navigation.tsx | 82 ++- .../components/SnippetsView/Snippets.tsx | 17 +- src/dashboardWebView/components/Spinner.tsx | 9 +- .../components/SponsorMsg.tsx | 54 +- src/dashboardWebView/components/Startup.tsx | 16 +- src/dashboardWebView/components/Status.tsx | 15 +- .../TaxonomyView/TaxonomyManager.tsx | 9 +- .../components/css-vscode-variables.css | 582 ++++++++++++++++++ src/dashboardWebView/hooks/useThemeColors.tsx | 20 + src/dashboardWebView/index.tsx | 10 +- .../providers/SettingsProvider.tsx | 47 ++ src/dashboardWebView/styles.css | 1 - 35 files changed, 1181 insertions(+), 326 deletions(-) create mode 100644 src/dashboardWebView/components/css-vscode-variables.css create mode 100644 src/dashboardWebView/hooks/useThemeColors.tsx create mode 100644 src/dashboardWebView/providers/SettingsProvider.tsx diff --git a/package.json b/package.json index c3194b6c..42113e6f 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,11 @@ "configuration": { "title": "Front Matter: use frontmatter.json for shared team settings", "properties": { + "frontMatter.experimental": { + "type": "boolean", + "default": false, + "markdownDescription": "Specify if you want to enable the experimental features. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.experimental)" + }, "frontMatter.extends": { "type": "array", "markdownDescription": "Specify the list of paths/URLs to extend the Front Matter CMS config. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.extends)", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index afcfaade..034927bb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,7 +11,7 @@ specifiers: '@popperjs/core': ^2.11.6 '@sentry/react': ^6.13.3 '@sentry/tracing': ^6.13.3 - '@tailwindcss/forms': ^0.3.3 + '@tailwindcss/forms': ^0.5.3 '@types/chai': ^4.3.1 '@types/glob': 7.1.3 '@types/invariant': ^2.2.35 @@ -37,7 +37,7 @@ specifiers: '@webpack-cli/serve': ^1.6.0 ajv: ^8.8.2 array-move: ^4.0.0 - autoprefixer: 10.3.3 + autoprefixer: ^10.4.13 chai: ^4.3.6 css-loader: 5.2.7 date-fns: 2.23.0 @@ -64,9 +64,8 @@ specifiers: node-json-db: ^1.3.0 npm-run-all: ^4.1.5 path-browserify: ^1.0.1 - postcss: ^8.3.6 - postcss-loader: 4.3.0 - postcss-nested: ^5.0.6 + postcss: ^8.4.21 + postcss-loader: ^7.0.2 prettier: ^2.8.3 prettier-plugin-tailwindcss: ^0.2.2 react: 17.0.1 @@ -83,8 +82,7 @@ specifiers: semver: ^7.3.7 simple-git: ^3.10.0 style-loader: 2.0.0 - tailwindcss: ^2.2.7 - tailwindcss-nested-groups: ^1.2.4 + tailwindcss: ^3.2.4 ts-loader: ^9.4.2 typescript: ^4.6.2 uniforms: ^3.7.0 @@ -112,7 +110,7 @@ devDependencies: '@popperjs/core': 2.11.6 '@sentry/react': 6.19.7_react@17.0.1 '@sentry/tracing': 6.19.7 - '@tailwindcss/forms': 0.3.4_tailwindcss@2.2.19 + '@tailwindcss/forms': 0.5.3_tailwindcss@3.2.4 '@types/chai': 4.3.4 '@types/glob': 7.1.3 '@types/invariant': 2.2.35 @@ -138,7 +136,7 @@ devDependencies: '@webpack-cli/serve': 1.7.0_ud4agclah7rahur6ntojouq57y ajv: 8.12.0 array-move: 4.0.0 - autoprefixer: 10.3.3_postcss@8.4.21 + autoprefixer: 10.4.13_postcss@8.4.21 chai: 4.3.7 css-loader: 5.2.7_webpack@5.75.0 date-fns: 2.23.0 @@ -166,8 +164,7 @@ devDependencies: npm-run-all: 4.1.5 path-browserify: 1.0.1 postcss: 8.4.21 - postcss-loader: 4.3.0_6jdsrmfenkuhhw3gx4zvjlznce - postcss-nested: 5.0.6_postcss@8.4.21 + postcss-loader: 7.0.2_6jdsrmfenkuhhw3gx4zvjlznce prettier: 2.8.3 prettier-plugin-tailwindcss: 0.2.2_prettier@2.8.3 react: 17.0.1 @@ -184,8 +181,7 @@ devDependencies: semver: 7.3.8 simple-git: 3.16.0 style-loader: 2.0.0_webpack@5.75.0 - tailwindcss: 2.2.19_4xaawq3hrlasat64u2hch2fhdy - tailwindcss-nested-groups: 1.2.4_tailwindcss@2.2.19 + tailwindcss: 3.2.4_postcss@8.4.21 ts-loader: 9.4.2_hhrrucqyg4eysmfpujvov2ym5u typescript: 4.9.5 uniforms: 3.10.2_react@17.0.1 @@ -693,13 +689,13 @@ packages: defer-to-connect: 2.0.1 dev: true - /@tailwindcss/forms/0.3.4_tailwindcss@2.2.19: - resolution: {integrity: sha512-vlAoBifNJUkagB+PAdW4aHMe4pKmSLroH398UPgIogBFc91D2VlHUxe4pjxQhiJl0Nfw53sHSJSQBSTQBZP3vA==} + /@tailwindcss/forms/0.5.3_tailwindcss@3.2.4: + resolution: {integrity: sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==} peerDependencies: - tailwindcss: '>=2.0.0' + tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1' dependencies: mini-svg-data-uri: 1.4.4 - tailwindcss: 2.2.19_4xaawq3hrlasat64u2hch2fhdy + tailwindcss: 3.2.4_postcss@8.4.21 dev: true /@types/body-parser/1.19.2: @@ -1609,8 +1605,8 @@ packages: engines: {node: '>=4'} dev: true - /autoprefixer/10.3.3_postcss@8.4.21: - resolution: {integrity: sha512-yRzjxfnggrP/+qVHlUuZz5FZzEbkT+Yt0/Df6ScEMnbbZBLzYB2W0KLxoQCW+THm1SpOsM1ZPcTHAwuvmibIsQ==} + /autoprefixer/10.4.13_postcss@8.4.21: + resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==} engines: {node: ^10 || ^12 || >=14} hasBin: true peerDependencies: @@ -1618,9 +1614,9 @@ packages: dependencies: browserslist: 4.21.5 caniuse-lite: 1.0.30001450 - colorette: 1.4.0 fraction.js: 4.2.0 normalize-range: 0.1.2 + picocolors: 1.0.0 postcss: 8.4.21 postcss-value-parser: 4.2.0 dev: true @@ -2025,25 +2021,6 @@ packages: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} dev: true - /color-string/1.9.1: - resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==} - dependencies: - color-name: 1.1.4 - simple-swizzle: 0.2.2 - dev: true - - /color/4.2.3: - resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==} - engines: {node: '>=12.5.0'} - dependencies: - color-convert: 2.0.1 - color-string: 1.9.1 - dev: true - - /colorette/1.4.0: - resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==} - dev: true - /colorette/2.0.19: resolution: {integrity: sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==} dev: true @@ -2079,11 +2056,6 @@ packages: engines: {node: '>= 10'} dev: true - /commander/8.3.0: - resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==} - engines: {node: '>= 12'} - dev: true - /compare-versions/5.0.3: resolution: {integrity: sha512-4UZlZP8Z99MGEY+Ovg/uJxJuvoXuN4M6B3hKaiackiHrgzQFEe3diJi1mf1PNHbFujM7FvLrK2bpgIaImbtZ1A==} dev: true @@ -2185,10 +2157,6 @@ packages: which: 2.0.2 dev: true - /css-color-names/0.0.4: - resolution: {integrity: sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==} - dev: true - /css-loader/5.2.7_webpack@5.75.0: resolution: {integrity: sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==} engines: {node: '>= 10.13.0'} @@ -2228,10 +2196,6 @@ packages: nth-check: 2.1.1 dev: true - /css-unit-converter/1.1.2: - resolution: {integrity: sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==} - dev: true - /css-what/6.1.0: resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} engines: {node: '>= 6'} @@ -3091,15 +3055,6 @@ packages: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} dev: true - /fs-extra/10.1.0: - resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==} - engines: {node: '>=12'} - dependencies: - graceful-fs: 4.2.10 - jsonfile: 6.1.0 - universalify: 2.0.0 - dev: true - /fs-extra/11.1.0: resolution: {integrity: sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==} engines: {node: '>=14.14'} @@ -3379,10 +3334,6 @@ packages: hasBin: true dev: true - /hex-color-regex/1.1.0: - resolution: {integrity: sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==} - dev: true - /hoist-non-react-statics/3.3.2: resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} dependencies: @@ -3414,14 +3365,6 @@ packages: engines: {node: '>=14'} dev: true - /hsl-regex/1.0.0: - resolution: {integrity: sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A==} - dev: true - - /hsla-regex/1.0.0: - resolution: {integrity: sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==} - dev: true - /html-entities/2.3.3: resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==} dev: true @@ -3453,11 +3396,6 @@ packages: terser: 4.8.1 dev: true - /html-tags/3.2.0: - resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==} - engines: {node: '>=8'} - dev: true - /html-webpack-plugin/4.5.0_webpack@5.75.0: resolution: {integrity: sha512-MouoXEYSjTzCrjIxWwg8gxL5fE2X2WZJLmBYXlaJhQUH5K/b5OrqmV7T4dB7iu0xkmJ6JlUuV6fFVtnqbPopZw==} engines: {node: '>=6.9'} @@ -3720,10 +3658,6 @@ packages: resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} dev: true - /is-arrayish/0.3.2: - resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} - dev: true - /is-bigint/1.0.4: resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==} dependencies: @@ -3750,17 +3684,6 @@ packages: engines: {node: '>= 0.4'} dev: true - /is-color-stop/1.1.0: - resolution: {integrity: sha512-H1U8Vz0cfXNujrJzEcvvwMDW9Ra+biSYA3ThdQvAnMLJkEHQXn6bWzLkxHtVYJ+Sdbx0b6finn3jZiaVe7MAHA==} - dependencies: - css-color-names: 0.0.4 - hex-color-regex: 1.1.0 - hsl-regex: 1.0.0 - hsla-regex: 1.0.0 - rgb-regex: 1.0.1 - rgba-regex: 1.0.0 - dev: true - /is-core-module/2.11.0: resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==} dependencies: @@ -4163,10 +4086,6 @@ packages: resolution: {integrity: sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==} dev: true - /lodash.topath/4.5.2: - resolution: {integrity: sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg==} - dev: true - /lodash.uniqby/4.7.0: resolution: {integrity: sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww==} dev: true @@ -4571,11 +4490,6 @@ packages: yargs-unparser: 2.0.0 dev: true - /modern-normalize/1.1.0: - resolution: {integrity: sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==} - engines: {node: '>=6'} - dev: true - /moment/2.29.4: resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==} dev: true @@ -4692,12 +4606,6 @@ packages: dev: true optional: true - /node-emoji/1.11.0: - resolution: {integrity: sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==} - dependencies: - lodash: 4.17.21 - dev: true - /node-fetch/2.6.9: resolution: {integrity: sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==} engines: {node: 4.x || >=6.0.0} @@ -4790,8 +4698,8 @@ packages: engines: {node: '>=0.10.0'} dev: true - /object-hash/2.2.0: - resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==} + /object-hash/3.0.0: + resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} engines: {node: '>= 6'} dev: true @@ -5088,6 +4996,11 @@ packages: hasBin: true dev: true + /pify/2.3.0: + resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} + engines: {node: '>=0.10.0'} + dev: true + /pify/3.0.0: resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==} engines: {node: '>=4'} @@ -5100,9 +5013,23 @@ packages: find-up: 4.1.0 dev: true - /postcss-js/3.0.3: - resolution: {integrity: sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==} - engines: {node: '>=10.0'} + /postcss-import/14.1.0_postcss@8.4.21: + resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==} + engines: {node: '>=10.0.0'} + peerDependencies: + postcss: ^8.0.0 + dependencies: + postcss: 8.4.21 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.1 + dev: true + + /postcss-js/4.0.0_postcss@8.4.21: + resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==} + engines: {node: ^12 || ^14 || >= 16} + peerDependencies: + postcss: ^8.3.3 dependencies: camelcase-css: 2.0.1 postcss: 8.4.21 @@ -5125,18 +5052,16 @@ packages: yaml: 1.10.2 dev: true - /postcss-loader/4.3.0_6jdsrmfenkuhhw3gx4zvjlznce: - resolution: {integrity: sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==} - engines: {node: '>= 10.13.0'} + /postcss-loader/7.0.2_6jdsrmfenkuhhw3gx4zvjlznce: + resolution: {integrity: sha512-fUJzV/QH7NXUAqV8dWJ9Lg4aTkDCezpTS5HgJ2DvqznexTbSTxgi/dTECvTZ15BwKTtk8G/bqI/QTu2HPd3ZCg==} + engines: {node: '>= 14.15.0'} peerDependencies: postcss: ^7.0.0 || ^8.0.1 - webpack: ^4.0.0 || ^5.0.0 + webpack: ^5.0.0 dependencies: cosmiconfig: 7.1.0 klona: 2.0.6 - loader-utils: 2.0.4 postcss: 8.4.21 - schema-utils: 3.1.1 semver: 7.3.8 webpack: 5.75.0_webpack-cli@4.10.0 dev: true @@ -5182,8 +5107,8 @@ packages: postcss: 8.4.21 dev: true - /postcss-nested/5.0.6_postcss@8.4.21: - resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==} + /postcss-nested/6.0.0_postcss@8.4.21: + resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 @@ -5200,10 +5125,6 @@ packages: util-deprecate: 1.0.2 dev: true - /postcss-value-parser/3.3.1: - resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==} - dev: true - /postcss-value-parser/4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} dev: true @@ -5307,11 +5228,6 @@ packages: renderkid: 2.0.7 dev: true - /pretty-hrtime/1.0.3: - resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==} - engines: {node: '>= 0.8'} - dev: true - /process-nextick-args/2.0.1: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} dev: true @@ -5351,16 +5267,6 @@ packages: engines: {node: '>=6'} dev: true - /purgecss/4.1.3: - resolution: {integrity: sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==} - hasBin: true - dependencies: - commander: 8.3.0 - glob: 7.2.0 - postcss: 8.4.21 - postcss-selector-parser: 6.0.11 - dev: true - /qs/6.11.0: resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==} engines: {node: '>=0.6'} @@ -6102,6 +6008,12 @@ packages: object-assign: 4.1.1 dev: true + /read-cache/1.0.0: + resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} + dependencies: + pify: 2.3.0 + dev: true + /read-pkg/3.0.0: resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==} engines: {node: '>=4'} @@ -6170,13 +6082,6 @@ packages: react-dom: 17.0.1_react@17.0.1 dev: true - /reduce-css-calc/2.1.8: - resolution: {integrity: sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==} - dependencies: - css-unit-converter: 1.1.2 - postcss-value-parser: 3.3.1 - dev: true - /regenerator-runtime/0.13.11: resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==} dev: true @@ -6274,14 +6179,6 @@ packages: engines: {iojs: '>=1.0.0', node: '>=0.10.0'} dev: true - /rgb-regex/1.0.1: - resolution: {integrity: sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w==} - dev: true - - /rgba-regex/1.0.0: - resolution: {integrity: sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg==} - dev: true - /rimraf/3.0.2: resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} hasBin: true @@ -6555,12 +6452,6 @@ packages: - supports-color dev: true - /simple-swizzle/0.2.2: - resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==} - dependencies: - is-arrayish: 0.3.2 - dev: true - /sirv/1.0.19: resolution: {integrity: sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==} engines: {node: '>= 10'} @@ -6803,58 +6694,36 @@ packages: resolution: {integrity: sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==} dev: true - /tailwindcss-nested-groups/1.2.4_tailwindcss@2.2.19: - resolution: {integrity: sha512-SrW9VTgH5/PmW/E0q1+TC7TckhVfonDpiYiLKsRYX57FEcM3LemiH7JYcsTlubM+eAVkd9Jjj03pTiyfnDBibQ==} - engines: {node: '>=10'} - peerDependencies: - tailwindcss: '>=1 <=2' - dependencies: - postcss-selector-parser: 6.0.11 - tailwindcss: 2.2.19_4xaawq3hrlasat64u2hch2fhdy - dev: true - - /tailwindcss/2.2.19_4xaawq3hrlasat64u2hch2fhdy: - resolution: {integrity: sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==} + /tailwindcss/3.2.4_postcss@8.4.21: + resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==} engines: {node: '>=12.13.0'} hasBin: true peerDependencies: - autoprefixer: ^10.0.2 postcss: ^8.0.9 dependencies: arg: 5.0.2 - autoprefixer: 10.3.3_postcss@8.4.21 - bytes: 3.1.2 - chalk: 4.1.2 chokidar: 3.5.3 - color: 4.2.3 - cosmiconfig: 7.1.0 + color-name: 1.1.4 detective: 5.2.1 didyoumean: 1.2.2 dlv: 1.1.3 fast-glob: 3.2.12 - fs-extra: 10.1.0 glob-parent: 6.0.2 - html-tags: 3.2.0 - is-color-stop: 1.1.0 is-glob: 4.0.3 - lodash: 4.17.21 - lodash.topath: 4.5.2 - modern-normalize: 1.1.0 - node-emoji: 1.11.0 + lilconfig: 2.0.6 + micromatch: 4.0.5 normalize-path: 3.0.0 - object-hash: 2.2.0 + object-hash: 3.0.0 + picocolors: 1.0.0 postcss: 8.4.21 - postcss-js: 3.0.3 + postcss-import: 14.1.0_postcss@8.4.21 + postcss-js: 4.0.0_postcss@8.4.21 postcss-load-config: 3.1.4_postcss@8.4.21 - postcss-nested: 5.0.6_postcss@8.4.21 + postcss-nested: 6.0.0_postcss@8.4.21 postcss-selector-parser: 6.0.11 postcss-value-parser: 4.2.0 - pretty-hrtime: 1.0.3 - purgecss: 4.1.3 quick-lru: 5.1.1 - reduce-css-calc: 2.1.8 resolve: 1.22.1 - tmp: 0.2.1 transitivePeerDependencies: - ts-node dev: true diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts index 3931b40a..1079ade6 100644 --- a/src/commands/Dashboard.ts +++ b/src/commands/Dashboard.ts @@ -1,4 +1,4 @@ -import { SETTING_DASHBOARD_OPENONSTART, CONTEXT, ExtensionState } from '../constants'; +import { SETTING_DASHBOARD_OPENONSTART, CONTEXT, ExtensionState, SETTING_EXPERIMENTAL } from '../constants'; import { join } from 'path'; import { commands, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode'; import { Logger, Settings as SettingsHelper } from '../helpers'; @@ -220,6 +220,9 @@ export class Dashboard { const version = ext.getVersion(); const isBeta = ext.isBetaVersion(); + // Get experimental setting + const experimental = SettingsHelper.get(SETTING_EXPERIMENTAL) + const csp = [ `default-src 'none';`, `img-src ${`vscode-file://vscode-app`} ${ @@ -255,7 +258,7 @@ export class Dashboard { isBeta ? 'BETA' : 'main' }" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${ version.usedVersion ? '' : `data-showWelcome="true"` - }> + } ${experimental ? `data-experimental="${experimental}"` : ""} > Daily usage diff --git a/src/constants/settings.ts b/src/constants/settings.ts index 159a0efe..4afd4752 100644 --- a/src/constants/settings.ts +++ b/src/constants/settings.ts @@ -2,6 +2,8 @@ export const EXTENSION_NAME = 'Front Matter'; export const CONFIG_KEY = 'frontMatter'; +export const SETTING_EXPERIMENTAL = 'experimental'; + export const SETTING_EXTENDS = 'extends'; export const SETTING_GLOBAL_NOTIFICATIONS = 'global.notifications'; diff --git a/src/dashboardWebView/components/ChoiceButton.tsx b/src/dashboardWebView/components/ChoiceButton.tsx index 18afbc70..3b9a5548 100644 --- a/src/dashboardWebView/components/ChoiceButton.tsx +++ b/src/dashboardWebView/components/ChoiceButton.tsx @@ -1,6 +1,7 @@ import { Menu } from '@headlessui/react'; import { ChevronDownIcon } from '@heroicons/react/outline'; import * as React from 'react'; +import useThemeColors from '../hooks/useThemeColors'; import { MenuItem, MenuItems } from './Menu'; export interface IChoiceButtonProps { @@ -21,11 +22,18 @@ export const ChoiceButton: React.FunctionComponent = ({ choices, title }: React.PropsWithChildren) => { + const { getColors } = useThemeColors(); + return ( @@ -117,7 +139,7 @@ export const Item: React.FunctionComponent = ({ {tags && tags.length > 0 && ( @@ -127,7 +149,12 @@ export const Item: React.FunctionComponent = ({ tag && ( #{tag} @@ -143,7 +170,12 @@ export const Item: React.FunctionComponent = ({ return (
  • )}
    diff --git a/src/dashboardWebView/components/Header/Header.tsx b/src/dashboardWebView/components/Header/Header.tsx index 02f86c69..ad686abf 100644 --- a/src/dashboardWebView/components/Header/Header.tsx +++ b/src/dashboardWebView/components/Header/Header.tsx @@ -27,6 +27,7 @@ import { Pagination } from './Pagination'; import { GroupOption } from '../../constants/GroupOption'; import usePagination from '../../hooks/usePagination'; import { PaginationStatus } from './PaginationStatus'; +import useThemeColors from '../../hooks/useThemeColors'; export interface IHeaderProps { header?: React.ReactNode; @@ -51,6 +52,7 @@ export const Header: React.FunctionComponent = ({ const location = useLocation(); const navigate = useNavigate(); const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination); + const { getColors } = useThemeColors(); const createContent = () => { Messenger.send(DashboardMessage.createContent); @@ -139,8 +141,12 @@ export const Header: React.FunctionComponent = ({ }, [location.search]); return ( -
    -
    +
    +
    @@ -163,7 +169,9 @@ export const Header: React.FunctionComponent = ({
    -
    +
    @@ -174,7 +182,9 @@ export const Header: React.FunctionComponent = ({
    @@ -203,7 +213,9 @@ export const Header: React.FunctionComponent = ({ (totalPages || 0) > pageSetNr && (!grouping || grouping === GroupOption.none) && (
    diff --git a/src/dashboardWebView/components/Header/Pagination.tsx b/src/dashboardWebView/components/Header/Pagination.tsx index 10e6916e..48646a54 100644 --- a/src/dashboardWebView/components/Header/Pagination.tsx +++ b/src/dashboardWebView/components/Header/Pagination.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { useCallback, useEffect, useMemo } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; import usePagination from '../../hooks/usePagination'; +import useThemeColors from '../../hooks/useThemeColors'; import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state'; import { PaginationButton } from './PaginationButton'; @@ -20,6 +21,7 @@ export const Pagination: React.FunctionComponent = ({ totalPages, totalMedia ); + const { getColors } = useThemeColors(); const getButtons = useCallback((): number[] => { const maxButtons = 5; @@ -27,7 +29,7 @@ export const Pagination: React.FunctionComponent = ({ const start = page - maxButtons; const end = page + maxButtons; - for (let i = start; i <= end; i++) { + for (let i = start; i < end; i++) { if (i >= 0 && i <= totalPagesNr) { buttons.push(i); } @@ -72,11 +74,14 @@ export const Pagination: React.FunctionComponent = ({ onClick={() => { setPage(button); }} - className={`${ + className={`max-h-8 rounded ${ page === button - ? 'bg-gray-200 px-2 text-vulcan-500' - : 'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500' - } max-h-8 rounded-sm`} + ? `px-2 ${getColors('bg-gray-200 text-vulcan-500', 'bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]')}` + : getColors( + `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`, + `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]` + ) + }`} > {button + 1} diff --git a/src/dashboardWebView/components/Header/PaginationButton.tsx b/src/dashboardWebView/components/Header/PaginationButton.tsx index f44594cc..6b04da77 100644 --- a/src/dashboardWebView/components/Header/PaginationButton.tsx +++ b/src/dashboardWebView/components/Header/PaginationButton.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import useThemeColors from '../../hooks/useThemeColors'; export interface IPaginationButtonProps { title: string; @@ -11,11 +12,18 @@ export const PaginationButton: React.FunctionComponent = disabled, onClick }: React.PropsWithChildren) => { + const { getColors } = useThemeColors(); + return ( diff --git a/src/dashboardWebView/components/Header/Searchbox.tsx b/src/dashboardWebView/components/Header/Searchbox.tsx index d4c8dfb6..a188006a 100644 --- a/src/dashboardWebView/components/Header/Searchbox.tsx +++ b/src/dashboardWebView/components/Header/Searchbox.tsx @@ -2,6 +2,7 @@ import { SearchIcon, XCircleIcon } from '@heroicons/react/solid'; import * as React from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; import { useDebounce } from '../../../hooks/useDebounce'; +import useThemeColors from '../../hooks/useThemeColors'; import { SearchAtom, SearchReadyAtom } from '../../state'; import { RefreshDashboardData } from './RefreshDashboardData'; @@ -16,6 +17,7 @@ export const Searchbox: React.FunctionComponent = ({ const [debounceSearchValue, setDebounceValue] = useRecoilState(SearchAtom); const searchReady = useRecoilValue(SearchReadyAtom); const debounceSearch = useDebounce(value, 500); + const { getColors } = useThemeColors(); const handleChange = (event: React.ChangeEvent) => { setValue(event.target.value); @@ -44,13 +46,18 @@ export const Searchbox: React.FunctionComponent = ({
    -
    = ({ {value && ( )}
    diff --git a/src/dashboardWebView/components/Header/SyncButton.tsx b/src/dashboardWebView/components/Header/SyncButton.tsx index 253f0582..38915c1c 100644 --- a/src/dashboardWebView/components/Header/SyncButton.tsx +++ b/src/dashboardWebView/components/Header/SyncButton.tsx @@ -5,6 +5,7 @@ import * as React from 'react'; import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { GeneralCommands } from '../../../constants'; +import useThemeColors from '../../hooks/useThemeColors'; import { SettingsSelector } from '../../state'; export interface ISyncButtonProps {} @@ -14,6 +15,7 @@ export const SyncButton: React.FunctionComponent = ( ) => { const settings = useRecoilValue(SettingsSelector); const [isSyncing, setIsSyncing] = useState(false); + const { getColors } = useThemeColors(); const pull = () => { Messenger.send(GeneralCommands.toVSCode.gitSync); @@ -45,7 +47,12 @@ export const SyncButton: React.FunctionComponent = (
    {hasViewData && (
    = ({ >
    -
    +
    @@ -612,31 +636,31 @@ export const Item: React.FunctionComponent = ({
    -

    +

    {basename(parseWinPath(media.fsPath) || '')}

    {!isImageFile && media.title && ( -

    +

    Title: - {media.title} + {media.title}

    )} {media.caption && ( -

    +

    Caption: - {media.caption} + {media.caption}

    )} {!media.caption && media.alt && ( -

    +

    Alt: - {media.alt} + {media.alt}

    )} {(media?.size || media?.dimensions) && ( -

    +

    Size: - + {getMediaDetails()}

    @@ -655,7 +679,12 @@ export const Item: React.FunctionComponent = ({ {mediaSnippets.map((snippet, idx) => (
  • diff --git a/src/dashboardWebView/components/Menu/MenuItems.tsx b/src/dashboardWebView/components/Menu/MenuItems.tsx index b3bfcfca..d01be24c 100644 --- a/src/dashboardWebView/components/Menu/MenuItems.tsx +++ b/src/dashboardWebView/components/Menu/MenuItems.tsx @@ -1,6 +1,7 @@ import { Menu, Transition } from '@headlessui/react'; import * as React from 'react'; import { Fragment } from 'react'; +import useThemeColors from '../../hooks/useThemeColors'; export interface IMenuItemsProps { widthClass?: string; @@ -16,6 +17,8 @@ export const MenuItems: React.FunctionComponent = ({ updatePopper, disablePopper }: React.PropsWithChildren) => { + const { getColors } = useThemeColors(); + return ( = ({
    {children}
     diff --git a/src/dashboardWebView/components/Modals/Alert.tsx b/src/dashboardWebView/components/Modals/Alert.tsx index 5222627c..acf890d4 100644 --- a/src/dashboardWebView/components/Modals/Alert.tsx +++ b/src/dashboardWebView/components/Modals/Alert.tsx @@ -2,6 +2,7 @@ import { Dialog, Transition } from '@headlessui/react'; import { ExclamationIcon } from '@heroicons/react/outline'; import * as React from 'react'; import { Fragment, useRef } from 'react'; +import useThemeColors from '../../hooks/useThemeColors'; export interface IAlertProps { title: string; @@ -22,6 +23,7 @@ export const Alert: React.FunctionComponent = ({ trigger }: React.PropsWithChildren) => { const cancelButtonRef = useRef(null); + const { getColors } = useThemeColors(); return ( @@ -40,7 +42,7 @@ export const Alert: React.FunctionComponent = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > - + {/* This element is to trick the browser into centering the modal contents. */} @@ -57,37 +59,59 @@ export const Alert: React.FunctionComponent = ({ leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > -
    +
    -
    +
    {title}
    -

    {description}

    +

    {description}

    + ) +}; + export const Navigation: React.FunctionComponent = ({ totalPages }: React.PropsWithChildren) => { @@ -24,49 +61,34 @@ export const Navigation: React.FunctionComponent = ({