From 9b5ea520060c55adc8bdb1da75c3dd3a5509a5b9 Mon Sep 17 00:00:00 2001
From: haakel <haakel213@gmail.com>
Date: Sat, 15 Jun 2024 12:17:59 +0330
Subject: [PATCH] fix toast

---
 assets/css/style.css               | 38 ++++++++++++++++++++----------
 assets/js/audio-diary.js           | 20 +++++++++++-----
 modules/audio-diary-admin-page.php |  2 +-
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index bc4a009..a16f55a 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,16 +1,16 @@
-body {
-    background-color: #d1cbcb;
-    color: #fff;
+.audio-diary-admin-page {
+    max-width: 600px;
+    margin: 0 auto;
     text-align: center;
+}
+
+.audio-diary-admin-page body {
+    background-color: #000;
+    color: #fff;
     font-family: Arial, sans-serif;
 }
 
-.wrap {
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-#recording-button {
+.audio-diary-admin-page #recording-button {
     background-color: red;
     color: white;
     border: none;
@@ -29,22 +29,34 @@ body {
     margin: 20px auto; /* برای قرارگیری در وسط صفحه */
 }
 
-#visualizer {
+.audio-diary-admin-page #visualizer {
     display: none;
     margin-top: 20px;
 }
 
-audio {
+.audio-diary-admin-page audio {
     display: none;
     margin: 20px auto;
     width: 300px;
 }
 
-audio.show {
+.audio-diary-admin-page audio.show {
     display: block;
 }
 
-canvas {
+.audio-diary-admin-page canvas {
     display: block;
     margin: 20px auto;
+    border: 2px solid #c5c3c3; /* مثال: خط قرمز دور canvas */
+    border-radius: 10px; /* مثال: گوشه‌های گرد */
+    width: 100%; /* عرض 100% از والد */
+    max-width: 600px; /* حداکثر عرض 600px */
+    height: 100px; /* ارتفاع 100px */
+    background-color: rgba(255, 255, 255, 0.1); /* مثال: زمینه نیمه شفاف سفید */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* سایه برای دادن عمق */
 }
+
+/* افزودن این استایل برای تغییر رنگ و ظاهر خط */
+.audio-diary-admin-page canvas {
+    background-color: transparent; /* حذف پس‌زمینه سیاه */
+}
\ No newline at end of file
diff --git a/assets/js/audio-diary.js b/assets/js/audio-diary.js
index f5a66a0..5e757b0 100644
--- a/assets/js/audio-diary.js
+++ b/assets/js/audio-diary.js
@@ -90,17 +90,25 @@ jQuery(document).ready(function($) {
                                         allowToastClose: true, // Boolean value true or false
                                         hideAfter: 3000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
                                         stack: 3, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
-                                        position: 'bottom-left', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
-                                        
-                                        
-                                        
+                                        position: 'bottom-center', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
                                         textAlign: 'left',  // Text alignment i.e. left, right or center
                                         loader: true,  // Whether to show loader or not. True by default
                                         loaderBg: '#9EC600',  // Background color of the toast loader
                                     });
-                                        
                                 } else {
-                                    alert('Failed to save audio');
+                                    $.toast({
+                                        text: "Failed to save audio", // Text that is to be shown in the toast
+                                        heading: 'Note', // Optional heading to be shown on the toast
+                                        icon: 'Error', // Type of toast icon
+                                        showHideTransition: 'fade', // fade, slide or plain
+                                        allowToastClose: true, // Boolean value true or false
+                                        hideAfter: 3000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
+                                        stack: 3, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
+                                        position: 'top-center', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
+                                        textAlign: 'left',  // Text alignment i.e. left, right or center
+                                        loader: true,  // Whether to show loader or not. True by default
+                                        loaderBg: '#9EC600',  // Background color of the toast loader
+                                    });
                                 }
                             }
                         });
diff --git a/modules/audio-diary-admin-page.php b/modules/audio-diary-admin-page.php
index ca6ef21..6df57fa 100644
--- a/modules/audio-diary-admin-page.php
+++ b/modules/audio-diary-admin-page.php
@@ -1,4 +1,4 @@
-<div class="wrap">
+<div class="wrap audio-diary-admin-page">
     <h1><?php _e('Audio Diary', 'audio-diary'); ?></h1>
     <button id="recording-button"></button>
     <audio id="audio-player" controls></audio>