close userSettings when clicking on blank space

Belikhun · Feb 26, 2020 · e0a969d · e0a969d
1 parent f37110e
commit e0a969d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 13 deletions.
diff --git a/assets/css/userSetting.css b/assets/css/userSetting.css
@@ -65,6 +65,15 @@
     display: none;
 }
 
+#userSettings .sub > .underlay {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
 #userSettings.show .sub {
     display: block;
 }

diff --git a/assets/js/account.js b/assets/js/account.js
@@ -285,7 +285,7 @@ const account = {
         let username = targetElement.dataset.editTarget;
         let note = document.createElement("div");
         note.classList.add("note", "warning");
-        note.innerHTML = `<span class="inner">Hành động này không thể hoàn tác một khi đã thực hiện!</span>`;
+        note.innerHTML = `<span class="inner">Hành động này <b>không thể hoàn tác</b> một khi đã thực hiện!</span>`;
 
         let doIt = await popup.show({
             level: "warning",
@@ -295,7 +295,7 @@ const account = {
             description: `Bạn có chắc muốn xóa người dùng ${username} không?`,
             additionalNode: note,
             buttonList: {
-                delete: { text: "XÓA!", color: "red" },
+                delete: { text: "XÓA!!!", color: "red" },
                 cancel: { text: "Hủy Bỏ", color: "blue" }
             }
         });

diff --git a/assets/js/core.js b/assets/js/core.js
@@ -1437,8 +1437,9 @@ const core = {
         updateDelayText: $("#usett_udelay_text"),
         toggler: $("#userSettingsToggler"),
         container: $("#userSettings"),
-        adminConfig: $("#usett_adminConfig"),
         panelContainer: $("#usett_panelContainer"),
+        panelUnderlay: $("#usett_panelUnderlay"),
+        adminConfig: $("#usett_adminConfig"),
         publicFilesPanel: null,
         publicFilesIframe: null,
         aboutPanel: null,
@@ -1466,7 +1467,8 @@ const core = {
         },
 
         init(loggedIn = true) {
-            this.toggler.addEventListener("click", e => this.toggle(e), false);
+            this.toggler.addEventListener("mouseup", () => this.toggle(), false);
+            this.panelUnderlay.addEventListener("mouseup", () => this.toggle(), false);
 
             this.aboutPanel = new this.panel($("#usett_aboutPanel"));
             this.aboutPanel.toggler = $("#usett_aboutToggler");
@@ -2169,23 +2171,29 @@ const core = {
                     text: id + "."
                 }, "Waiting for confirmation");
 
+                let note = document.createElement("div");
+                note.classList.add("note", "warning");
+                note.innerHTML = `<span class="inner">Hành động này <b>không thể hoàn tác</b> một khi đã thực hiện!</span>`;
+
                 let confirm = await popup.show({
-                    windowTitle: "Xác nhận",
-                    title: `Xóa ${id}`,
-                    description: `Bạn có chắc muốn xóa <i>${id}</i> không?<br>Hành động này <b>không thể hoàn tác</b> một khi đã thực hiện!`,
                     level: "warning",
+                    windowTitle: "Problems Editor",
+                    title: `Xóa \"${id}\"`,
+                    message: `Xác nhận`,
+                    description: `Bạn có chắc muốn xóa đề bài <i>${id}</i> không?`,
+                    additionalNode: note,
                     buttonList: {
-                        yes: { text: "XÓA!!!", color: "pink" },
-                        no: { text:"Không", color: "blue" }
+                        delete: { text: "XÓA!!!", color: "red" },
+                        cancel: { text: "Hủy Bỏ", color: "blue" }
                     }
                 })
 
-                if (confirm !== "yes") {
+                if (confirm !== "delete") {
                     clog("info", "Cancelled deletion of", {
                         color: flatc("yellow"),
                         text: id + "."
                     });
-                    return false;
+                    return;
                 }
 
                 sounds.confirm(1);

diff --git a/index.php b/index.php
@@ -499,7 +499,10 @@
             </div>
 
             <div id="usett_panelContainer" class="sub">
-
+                <!-- ========= IMPORTANT: THIS ELEMENT NEED TO BE AT THE TOP OF THIS CONTAINER ========= -->
+                <div id="usett_panelUnderlay" class="underlay"></div>
+                <!-- ========= IMPORTANT: THIS ELEMENT NEED TO BE AT THE TOP OF THIS CONTAINER ========= -->
+
                 <div id="usett_publicFilesPanel" data-soundtoggle="show" class="panel large sound">
                     <div class="container">
                         <div class="btn-group">
@@ -716,7 +719,6 @@
                         </div>
                     </div>
                 </div>
-
             </div>
 
         </span>