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,18 +37,19 @@ 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) {
 preDefThemes.addEventListener("click",(e) => {
     if(e.target!==e.currentTarget){
         theme= e.target.id;
         console.log(theme);
     }
-
     e.stopPropagation;
     });
 }
@@ -57,12 +58,11 @@ if(msgPaneThemes) {
  msgPaneThemes.addEventListener("click",(e) => {
      if(e.target!==e.currentTarget){
          msgTheme= e.target.id;
-       console.log(msgTheme);
+         console.log(msgTheme);
     }
-
-      e.stopPropagation;
-      });
-  }
+    e.stopPropagation;
+    });
+}
 
 if(getVoice) {
   getVoice.addEventListener("click",(e) => {
@@ -76,32 +76,34 @@ if(getVoice) {
 
 if(submitThemeColor) {
     submitThemeColor.addEventListener("click",()=>{
-			localStorage.setItem("theme",theme);
-			alert("Success");
-      });
+        localStorage.setItem("theme",theme);
+        displayNotification("info", "Theme successfully changed", 1000);
+        });
 }
 
 if(submitMsgPaneColor) {
     submitMsgPaneColor.addEventListener("click",()=>{
-			localStorage.setItem("msgTheme",msgTheme);
-			alert("Success");
-      });
+        localStorage.setItem("msgTheme",msgTheme);
+        displayNotification("warning", " Message Pane Color Changed", 1000);
+        });
 }
+
 if(submitSusiVoice) {
     submitSusiVoice.addEventListener("click",()=>{
- 			localStorage.setItem("voice",voice);
- 			alert("Success");
-      });
+        localStorage.setItem("voice",voice);
+        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);
         }
     });
 }
@@ -112,22 +114,14 @@ restore.addEventListener("click", ()=>{
         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");
-});
-
-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);
-        });
-    }
+    displayNotification("success", " Image Updates", 1000);
 });
 
 themeColorPicker.on("change", function(color){

src/js/options.js

@@ -8,7 +8,9 @@
     <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">