Add CSS based modal message

A modal(dialog popup message) can be made using rs.popupAlert().

webui-src/app/assets/index.html

@@ -40,5 +40,7 @@
     </script>
     <noscript>Sorry but JavaScript is needed here! Please enable it in your browser.</noscript>
     </div>
+    <div id="notification-container"></div>
+    <div id="modal-container"></div>
 </body>
 </html>

webui-src/app/downloads.js

@@ -134,7 +134,7 @@ function actionButton(file, action) {
         onclick: function() {
           fileAction(file.hash, 'cancel');
         },
-      }, m('i.fas.fa-times'));
+      }, 'Cancel');
   }
 };
 

webui-src/app/rswebui.js

@@ -123,10 +123,33 @@ Tab.active = '';
 Tab.componentList = {};
 Tab.routeTable = {};
 
+function popupAlert(message) {
+  let container = document.getElementById('modal-container');
+  let popup = document.createElement('div');
+  popup.setAttribute('id', 'modal-content');
+  popup.innerHTML =
+    `
+    <button id="modal-cancel-button" class="red">
+        <i class="fas fa-times-circle"></i>
+    </button>
+    <h1><i class="fas fa-info-circle"></i></h1>
+    <p>` + message + `</p>`;
+  container.appendChild(popup);
+  container.style.display = 'block';
+  let removeMessage = function() {
+    popup.remove();
+    container.style.display = 'none';
+  }
+  container.onclick = removeMessage;
+  document.getElementById('modal-cancel-button')
+    .onckick = removeMessage;
+}
+
 module.exports = {
   rsJsonApiRequest,
   setKeys,
   setBackgroundTask,
   Tab,
+  popupAlert,
 };
 

webui-src/app/theme.css

@@ -47,8 +47,8 @@ button {
     box-shadow: inset 3px 3px 0 #0d69ac;
 }
 button.red {
-    background: #f00202;
-    box-shadow: inset -3px -3px 0 #bd0909;
+    background: #bd0909;
+    box-shadow: inset -3px -3px 0 #830000;
 }
 
 table {
@@ -143,6 +143,41 @@ table {
     animation: fadein 0.5s;
 }
 
+#modal-container {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    height: 100%;
+}
+#modal-container {
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+}
+#modal-content {
+    position: absolute;
+    color: #555;
+    width: 40%;
+    height: 40%;
+    transform: translate(60%, 50%);
+    background-color: white;
+    padding: 1em;
+    border-radius: 20px;
+    animation: fadein 0.3s;
+}#modal-content p {
+    font-size: 1.5em;
+}#modal-content button {
+    float: right;
+}
+
+#notification-container {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}#notification-container .notification {
+}
+
 /******************************
 Animations
 ******************************/
@@ -230,7 +265,7 @@ a.tab-menu-item {
     border: 1px solid #ccc;
     margin-top: 2em;
     padding: 1em;
-    animation: swipe-from-left 0.5s;
+    animation: fadein 0.5s;
 }.file-view > p {
     margin: 0.5em;
     font-size: 1.1em;