FEAT: Move color settings from ts to css

.github/workflows/release.yml

@@ -0,0 +1,71 @@
+name: Release Obsidian plugin
+
+on:
+    release:
+        types: [ created ]
+
+env:
+    PLUGIN_NAME: obsidian-task-progress-bar
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            -   uses: actions/checkout@v2
+            -   name: Use Node.js
+                uses: actions/setup-node@v3
+                with:
+                    node-version: 16
+            -   name: Build
+                id: build
+                run: |
+                    npm install
+                    npm run build
+                    mkdir ${{ env.PLUGIN_NAME }}
+                    cp main.js manifest.json styles.css ${{ env.PLUGIN_NAME }}
+                    zip -r ${{ env.PLUGIN_NAME }}.zip ${{ env.PLUGIN_NAME }}
+                    ls
+                    echo "::set-output name=tag_name::$(git tag --sort version:refname | tail -n 1)"
+            -   name: Upload zip file
+                id: upload-zip
+                uses: actions/upload-release-asset@v1
+                env:
+                    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                with:
+                    upload_url: ${{ github.event.release.upload_url }}
+                    asset_path: ./${{ env.PLUGIN_NAME }}.zip
+                    asset_name: ${{ env.PLUGIN_NAME }}-${{ steps.build.outputs.tag_name }}.zip
+                    asset_content_type: application/zip
+
+            -   name: Upload main.js
+                id: upload-main
+                uses: actions/upload-release-asset@v1
+                env:
+                    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                with:
+                    upload_url: ${{ github.event.release.upload_url }}
+                    asset_path: ./main.js
+                    asset_name: main.js
+                    asset_content_type: text/javascript
+
+            -   name: Upload manifest.json
+                id: upload-manifest
+                uses: actions/upload-release-asset@v1
+                env:
+                    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                with:
+                    upload_url: ${{ github.event.release.upload_url }}
+                    asset_path: ./manifest.json
+                    asset_name: manifest.json
+                    asset_content_type: application/json
+
+            -   name: Upload styles.css
+                id: upload-css
+                uses: actions/upload-release-asset@v1
+                env:
+                    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                with:
+                    upload_url: ${{ github.event.release.upload_url }}
+                    asset_path: ./styles.css
+                    asset_name: styles.css
+                    asset_content_type: text/css

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-task-progress-bar",
 	"name": "Task Progress Bar",
-	"version": "1.5.1",
+	"version": "1.6.0",
 	"minAppVersion": "0.15.2",
 	"description": "A task progress bar plugin for tasks in Obsidian.",
 	"author": "Boninall",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-task-progress-bar",
-	"version": "1.5.1",
+	"version": "1.6.0",
 	"description": "A task progress bar plugin for tasks in Obsidian.",
 	"main": "main.js",
 	"scripts": {

src/taskProgressBarWidget.ts

@@ -25,6 +25,11 @@ interface Text {
 }
 
 class TaskProgressBarWidget extends WidgetType {
+	progressBarEl: HTMLSpanElement;
+	progressBackGroundEl: HTMLDivElement;
+	progressEl: HTMLDivElement;
+	numberEl: HTMLDivElement;
+
 	constructor(
 		readonly app: App,
 		readonly plugin: TaskProgressBarPlugin,
@@ -57,45 +62,61 @@ class TaskProgressBarWidget extends WidgetType {
 		return other.view === this.view && other.from === this.from && other.to === this.to;
 	}
 
-	toDOM() {
-		const progressBarEl = createSpan(this.plugin?.settings.addNumberToProgressBar ? 'cm-task-progress-bar with-number' : 'cm-task-progress-bar');
-		const progressBackGroundEl = document.createElement('div');
-		const progressEl = document.createElement('div');
-
+	changePercentage() {
 		const percentage = Math.round(this.completed / this.total * 10000) / 100;
-		progressEl.style.width = percentage + '%';
-		progressEl.style.height = '8px';
+		this.progressEl.style.width = percentage + '%';
 		switch (true) {
 			case percentage >= 0 && percentage < 25:
-				progressEl.style.backgroundColor = '#AE431E'
+				this.progressEl.className = 'progress-bar-inline progress-bar-inline-0';
 				break;
 			case percentage >= 25 && percentage < 50:
-				progressEl.style.backgroundColor = '#E5890A'
+				this.progressEl.className = 'progress-bar-inline progress-bar-inline-1';
 				break;
 			case percentage >= 50 && percentage < 75:
-				progressEl.style.backgroundColor = '#B4C6A6'
+				this.progressEl.className = 'progress-bar-inline progress-bar-inline-2';
 				break;
 			case percentage >= 75 && percentage < 100:
-				progressEl.style.backgroundColor = '#6BCB77'
+				this.progressEl.className = 'progress-bar-inline progress-bar-inline-3';
 				break;
 			case percentage >= 100:
-				progressEl.style.backgroundColor = '#4D96FF'
+				this.progressEl.className = 'progress-bar-inline progress-bar-inline-4';
 				break;
 		}
-		progressBackGroundEl.setAttribute('class', 'progress-bar-inline-background');
-		progressEl.setAttribute('class', 'progress-bar-inline');
+	}
 
-		if (this.plugin?.settings.addNumberToProgressBar && this.total) {
-			const numberEl = document.createElement('div');
-			numberEl.setAttribute('class', 'progress-status');
-			numberEl.appendChild(document.createTextNode('[' + this.completed + '/' + this.total + ']'));
-			progressBarEl.appendChild(numberEl);
+	changeNumber() {
+		if (this.plugin?.settings.addNumberToProgressBar) {
+			this.numberEl = this.progressBarEl.createEl('div', {
+				cls: 'progress-status',
+				text: `[${ this.completed }/${ this.total }]`
+			});
+		}
+		this.numberEl.innerText = `[${ this.completed }/${ this.total }]`;
+	}
+
+	toDOM() {
+		if (!this.plugin?.settings.addNumberToProgressBar && this.numberEl !== undefined) this.numberEl.detach();
+
+		if (this.progressBarEl !== undefined) {
+			this.changePercentage();
+			if (this.numberEl !== undefined) this.changeNumber();
+			return this.progressBarEl;
 		}
 
-		progressBarEl.appendChild(progressBackGroundEl);
-		progressBackGroundEl.appendChild(progressEl);
+		this.progressBarEl = createSpan(this.plugin?.settings.addNumberToProgressBar ? 'cm-task-progress-bar with-number' : 'cm-task-progress-bar');
+		this.progressBackGroundEl = this.progressBarEl.createEl('div', { cls: 'progress-bar-inline-background' });
+		this.progressEl = this.progressBackGroundEl.createEl('div');
 
-		return progressBarEl;
+		if (this.plugin?.settings.addNumberToProgressBar && this.total) {
+			this.numberEl = this.progressBarEl.createEl('div', {
+				cls: 'progress-status',
+				text: `[${ this.completed }/${ this.total }]`
+			});
+		}
+
+		this.changePercentage();
+
+		return this.progressBarEl;
 	}
 
 	ignoreEvent() {
@@ -153,6 +174,7 @@ export function taskProgressBarExtension(app: App, plugin: TaskProgressBarPlugin
 							// @ts-ignore
 							if (this.view.state.doc.slice(range.from, range.to).text === undefined && this.view.state.doc.slice(range.from, range.to).children?.length > 0) {
 								let allChildrenText: string[] = [];
+								// @ts-ignore
 								for (let i = 0; i < this.view.state.doc.slice(range.from, range.to).children?.length; i++) {
 									// @ts-ignore
 									allChildrenText = allChildrenText.concat(this.view.state.doc.slice(range.from, range.to).children[i].text);
@@ -216,6 +238,7 @@ export function taskProgressBarExtension(app: App, plugin: TaskProgressBarPlugin
 				let total: number = 0;
 				let level: number = null;
 				if (!textArray) return;
+				// @ts-ignore
 				const tabSize = app.vault.getConfig("tabSize");
 				let bulletCompleteRegex: RegExp = new RegExp("\\s+([-*+]|\\d+\\.)\\s+\\[[^ ]\\]");
 				let bulletTotalRegex: RegExp = new RegExp("[\\t|\\s]+([-*+]|\\d+\\.)\\s\\[(.)\\]");

styles.css

@@ -15,7 +15,27 @@
 
 .progress-bar-inline {
 	border-radius: 10px;
+	height: 8px;
+}
 
+.progress-bar-inline-0 {
+	background-color: #AE431E;
+}
+
+.progress-bar-inline-1 {
+	background-color: #E5890A;
+}
+
+.progress-bar-inline-2 {
+	background-color: #B4C6A6;
+}
+
+.progress-bar-inline-3 {
+	background-color: #6BCB77;
+}
+
+.progress-bar-inline-4 {
+	background-color: #4D96FF;
 }
 
 .progress-bar-inline-background {
@@ -32,7 +52,6 @@
 
 .cm-task-progress-bar.with-number {
 	display: inline-flex;
-	flex-direction: row-reverse;
 	align-items: center;
 }
 

tsconfig.json

@@ -1,24 +1,24 @@
 {
-  "compilerOptions": {
-    "baseUrl": ".",
-    "inlineSourceMap": true,
-    "inlineSources": true,
-    "module": "ESNext",
-    "target": "ES6",
-    "allowJs": true,
-    "noImplicitAny": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "isolatedModules": true,
-    "lib": [
-      "DOM",
-      "ES5",
-      "ES6",
-      "ES7"
-    ],
-	  "allowSyntheticDefaultImports": true
-  },
-  "include": [
-    "**/*.ts"
-  ]
+	"compilerOptions": {
+		"baseUrl": ".",
+		"inlineSources": true,
+		"module": "ESNext",
+		"target": "ES6",
+		"allowJs": true,
+		"noImplicitAny": true,
+		"moduleResolution": "node",
+		"importHelpers": true,
+		"isolatedModules": true,
+		"strictNullChecks": true,
+		"lib": [
+			"DOM",
+			"ES5",
+			"ES6",
+			"ES7"
+		],
+		"allowSyntheticDefaultImports": true
+	},
+	"include": [
+		"**/*.ts"
+	]
 }

versions.json

@@ -10,5 +10,6 @@
 	"1.3.2": "0.15.2",
 	"1.4.0": "0.15.2",
 	"1.5.0": "0.15.2",
-	"1.5.1": "0.15.2"
+	"1.5.1": "0.15.2",
+	"1.6.0": "0.15.2"
 }