Improving layout.

noffort · Oct 13, 2023 · 6c94dc8 · 6c94dc8
1 parent 6cbcbc0
commit 6c94dc8
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 26 deletions.
diff --git a/css/auth.css b/css/auth.css
@@ -38,7 +38,7 @@ body {
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 3px;
-    font-size: 16px;
+    font-size: 14px;
 }
 
 .input-field:focus {
@@ -62,4 +62,34 @@ body {
 
 .error-message {
     border: 1px solid #ff1717 !important;
+}
+
+.loader {
+    border: 4px solid #97064557;
+    border-top: 4px solid #970645d1;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: spin 1s linear infinite;
+    top: 48%;
+    left: 48%;
+    display: block;
+    overflow: hidden;
+    position: absolute;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #fff5eaed;
+}
+
+.disabled {
+    display: none !important;
 }
diff --git a/css/popup.css b/css/popup.css
@@ -10,43 +10,60 @@ body {
 .container {
     border-radius: 5px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    padding: 5px 20px 20px 20px;
+    padding: 5px 20px 45px 20px;
     width: 340px;
-    min-height: 340px;
     text-align: center;
+    overflow: hidden;
 }
 
 .select-container {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
+}
+
+.form-control {
+    overflow: hidden;
 }
 
 select {
     width: 100%;
-    padding: 10px;
+    padding: 6px 10px;
     border: 1px solid #ccc;
     border-radius: 3px;
     font-size: 14px;
+    background: #fff;
 }
 
 select option:first-child {
     color: #6d6d6d;
 }
 
+.select-block {
+    width: 70%;
+    float: left;
+}
 
 button {
     background-color: #970645d1;
     color: #fff;
-    padding: 10px 20px;
+    padding: 10px;
     border: none;
     border-radius: 3px;
     cursor: pointer;
     font-size: 16px;
+    position: relative;
 }
 
 button:hover {
     background-color: #970645;
 }
 
+button svg {
+    fill: #FFF;
+    position: absolute;
+    top: 6px;
+    right: 4px;
+}
+
 #resume-button,
 #pause-button {
     margin-top: 10px;
@@ -55,11 +72,29 @@ button:hover {
     padding: 5px 15px;
 }
 
+#resume-button,
+#stop-button,
+#pause-button {
+    padding: 16px;
+}
+
+#resume-button svg,
+#stop-button svg,
+#pause-button svg {
+    top: 4px;
+    right: 4px;
+}
+
 #resume-button:hover,
 #pause-button:hover {
     background-color: #c99d9d;
 }
 
+#action-button {
+    margin-left: 15px;
+    margin-top: 18px;
+}
+
 h1 {
     float: left;
 }
@@ -90,7 +125,7 @@ h1 img {
     float: left;
     max-width: 80px;
     padding: 5px;
-    margin-bottom: 15px;
+    margin-bottom: 10px;
 }
 
 .loader {
@@ -101,6 +136,7 @@ h1 img {
     height: 50px;
     animation: spin 1s linear infinite;
     margin: 50px auto;
+    overflow: hidden;
 }
 
 @keyframes spin {
@@ -111,14 +147,15 @@ h1 img {
 #running-info {
     background: #fff;
     padding: 15px;
-    border-radius: 0px;
+    border-radius: 5px;
     position: relative;
     font-size: 14px;
 }
 
 #running-info .btn-action {
     max-width: 30%;
     overflow: hidden;
+    margin-top: -8px;
 }
 
 #task-project,
@@ -150,8 +187,9 @@ h1 img {
 
 #counter {
     font-size: 14px;
-    margin-top: -20px;
+    margin-top: 20px;
     text-align: left;
+    width: 100%;
 }
 
 #billable {

diff --git a/scripts/auth.js b/scripts/auth.js
@@ -13,6 +13,12 @@ async function auth() {
     try {
       var apiKey = document.getElementById("apiKey").value
 
+      if (!apiKey) {
+        return false;
+      }
+
+      document.getElementById('bg').classList.remove('disabled');
+
       const headers = {
         'X-Api-Key': apiKey,
         'Content-Type': 'application/json',
@@ -21,14 +27,23 @@ async function auth() {
       const response = await fetch(`${baseUrl}/user`, { headers });
 
       if (!response.ok) {
+        document.getElementById('bg').classList.add('disabled');
         throw new Error(`Authentication failed with status ${response.status}`);
       }
 
       value = btoa(apiKey);
       chrome.storage.local.set({ 'noffort_Caeth3Haileeko1r': value }, function () {
+        console.log('saved');
         if (chrome.runtime.lastError) {
+          document.getElementById('bg').classList.add('disabled');
           console.error('Error saving to Chrome storage: ', chrome.runtime.lastError);
         } else {
+          chrome.tabs.query({url : 'https://*.kanbanize.com/*'}, tabs => {
+            tabs.forEach((tab) => {
+              chrome.tabs.reload(tab.id);
+            })
+          });
+
           chrome.tabs.getCurrent(function(tab) {
             chrome.tabs.remove(tab.id, function() { });
           });

diff --git a/view/authentication.html b/view/authentication.html
@@ -4,20 +4,22 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/css/auth.css">
-    <title>Noffort - Configure your Clockify API KEY</title>
+    <title>Noffort: Configure the integration</title>
 </head>
 <body>
     <div class="container">
         <img src="/images/logo.png" alt="Noffort Logo" class="logo">
-        <h1>Enter Your <a href="https://app.clockify.me/user/settings" target="_blank" title="Click and Scroll all the page">Clockify API Key</a></h1>
-        <p>Provide your API key below to access the service.</p>
+        <p>Provide your <a href="https://app.clockify.me/user/settings" target="_blank" title="Click and Scroll all the page">Clockify API KEY</a> below to access the service.</p>
         <form id="apiKeyForm" action="#">
             <div class="input-container">
-                <input type="text" id="apiKey" class="input-field" placeholder="Enter your API key" required>
+                <input type="password" id="apiKey" class="input-field" placeholder="Enter your Clockify API key" required>
             </div>
             <button type="submit" class="submit-button" id="submit-button">Submit</button>
         </form>
     </div>
+    <div id="bg" class="background disabled">
+        <div class="loader"></div>
+    </div>
 </body>
 
 <script src="/scripts/auth.js"></script>

diff --git a/view/popup.html b/view/popup.html
@@ -15,17 +15,21 @@ <h1>
         </div>
         <div class="loader"></div>
         <form id="form-container" action="#" class="disabled">
-            <input type="text" title="Task ID" disabled placeholder="TASK" id="task">
-            <span id="billable" billable="on" class="billable-on" title="Billable">$</span>
-            <div class="select-container">
-                <select id="project" required>
-                    <option value="" disabled selected>Select a Project</option>
-                </select>
+            <div class="form-control">
+                <input type="text" title="Task ID" disabled placeholder="TASK" id="task">
+                <span id="billable" billable="on" class="billable-on" title="Billable">$</span>
             </div>
-            <div class="select-container">
-                <select id="tag" required>
-                    <option value="" disabled selected>Select a Tag</option>
-                </select>
+            <div class="form-control select-block">
+                <div class="select-container">
+                    <select id="project" required>
+                        <option value="" disabled selected>Select a Project</option>
+                    </select>
+                </div>
+                <div class="select-container">
+                    <select id="tag" required>
+                        <option value="" disabled selected>Select a Tag</option>
+                    </select>
+                </div>
             </div>
             <button type="submit" id="action-button">PLAY</button>
         </form>
@@ -35,9 +39,9 @@ <h1>
                 <span id="task-project" data-task=""></span>
             </dev>
             <div class="btn-action">
-                <button id="stop-button" type="button" title="Stop">STOP</button>
-                <button id="pause-button" type="button" title="Pause">PAUSE</button>
-                <button id="resume-button" type="button" title="Resume" class="disabled">RESUME</button>
+                <button id="stop-button" type="button" title="Stop"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M320-320h320v-320H320v320ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg></button>
+                <button id="pause-button" type="button" title="Pause"> <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-320h80v-320h-80v320Zm160 0h80v-320h-80v320ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg></button>
+                <button id="resume-button" type="button" title="Resume" class="disabled"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg></button>
             </div>
 
             <div id="counter">0d 0h 0m 0s</div>