Merge "Add bootstrap 4 support"

[pharos-tools.git] / dashboard / src / templates / notifier / inbox.html

diff --git a/dashboard/src/templates/notifier/inbox.html b/dashboard/src/templates/notifier/inbox.html
index 4184d1d..72207ed 100644 (file)
--- a/dashboard/src/templates/notifier/inbox.html
+++ b/dashboard/src/templates/notifier/inbox.html
@@ -6,97 +6,124 @@
 {% block content %}
 
 <style media="screen">
-
-  .inbox-panel {
-    display: grid;
-    grid-template-columns: 30% 5% 65%;
-  }
-
-  .section-panel {
-    padding: 10px;
-  }
-
-  .iframe-panel {
-    padding: 0px;
-    margin-top: 0px;
-  }
-
-  .card-container {
-    border: 1px solid #cccccc;
-    border-bottom: 0px;
-  }
-  .card {
-    height: 50px;
-    position: relative;
-    border-bottom: 1px solid #cccccc;
-    padding: 10px;
-    width: 100%;
-    background-color: #ffffff;
-    z-index: 5;
-  }
-  .selected-card {
-    background-color: #f3f3f3;
-  }
-
-  .card:hover {
-    box-shadow: 0px 0 5px 2px #cccccc;
-    z-index: 6;
-  }
-
-  #inbox-iframe {
-    height: calc(100vh - 57px);
-  }
-
-  .half_width {
-    width: 50%;
-  }
-  .card-wrapper {
-  }
-
-  #page-wrapper{
-    padding: 0px;
-  }
-
-  .read_notification{
-    background-color: #efefef;
-  }
+    .inbox-panel {
+        display: grid;
+        grid-template-columns: 30% 5% 65%;
+    }
+
+    .section-panel {
+        padding: 10px;
+    }
+
+    .iframe-panel {
+        padding: 0px;
+        margin-top: 0px;
+    }
+
+    .card-container {
+        border: 1px solid #cccccc;
+        border-bottom: 0px;
+    }
+
+    .card {
+        height: 50px;
+        position: relative;
+        border-bottom: 1px solid #cccccc;
+        padding: 10px;
+        width: 100%;
+        background-color: #ffffff;
+        z-index: 5;
+    }
+
+    .selected-card {
+        background-color: #f3f3f3;
+    }
+
+    .card:hover {
+        box-shadow: 0px 0 5px 2px #cccccc;
+        z-index: 6;
+    }
+
+    .half_width {
+        width: 50%;
+    }
+
+    #page-wrapper {
+        padding: 0px;
+    }
+
+    .read_notification {
+        background-color: #efefef;
+    }
+
+    .scrollable {
+        overflow-y: auto;
+    }
 </style>
-
-<div class="inbox-panel">
-  <div class="section-panel">
-    <h4>New:</h4>
-    <div class="card-container">
-      {% for notification in unread_notifications  %}
-        <div class="inbox-entry card" onclick="showmessage({{notification.id}}); setactive(this);">
-          {{ notification }}
+<div class="container-fluid d-flex flex-grow-1 flex-column">
+    <div class="row mt-3 mb-2">
+        <div class="col-2 px-0">
+            <div class="btn-group w-100" id="filterGroup">
+                <button class="btn btn-secondary active" data-read="-1">All</button>
+                <button class="btn btn-secondary" data-read="0">Unread</button>
+                <button class="btn btn-secondary" data-read="1">Read</button>
+            </div>
         </div>
-      {% endfor %}
     </div>
-    <h4>Read:</h4>
-    <div class="card-container">
-      {% for notification in read_notifications %}
-        <div class="inbox-entry card read_notification" onclick="showmessage({{notification.id}}); setactive(this);">
-          {{ notification }}
+    <div class="row flex-grow-1" id="fixHeight">
+        <!-- Notification list && Controls -->
+        <div class="mb-2 mb-lg-0 col-lg-2 px-0 mh-100">
+            <div class="list-group rounded-0 rounded-left scrollable mh-100 notifications" id="unreadNotifications" data-read="0">
+                {% for notification in unread_notifications %}
+                    <a
+                        href="#"
+                        onclick="showmessage({{notification.id}}); setactive(this);"
+                        class="list-group-item list-group-item-action notification">
+                        {{ notification }}
+                    </a>
+                {% endfor %}
+            </div>
+            <div class="list-group rounded-0 rounded-left scrollable mh-100 notifications" id="readNotifications" data-read="1">
+                {% for notification in read_notifications %}
+                    <a
+                        href="#"
+                        onclick="showmessage({{notification.id}}); setactive(this);"
+                        class="list-group-item list-group-item-action list-group-item-secondary notification">
+                        {{ notification }}
+                    </a>
+                {% endfor %}
+            </div>
+        </div>
+        <!-- Content -->
+        <div class="col ml-lg-2 border mh-100 p-4">
+            <iframe class="w-100 h-100" id="inbox-iframe" frameBorder="0" scrolling="yes">Please select a notification</iframe>
         </div>
-      {% endfor %}
     </div>
-  </div>
-  <div>
-  </div>
-  <div class="iframe-panel inbox-expanded-view">
-      <div class="inbox-iframe-div">
-        <iframe id="inbox-iframe" frameBorder="0" width="100%" height="100vh" scrolling="yes">Please select a notification</iframe>
-      </div>
-  </div>
 </div>
 
 <script type="text/javascript">
-
-  function showmessage(msg_id)
-  {
-    iframe = document.getElementById("inbox-iframe");
-    iframe.src = "notification/" + msg_id;
-  }
-
+    function showmessage(msg_id) {
+        iframe = document.getElementById("inbox-iframe");
+        iframe.src = "notification/" + msg_id;
+    }
+
+    function setactive(obj) {
+        $(".notification").removeClass("active");
+        $(obj).addClass("active");
+    }
+
+    $(document).ready(function(){
+        // For all / unread / read
+        $("#filterGroup button").click(function(){
+            let read = $(this).attr("data-read");
+            $(this).siblings().removeClass("active");
+            $(".notifications").addClass("d-none");
+            $(this).addClass("active");
+            if (read === "-1") {
+                return $(".notifications").removeClass("d-none");
+            }
+            $(`.notifications[data-read="${read}"]`).removeClass("d-none");
+        });
+    });
 </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file