This floating box shows the message texts as a dialog-like box rather
than as a box under the navigation bar.
Signed-off-by: Darryl L. Pierce <mcpierce(a)gmail.com>
---
app/views/layouts/default.html.erb | 22 ++++++++++++++-
public/javascripts/alerts.js | 7 +++++
public/stylesheets/alerts.css | 49 ++++++++++++++++++++++++++++++++++++
public/stylesheets/projxp.css | 22 ----------------
4 files changed, 76 insertions(+), 24 deletions(-)
create mode 100644 public/javascripts/alerts.js
create mode 100644 public/stylesheets/alerts.css
diff --git a/app/views/layouts/default.html.erb b/app/views/layouts/default.html.erb
index 2739459..f947399 100644
--- a/app/views/layouts/default.html.erb
+++ b/app/views/layouts/default.html.erb
@@ -3,11 +3,13 @@
<title><%= "#{ConfigProperty.fetch('system.name',
'ProjXP')}-#{@title}" %></title>
<%= javascript_include_tag :defaults %>
+ <%= javascript_include_tag "alerts.js" %>
<%= stylesheet_link_tag "navbar.css" %>
<%= stylesheet_link_tag "forms.css" %>
<%= stylesheet_link_tag "details.css" %>
+ <%= stylesheet_link_tag "alerts.css" %>
<%= stylesheet_link_tag "projxp.css" %>
<%= stylesheet_link_tag "sidebar.css" %>
<%= stylesheet_link_tag "tables.css" %>
@@ -42,9 +44,25 @@
</div>
<% if flash[:message] %>
- <div id="messages">
- <%= flash[:message] %>
+
+ <%# if javascript iss disabled, show a standard message box %>
+ <noscript>
+ <div id="messages">
+ <%= flash[:message] %>
+ </div>
+ </noscript>
+
+ <%# else, use javascript to show a fancier message box %>
+
+ <div id="message-box">
+ <a href="#" id="close"
onclick="hide_message_box('message-box')">X</a>
+ <p><%= flash[:message] %></p>
</div>
+
+ <script type="text/javascript">
+ show_message_box('message-box');
+ </script>
+
<% end %>
<div style="padding: 5px">
diff --git a/public/javascripts/alerts.js b/public/javascripts/alerts.js
new file mode 100644
index 0000000..bbc52a4
--- /dev/null
+++ b/public/javascripts/alerts.js
@@ -0,0 +1,7 @@
+function show_message_box(boxid) {
+ document.getElementById(boxid).style.display = 'block';
+}
+
+function hide_message_box(boxid) {
+ document.getElementById(boxid).style.display = 'none';
+}
diff --git a/public/stylesheets/alerts.css b/public/stylesheets/alerts.css
new file mode 100644
index 0000000..cc8908a
--- /dev/null
+++ b/public/stylesheets/alerts.css
@@ -0,0 +1,49 @@
+div#errors, div#messages {
+ width: 90%;
+ margin: 10px 0px 10px 5%;
+ font-weight: bold;
+ text-align: center;
+ padding: 10px 5px 10px 5px;
+}
+
+div#errors {
+ border-width: 1px;
+ border-style: solid;
+ background-color: #8b0000;
+ color: #ffff00;
+}
+
+div#messages {
+ border-width: 1px;
+ border-style: solid;
+ background-color: #fff8dc;
+ color: #000000;
+}
+
+div#message-box {
+ position: absolute;
+ right: 100px;
+ top: 25px;
+ background-color: #fff8dc;
+ color: #000000;
+ font-weight: bold;
+ border: 1px solid #000;
+
+ display: none;
+}
+
+div#message-box p {
+ padding: 25px;
+}
+
+div#message-box a#close {
+ float: right;
+ text-decoration: none;
+ font-weight: bold;
+ color: #333;
+ background-color: #fff;
+ border-left: 1px solid #333;
+ border-bottom: 1px solid #333;
+ padding: 0 4px;
+ margin-left: 5px;
+}
diff --git a/public/stylesheets/projxp.css b/public/stylesheets/projxp.css
index ad5d642..7be9616 100644
--- a/public/stylesheets/projxp.css
+++ b/public/stylesheets/projxp.css
@@ -77,25 +77,3 @@ div.pagination {
text-decoration: none;
padding-left: 25px;
}
-
-div#errors, div#messages {
- width: 90%;
- margin: 10px 0px 10px 5%;
- font-weight: bold;
- text-align: center;
- padding: 10px 5px 10px 5px;
-}
-
-div#errors {
- border-width: 1px;
- border-style: solid;
- background-color: #8b0000;
- color: #ffff00;
-}
-
-div#messages {
- border-width: 1px;
- border-style: solid;
- background-color: #fff8dc;
- color: #000000;
-}
--
1.6.0.6