Keep collapsible state

This commit is contained in:
Elio Struyf
2022-02-12 10:03:40 +01:00
parent 1d5f940c94
commit a31bca73e7
7 changed files with 97 additions and 168 deletions
+1
View File
@@ -9,6 +9,7 @@
### 🎨 Enhancements
- Updated the activity bar icon for better visibility
- Storing the panel collapse section states
### ⚡️ Optimizations
+66 -159
View File
@@ -36,7 +36,7 @@
"@types/vscode": "^1.63.0",
"@vscode/codicons": "0.0.20",
"@vscode/extension-telemetry": "^0.4.7",
"@vscode/webview-ui-toolkit": "^0.8.1",
"@vscode/webview-ui-toolkit": "^0.9.1",
"@webpack-cli/serve": "^1.6.0",
"ajv": "^8.8.2",
"array-move": "^4.0.0",
@@ -249,82 +249,45 @@
"dev": true
},
"node_modules/@microsoft/fast-element": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.6.0.tgz",
"integrity": "sha512-ePTcBuCA99n7He0BYLIzFr5YOHYPSiBLJeDbDsyyQ5JUs4oXaZD0v54Pq0GAtSZuagnCGTDqcxEcBPUhTqLmQw==",
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.7.0.tgz",
"integrity": "sha512-2qpAWuiOSdQfH/XdO8ZtVhlvQVCjHlojWUPoGbvHJDizBccZib+4uGReG87RIBp2Fi0s7ngYPRUioS1Lr+Xe0A==",
"dev": true
},
"node_modules/@microsoft/fast-foundation": {
"version": "1.24.8",
"resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-1.24.8.tgz",
"integrity": "sha512-n4O9jPh8BBliF/Yl9FAVhrSoopsRCnva2L432s/fHwLelY9WUeswjO3DidVBFbzXD5u/gzC4LGWJScNe/ZGU4Q==",
"version": "2.33.2",
"resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.33.2.tgz",
"integrity": "sha512-wTVo8u1eG9zUYSGDNPl4R+Yo9MTVJe7LvyI8sOqKmdggsbnYzhEa8wN0uBCnqo7W61nyhRL5FqPSh6WZGT5hUQ==",
"dev": true,
"dependencies": {
"@microsoft/fast-element": "^1.4.0",
"@microsoft/fast-web-utilities": "^4.8.0",
"@microsoft/tsdoc-config": "^0.13.4",
"@microsoft/fast-element": "^1.7.0",
"@microsoft/fast-web-utilities": "^5.1.0",
"tabbable": "^5.2.0",
"tslib": "^1.13.0"
}
},
"node_modules/@microsoft/fast-foundation/node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"dev": true
"node_modules/@microsoft/fast-react-wrapper": {
"version": "0.1.29",
"resolved": "https://registry.npmjs.org/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.1.29.tgz",
"integrity": "sha512-x8y/1qaKTv/UWPsLj3hyK1teSLLCSuKTctMzqBoWSoq5VfEVypm7fNGoHG4mi4AE8fIt865+R7I+QfYARYp5fQ==",
"dev": true,
"dependencies": {
"@microsoft/fast-element": "^1.7.0",
"@microsoft/fast-foundation": "^2.33.2"
},
"peerDependencies": {
"react": ">=16.9.0"
}
},
"node_modules/@microsoft/fast-web-utilities": {
"version": "4.8.1",
"resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-4.8.1.tgz",
"integrity": "sha512-P3xeyUwQ9nPkFrgAdmkOzaXxIq8YqMU5K+LXcoHgJddJCBCKfGWW9OZQOTigLddItTyVyfO8qsJpDQb1TskKHA==",
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.1.0.tgz",
"integrity": "sha512-S2PCxI4XqtIxLM1N7i/NuIAgx+mJM01+mDzyB3vZlYibAkOT0bzp5YZCp+coXowokSin/nK5T2kqShMXEzI6Jg==",
"dev": true,
"dependencies": {
"exenv-es6": "^1.0.0"
},
"peerDependencies": {
"lodash-es": "^4.17.10"
}
},
"node_modules/@microsoft/tsdoc": {
"version": "0.12.24",
"resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz",
"integrity": "sha512-Mfmij13RUTmHEMi9vRUhMXD7rnGR2VvxeNYtaGtaJ4redwwjT4UXYJ+nzmVJF7hhd4pn/Fx5sncDKxMVFJSWPg==",
"dev": true
},
"node_modules/@microsoft/tsdoc-config": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.13.9.tgz",
"integrity": "sha512-VqqZn+rT9f6XujFPFR2aN9XKF/fuir/IzKVzoxI0vXIzxysp4ee6S2jCakmlGFHEasibifFTsJr7IYmRPxfzYw==",
"dev": true,
"dependencies": {
"@microsoft/tsdoc": "0.12.24",
"ajv": "~6.12.6",
"jju": "~1.4.0",
"resolve": "~1.19.0"
}
},
"node_modules/@microsoft/tsdoc-config/node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"dev": true,
"dependencies": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/@microsoft/tsdoc-config/node_modules/json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -944,13 +907,17 @@
}
},
"node_modules/@vscode/webview-ui-toolkit": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-0.8.1.tgz",
"integrity": "sha512-SOgeaZ+/6yFDXLsgH+JvKcs4E0ThvuohNhkr9mvnggjl+OfFxc+Yqkyf5B4B5kuu3EppOCzEMiUwPC8APuLEGQ==",
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-0.9.1.tgz",
"integrity": "sha512-nCy9r2PpoLJW9Ie3T6V8zGUAYY1eL/K42eGVYYjwm5ogdYC3OynuiOf7tDBIgzJECRJlJvgVCPZ5S4ky1sjIGg==",
"dev": true,
"dependencies": {
"@microsoft/fast-element": "^1.2.0",
"@microsoft/fast-foundation": "^1.24.7"
"@microsoft/fast-element": "^1.6.2",
"@microsoft/fast-foundation": "^2.33.1",
"@microsoft/fast-react-wrapper": "^0.1.18"
},
"peerDependencies": {
"react": ">=16.9.0"
}
},
"node_modules/@webassemblyjs/ast": {
@@ -5009,12 +4976,6 @@
"url": "https://github.com/chalk/supports-color?sponsor=1"
}
},
"node_modules/jju": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
"integrity": "sha1-o6vicYryQaKykE+EpiWXDzia4yo=",
"dev": true
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8381,9 +8342,9 @@
}
},
"node_modules/tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"dev": true
},
"node_modules/tslint": {
@@ -8426,12 +8387,6 @@
"node": ">=0.3.1"
}
},
"node_modules/tslint/node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"dev": true
},
"node_modules/tsutils": {
"version": "2.29.0",
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
@@ -9384,79 +9339,42 @@
"dev": true
},
"@microsoft/fast-element": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.6.0.tgz",
"integrity": "sha512-ePTcBuCA99n7He0BYLIzFr5YOHYPSiBLJeDbDsyyQ5JUs4oXaZD0v54Pq0GAtSZuagnCGTDqcxEcBPUhTqLmQw==",
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.7.0.tgz",
"integrity": "sha512-2qpAWuiOSdQfH/XdO8ZtVhlvQVCjHlojWUPoGbvHJDizBccZib+4uGReG87RIBp2Fi0s7ngYPRUioS1Lr+Xe0A==",
"dev": true
},
"@microsoft/fast-foundation": {
"version": "1.24.8",
"resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-1.24.8.tgz",
"integrity": "sha512-n4O9jPh8BBliF/Yl9FAVhrSoopsRCnva2L432s/fHwLelY9WUeswjO3DidVBFbzXD5u/gzC4LGWJScNe/ZGU4Q==",
"version": "2.33.2",
"resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.33.2.tgz",
"integrity": "sha512-wTVo8u1eG9zUYSGDNPl4R+Yo9MTVJe7LvyI8sOqKmdggsbnYzhEa8wN0uBCnqo7W61nyhRL5FqPSh6WZGT5hUQ==",
"dev": true,
"requires": {
"@microsoft/fast-element": "^1.4.0",
"@microsoft/fast-web-utilities": "^4.8.0",
"@microsoft/tsdoc-config": "^0.13.4",
"@microsoft/fast-element": "^1.7.0",
"@microsoft/fast-web-utilities": "^5.1.0",
"tabbable": "^5.2.0",
"tslib": "^1.13.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"dev": true
}
}
},
"@microsoft/fast-react-wrapper": {
"version": "0.1.29",
"resolved": "https://registry.npmjs.org/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.1.29.tgz",
"integrity": "sha512-x8y/1qaKTv/UWPsLj3hyK1teSLLCSuKTctMzqBoWSoq5VfEVypm7fNGoHG4mi4AE8fIt865+R7I+QfYARYp5fQ==",
"dev": true,
"requires": {
"@microsoft/fast-element": "^1.7.0",
"@microsoft/fast-foundation": "^2.33.2"
}
},
"@microsoft/fast-web-utilities": {
"version": "4.8.1",
"resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-4.8.1.tgz",
"integrity": "sha512-P3xeyUwQ9nPkFrgAdmkOzaXxIq8YqMU5K+LXcoHgJddJCBCKfGWW9OZQOTigLddItTyVyfO8qsJpDQb1TskKHA==",
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.1.0.tgz",
"integrity": "sha512-S2PCxI4XqtIxLM1N7i/NuIAgx+mJM01+mDzyB3vZlYibAkOT0bzp5YZCp+coXowokSin/nK5T2kqShMXEzI6Jg==",
"dev": true,
"requires": {
"exenv-es6": "^1.0.0"
}
},
"@microsoft/tsdoc": {
"version": "0.12.24",
"resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz",
"integrity": "sha512-Mfmij13RUTmHEMi9vRUhMXD7rnGR2VvxeNYtaGtaJ4redwwjT4UXYJ+nzmVJF7hhd4pn/Fx5sncDKxMVFJSWPg==",
"dev": true
},
"@microsoft/tsdoc-config": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.13.9.tgz",
"integrity": "sha512-VqqZn+rT9f6XujFPFR2aN9XKF/fuir/IzKVzoxI0vXIzxysp4ee6S2jCakmlGFHEasibifFTsJr7IYmRPxfzYw==",
"dev": true,
"requires": {
"@microsoft/tsdoc": "0.12.24",
"ajv": "~6.12.6",
"jju": "~1.4.0",
"resolve": "~1.19.0"
},
"dependencies": {
"ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"dev": true,
"requires": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true
}
}
},
"@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -10019,13 +9937,14 @@
"dev": true
},
"@vscode/webview-ui-toolkit": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-0.8.1.tgz",
"integrity": "sha512-SOgeaZ+/6yFDXLsgH+JvKcs4E0ThvuohNhkr9mvnggjl+OfFxc+Yqkyf5B4B5kuu3EppOCzEMiUwPC8APuLEGQ==",
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-0.9.1.tgz",
"integrity": "sha512-nCy9r2PpoLJW9Ie3T6V8zGUAYY1eL/K42eGVYYjwm5ogdYC3OynuiOf7tDBIgzJECRJlJvgVCPZ5S4ky1sjIGg==",
"dev": true,
"requires": {
"@microsoft/fast-element": "^1.2.0",
"@microsoft/fast-foundation": "^1.24.7"
"@microsoft/fast-element": "^1.6.2",
"@microsoft/fast-foundation": "^2.33.1",
"@microsoft/fast-react-wrapper": "^0.1.18"
}
},
"@webassemblyjs/ast": {
@@ -13154,12 +13073,6 @@
}
}
},
"jju": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
"integrity": "sha1-o6vicYryQaKykE+EpiWXDzia4yo=",
"dev": true
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -15625,9 +15538,9 @@
}
},
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"dev": true
},
"tslint": {
@@ -15656,12 +15569,6 @@
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
"dev": true
},
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"dev": true
}
}
},
+1 -1
View File
@@ -1441,7 +1441,7 @@
"@types/vscode": "^1.63.0",
"@vscode/codicons": "0.0.20",
"@vscode/extension-telemetry": "^0.4.7",
"@vscode/webview-ui-toolkit": "^0.8.1",
"@vscode/webview-ui-toolkit": "^0.9.1",
"@webpack-cli/serve": "^1.6.0",
"ajv": "^8.8.2",
"array-move": "^4.0.0",
+18 -3
View File
@@ -14,15 +14,30 @@ export class MessageHelper {
private static vscode: ClientVsCode<any>;
public static getVsCodeAPI() {
MessageHelper.vscode = acquireVsCodeApi();
if (!MessageHelper.vscode) {
MessageHelper.vscode = acquireVsCodeApi();
}
return MessageHelper.vscode;
}
public static sendMessage = (command: CommandToCode | DashboardMessage, data?: any) => {
const vscode = MessageHelper.getVsCodeAPI();
if (data) {
MessageHelper.vscode.postMessage({ command, data });
vscode.postMessage({ command, data });
} else {
MessageHelper.vscode.postMessage({ command });
vscode.postMessage({ command });
}
}
public static getState = () => {
const vscode = MessageHelper.getVsCodeAPI();
return vscode.getState();
}
public static setState = (data: any) => {
const vscode = MessageHelper.getVsCodeAPI();
vscode.setState({
...data
});
}
}
+1 -1
View File
@@ -37,7 +37,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
}
return (
<div className="frontmatter">
<div className="frontmatter">
<div className={`ext_actions`}>
<GlobalSettings settings={settings} />
+9 -3
View File
@@ -1,5 +1,6 @@
import * as React from 'react';
import { useEffect } from 'react';
import { MessageHelper } from '../../helpers/MessageHelper';
import { Command } from '../Command';
import { VsCollapsible } from './VscodeComponents';
@@ -15,8 +16,9 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children,
const collapseKey = `collapse-${id}`;
useEffect(() => {
const collapsed = window.localStorage.getItem(collapseKey);
if (collapsed === null || collapsed === 'true') {
const prevState = MessageHelper.getState();
console.log('prevState', prevState);
if (!prevState || !prevState[collapseKey] || prevState[collapseKey] === null || prevState[collapseKey] === 'true') {
setIsOpen(true);
updateStorage(true);
}
@@ -31,7 +33,11 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children,
}, ['']);
const updateStorage = (value: boolean) => {
window.localStorage.setItem(collapseKey, value.toString());
const prevState = MessageHelper.getState();
MessageHelper.setState({
...prevState,
[collapseKey]: value.toString()
});
}
// This is a work around for a lit-element issue of duplicate slot names
+1 -1
View File
@@ -15,7 +15,7 @@ import '@bendera/vscode-webview-elements/dist/vscode-table-row.js';
import '@bendera/vscode-webview-elements/dist/vscode-table-cell.js';
import '@bendera/vscode-webview-elements/dist/vscode-collapsible.js';
import '@bendera/vscode-webview-elements/dist/vscode-label.js';
import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
// import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
// import '@vscode/webview-ui-toolkit/dist/esm/checkbox';