v1.0.32

amastaneh · Jun 5, 2024 · 5f0be00 · 5f0be00
1 parent 48cc9d6
commit 5f0be00
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 114 deletions.
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -36,7 +36,7 @@
 		"48": "images/icon-48.png"
 	},
 	"action": {
-		"default_popup": "src/popup.html",
+		"default_popup": "popup/index.html",
 		"default_icon": {
 			"128": "images/icon-128.png",
 			"48": "images/icon-48.png"

diff --git a/extension/popup/index.html b/extension/popup/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta charset="utf-8" />
+	<title>GitHub Prime</title>
+
+	<!-- ============= CSS ============= -->
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+		integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+		crossorigin="anonymous" referrerpolicy="no-referrer" />
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" />
+	<link rel="stylesheet" href="./main.css" />
+
+	<!-- ============= JS ============= -->
+	<script src="./main.js"></script>
+</head>
+
+<body class="w-96 rounded-lg shadow-lg">
+	<header class="flex w-full bg-prime-light p-4 text-gray-800 select-none">
+		<img src="../images/icon-48.png" alt="GitHub Prime Logo" class="w-8 h-8" />
+		<h1 class="ml-2 text-xl font-bold">
+			<a href="https://GitHubPrime.com" target="_blank" rel="noopener">GitHub Prime</a>
+		</h1>
+	</header>
+
+	<main class="text-gray-800 text-sm p-4">
+		<div class="flex flex-col space-y-4">
+			<div class="flex items-center justify-between">
+				<label for="showCommitDetails">Show commit details button</label>
+				<label class="switch">
+					<input type="checkbox" id="showCommitDetails" data-question="showCommitDetails" />
+					<span class="slider round"></span>
+				</label>
+			</div>
+		</div>
+	</main>
+
+	<footer class="flex flex-col items-center justify-center w-full p-4 bg-prime-light text-gray-800 select-none">
+		<div class="flex space-x-2 mt-2">
+			<a href="https://GitHubPrime.com" title="GitHub Prime Website" target="_blank" rel="noopener">
+				<i class="fas fa-home"></i>
+			</a>
+			<a href="https://github.com/amastaneh/github-prime" title="GitHub Prime Repository" target="_blank" rel="noopener">
+				<i class="fab fa-github"></i>
+			</a>
+			<a href="https://twitter.com/github-prime" title="GitHub Prime Twitter" target="_blank" rel="noopener">
+				<i class="fab fa-twitter"></i>
+			</a>
+			<small class="text-xs">© 2024 <a href="https://GitHubPrime.com">GitHub Prime</a> ver 1.0.31</small>
+		</div>
+	</footer>
+
+</body>
+
+</html>
diff --git a/extension/src/popup.css → extension/popup/main.css b/extension/src/popup.css → extension/popup/main.css
@@ -1,8 +1,19 @@
-/* Custom styles for the switch */
+.bg-prime {
+    background: #718dab;
+}
+
+.bg-prime-light {
+    background: #bccfe2;
+}
+
+.prime-border {
+    border-color: #718dab;
+}
+
 .switch {
     position: relative;
     display: inline-block;
-    width: 34px;
+    width: 40px;
     height: 20px;
 }
 
@@ -27,27 +38,19 @@
 .slider:before {
     position: absolute;
     content: "";
-    height: 14px;
-    width: 14px;
-    left: 3px;
-    bottom: 3px;
+    height: 12px;
+    width: 12px;
+    left: 4px;
+    bottom: 4px;
     background-color: white;
     transition: 0.4s;
     border-radius: 50%;
 }
 
 input:checked + .slider {
-    background-color: #2196f3;
+    background-color: #bccfe2;
 }
 
 input:checked + .slider:before {
-    transform: translateX(14px);
-}
-
-.slider.round {
-    border-radius: 34px;
-}
-
-.slider.round:before {
-    border-radius: 50%;
+    transform: translateX(20px);
 }
diff --git a/extension/popup/main.js b/extension/popup/main.js
@@ -0,0 +1,25 @@
+// Function to initialize switches based on localStorage
+function initializeSwitches() {
+    const switches = document.querySelectorAll('.switch input');
+
+    switches.forEach((sw) => {
+        const question = sw.getAttribute('data-question');
+        const storedValue = localStorage.getItem(question);
+
+        if (storedValue === null) {
+            // Default value is true
+            localStorage.setItem(question, 'true');
+            sw.checked = true;
+        } else {
+            sw.checked = storedValue === 'true';
+        }
+
+        // Add event listener to update localStorage on change
+        sw.addEventListener('change', (event) => {
+            localStorage.setItem(question, event.target.checked);
+        });
+    });
+}
+
+// Call the initialize function on page load
+document.addEventListener('DOMContentLoaded', initializeSwitches);
diff --git a/extension/src/popup.html b/extension/src/popup.html
diff --git a/extension/src/popup.js b/extension/src/popup.js