Fix-408

Author: championpaddler

src/css/notifications.min.css

@@ -0,0 +1,34 @@
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);
+.notification {
+width: 300px;
+height: 80px;
+position: absolute;
+bottom: 10px;
+right: -300px;
+background: #ecf0f1;
+margin-bottom: 10px;
+font-family: 'Open Sans', sans-serif;
+font-size: 16px;
+padding: 0 15px;
+-webkit-box-sizing: border-box;
+-moz-box-sizing: border-box;
+box-sizing: border-box;
+line-height: 80px;
+border-left: 5px solid
+}
+.notification-info {
+border-left-color: #3498db;
+color: #3498db
+}
+.notification-success {
+border-left-color: #0a632f;
+color: #06883c
+}
+.notification-warning {
+border-left-color: #e67e22;
+color: #e67e22
+}
+.notification-error {
+border-left-color: #e74c3c;
+color: #e74c3c
+}

src/js/notifications.min.js

@@ -37,9 +37,15 @@ if(micAccess) {
             audio: true
         }, (stream) => {
             stream.getTracks().forEach(track => track.stop());
+            displayNotification('success', ' Mic Access Granted', 1000);
+
+
         }, () => {
             console.log("no access");
+            displayNotification('error', ' No Access', 1000);
+
         });
+
     });
 }
 if(preDefThemes) {
@@ -77,31 +83,31 @@ if(getVoice) {
 if(submitThemeColor) {
     submitThemeColor.addEventListener("click",()=>{
 			localStorage.setItem("theme",theme);
-			alert("Success");
-      });
+            displayNotification('info', 'Theme successfully changed', 1000);
+        });
 }
 
 if(submitMsgPaneColor) {
     submitMsgPaneColor.addEventListener("click",()=>{
 			localStorage.setItem("msgTheme",msgTheme);
-			alert("Success");
-      });
+            displayNotification('warning', ' Message Pane Color Changed', 1000);
+        });
 }
 if(submitSusiVoice) {
     submitSusiVoice.addEventListener("click",()=>{
  			localStorage.setItem("voice",voice);
- 			alert("Success");
-      });
+             displayNotification('success', 'Voice successfully changed', 1000);
+            });
 }
 if(backgroundChange) {
     backgroundChange.addEventListener("submit", (e) => {
         e.preventDefault();
         theValue = backUrl.value;
         if (!theValue) {
-            alert("Error: No value specified");
+            displayNotification('error', ' Error Background Not Changed', 1000);
         } else {
             localStorage.setItem("theValue", theValue);
-            alert("Successfully stored");
+            displayNotification('warning', ' Background successfully changed', 1000);
         }
     });
 }
@@ -111,24 +117,19 @@ restore.addEventListener("click", ()=>{
         userItems = ["theValue", "voice", "msgTheme", "theme"];
         userItems.forEach(item => {
             localStorage.removeItem(item);
+
         });
+        displayNotification('warning', ' Restored Settings', 1000);
+
     }
 });
 
 localimage.addEventListener("change",()=>{
     var tmppath = URL.createObjectURL(localimage.files[0]);
     localStorage.setItem("theValue",tmppath);
-    alert("Image Updated");
+    displayNotification('success', ' Image Updates', 1000);
 });
 
-restore.addEventListener("click", ()=>{
-    if(confirm("This will remove your customized settings. This action is irreversible.")){
-        userItems = ["theValue", "voice", "msgTheme", "theme"];
-        userItems.forEach(item => {
-            localStorage.removeItem(item);
-        });
-    }
-});
 
 themeColorPicker.on("change", function(color){
     themeColorPickerButton.style.backgroundColor = color;

src/js/options.js

@@ -8,7 +8,11 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link rel="stylesheet" href="css/options.css">
     <link rel="stylesheet" type="text/css" href="css/ldcp.css"/>
+    <link rel="stylesheet" type="text/css" href="css/notifications.min.css"/>
+
     <script type="text/javascript" src="js/ldcp.min.js"></script>
+    <script type="text/javascript" src="js/notifications.min.js"></script>
+
 </head>
 <body>
     <div class="container">