From ef0e3fd346cf1829405e1bcf64d8a3e1344d408a Mon Sep 17 00:00:00 2001
From: Alex Ling <hkalexling@gmail.com>
Date: Tue, 16 Jun 2020 05:15:39 +0000
Subject: [PATCH] Add color to labels in dark mode (#70)

---
 .gitignore                    |   1 +
 gulpfile.js                   |   9 +-
 package.json                  |   7 +-
 public/js/download-manager.js | 162 ++++++++++++++++++----------------
 src/assets/uikit.less         |  33 +++++++
 src/views/components/head.ecr |   2 +-
 6 files changed, 133 insertions(+), 81 deletions(-)
 create mode 100644 src/assets/uikit.less

diff --git a/.gitignore b/.gitignore
index 3a07fc7..17d6647 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ dist
 mango
 .env
 *.md
+public/css/uikit.css
diff --git a/gulpfile.js b/gulpfile.js
index dc6f33d..b3fc62a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,6 +1,7 @@
 const gulp = require('gulp');
 const minify = require("gulp-babel-minify");
 const minifyCss = require('gulp-minify-css');
+const less = require('gulp-less');
 
 gulp.task('minify-js', () => {
 	return gulp.src('public/js/*.js')
@@ -10,6 +11,12 @@ gulp.task('minify-js', () => {
 		.pipe(gulp.dest('dist/js'));
 });
 
+gulp.task('less', () => {
+	return gulp.src('src/assets/*.less')
+		.pipe(less())
+		.pipe(gulp.dest('public/css'));
+});
+
 gulp.task('minify-css', () => {
 	return gulp.src('public/css/*.css')
 		.pipe(minifyCss())
@@ -26,4 +33,4 @@ gulp.task('favicon', () => {
 		.pipe(gulp.dest('dist'));
 });
 
-gulp.task('default', gulp.parallel('minify-js', 'minify-css', 'img', 'favicon'));
+gulp.task('default', gulp.parallel('minify-js', gulp.series('less', 'minify-css'), 'img', 'favicon'));
diff --git a/package.json b/package.json
index dd815a6..98f01b4 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,14 @@
   "devDependencies": {
     "gulp": "^4.0.2",
     "gulp-babel-minify": "^0.5.1",
-    "gulp-minify-css": "^1.2.4"
+    "gulp-less": "^4.0.1",
+    "gulp-minify-css": "^1.2.4",
+    "less": "^3.11.3"
   },
   "scripts": {
     "uglify": "gulp"
+  },
+  "dependencies": {
+    "uikit": "^3.5.4"
   }
 }
diff --git a/public/js/download-manager.js b/public/js/download-manager.js
index 4b3f40a..9ab407e 100644
--- a/public/js/download-manager.js
+++ b/public/js/download-manager.js
@@ -24,44 +24,48 @@ const loadConfig = () => {
 const remove = (id) => {
 	var url = base_url + 'api/admin/mangadex/queue/delete';
 	if (id !== undefined)
-		url += '?' + $.param({id: id});
+		url += '?' + $.param({
+			id: id
+		});
 	console.log(url);
 	$.ajax({
-		type: 'POST',
-		url: url,
-		dataType: 'json'
-	})
-	.done(data => {
-		if (!data.success && data.error) {
-			alert('danger', `Failed to remove job from download queue. Error: ${data.error}`);
-			return;
-		}
-		load();
-	})
-	.fail((jqXHR, status) => {
-		alert('danger', `Failed to remove job from download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-	});
+			type: 'POST',
+			url: url,
+			dataType: 'json'
+		})
+		.done(data => {
+			if (!data.success && data.error) {
+				alert('danger', `Failed to remove job from download queue. Error: ${data.error}`);
+				return;
+			}
+			load();
+		})
+		.fail((jqXHR, status) => {
+			alert('danger', `Failed to remove job from download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+		});
 };
 const refresh = (id) => {
 	var url = base_url + 'api/admin/mangadex/queue/retry';
 	if (id !== undefined)
-		url += '?' + $.param({id: id});
+		url += '?' + $.param({
+			id: id
+		});
 	console.log(url);
 	$.ajax({
-		type: 'POST',
-		url: url,
-		dataType: 'json'
-	})
-	.done(data => {
-		if (!data.success && data.error) {
-			alert('danger', `Failed to restart download job. Error: ${data.error}`);
-			return;
-		}
-		load();
-	})
-	.fail((jqXHR, status) => {
-		alert('danger', `Failed to restart download job. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-	});
+			type: 'POST',
+			url: url,
+			dataType: 'json'
+		})
+		.done(data => {
+			if (!data.success && data.error) {
+				alert('danger', `Failed to restart download job. Error: ${data.error}`);
+				return;
+			}
+			load();
+		})
+		.fail((jqXHR, status) => {
+			alert('danger', `Failed to restart download job. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+		});
 };
 const toggle = () => {
 	$('#pause-resume-btn').attr('disabled', '');
@@ -69,50 +73,52 @@ const toggle = () => {
 	const action = paused ? 'resume' : 'pause';
 	const url = `${base_url}api/admin/mangadex/queue/${action}`;
 	$.ajax({
-		type: 'POST',
-		url: url,
-		dataType: 'json'
-	})
-	.fail((jqXHR, status) => {
-		alert('danger', `Failed to ${action} download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-	})
-	.always(() => {
-		load();
-		$('#pause-resume-btn').removeAttr('disabled');
-	});
+			type: 'POST',
+			url: url,
+			dataType: 'json'
+		})
+		.fail((jqXHR, status) => {
+			alert('danger', `Failed to ${action} download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+		})
+		.always(() => {
+			load();
+			$('#pause-resume-btn').removeAttr('disabled');
+		});
 };
 const load = () => {
 	if (loading) return;
 	loading = true;
 	console.log('fetching');
 	$.ajax({
-		type: 'GET',
-		url: base_url + 'api/admin/mangadex/queue',
-		dataType: 'json'
-	})
-	.done(data => {
-		if (!data.success && data.error) {
-			alert('danger', `Failed to fetch download queue. Error: ${data.error}`);
-			return;
-		}
-		console.log(data);
-		const btnText = data.paused ? "Resume download" : "Pause download";
-		$('#pause-resume-btn').text(btnText);
-		$('#pause-resume-btn').removeAttr('hidden');
-		const rows = data.jobs.map(obj => {
-			var cls = 'uk-label ';
-			if (obj.status === 'Completed')
-				cls += 'uk-label-success';
-			if (obj.status === 'Error')
-				cls += 'uk-label-danger';
-			if (obj.status === 'MissingPages')
-				cls += 'uk-label-warning';
+			type: 'GET',
+			url: base_url + 'api/admin/mangadex/queue',
+			dataType: 'json'
+		})
+		.done(data => {
+			if (!data.success && data.error) {
+				alert('danger', `Failed to fetch download queue. Error: ${data.error}`);
+				return;
+			}
+			console.log(data);
+			const btnText = data.paused ? "Resume download" : "Pause download";
+			$('#pause-resume-btn').text(btnText);
+			$('#pause-resume-btn').removeAttr('hidden');
+			const rows = data.jobs.map(obj => {
+				var cls = 'label ';
+				if (obj.status === 'Pending')
+					cls += 'label-pending';
+				if (obj.status === 'Completed')
+					cls += 'label-success';
+				if (obj.status === 'Error')
+					cls += 'label-danger';
+				if (obj.status === 'MissingPages')
+					cls += 'label-warning';
 
-			const info = obj.status_message.length > 0 ? '<span uk-icon="info"></span>' : '';
-			const statusSpan = `<span class="${cls}">${obj.status} ${info}</span>`;
-			const dropdown = obj.status_message.length > 0 ? `<div uk-dropdown>${obj.status_message}</div>` : '';
-			const retryBtn = obj.status_message.length > 0 ? `<a onclick="refresh('${obj.id}')" uk-icon="refresh"></a>` : '';
-			return `<tr id="chapter-${obj.id}">
+				const info = obj.status_message.length > 0 ? '<span uk-icon="info"></span>' : '';
+				const statusSpan = `<span class="${cls}">${obj.status} ${info}</span>`;
+				const dropdown = obj.status_message.length > 0 ? `<div uk-dropdown>${obj.status_message}</div>` : '';
+				const retryBtn = obj.status_message.length > 0 ? `<a onclick="refresh('${obj.id}')" uk-icon="refresh"></a>` : '';
+				return `<tr id="chapter-${obj.id}">
 				<td><a href="${baseURL}/chapter/${obj.id}">${obj.title}</a></td>
 				<td><a href="${baseURL}/manga/${obj.manga_id}">${obj.manga_title}</a></td>
 				<td>${obj.success_count}/${obj.pages}</td>
@@ -123,16 +129,16 @@ const load = () => {
 					${retryBtn}
 				</td>
 				</tr>`;
-		});
+			});
 
-		const tbody = `<tbody>${rows.join('')}</tbody>`;
-		$('tbody').remove();
-		$('table').append(tbody);
-	})
-	.fail((jqXHR, status) => {
-		alert('danger', `Failed to fetch download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
-	})
-	.always(() => {
-		loading = false;
-	});
+			const tbody = `<tbody>${rows.join('')}</tbody>`;
+			$('tbody').remove();
+			$('table').append(tbody);
+		})
+		.fail((jqXHR, status) => {
+			alert('danger', `Failed to fetch download queue. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+		})
+		.always(() => {
+			loading = false;
+		});
 };
diff --git a/src/assets/uikit.less b/src/assets/uikit.less
new file mode 100644
index 0000000..3482a96
--- /dev/null
+++ b/src/assets/uikit.less
@@ -0,0 +1,33 @@
+@import "node_modules/uikit/src/less/uikit.theme.less";
+
+.label {
+    display: inline-block;
+    padding: @label-padding-vertical @label-padding-horizontal;
+    background: @label-background;
+    line-height: @label-line-height;
+    font-size: @label-font-size;
+    color: @label-color;
+    vertical-align: middle;
+    white-space: nowrap;
+    .hook-label;
+}
+
+.label-success {
+    background-color: @label-success-background;
+    color: @label-success-color;
+}
+
+.label-warning {
+    background-color: @label-warning-background;
+    color: @label-warning-color;
+}
+
+.label-danger {
+    background-color: @label-danger-background;
+    color: @label-danger-color;
+}
+
+.label-pending {
+    background-color: @global-secondary-background;
+    color: @global-inverse-color;
+}
diff --git a/src/views/components/head.ecr b/src/views/components/head.ecr
index cbcbc07..399b907 100644
--- a/src/views/components/head.ecr
+++ b/src/views/components/head.ecr
@@ -4,7 +4,7 @@
   <title>Mango</title>
   <meta name="description" content="Mango - Manga Server and Web Reader">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/css/uikit.min.css" />
+  <link rel="stylesheet" href="<%= base_url %>css/uikit.css" />
   <link rel="stylesheet" href="<%= base_url %>css/mango.css" />
   <link rel="icon" href="<%= base_url %>favicon.ico">
   <script defer src="<%= base_url %>js/fontawesome.min.js"></script>