aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates
diff options
context:
space:
mode:
authorSawyer Bergeron <sawyerbergeron@gmail.com>2019-01-28 13:07:05 -0500
committerSawyer Bergeron <sawyerbergeron@gmail.com>2019-02-25 11:57:22 -0500
commitde9a0666a8856e42d227754f6dc3915f6928af4c (patch)
tree23507abdad738ab02907305e02e8b59322ee80d3 /src/templates
parentf54fc52fb6d137aabd00d16cb35a608456ac4bbc (diff)
Update Inbox Featureset
Inbox now supports marking unread, marking for deletion, and has a new UI Change-Id: Ia684056f70ecca31bbd71634f4d1d5415f7e5428 Signed-off-by: Sawyer Bergeron <sawyerbergeron@gmail.com>
Diffstat (limited to 'src/templates')
-rw-r--r--src/templates/notifier/inbox.html34
-rw-r--r--src/templates/notifier/notification.html65
-rw-r--r--src/templates/workflow/viewport-base.html1
3 files changed, 80 insertions, 20 deletions
diff --git a/src/templates/notifier/inbox.html b/src/templates/notifier/inbox.html
index 471eae4..4184d1d 100644
--- a/src/templates/notifier/inbox.html
+++ b/src/templates/notifier/inbox.html
@@ -9,7 +9,7 @@
.inbox-panel {
display: grid;
- grid-template-columns: 30% 70%;
+ grid-template-columns: 30% 5% 65%;
}
.section-panel {
@@ -22,7 +22,8 @@
}
.card-container {
- box-shadow: 0 0 5px 2px #cccccc;
+ border: 1px solid #cccccc;
+ border-bottom: 0px;
}
.card {
height: 50px;
@@ -43,7 +44,7 @@
}
#inbox-iframe {
- height: calc(100vh - 130px);
+ height: calc(100vh - 57px);
}
.half_width {
@@ -51,29 +52,45 @@
}
.card-wrapper {
}
+
+ #page-wrapper{
+ padding: 0px;
+ }
+
+ .read_notification{
+ background-color: #efefef;
+ }
</style>
<div class="inbox-panel">
<div class="section-panel">
+ <h4>New:</h4>
<div class="card-container">
- {% for notification in notifications %}
+ {% for notification in unread_notifications %}
<div class="inbox-entry card" onclick="showmessage({{notification.id}}); setactive(this);">
{{ notification }}
</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>
+ {% 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" onload="sizetoiframe(this);">Please select a notification</iframe>
+ <iframe id="inbox-iframe" frameBorder="0" width="100%" height="100vh" scrolling="yes">Please select a notification</iframe>
</div>
</div>
</div>
<script type="text/javascript">
- $('#inbox-iframe').load(function() {
- sizetoiframe(this);
- })
function showmessage(msg_id)
{
@@ -82,5 +99,4 @@
}
</script>
-
{% endblock %}
diff --git a/src/templates/notifier/notification.html b/src/templates/notifier/notification.html
index 65d26c9..0eafa60 100644
--- a/src/templates/notifier/notification.html
+++ b/src/templates/notifier/notification.html
@@ -2,19 +2,55 @@
{% block extrahead %}
<base target="_parent">
{% endblock %}
+
{% block basecontent %}
-<div class="card-container">
-<h3 class="msg_header">{{notification.title}}</h3>
-<p class="content"></p>
-<pre>
-{{notification.content|safe}}
-</pre>
+<script>
+ function send_request(post_data){
+ var form = $("#notification_action_form");
+ var formData = form.serialize() + '&' + post_data + '=true';
+ var req = new XMLHttpRequest();
+ req.open("POST", ".", false);
+ req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+ req.onerror = function() { alert("problem occurred while trying to cancel current workflow"); }
+ req.onreadystatechange = function() { if(req.readyState === 4){
+ window.top.location.href += '';
+ }};
+ req.send(formData);
+ }
+ function delete_notification()
+ {
+ send_request("delete");
+ }
+ function mark_unread()
+ {
+ send_request("unread");
+ }
+</script>
+<div>
+ <h3 class="msg_header">{{notification.title}}
+ <div class="btn_group">
+ <button class="btn btn-primary inbox-btn" onclick="mark_unread()">Mark Unread</button>
+ <button class="btn btn-danger inbox-btn" onclick="delete_notification()">Delete</button>
+ </div>
+ </h3>
</div>
+<p class="content-divider"></p>
+
+{% if not notification.is_html %}
+<pre>
+{% endif %}
+ {{notification.content|safe}}
+{% if not notification.is_html %}
+</pre>
+{% endif %}
+<form id="notification_action_form" action="." method="post">
+ {% csrf_token %}
+</form>
+
<style media="screen">
.card-container {
- box-shadow: 0 0 5px 2px #cccccc;
border: 1px solid #ffffff;
margin-top: 11px;
}
@@ -28,11 +64,20 @@
background-color: #ffffff;
z-index: 5;
}
-
.sender {
color: #636363;
}
-
-
+ .content-divider {
+ border-bottom: 1px solid #cccccc;
+ padding-bottom: 15px;
+ clear: right;
+ }
+ .inbox-btn{
+ display: inline;
+ margin: 3px;
+ }
+ .btn_group{
+ float: right;
+ }
</style>
{% endblock %}
diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html
index 9ddb4b8..f78bc01 100644
--- a/src/templates/workflow/viewport-base.html
+++ b/src/templates/workflow/viewport-base.html
@@ -419,7 +419,6 @@
var page_rect = document.getElementById("wrapper").getBoundingClientRect();
var title_rect = document.getElementById("iframe_header").getBoundingClientRect();
var iframe_height = page_rect.bottom - title_rect.bottom;
- console.log("setting height to " + iframe_height);
document.getElementById("viewport-iframe").height = iframe_height;
}