feat: add dismiss button to toasts; feat: persist toasts

DiscipleTools · Jan 7, 2025 · f723416 · f723416
1 parent 72f5f51
commit f723416
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 28 deletions.
diff --git a/dt-core/admin/components/setup-wizard-keys.js b/dt-core/admin/components/setup-wizard-keys.js
@@ -52,9 +52,9 @@ export class SetupWizardKeys extends OpenLitElement {
   }
   setToastMessage(message) {
     this.toastMessage = message;
-    setTimeout(() => {
-      this.toastMessage = '';
-    }, 3000);
+  }
+  dismissToast() {
+    this.toastMessage = '';
   }
 
   render() {
@@ -242,6 +242,9 @@ export class SetupWizardKeys extends OpenLitElement {
             class="ms-auto card success toast"
             data-state=${this.toastMessage.length ? '' : 'empty'}
           >
+            <button class="close-btn btn-outline" @click=${this.dismissToast}>
+              x
+            </button>
             ${this.toastMessage}
           </section>
         </div>

diff --git a/dt-core/admin/components/setup-wizard-modules.js b/dt-core/admin/components/setup-wizard-modules.js
@@ -75,9 +75,9 @@ export class SetupWizardModules extends OpenLitElement {
   }
   setToastMessage(message) {
     this.toastMessage = message;
-    setTimeout(() => {
-      this.toastMessage = '';
-    }, 3000);
+  }
+  dismissToast() {
+    this.toastMessage = '';
   }
   toggleModule(key) {
     const checkbox = this.renderRoot.querySelector(`#${key}`);
@@ -161,21 +161,22 @@ export class SetupWizardModules extends OpenLitElement {
                     </tbody>
                   </table>
                 </section>
-                ${this.finished
-                  ? html`
-                      <section
-                        class="ms-auto card success toast"
-                        data-state=${this.toastMessage.length ? '' : 'empty'}
-                      >
-                        <p>${this.toastMessage}</p>
-                        <p>
-                          You can enable and disable these modules to your
-                          liking in the "Settings (D.T)" section of the
-                          Wordpress admin.
-                        </p>
-                      </section>
-                    `
-                  : ''}
+                <section
+                  class="ms-auto card success toast"
+                  data-state=${this.toastMessage.length ? '' : 'empty'}
+                >
+                  <button
+                    class="close-btn btn-outline"
+                    @click=${this.dismissToast}
+                  >
+                    x
+                  </button>
+                  <p>${this.toastMessage}</p>
+                  <p>
+                    You can enable and disable these modules to your liking in
+                    the "Settings (D.T)" section of the Wordpress admin.
+                  </p>
+                </section>
               `
             : ''}
         </div>

diff --git a/dt-core/admin/components/setup-wizard-people-groups.js b/dt-core/admin/components/setup-wizard-people-groups.js
@@ -186,9 +186,9 @@ export class SetupWizardPeopleGroups extends OpenLitElement {
   }
   setToastMessage(message) {
     this.toastMessage = message;
-    setTimeout(() => {
-      this.toastMessage = '';
-    }, 3000);
+  }
+  dismissToast() {
+    this.toastMessage = '';
   }
 
   render() {
@@ -332,6 +332,9 @@ export class SetupWizardPeopleGroups extends OpenLitElement {
             class="ms-auto card success toast"
             data-state=${this.toastMessage.length ? '' : 'empty'}
           >
+            <button class="close-btn btn-outline" @click=${this.dismissToast}>
+              x
+            </button>
             ${this.toastMessage}
           </section>
         </div>

diff --git a/dt-core/admin/components/setup-wizard-plugins.js b/dt-core/admin/components/setup-wizard-plugins.js
@@ -93,9 +93,9 @@ export class SetupWizardPlugins extends OpenLitElement {
   }
   setToastMessage(message) {
     this.toastMessage = message;
-    setTimeout(() => {
-      this.toastMessage = '';
-    }, 3000);
+  }
+  dismissToast() {
+    this.toastMessage = '';
   }
   getPluginsToInstall() {
     const plugins_to_install = this.plugins.filter((plugin) => plugin.selected);
@@ -184,6 +184,12 @@ export class SetupWizardPlugins extends OpenLitElement {
           class="ms-auto card success toast"
           data-state=${this.toastMessage.length ? '' : 'empty'}
         >
+          <button
+            class="close-btn btn-outline"
+            @click=${this.dismissToast}
+          >
+            x
+          </button>
           ${this.toastMessage}
         </section>
         </div>

diff --git a/dt-core/admin/components/setup-wizard.js b/dt-core/admin/components/setup-wizard.js
@@ -313,7 +313,7 @@ export class SetupWizard extends LitElement {
         bottom: 0;
         right: 0;
         margin: 1rem;
-        margin-bottom: 3rem;
+        margin-bottom: 4rem;
         transition:
           opacity 300ms ease 200ms,
           transform 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5) 200ms;
@@ -324,6 +324,18 @@ export class SetupWizard extends LitElement {
           transition: none;
           padding: 0;
         }
+
+        & .close-btn {
+          position: absolute;
+          color: inherit;
+          top: 0.5rem;
+          right: 0;
+
+          &:hover {
+            border-color: transparent;
+            color: black;
+          }
+        }
       }
       .input-group {
         display: flex;