From 4e9bef06332de12d9b9b8a2cdc1bf92a127b48e2 Mon Sep 17 00:00:00 2001 From: Villy-P Date: Wed, 30 Oct 2024 08:29:28 -0500 Subject: [PATCH 1/5] docs: update run command in CONTRIBUTING.md --- .github/CONTRIBUTING.md | 5 +++-- CHANGELOG.md | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 285a9fb..dbab6f6 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -58,10 +58,11 @@ cd .. After that, make your changes. -To run the extension, run `npm run build:webview` to update the code. +To run the extension, run `npm run compile` to update the code. Then press `F5` to run the extension. -> You must run `npm run build:webview` after making any changes +> The command `npm run compile` will automatically run whenever you change the frontend or backend code +> Because of ths, in order to refresh the page you can close the tab and reopen it using `Ctrl-Shift-P` > `Display File Makeup` Add your changes, additions, or removals to the `Unreleased` section of `CHANGELOG.md`. This project follows [this](https://keepachangelog.com/en/1.1.0/) format. diff --git a/CHANGELOG.md b/CHANGELOG.md index 47bde67..6adb1b2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,7 +24,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -Fixed type error relating to ChartJS +- Fixed type error relating to ChartJS +- Fixed `CONTRIBUTING.md` having incorrect run command ## 1.1.1 - 2024-10-9 From f2ab74e4ee4816432495239ba6d9db1cb95710a8 Mon Sep 17 00:00:00 2001 From: Villy-P Date: Wed, 30 Oct 2024 08:31:01 -0500 Subject: [PATCH 2/5] docs: correct startup command in CONTRIBUTING.md --- .github/CONTRIBUTING.md | 9 +-------- CHANGELOG.md | 1 + 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index dbab6f6..d3c2fc6 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -47,14 +47,7 @@ These are the folders you want to look out for: └── style.css // CSS of the application ``` -Fork the repo, then run these commands: - -``` cmd -npm i -cd webview-ui -npm i -cd .. -``` +Fork the repo, then run `npm install` After that, make your changes. diff --git a/CHANGELOG.md b/CHANGELOG.md index 6adb1b2..1846858 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fixed type error relating to ChartJS - Fixed `CONTRIBUTING.md` having incorrect run command +- Fixed `CONTRIBUTING.md` having incorrect startup command ## 1.1.1 - 2024-10-9 From d86a4bd794e8e9ccffa5513d4a76be9b71b8d153 Mon Sep 17 00:00:00 2001 From: Villy-P Date: Wed, 30 Oct 2024 08:34:42 -0500 Subject: [PATCH 3/5] docs: enhance structure and clarity in CONTRIBUTING.md --- .github/CONTRIBUTING.md | 15 ++++++++++----- CHANGELOG.md | 1 + 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index d3c2fc6..dc7d381 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -40,13 +40,18 @@ These are the folders you want to look out for: ``` txt . -├── src -│ └── extension.ts // Backend of the extension - ├── App.svelte // The webpanel containing TS and the UI - └── styles - └── style.css // CSS of the application +└── src + ├── extension + │ └── extension.ts // Backend of the extension + ├── App.svelte // The main webpanel + ├── styles + │ └── style.css // CSS of the application + └── ui // Folder containing all UI Svelte Components ``` +> Although there is a CSS folder, try using Tailwind for any elements in `App.svelte` +> If you are changing something in the `ui` folder, update the `CSS` in the `style` tag. + Fork the repo, then run `npm install` After that, make your changes. diff --git a/CHANGELOG.md b/CHANGELOG.md index 1846858..ae24acd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fixed type error relating to ChartJS - Fixed `CONTRIBUTING.md` having incorrect run command - Fixed `CONTRIBUTING.md` having incorrect startup command +- Fixed `CONTRIBUTING.md` folder structure ## 1.1.1 - 2024-10-9 From 3d8290a8a039dea2878fb21b24456113b6b5fcb3 Mon Sep 17 00:00:00 2001 From: Villy-P Date: Wed, 30 Oct 2024 08:36:19 -0500 Subject: [PATCH 4/5] refactor: remove unused CSS file and update styles in App.svelte and app.css --- .github/CONTRIBUTING.md | 7 +++---- CHANGELOG.md | 1 + src/App.svelte | 1 - src/app.css | 35 +++++++++++++++++++++++++++++++++++ src/styles/style.css | 34 ---------------------------------- 5 files changed, 39 insertions(+), 39 deletions(-) delete mode 100644 src/styles/style.css diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index dc7d381..5781d90 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -44,12 +44,11 @@ These are the folders you want to look out for: ├── extension │ └── extension.ts // Backend of the extension ├── App.svelte // The main webpanel - ├── styles - │ └── style.css // CSS of the application - └── ui // Folder containing all UI Svelte Components + ├── ui // Folder containing all UI Svelte Components + └── app.css // File containing all CSS ``` -> Although there is a CSS folder, try using Tailwind for any elements in `App.svelte` +> Although there is a CSS file, try using Tailwind for any elements in `App.svelte` > If you are changing something in the `ui` folder, update the `CSS` in the `style` tag. Fork the repo, then run `npm install` diff --git a/CHANGELOG.md b/CHANGELOG.md index ae24acd..73026be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed - Changed UI to conform to the VSCode style +- Moved `styles/style.css` to main `app.css` file ### Fixed diff --git a/src/App.svelte b/src/App.svelte index bc44738..07cff62 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -6,7 +6,6 @@ import Chart from 'chart.js/auto' import type { ChartTypeRegistry, ChartEvent, ActiveElement } from 'chart.js' - import './styles/style.css' import "./app.css"; import Button from "./ui/Button.svelte"; import TextArea from "./ui/TextArea.svelte"; diff --git a/src/app.css b/src/app.css index a329725..d3b3810 100644 --- a/src/app.css +++ b/src/app.css @@ -9,4 +9,39 @@ line-height: var(--type-ramp-base-line-height, normal); margin-bottom: 2px; width: fit-content; +} + +.question { + @apply w-3 h-3 rounded-full flex justify-center items-center ml-[10px] bg-gray-500 text-black text-xs select-none +} + +.tooltip-container { + position: relative; +} + +.tooltip-container:hover .tooltip-text, .tooltip-hovered .tooltip-text { + opacity: 1; +} + +.tooltip-text { + font-family: 'Times New Roman', Times, serif; + + @apply opacity-0 w-[200px] py-1 px-2 bg-gray-500 absolute z-10 pointer-events-none transition-opacity select-none bottom-full mb-1 text-sm +} + +.type { + @apply bg-[#00335f] text-white cursor-pointer py-[5px] px-[10px] border-2 border-black mb-[7.5px] +} + +.active { + @apply bg-[#004e92] +} + +.type-right { + border-radius: 0px 20px 20px 0px; +} + +.type-left { + border-right: 2px solid black; + border-radius: 20px 0px 0px 20px; } \ No newline at end of file diff --git a/src/styles/style.css b/src/styles/style.css deleted file mode 100644 index dc4b40e..0000000 --- a/src/styles/style.css +++ /dev/null @@ -1,34 +0,0 @@ -.question { - @apply w-3 h-3 rounded-full flex justify-center items-center ml-[10px] bg-gray-500 text-black text-xs select-none -} - -.tooltip-container { - position: relative; -} - -.tooltip-container:hover .tooltip-text, .tooltip-hovered .tooltip-text { - opacity: 1; -} - -.tooltip-text { - font-family: 'Times New Roman', Times, serif; - - @apply opacity-0 w-[200px] py-1 px-2 bg-gray-500 absolute z-10 pointer-events-none transition-opacity select-none bottom-full mb-1 text-sm -} - -.type { - @apply bg-[#00335f] text-white cursor-pointer py-[5px] px-[10px] border-2 border-black mb-[7.5px] -} - -.active { - @apply bg-[#004e92] -} - -.type-right { - border-radius: 0px 20px 20px 0px; -} - -.type-left { - border-right: 2px solid black; - border-radius: 20px 0px 0px 20px; -} \ No newline at end of file From 5f52a4a14e38b684af455b7740e7ca8b4f06b27a Mon Sep 17 00:00:00 2001 From: Villy-P Date: Wed, 30 Oct 2024 08:37:22 -0500 Subject: [PATCH 5/5] refactor: reorder CSS import in App.svelte for consistency --- src/App.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.svelte b/src/App.svelte index 07cff62..b3ba34f 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -6,7 +6,6 @@ import Chart from 'chart.js/auto' import type { ChartTypeRegistry, ChartEvent, ActiveElement } from 'chart.js' - import "./app.css"; import Button from "./ui/Button.svelte"; import TextArea from "./ui/TextArea.svelte"; import Checkbox from "./ui/Checkbox.svelte"; @@ -15,6 +14,8 @@ import Dropdown from "./ui/Dropdown.svelte"; import Option from "./ui/Option.svelte"; + import "./app.css"; + let cwd = ""; // The current working directory the user is in. Is set on runtime. let directory: Directory; // Current Working Directory the user is in represented in class form let fileJSON: FileType[]; // Data from src/file.json