Merge pull request #12 from MatthewM/webcpanel

Web Panel Modifications

4 files changed, 214 insertions, 20 deletions

diff --git a/modules/extra/webcpanel/templates/default/chanserv/main.html b/modules/extra/webcpanel/templates/default/chanserv/main.html
index 99fec7d75..dd9288f00 100644
--- a/modules/extra/webcpanel/templates/default/chanserv/main.html
+++ b/modules/extra/webcpanel/templates/default/chanserv/main.html
@@ -1,6 +1,8 @@
 {INCLUDE header.html}
 			<b>Channels you have access in:</b><br/>
+			<div class="cinfo">
 			{FOR CH,ECH IN CHANNEL_NAMES,ESCAPED_CHANNEL_NAMES}
 				<a href="/chanserv/set?channel={ECH}">{CH}</a></br>
 			{END FOR}
+			</div>
 {INCLUDE footer.html}
diff --git a/modules/extra/webcpanel/templates/default/header.html b/modules/extra/webcpanel/templates/default/header.html
index 38f367acc..3cb1cf372 100644
--- a/modules/extra/webcpanel/templates/default/header.html
+++ b/modules/extra/webcpanel/templates/default/header.html
@@ -2,9 +2,98 @@
 <html>
 <head>
 	<link href="/static/style.css" media="screen" rel="stylesheet" type="text/css" />
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 	<title>{TITLE}</title>
+	{IF EXISTS CMDR} 
+	<script type="text/javascript">
+	var tSec=5; //Time in seconds to keep the overlay open
+	var t=(tSec*1000); //Convert the time to ms so we can use it
+	
+	$(document).ready(function() \{
+	
+		/*Modal*/
+		var id = "#dialog";
+		
+		var mHeight;
+		var mWidth;
+		var oHeight = $(id).height();
+		var oWidth = $(id).height();
+		
+		var top;
+		var left;
+		
+		showModal();
+
+		$('.close').click(function (e) \{
+			e.preventDefault();	
+			hideModal();
+		\});
+	
+		$('#mask').click(function () \{
+			hideModal();
+		\});	
+		
+		function hideModal() \{
+			if ($('#mask').not(':hidden')) \{
+				$('.master').fadeTo('slow',1.0);	
+				$('#mask, .window').fadeOut(200);
+			\}					
+		\}
+		
+		function showModal() \{				
+			mHeight = $(document).height();	
+			mWidth = $(window).width();
+			
+			var alertMsg = '<br/>{CMDR}<br/>';
+
+			$('#mask').css(\{'width': mWidth, 'height': mHeight\});	
+			$('#mask').fadeIn(200);		
+			$('#mask').fadeTo('fast',0.75);
+		
+			$('#dialogMsg').html(alertMsg);
+			
+			top = mHeight/2-oHeight/2;
+			left = mWidth/2-oHeight/2;
+			
+			$(id).css('top', top);
+			$(id).css('left', left);
+			$('.master').fadeTo('fast',0.3);								
+			
+			$(id).fadeIn(500);
+			setTimeout(hideModal, t);		
+			
+		\}	
+		
+		$(window).resize(function() \{
+			if ($('#mask').not(':hidden')) \{
+				mHeight = $(document).height();
+				mWidth = $(window).width();
+
+				/* Might as well only change the postion of box if the window is large enough */
+				if ((mHeight > oHeight) && (mWidth > oWidth)) \{ 
+					top = mHeight/2-oHeight/2;
+					left = mWidth/2-oHeight/2;
+					$('#mask').css(\{'width': mWidth, 'height': mHeight\});
+					$(id).css('top', top);
+					$(id).css('left', left);
+				\}
+				
+			\}
+		\})
+						
+	\});
+	</script>
+	{END IF}
 </head>
 <body>
+	<div id="boxes">
+		<div id="dialog" class="window">
+			<h2>Status Message:</h2>
+			<div id="dialogMsg"></div>
+			<div id="dialogClose"><a href="#" class="close">Dismiss</a></div>
+		</div>
+		<div id="mask"></div>
+	</div>	
 	<div class="master">
 		<div class="header">
 			<ul id="button">
diff --git a/modules/extra/webcpanel/templates/default/memoserv/memos.html b/modules/extra/webcpanel/templates/default/memoserv/memos.html
index 559efd35b..4239a926f 100644
--- a/modules/extra/webcpanel/templates/default/memoserv/memos.html
+++ b/modules/extra/webcpanel/templates/default/memoserv/memos.html
@@ -1,7 +1,7 @@
 {INCLUDE header.html}
 		<b>Channels you have access in:</b><br/>
 		{FOR CH,ECH IN CHANNEL_NAMES,ESCAPED_CHANNEL_NAMES}
-			<a href="/memoserv/memos?channel={ECH}">{CH}</a> 
+			<a href="/memoserv/memos?channel={ECH}" class="channel">{CH}</a> 
 		{END FOR}
 		<br/><br/>
 		{FOR M IN MESSAGES}
@@ -9,29 +9,48 @@
 		{END FOR}
 		<br/>
 		{IF EXISTS NUMBER}
+			<script type="text/javascript">
+				$("#memoTable").ready(function() \{
+					$(".reply").click(function(e) \{
+						e.preventDefault();
+						var recv = $(this).attr('href');
+						$("#receiver").val(recv);
+					\});
+				\});
+			</script>
 			<b>Memos List:</b>
-			<table width="100%" height="100%">
+			<table width="100%" height="100%" id="memoTable">
 				<tr>
-					<th>Number</th>
-					<th>Sender</th>
-					<th>Time/Message</th>
+					<th class="akillR1">Number</th>
+					<th class="akillR3">Sender</th>
+					<th class="akillR2">Time/Message</th>
 				</tr>
 				{FOR I,S,T,TXT,U IN NUMBER,SENDER,TIME,TEXT,UNREAD}
-				<tr>
-					<td>{I}</td>
-					<td>{S}</td>
-					<td>{T}</td>
 				{IF EQ U YES}
-					<td><a href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&read=1">Mark as Read</a></td>
+				<tr class="read">
 				{ELSE}
-					<td><a href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&read=2">Mark as Unread</a></td>
+				<tr class="unread">
 				{END IF}
-					<td><a href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&del=1">Delete</a></td>
-
+					<td class="akillR1">{I}</td>
+					<td class="akillR3">{S}</td>
+					<td class="akillR2"><abbr title="{T}">{TXT}</abbr></td>
 				</tr>
-				<tr>
-					<td></td><td></td>
-					<td>{TXT}</td>
+				{IF EQ U YES}
+				<tr class="read">
+					<td></td>
+					<td></td>
+					<td class="right"><a href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&read=1">Mark as Read</a> &nbsp;
+					<a href="{S}" class="reply" id="memo{I}">Reply</a>&nbsp;
+					<a href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&del=1">Delete</a></td>
+				{ELSE}
+				<tr class="unread">
+					<td></td>
+					<td></td>
+					<td class="right"><a href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&read=2">Mark as Unread</a> &nbsp;
+					<a href="{S}" class="reply" id="memo{I}">Reply</a> &nbsp;
+					<a href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&del=1">Delete</a></td>
+				{END IF}
+
 				</tr>
 				{END FOR}
 			</table>
@@ -43,7 +62,7 @@
 
 		<b>Send a new Memo</b>
 		<form method="post" action="/memoserv/memos?channel={ESCAPED_CHANNEL}">
-		Receiver: <input type="text" name="receiver">
+		Receiver: <input type="text" name="receiver" id="receiver" value="">
 		Message: <input type="text" name="message">
 		<input type="submit" value="Send">
 		</form>
diff --git a/modules/extra/webcpanel/templates/default/style.css b/modules/extra/webcpanel/templates/default/style.css
index 7934e4850..13b4e4759 100644
--- a/modules/extra/webcpanel/templates/default/style.css
+++ b/modules/extra/webcpanel/templates/default/style.css
@@ -3,6 +3,7 @@ font-family: 'Cabin', Helvetica, Arial, sans-serif;
 }

 body {

 	overflow:hidden;

+	z-index: 10;

 }

 .master {

 	margin-left:0px;

@@ -101,6 +102,15 @@ body {
 	height: 125px;

 }

 

+.cinfo {

+	overflow-x: scroll;

+	height: 450px;

+}

+

+.right { 

+	text-align: right; 

+}

+/* Table Stuff */

 .akillR1 { 

 	width: 80px;

 	text-align: left;

@@ -114,7 +124,81 @@ body {
 	text-align: left;

 }

 

-.danger { 

-	color: red;

-	weight: bolder; 

+td.right a:link, td.right a:visited {

+	color: #000;

+	background-color: #FFF;

+	border: 1px solid #000;

+	padding: 0px 4px;

+	-webkit-border-radius: 5x;

+  	border-radius: 5px;

+	text-decoration: none;

+}

+

+td.right a:hover {

+	color: #00F;

+}

+

+table#memoTable {

+	border-spacing: 0px;

+	border-collapse: collapse;

+}

+

+table#memoTable tr {

+	padding: 1px;

+}

+

+tr.read  { 

+	background-color: #FFF;

+}

+

+tr.unread {

+	background-color: #EEE;

+}

+ 

+tr.read td, tr.unread td {

+	padding: 2px;	

+}

+

+/* Modal Window */

+#mask {

+	position: absolute;

+	z-index: 9000;

+	background-color: #000;

+	height: 100%;

+	width: 100%;

+	display: none;

+}

+

+#boxes .window {

+  position:fixed;

+  width:440px;

+  height:200px;

+  display:none;

+  z-index:9999;

+  padding:20px;

+}

+ 

+#boxes #dialog {

+	text-align: center;

+	background-color: #FFF;

+  	width:375px; 

+  	height:203px;

+  	padding: 20px;

+  	-webkit-border-radius: 15px;

+  	border-radius: 15px;

+  	display: none;

+}

+

+#dialogClose {

+	padding-top: 20px;

+}

+

+#dialogClose a:link, #dialogClose a:visited { 

+	color: #000;

+	text-decoration: none;

+}

+

+#dialogClose a:hover {

+	color: #000;

+	text-decoration: underline;

 }