improved bell preview

netharuM · Feb 15, 2022 · 5dcd499 · 5dcd499
1 parent 023e3ba
commit 5dcd499
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 7 deletions.
diff --git a/src/bell.js b/src/bell.js
@@ -331,6 +331,15 @@ class bell {
             hour: "numeric",
             minute: "numeric",
         });
+        this.time12hrFormatter = new Intl.DateTimeFormat("en-US", {
+            hourCycle: "h23",
+            hour: "numeric",
+            minute: "numeric",
+            hour12: true,
+        });
+        this.formattedTime12hr = this.time12hrFormatter.format(
+            new Date(0, 0, 0, this.time.hour, this.time.minute)
+        );
         this.formattedTime = this.timeFormatter.format(
             new Date(0, 0, 0, this.time.hour, this.time.minute)
         );
@@ -348,7 +357,7 @@ class bell {
             this.bellNotification = new Notification(
                 `auto-bell : ${data.name}`,
                 {
-                    body: `up coming alarm at ${this.formattedTime}`,
+                    body: `up coming alarm at ${this.formattedTime12hr}`,
                     icon: path.resolve(__dirname, "../assets/icon.png"),
                 }
             );
@@ -413,11 +422,33 @@ class bell {
         let bellDropDown = document.createElement("div");
         bellDropDown.className = "bellDropDown";
 
-        let description = document.createElement("p");
-        description.innerText = this.data.desc;
-        description.className = "bellDropDownDescription";
-
-        bellDropDown.appendChild(description);
+        let template = document.createElement("div");
+        template.className = "bellDropDownTemplate";
+        template.innerHTML = `
+            <div>
+                <label>description : </label>
+                <p class="desc_preview" id="desc">
+                    DESC
+                </p>
+            </div>
+            <button class="dropDownBtn" id="select-audio-btn">
+                Open Audio 
+            </button>
+            <div class="time_preview" id="time">
+                TIME
+            </div>
+        `;
+
+        template.querySelector("#desc").innerText = this.data.desc;
+        template.querySelector(
+            "#time"
+        ).innerText = `time : ${this.formattedTime12hr}`;
+        template
+            .querySelector("#select-audio-btn")
+            .addEventListener("click", () => {
+                shell.showItemInFolder(this.data.audioPath);
+            });
+        bellDropDown.appendChild(template);
         return bellDropDown;
     }
 
@@ -430,7 +461,7 @@ class bell {
         bellName.classList.add("bellName");
 
         let bellTime = document.createElement("label");
-        bellTime.innerText = this.formattedTime;
+        bellTime.innerText = this.formattedTime12hr;
         bellTime.classList.add("bellTime");
 
         let bellTools = document.createElement("div");

diff --git a/src/bells.css b/src/bells.css
@@ -29,6 +29,56 @@
     padding: 10px;
 }
 
+.bellDropDownTemplate {
+    padding: 10px;
+    border-radius: 9px;
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+    opacity: 0.8;
+}
+
+.dropDownBtn {
+    background-color: var(--foreground);
+    color: var(--background);
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    border-radius: 4px;
+    width: 50%;
+    padding: 10px;
+    cursor: pointer;
+    transition: 0.1s ease-in-out;
+}
+
+.dropDownBtn:hover {
+    transform: scale(1.05);
+}
+.dropDownBtn:active {
+    transform: scale(0.95);
+}
+
+.desc_preview {
+    border: var(--foreground) solid 1px;
+    border-radius: 9px;
+    padding: 5px;
+    margin-top: 5px;
+}
+
+.time_preview {
+    background-color: var(--foreground);
+    color: var(--background);
+    width: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    border-radius: 11px;
+    pointer-events: none;
+}
+
 .bellTools {
     display: flex;
     flex-direction: row;