Kelvin Schoofs
6 years ago
parent
cc1eef5dff
commit
07ec617bc4
@ -1,31 +1,48 @@
|
|||||||
|
|
||||||
import * as fs from 'fs';
|
import * as fs from 'fs';
|
||||||
import * as path from 'path';
|
import * as path from 'path';
|
||||||
|
import * as request from 'request';
|
||||||
import * as vscode from 'vscode';
|
import * as vscode from 'vscode';
|
||||||
import { loadConfigs } from './config';
|
import { loadConfigs } from './config';
|
||||||
|
import { Message } from './webviewMessages';
|
||||||
|
|
||||||
let webviewPanel: vscode.WebviewPanel | undefined;
|
let webviewPanel: vscode.WebviewPanel | undefined;
|
||||||
|
|
||||||
|
const DEBUG: number | undefined = 3000;
|
||||||
|
|
||||||
export function open(extensionPath: string) {
|
export function open(extensionPath: string) {
|
||||||
if (!webviewPanel) {
|
if (!webviewPanel) {
|
||||||
webviewPanel = vscode.window.createWebviewPanel('sshfs-settings', 'SSH-FS Settings', vscode.ViewColumn.One, { enableScripts: true });
|
webviewPanel = vscode.window.createWebviewPanel('sshfs-settings', 'SSH-FS Settings', vscode.ViewColumn.One, { enableScripts: true });
|
||||||
webviewPanel.onDidDispose(() => webviewPanel = undefined);
|
webviewPanel.onDidDispose(() => webviewPanel = undefined);
|
||||||
webviewPanel.webview.onDidReceiveMessage(handleMessage);
|
webviewPanel.webview.onDidReceiveMessage(handleMessage);
|
||||||
|
if (DEBUG) {
|
||||||
|
// webviewPanel.webview.html = `<html><head><script>document.location="http://localhost:${DEBUG}/"</script></head></html>`;
|
||||||
|
const URL = `http://localhost:${DEBUG}/`;
|
||||||
|
request.get(URL, (err, res, body) => {
|
||||||
|
body = body.replace(/\/static\/js\/bundle\.js/, `http://localhost:${DEBUG}/static/js/bundle.js`);
|
||||||
|
webviewPanel!.webview.html = body; // `<html><head><title>Test</title></head><body>Testing</body></html>`;// body
|
||||||
|
});
|
||||||
|
} else {
|
||||||
const content = fs.readFileSync(path.resolve(extensionPath, 'resources/settings.html')).toString();
|
const content = fs.readFileSync(path.resolve(extensionPath, 'resources/settings.html')).toString();
|
||||||
webviewPanel.webview.html = content.replace(/\$ROOT/g, vscode.Uri.file(path.join(extensionPath, 'resources')).with({ scheme: 'vscode-resource' }).toString());
|
webviewPanel.webview.html = content.replace(/\$ROOT/g, vscode.Uri.file(path.join(extensionPath, 'resources')).with({ scheme: 'vscode-resource' }).toString());
|
||||||
}
|
}
|
||||||
|
}
|
||||||
webviewPanel.reveal();
|
webviewPanel.reveal();
|
||||||
}
|
}
|
||||||
|
|
||||||
interface RequestDataMessage {
|
function postMessage(message: Message) {
|
||||||
type: 'requestData';
|
if (!webviewPanel) return;
|
||||||
|
webviewPanel.webview.postMessage(message);
|
||||||
}
|
}
|
||||||
type Message = { type: 'requestData' } | RequestDataMessage;
|
|
||||||
|
|
||||||
async function handleMessage(message: Message): Promise<any> {
|
async function handleMessage(message: Message): Promise<any> {
|
||||||
|
console.log('Got message:', message);
|
||||||
switch (message.type) {
|
switch (message.type) {
|
||||||
case 'requestData': {
|
case 'requestData': {
|
||||||
return webviewPanel!.webview.postMessage(await loadConfigs());
|
return postMessage({
|
||||||
|
type: 'responseData',
|
||||||
|
configs: await loadConfigs(),
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { FileSystemConfig } from './fileSystemConfig';
|
||||||
|
|
||||||
|
export interface RequestDataMessage {
|
||||||
|
type: 'requestData';
|
||||||
|
}
|
||||||
|
export interface ResponseDataMessage {
|
||||||
|
type: 'responseData';
|
||||||
|
configs: FileSystemConfig[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MessageTypes {
|
||||||
|
requestData: RequestDataMessage;
|
||||||
|
responseData: ResponseDataMessage;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Message = MessageTypes[keyof MessageTypes];
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "webview",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^16.8.3",
|
||||||
|
"react-dom": "^16.8.3",
|
||||||
|
"react-redux": "^6.0.1",
|
||||||
|
"react-scripts-ts": "3.1.0",
|
||||||
|
"redux": "^4.0.1"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts-ts start",
|
||||||
|
"build": "react-scripts-ts build",
|
||||||
|
"test": "react-scripts-ts test --env=jsdom",
|
||||||
|
"eject": "react-scripts-ts eject"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/jest": "^24.0.6",
|
||||||
|
"@types/node": "^11.9.5",
|
||||||
|
"@types/react": "^16.8.4",
|
||||||
|
"@types/react-dom": "^16.8.2",
|
||||||
|
"@types/react-redux": "^7.0.1",
|
||||||
|
"typescript": "^3.3.3333"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,40 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is added to the
|
||||||
|
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
You need to enable JavaScript to run this app.
|
||||||
|
</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "./index.html",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { FileSystemConfig } from 'src/types';
|
||||||
|
|
||||||
|
export enum ActionType {
|
||||||
|
RECEIVED_CONFIGS = 'RECEIVED_CONFIGS',
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IAction {
|
||||||
|
type: ActionType;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Action = IActionReceivedConfigs
|
||||||
|
|
||||||
|
export interface IActionReceivedConfigs extends IAction {
|
||||||
|
configs: FileSystemConfig[];
|
||||||
|
}
|
||||||
|
export function receivedConfigs(configs: FileSystemConfig[]): IActionReceivedConfigs {
|
||||||
|
return { configs, type: ActionType.RECEIVED_CONFIGS };
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
|
||||||
|
import { createStore } from 'redux';
|
||||||
|
import { addListener } from 'src/vscode';
|
||||||
|
import * as actions from './actions';
|
||||||
|
import reducer from './reducers';
|
||||||
|
|
||||||
|
export const STORE = createStore(reducer)
|
||||||
|
|
||||||
|
addListener((msg) => STORE.dispatch(actions.receivedConfigs(msg.configs)), 'responseData');
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { Action, ActionType } from './actions';
|
||||||
|
import { DEFAULT_STATE, IState } from './state';
|
||||||
|
|
||||||
|
export function reducer(state = DEFAULT_STATE, action: Action): IState {
|
||||||
|
switch (action.type) {
|
||||||
|
case ActionType.RECEIVED_CONFIGS: {
|
||||||
|
return { ...state, configs: action.configs };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
throw new Error(`Unhandled action type: ${action.type}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default reducer;
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
import { FileSystemConfig } from '../../../src/fileSystemConfig';
|
||||||
|
|
||||||
|
export interface IState {
|
||||||
|
configs: FileSystemConfig[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DEFAULT_STATE: IState = {
|
||||||
|
configs: [],
|
||||||
|
}
|
||||||
@ -0,0 +1,316 @@
|
|||||||
|
|
||||||
|
:root {
|
||||||
|
--background-color: #1e1e1e;
|
||||||
|
--color: #d4d4d4;
|
||||||
|
--font-family: "Segoe WPC", "Segoe UI", sans-serif;
|
||||||
|
--font-size: 13px;
|
||||||
|
--font-weight: 400;
|
||||||
|
--link-active-color: #3794ff;
|
||||||
|
--link-color: #3794ff;
|
||||||
|
--vscode-activityBar-background: #333333;
|
||||||
|
--vscode-activityBar-dropBackground: rgba(255, 255, 255, 0.12);
|
||||||
|
--vscode-activityBar-foreground: #ffffff;
|
||||||
|
--vscode-activityBar-inactiveForeground: rgba(255, 255, 255, 0.6);
|
||||||
|
--vscode-activityBarBadge-background: #007acc;
|
||||||
|
--vscode-activityBarBadge-foreground: #ffffff;
|
||||||
|
--vscode-badge-background: #4d4d4d;
|
||||||
|
--vscode-badge-foreground: #ffffff;
|
||||||
|
--vscode-breadcrumb-activeSelectionForeground: #e0e0e0;
|
||||||
|
--vscode-breadcrumb-background: #1e1e1e;
|
||||||
|
--vscode-breadcrumb-focusForeground: #e0e0e0;
|
||||||
|
--vscode-breadcrumb-foreground: rgba(204, 204, 204, 0.8);
|
||||||
|
--vscode-breadcrumbPicker-background: #252526;
|
||||||
|
--vscode-button-background: #0e639c;
|
||||||
|
--vscode-button-foreground: #ffffff;
|
||||||
|
--vscode-button-hoverBackground: #1177bb;
|
||||||
|
--vscode-debugExceptionWidget-background: #420b0d;
|
||||||
|
--vscode-debugExceptionWidget-border: #a31515;
|
||||||
|
--vscode-debugToolBar-background: #333333;
|
||||||
|
--vscode-descriptionForeground: rgba(204, 204, 204, 0.7);
|
||||||
|
--vscode-diffEditor-insertedTextBackground: rgba(155, 185, 85, 0.2);
|
||||||
|
--vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2);
|
||||||
|
--vscode-dropdown-background: #3c3c3c;
|
||||||
|
--vscode-dropdown-border: #3c3c3c;
|
||||||
|
--vscode-dropdown-foreground: #f0f0f0;
|
||||||
|
--vscode-editor-background: #1e1e1e;
|
||||||
|
--vscode-editor-findMatchBackground: #515c6a;
|
||||||
|
--vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
|
||||||
|
--vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);
|
||||||
|
--vscode-editor-focusedStackFrameHighlightBackground: rgba(122, 189, 122, 0.3);
|
||||||
|
--vscode-editor-font-family: "Segoe WPC", "Segoe UI", sans-serif;
|
||||||
|
--vscode-editor-font-size: 13px;
|
||||||
|
--vscode-editor-font-weight: 400;
|
||||||
|
--vscode-editor-foreground: #d4d4d4;
|
||||||
|
--vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
|
||||||
|
--vscode-editor-inactiveSelectionBackground: #3a3d41;
|
||||||
|
--vscode-editor-lineHighlightBorder: #282828;
|
||||||
|
--vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);
|
||||||
|
--vscode-editor-selectionBackground: #264f78;
|
||||||
|
--vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, 0.15);
|
||||||
|
--vscode-editor-snippetFinalTabstopHighlightBorder: #525252;
|
||||||
|
--vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);
|
||||||
|
--vscode-editor-stackFrameHighlightBackground: rgba(255, 255, 0, 0.2);
|
||||||
|
--vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.72);
|
||||||
|
--vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, 0.72);
|
||||||
|
--vscode-editorActiveLineNumber-foreground: #c6c6c6;
|
||||||
|
--vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
|
||||||
|
--vscode-editorBracketMatch-border: #888888;
|
||||||
|
--vscode-editorCodeLens-foreground: #999999;
|
||||||
|
--vscode-editorCursor-foreground: #aeafad;
|
||||||
|
--vscode-editorError-foreground: #ea4646;
|
||||||
|
--vscode-editorGroup-border: #444444;
|
||||||
|
--vscode-editorGroup-dropBackground: rgba(83, 89, 93, 0.5);
|
||||||
|
--vscode-editorGroupHeader-noTabsBackground: #1e1e1e;
|
||||||
|
--vscode-editorGroupHeader-tabsBackground: #252526;
|
||||||
|
--vscode-editorGutter-addedBackground: #587c0c;
|
||||||
|
--vscode-editorGutter-background: #1e1e1e;
|
||||||
|
--vscode-editorGutter-commentRangeForeground: #c5c5c5;
|
||||||
|
--vscode-editorGutter-deletedBackground: #94151b;
|
||||||
|
--vscode-editorGutter-modifiedBackground: #0c7d9d;
|
||||||
|
--vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
|
||||||
|
--vscode-editorHoverWidget-background: #252526;
|
||||||
|
--vscode-editorHoverWidget-border: #454545;
|
||||||
|
--vscode-editorIndentGuide-activeBackground: #707070;
|
||||||
|
--vscode-editorIndentGuide-background: #404040;
|
||||||
|
--vscode-editorInfo-foreground: #008000;
|
||||||
|
--vscode-editorLineNumber-activeForeground: #c6c6c6;
|
||||||
|
--vscode-editorLineNumber-foreground: #858585;
|
||||||
|
--vscode-editorLink-activeForeground: #4e94ce;
|
||||||
|
--vscode-editorMarkerNavigation-background: #2d2d30;
|
||||||
|
--vscode-editorMarkerNavigationError-background: #ea4646;
|
||||||
|
--vscode-editorMarkerNavigationInfo-background: #008000;
|
||||||
|
--vscode-editorMarkerNavigationWarning-background: #4d9e4d;
|
||||||
|
--vscode-editorOverviewRuler-addedForeground: rgba(0, 122, 204, 0.6);
|
||||||
|
--vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
|
||||||
|
--vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
|
||||||
|
--vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
|
||||||
|
--vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
|
||||||
|
--vscode-editorOverviewRuler-deletedForeground: rgba(0, 122, 204, 0.6);
|
||||||
|
--vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
|
||||||
|
--vscode-editorOverviewRuler-findMatchForeground: rgba(246, 185, 77, 0.7);
|
||||||
|
--vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
|
||||||
|
--vscode-editorOverviewRuler-infoForeground: rgba(18, 18, 136, 0.7);
|
||||||
|
--vscode-editorOverviewRuler-modifiedForeground: rgba(0, 122, 204, 0.6);
|
||||||
|
--vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
|
||||||
|
--vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
|
||||||
|
--vscode-editorOverviewRuler-warningForeground: rgba(18, 136, 18, 0.7);
|
||||||
|
--vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
|
||||||
|
--vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
|
||||||
|
--vscode-editorPane-background: #1e1e1e;
|
||||||
|
--vscode-editorRuler-foreground: #5a5a5a;
|
||||||
|
--vscode-editorSuggestWidget-background: #252526;
|
||||||
|
--vscode-editorSuggestWidget-border: #454545;
|
||||||
|
--vscode-editorSuggestWidget-foreground: #d4d4d4;
|
||||||
|
--vscode-editorSuggestWidget-highlightForeground: #0097fb;
|
||||||
|
--vscode-editorSuggestWidget-selectedBackground: #062f4a;
|
||||||
|
--vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
|
||||||
|
--vscode-editorWarning-foreground: #4d9e4d;
|
||||||
|
--vscode-editorWhitespace-foreground: rgba(227, 228, 226, 0.16);
|
||||||
|
--vscode-editorWidget-background: #252526;
|
||||||
|
--vscode-editorWidget-border: #454545;
|
||||||
|
--vscode-errorForeground: #f48771;
|
||||||
|
--vscode-extensionButton-prominentBackground: #327e36;
|
||||||
|
--vscode-extensionButton-prominentForeground: #ffffff;
|
||||||
|
--vscode-extensionButton-prominentHoverBackground: #28632b;
|
||||||
|
--vscode-focusBorder: rgba(14, 99, 156, 0.8);
|
||||||
|
--vscode-foreground: #cccccc;
|
||||||
|
--vscode-gitDecoration-addedResourceForeground: #81b88b;
|
||||||
|
--vscode-gitDecoration-conflictingResourceForeground: #6c6cc4;
|
||||||
|
--vscode-gitDecoration-deletedResourceForeground: #c74e39;
|
||||||
|
--vscode-gitDecoration-ignoredResourceForeground: #8c8c8c;
|
||||||
|
--vscode-gitDecoration-modifiedResourceForeground: #e2c08d;
|
||||||
|
--vscode-gitDecoration-submoduleResourceForeground: #8db9e2;
|
||||||
|
--vscode-gitDecoration-untrackedResourceForeground: #73c991;
|
||||||
|
--vscode-input-background: #3c3c3c;
|
||||||
|
--vscode-input-foreground: #cccccc;
|
||||||
|
--vscode-input-placeholderForeground: #a6a6a6;
|
||||||
|
--vscode-inputOption-activeBorder: #007acc;
|
||||||
|
--vscode-inputValidation-errorBackground: #5a1d1d;
|
||||||
|
--vscode-inputValidation-errorBorder: #be1100;
|
||||||
|
--vscode-inputValidation-infoBackground: #063b49;
|
||||||
|
--vscode-inputValidation-infoBorder: #007acc;
|
||||||
|
--vscode-inputValidation-warningBackground: #352a05;
|
||||||
|
--vscode-inputValidation-warningBorder: #b89500;
|
||||||
|
--vscode-list-activeSelectionBackground: #094771;
|
||||||
|
--vscode-list-activeSelectionForeground: #ffffff;
|
||||||
|
--vscode-list-dropBackground: #383b3d;
|
||||||
|
--vscode-list-errorForeground: #f88070;
|
||||||
|
--vscode-list-focusBackground: #062f4a;
|
||||||
|
--vscode-list-highlightForeground: #0097fb;
|
||||||
|
--vscode-list-hoverBackground: #2a2d2e;
|
||||||
|
--vscode-list-inactiveFocusBackground: #313135;
|
||||||
|
--vscode-list-inactiveSelectionBackground: #37373d;
|
||||||
|
--vscode-list-invalidItemForeground: #b89500;
|
||||||
|
--vscode-list-warningForeground: #4d9e4d;
|
||||||
|
--vscode-listFilterWidget-background: #653723;
|
||||||
|
--vscode-listFilterWidget-noMatchesOutline: #be1100;
|
||||||
|
--vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
|
||||||
|
--vscode-menu-background: #252526;
|
||||||
|
--vscode-menu-foreground: #cccccc;
|
||||||
|
--vscode-menu-selectionBackground: #094771;
|
||||||
|
--vscode-menu-selectionForeground: #ffffff;
|
||||||
|
--vscode-menu-separatorBackground: #bbbbbb;
|
||||||
|
--vscode-menubar-selectionBackground: rgba(255, 255, 255, 0.1);
|
||||||
|
--vscode-menubar-selectionForeground: #cccccc;
|
||||||
|
--vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
|
||||||
|
--vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
|
||||||
|
--vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
|
||||||
|
--vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
|
||||||
|
--vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
|
||||||
|
--vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
|
||||||
|
--vscode-notificationCenterHeader-background: #303031;
|
||||||
|
--vscode-notificationLink-foreground: #3794ff;
|
||||||
|
--vscode-notifications-background: #252526;
|
||||||
|
--vscode-notifications-border: #303031;
|
||||||
|
--vscode-panel-background: #1e1e1e;
|
||||||
|
--vscode-panel-border: rgba(128, 128, 128, 0.35);
|
||||||
|
--vscode-panel-dropBackground: rgba(255, 255, 255, 0.12);
|
||||||
|
--vscode-panelTitle-activeBorder: rgba(128, 128, 128, 0.35);
|
||||||
|
--vscode-panelTitle-activeForeground: #e7e7e7;
|
||||||
|
--vscode-panelTitle-inactiveForeground: rgba(231, 231, 231, 0.6);
|
||||||
|
--vscode-peekView-border: #007acc;
|
||||||
|
--vscode-peekViewEditor-background: #001f33;
|
||||||
|
--vscode-peekViewEditor-matchHighlightBackground: rgba(255, 143, 0, 0.6);
|
||||||
|
--vscode-peekViewEditorGutter-background: #001f33;
|
||||||
|
--vscode-peekViewResult-background: #252526;
|
||||||
|
--vscode-peekViewResult-fileForeground: #ffffff;
|
||||||
|
--vscode-peekViewResult-lineForeground: #bbbbbb;
|
||||||
|
--vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
|
||||||
|
--vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
|
||||||
|
--vscode-peekViewResult-selectionForeground: #ffffff;
|
||||||
|
--vscode-peekViewTitle-background: #1e1e1e;
|
||||||
|
--vscode-peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7);
|
||||||
|
--vscode-peekViewTitleLabel-foreground: #ffffff;
|
||||||
|
--vscode-pickerGroup-border: #3f3f46;
|
||||||
|
--vscode-pickerGroup-foreground: #3794ff;
|
||||||
|
--vscode-progressBar-background: #0e70c0;
|
||||||
|
--vscode-scrollbar-shadow: #000000;
|
||||||
|
--vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
|
||||||
|
--vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
|
||||||
|
--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
|
||||||
|
--vscode-settings-checkboxBackground: #3c3c3c;
|
||||||
|
--vscode-settings-checkboxBorder: #3c3c3c;
|
||||||
|
--vscode-settings-checkboxForeground: #f0f0f0;
|
||||||
|
--vscode-settings-dropdownBackground: #3c3c3c;
|
||||||
|
--vscode-settings-dropdownBorder: #3c3c3c;
|
||||||
|
--vscode-settings-dropdownForeground: #f0f0f0;
|
||||||
|
--vscode-settings-dropdownListBorder: #454545;
|
||||||
|
--vscode-settings-headerForeground: #e7e7e7;
|
||||||
|
--vscode-settings-modifiedItemIndicator: #0c7d9d;
|
||||||
|
--vscode-settings-numberInputBackground: #292929;
|
||||||
|
--vscode-settings-numberInputForeground: #cccccc;
|
||||||
|
--vscode-settings-textInputBackground: #292929;
|
||||||
|
--vscode-settings-textInputForeground: #cccccc;
|
||||||
|
--vscode-sideBar-background: #252526;
|
||||||
|
--vscode-sideBar-dropBackground: rgba(255, 255, 255, 0.12);
|
||||||
|
--vscode-sideBarSectionHeader-background: rgba(128, 128, 128, 0.2);
|
||||||
|
--vscode-sideBarTitle-foreground: #bbbbbb;
|
||||||
|
--vscode-statusBar-background: #007acc;
|
||||||
|
--vscode-statusBar-debuggingBackground: #cc6633;
|
||||||
|
--vscode-statusBar-debuggingForeground: #ffffff;
|
||||||
|
--vscode-statusBar-foreground: #ffffff;
|
||||||
|
--vscode-statusBar-noFolderBackground: #68217a;
|
||||||
|
--vscode-statusBar-noFolderForeground: #ffffff;
|
||||||
|
--vscode-statusBarItem-activeBackground: rgba(255, 255, 255, 0.18);
|
||||||
|
--vscode-statusBarItem-hostBackground: #388a34;
|
||||||
|
--vscode-statusBarItem-hoverBackground: rgba(255, 255, 255, 0.12);
|
||||||
|
--vscode-statusBarItem-prominentBackground: #388a34;
|
||||||
|
--vscode-statusBarItem-prominentHoverBackground: #369432;
|
||||||
|
--vscode-tab-activeBackground: #1e1e1e;
|
||||||
|
--vscode-tab-activeForeground: #ffffff;
|
||||||
|
--vscode-tab-activeModifiedBorder: #3399cc;
|
||||||
|
--vscode-tab-border: #252526;
|
||||||
|
--vscode-tab-inactiveBackground: #2d2d2d;
|
||||||
|
--vscode-tab-inactiveForeground: rgba(255, 255, 255, 0.5);
|
||||||
|
--vscode-tab-inactiveModifiedBorder: rgba(51, 153, 204, 0.5);
|
||||||
|
--vscode-tab-unfocusedActiveForeground: rgba(255, 255, 255, 0.5);
|
||||||
|
--vscode-tab-unfocusedActiveModifiedBorder: rgba(51, 153, 204, 0.5);
|
||||||
|
--vscode-tab-unfocusedInactiveForeground: rgba(255, 255, 255, 0.25);
|
||||||
|
--vscode-tab-unfocusedInactiveModifiedBorder: rgba(51, 153, 204, 0.25);
|
||||||
|
--vscode-terminal-ansiBlack: #000000;
|
||||||
|
--vscode-terminal-ansiBlue: #2472c8;
|
||||||
|
--vscode-terminal-ansiBrightBlack: #666666;
|
||||||
|
--vscode-terminal-ansiBrightBlue: #3b8eea;
|
||||||
|
--vscode-terminal-ansiBrightCyan: #29b8db;
|
||||||
|
--vscode-terminal-ansiBrightGreen: #23d18b;
|
||||||
|
--vscode-terminal-ansiBrightMagenta: #d670d6;
|
||||||
|
--vscode-terminal-ansiBrightRed: #f14c4c;
|
||||||
|
--vscode-terminal-ansiBrightWhite: #e5e5e5;
|
||||||
|
--vscode-terminal-ansiBrightYellow: #f5f543;
|
||||||
|
--vscode-terminal-ansiCyan: #11a8cd;
|
||||||
|
--vscode-terminal-ansiGreen: #0dbc79;
|
||||||
|
--vscode-terminal-ansiMagenta: #bc3fbc;
|
||||||
|
--vscode-terminal-ansiRed: #cd3131;
|
||||||
|
--vscode-terminal-ansiWhite: #e5e5e5;
|
||||||
|
--vscode-terminal-ansiYellow: #e5e510;
|
||||||
|
--vscode-terminal-background: #1e1e1e;
|
||||||
|
--vscode-terminal-border: rgba(128, 128, 128, 0.35);
|
||||||
|
--vscode-terminal-foreground: #cccccc;
|
||||||
|
--vscode-terminal-selectionBackground: rgba(255, 255, 255, 0.25);
|
||||||
|
--vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
|
||||||
|
--vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
|
||||||
|
--vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
|
||||||
|
--vscode-textLink-activeForeground: #3794ff;
|
||||||
|
--vscode-textLink-foreground: #3794ff;
|
||||||
|
--vscode-textPreformat-foreground: #d7ba7d;
|
||||||
|
--vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
|
||||||
|
--vscode-titleBar-activeBackground: #3c3c3c;
|
||||||
|
--vscode-titleBar-activeForeground: #cccccc;
|
||||||
|
--vscode-titleBar-inactiveBackground: rgba(60, 60, 60, 0.6);
|
||||||
|
--vscode-titleBar-inactiveForeground: rgba(204, 204, 204, 0.6);
|
||||||
|
--vscode-widget-shadow: #000000; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--vscode-editor-background);
|
||||||
|
color: var(--vscode-editor-foreground);
|
||||||
|
font-family: var(--vscode-editor-font-family);
|
||||||
|
font-weight: var(--vscode-editor-font-weight);
|
||||||
|
font-size: var(--vscode-editor-font-size);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--vscode-textLink-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--vscode-textLink-activeForeground);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus,
|
||||||
|
input:focus,
|
||||||
|
select:focus,
|
||||||
|
textarea:focus {
|
||||||
|
outline: 1px solid -webkit-focus-ring-color;
|
||||||
|
outline-offset: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
color: var(--vscode-textPreformat-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
background: var(--vscode-textBlockQuote-background);
|
||||||
|
border-color: var(--vscode-textBlockQuote-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--vscode-scrollbarSlider-background);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: var(--vscode-scrollbarSlider-hoverBackground);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:active {
|
||||||
|
background-color: var(--vscode-scrollbarSlider-activeBackground);
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
|
||||||
|
/* vscode CSS variables: https://code.visualstudio.com/api/references/theme-color#base-colors */
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
color: var(--vscode-foreground);
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import * as ReactDOM from 'react-dom';
|
||||||
|
import { Provider } from 'react-redux';
|
||||||
|
import { STORE } from './data';
|
||||||
|
import './index.css';
|
||||||
|
import { addListener, API } from './vscode';
|
||||||
|
|
||||||
|
class TestThingy extends React.Component<any, { msg: string }> {
|
||||||
|
constructor(props: { msg: string }) {
|
||||||
|
super(props);
|
||||||
|
this.state = { msg: 'Loading...' };
|
||||||
|
}
|
||||||
|
public componentDidMount() {
|
||||||
|
console.log('componentDidMount');
|
||||||
|
addListener(msg => {
|
||||||
|
this.setState({
|
||||||
|
msg: JSON.stringify(msg.configs),
|
||||||
|
});
|
||||||
|
}, 'responseData');
|
||||||
|
API.postMessage({ type: 'requestData' });
|
||||||
|
}
|
||||||
|
public render() {
|
||||||
|
return <div><p>{this.state.msg}</p></div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const TIME = new Date();
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<Provider store={STORE}>
|
||||||
|
<div className="App">
|
||||||
|
<header className="App-header">
|
||||||
|
<h1 className="App-title">Welcome to React I guess? {TIME}</h1>
|
||||||
|
</header>
|
||||||
|
<p className="App-intro">
|
||||||
|
To get started, edit <code>src/App.tsx</code> and save to reload.
|
||||||
|
</p>
|
||||||
|
<TestThingy />
|
||||||
|
<p>OK</p>
|
||||||
|
</div>
|
||||||
|
</Provider>,
|
||||||
|
document.getElementById('root') as HTMLElement
|
||||||
|
);
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
|
||||||
|
export * from '../../src/fileSystemConfig';
|
||||||
|
export * from '../../src/webviewMessages';
|
||||||
|
|
||||||
|
declare module '*.svg'
|
||||||
|
declare module '*.png'
|
||||||
|
declare module '*.jpg'
|
||||||
|
declare module '*.jpeg'
|
||||||
|
declare module '*.gif'
|
||||||
|
declare module '*.bmp'
|
||||||
|
declare module '*.tiff'
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
|
||||||
|
import { Message, MessageTypes } from './types';
|
||||||
|
|
||||||
|
|
||||||
|
interface VSCodeAPI {
|
||||||
|
postMessage(msg: Message): void;
|
||||||
|
setState(state: any): void;
|
||||||
|
getState<T>(): T | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare const acquireVsCodeApi: () => VSCodeAPI;
|
||||||
|
export const API: VSCodeAPI = acquireVsCodeApi();
|
||||||
|
|
||||||
|
export type Listener<T extends Message = Message> = (message: T) => void;
|
||||||
|
export type Filter = string | ((message: Message) => boolean);
|
||||||
|
let LISTENERS: Array<[Listener, Filter | undefined]> = [];
|
||||||
|
|
||||||
|
export function addListener(listener: Listener): void;
|
||||||
|
export function addListener<T extends Message, K extends Message['type']>(listener: Listener<MessageTypes[K]>, filter: K): void;
|
||||||
|
export function addListener<T extends Message = Message>(listener: Listener<T>, filter?: Filter): void;
|
||||||
|
export function addListener(listener: Listener, filter?: Filter) {
|
||||||
|
LISTENERS.push([listener, filter]);
|
||||||
|
}
|
||||||
|
export function removeListener(listener: Listener) {
|
||||||
|
LISTENERS = LISTENERS.filter(([l]) => l !== listener);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('message', event => {
|
||||||
|
console.log('MESSAGE', event);
|
||||||
|
const message: Message = event.data;
|
||||||
|
if (!message || !message.type) return;
|
||||||
|
for (const [listener, filter] of LISTENERS) {
|
||||||
|
if (typeof filter === 'string') {
|
||||||
|
if (filter !== message.type) continue;
|
||||||
|
} else if (filter && !filter(message)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
listener(message);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`Error in message handler:\n${e}\nMessage:${message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"outDir": "build/dist",
|
||||||
|
"module": "esnext",
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["es6", "dom"],
|
||||||
|
"sourceMap": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"jsx": "react",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"rootDir": "src",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noImplicitThis": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"importHelpers": true,
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"suppressImplicitAnyIndexErrors": true,
|
||||||
|
"noUnusedLocals": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"build",
|
||||||
|
"scripts",
|
||||||
|
"acceptance-tests",
|
||||||
|
"webpack",
|
||||||
|
"jest",
|
||||||
|
"src/setupTests.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"extends": "./tsconfig.json"
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "commonjs"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"extends": [
|
||||||
|
"tslint:recommended",
|
||||||
|
"tslint-react",
|
||||||
|
"tslint-config-prettier"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"interface-name": false,
|
||||||
|
"curly": false,
|
||||||
|
"no-console": false
|
||||||
|
},
|
||||||
|
"linterOptions": {
|
||||||
|
"exclude": [
|
||||||
|
"config/**/*.js",
|
||||||
|
"node_modules/**/*.ts",
|
||||||
|
"coverage/lcov-report/*.js"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue