Fix-408

fossasia · Dec 6, 2018 · 3c0f4de · 3c0f4de
1 parent f45b157
commit 3c0f4de
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 18 deletions.
diff --git a/src/css/notifications.min.css b/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
+}
diff --git a/src/js/notifications.min.js b/src/js/notifications.min.js
diff --git a/src/js/options.js b/src/js/options.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,23 +117,17 @@ 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");
-});
-
-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){

diff --git a/src/options.html b/src/options.html
@@ -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">