From 4dea83af08d13ab8ead2e378599b2fc5ee50a273 Mon Sep 17 00:00:00 2001 From: ash-t-luu Date: Thu, 16 Nov 2023 17:39:54 -0800 Subject: [PATCH] submitting working activitybar and webview skeleton --- extension.js | 10 ++++++++-- media/test1.svg | 33 +++++++++++++++++++++++++++++++++ package.json | 33 +++++++++++++++++++++++++++++++-- src/panel.js | 17 +++++++++++++++++ 4 files changed, 89 insertions(+), 4 deletions(-) create mode 100644 media/test1.svg create mode 100644 src/panel.js diff --git a/extension.js b/extension.js index 9c76d86..07a160e 100644 --- a/extension.js +++ b/extension.js @@ -1,6 +1,7 @@ // The module 'vscode' contains the VS Code extensibility API // Import the module and reference it with the alias vscode in your code below const vscode = require('vscode'); +const {createPanel} = require('./src/panel'); // This method is called when your extension is activated // Your extension is activated the very first time the command is executed @@ -19,12 +20,17 @@ function activate(context) { // The commandId parameter must match the command field in package.json let disposable = vscode.commands.registerCommand('react-labyrinth.helloWorld', function () { // The code you place here will be executed every time your command is executed - // Display a message box to the user vscode.window.showInformationMessage('Hello World from React Labyrinth!'); }); - context.subscriptions.push(disposable); + // pass in the command we want to register (refer to package.json) + let result = vscode.commands.registerCommand('myExtension.showPanel', () => { + // call helper func + createPanel(); + }); + + context.subscriptions.push(disposable, result); } // This method is called when your extension is deactivated diff --git a/media/test1.svg b/media/test1.svg new file mode 100644 index 0000000..a94fb13 --- /dev/null +++ b/media/test1.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/package.json b/package.json index 3525916..ae13ebc 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,43 @@ "categories": [ "Other" ], + "pricing": "Free", "activationEvents": [], "main": "./extension.js", "contributes": { "commands": [{ "command": "react-labyrinth.helloWorld", - "title": "Hello World" - }] + "title": "Hello World", + "category": "React Labyrinth" + }, + { + "command": "myExtension.showPanel", + "title": "Show Panel", + "category": "React Labyrinth" + }], + "viewsContainers": { + "activitybar": [ + { + "id": "react-labyrinth", + "title": "React Labyrinth", + "icon": "/media/test1.svg" + } + ] + }, + "views": { + "react-labyrinth": [ + { + "id": "metrics-file", + "name": "Metrics" + }, + { + "id": "test", + "name": "Test" + } + ] + } }, + "scripts": { "lint": "eslint .", "pretest": "npm run lint", diff --git a/src/panel.js b/src/panel.js new file mode 100644 index 0000000..0cbf69b --- /dev/null +++ b/src/panel.js @@ -0,0 +1,17 @@ +const vscode = require('vscode'); + +function createPanel() { + // utilize method on vscode.window object to create webview + const panel = vscode.window.createWebviewPanel( + 'reactLabyrinth', + 'React Labyrinth', + // create one new tab + vscode.ViewColumn.One, + {} + ); + + // render html of webview here + panel.webview.html = '

Hello World!!!

' +} + +module.exports = {createPanel}; \ No newline at end of file