6 files changed, 279 insertions, 29 deletions
diff --git a/phpBB/styles/prosilver/template/ajax.js b/phpBB/styles/prosilver/template/ajax.js
index fa31d3268f..f0a9cd84e3 100644
--- a/phpBB/styles/prosilver/template/ajax.js
+++ b/phpBB/styles/prosilver/template/ajax.js
@@ -76,7 +76,18 @@ $('#qr_full_editor').click(function() {
 	});
 });
 
+// Toggle notification list
+$('#notification_list_button').click(function(e) {
+	$('#notification_list').toggle();
+	e.preventDefault();
+});
+$('#phpbb').click(function(e) {
+    var target = e.target;
 
+    if (!$(target).is('#notification_list') && !$(target).is('#notification_list_button') && !$(target).parents().is('#notification_list')) {
+        $('#notification_list').hide();
+    }
+});
 
 /**
  * This AJAXifies the quick-mod tools. The reason it cannot be a standard
diff --git a/phpBB/styles/prosilver/template/overall_header.html b/phpBB/styles/prosilver/template/overall_header.html
index 79a8b07971..7f0daddb51 100644
--- a/phpBB/styles/prosilver/template/overall_header.html
+++ b/phpBB/styles/prosilver/template/overall_header.html
@@ -5,7 +5,7 @@
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 {META}
-<title><!-- IF not S_VIEWTOPIC and not S_VIEWFORUM -->{SITENAME} - <!-- ENDIF --><!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF -->{PAGE_TITLE}<!-- IF S_VIEWTOPIC or S_VIEWFORUM --> - {SITENAME}<!-- ENDIF --></title>
+<title><!-- IF UNREAD_NOTIFICATIONS_COUNT -->({UNREAD_NOTIFICATIONS_COUNT}) <!-- ENDIF --><!-- IF not S_VIEWTOPIC and not S_VIEWFORUM -->{SITENAME} - <!-- ENDIF --><!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF -->{PAGE_TITLE}<!-- IF S_VIEWTOPIC or S_VIEWFORUM --> - {SITENAME}<!-- ENDIF --></title>
 
 <!-- IF S_ENABLE_FEEDS -->
 	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
@@ -130,9 +130,46 @@
 
 			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
 			<ul class="linklist leftside">
+				<!-- IF S_NOTIFICATIONS_DISPLAY -->
+				<li>
+					[ <a href="#" id="notification_list_button" title="{NOTIFICATIONS_COUNT}">{NOTIFICATIONS_COUNT}</a> ] &bull;
+					<div id="notification_list" class="notification_list">
+						<div class="header">
+							{L_NOTIFICATIONS}
+						</div>
+
+						<ul>
+							<!-- IF not .notifications -->
+								<li>
+									{L_NO_NOTIFICATIONS}
+								</li>
+							<!-- ENDIF -->
+							<!-- BEGIN notifications -->
+								<li class="<!-- IF notifications.UNREAD --> bg2<!-- ENDIF -->">
+									<!-- IF notifications.URL --><a href="<!-- IF notifications.UNREAD -->{notifications.U_MARK_READ}<!-- ELSE -->{notifications.URL}<!-- ENDIF -->"><!-- ENDIF -->
+										{notifications.AVATAR}
+										<div>
+											<p>{notifications.FORMATTED_TITLE}</p>
+											<p>{notifications.TIME}</p>
+
+											<!-- IF not notifications.URL and notifications.U_MARK_READ -->
+												<p><a href="{notifications.U_MARK_READ}">{L_MARK_READ}</a></p>
+											<!-- ENDIF -->
+										</div>
+									<!-- IF notifications.URL --></a><!-- ENDIF -->
+								</li>
+				   			<!-- END notifications -->
+						</ul>
+
+						<div class="footer">
+							<a href="{U_VIEW_ALL_NOTIFICATIONS}"><span>{L_SEE_ALL}</span></a>
+						</div>
+					</div>
+				</li>
+				<!-- ENDIF -->
 				<li class="icon-ucp">
 					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
-						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a>)<!-- ENDIF -->
+					<!-- IF not S_NOTIFICATIONS_DISPLAY and S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a>)<!-- ENDIF -->
 					<!-- IF S_DISPLAY_SEARCH --> &bull;
 					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
 					<!-- ENDIF -->
diff --git a/phpBB/styles/prosilver/template/ucp_notifications.html b/phpBB/styles/prosilver/template/ucp_notifications.html
new file mode 100644
index 0000000000..85edf4629b
--- /dev/null
+++ b/phpBB/styles/prosilver/template/ucp_notifications.html
@@ -0,0 +1,131 @@
+<!-- INCLUDE ucp_header.html -->
+
+<form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE}>
+
+<h2>{TITLE}</h2>
+<div class="panel">
+	<div class="inner">
+
+		<p>{TITLE_EXPLAIN}</p>
+
+		<!-- IF MODE == 'notification_options' -->
+			<ul class="topiclist">
+				<li class="header">
+					<dl>
+						<dt>{L_NOTIFICATION_TYPE}</dt>
+						<!-- BEGIN notification_methods -->
+							<dd class="mark">{notification_methods.NAME}</dd>
+						<!-- END notification_methods -->
+						<dd class="mark">{L_NOTIFICATIONS}</dd>
+					</dl>
+				</li>
+			</ul>
+			<ul class="topiclist cplist">
+
+			<!-- BEGIN notification_types -->
+				<!-- IF notification_types.GROUP_NAME -->
+					<li class="row bg3">
+						<dl>
+							<dt>
+								{notification_types.GROUP_NAME}
+							</dt>
+						</dl>
+					</li>
+				<!-- ELSE -->
+					<li class="row<!-- IF notification_types.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
+						<dl>
+							<dt>
+								{notification_types.NAME}
+								<!-- IF notification_types.EXPLAIN --><br />&nbsp; &nbsp;{notification_types.EXPLAIN}<!-- ENDIF -->
+							</dt>
+							<!-- BEGIN notification_methods -->
+								<dd class="mark"><input type="checkbox" name="{notification_types.TYPE}_{notification_methods.METHOD}"<!-- IF notification_methods.SUBSCRIBED --> checked="checked"<!-- ENDIF --> /> <dfn>{notification_methods.NAME}</dfn></dd>
+							<!-- END notification_methods -->
+							<dd class="mark"><input type="checkbox" name="{notification_types.TYPE}_notification"<!-- IF notification_types.SUBSCRIBED --> checked="checked"<!-- ENDIF --> /> <dfn>{notification_methods.NAME}</dfn></dd>
+						</dl>
+					</li>
+				<!-- ENDIF -->
+			<!-- END notification_types -->
+			</ul>
+		<!-- ELSE -->
+			<!-- IF .pagination or TOTAL_COUNT -->
+				<div class="topic-actions">
+					<div class="pagination">
+						<!-- IF U_MARK_ALL --><a href="{U_MARK_ALL}">{L_NOTIFICATIONS_MARK_ALL_READ}</a> &bull; <!-- ENDIF -->
+						<!-- IF TOTAL_COUNT -->{TOTAL_COUNT} &bull; <!-- ENDIF -->
+						<!-- IF .pagination -->
+							<!-- INCLUDE pagination.html -->
+						<!-- ELSE -->
+							{PAGE_NUMBER}
+						<!-- ENDIF -->
+					</div>
+				</div>
+			<!-- ENDIF -->
+
+			<div class="notification_list">
+				<ul class="topiclist">
+					<li class="header">
+						<dl>
+							<dt>{L_NOTIFICATIONS}</dt>
+							<dd class="mark">{L_MARK_READ}</dd>
+						</dl>
+					</li>
+					<!-- IF not .notifications -->
+						<li>
+							<dl>
+								<dt>{L_NO_NOTIFICATIONS}</dt>
+							</dl>
+						</li>
+					<!-- ENDIF -->
+					<!-- BEGIN notification_list -->
+						<li class="row<!-- IF notification_list.UNREAD --> bg3<!-- ELSE --><!-- IF notification_list.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF --><!-- ENDIF -->">
+							<dl>
+								<dt>
+									<!-- IF notification_list.URL --><a href="<!-- IF notification_list.UNREAD -->{notification_list.U_MARK_READ}<!-- ELSE -->{notification_list.URL}<!-- ENDIF -->"><!-- ENDIF -->
+										{notification_list.AVATAR}
+										<div>
+											<p>{notification_list.FORMATTED_TITLE}</p>
+											<p>{notification_list.TIME}</p>
+
+											<!-- IF not notification_list.URL and notification_list.U_MARK_READ -->
+												<p><a href="{notification_list.U_MARK_READ}">{L_MARK_READ}</a></p>
+											<!-- ENDIF -->
+										</div>
+									<!-- IF notification_list.URL --></a><!-- ENDIF -->
+								</dt>
+
+								<dd class="mark">&nbsp;<!-- IF notification_list.UNREAD --><input type="checkbox" name="mark[]" value="{notification_list.NOTIFICATION_ID}" /> <dfn>{L_MARK_READ}</dfn><!-- ENDIF -->&nbsp;</dd>
+							</dl>
+						</li>
+					<!-- END notification_list -->
+				</ul>
+			</div>
+
+			<!-- IF .pagination or TOTAL_COUNT -->
+				<div class="topic-actions">
+					<div class="pagination">
+						<!-- IF TOTAL_COUNT -->{TOTAL_COUNT} &bull; <!-- ENDIF -->
+						<!-- IF .pagination -->
+							<!-- INCLUDE pagination.html -->
+						<!-- ELSE -->
+							{PAGE_NUMBER}
+						<!-- ENDIF -->
+					</div>
+				</div>
+			<!-- ENDIF -->
+
+		<!-- ENDIF -->
+	</div>
+</div>
+
+
+<fieldset class="submit-buttons">
+	<input type="hidden" name="form_time" value="{FORM_TIME}" />
+	{S_HIDDEN_FIELDS}<input type="reset" value="{L_RESET}" name="reset" class="button2" />&nbsp;
+	<input type="submit" name="submit" value="{L_SUBMIT}" class="button1" />
+	{S_FORM_TOKEN}
+</fieldset>
+
+</form>
+
+<!-- INCLUDE ucp_footer.html -->
diff --git a/phpBB/styles/prosilver/template/ucp_prefs_personal.html b/phpBB/styles/prosilver/template/ucp_prefs_personal.html
index 4382e891fd..d99355507b 100644
--- a/phpBB/styles/prosilver/template/ucp_prefs_personal.html
+++ b/phpBB/styles/prosilver/template/ucp_prefs_personal.html
@@ -50,20 +50,6 @@
 		</dl>
 	<!-- ENDIF -->
 	<dl>
-		<dt><label for="notifypm1">{L_NOTIFY_ON_PM}{L_COLON}</label></dt>
-		<dd>
-			<label for="notifypm1"><input type="radio" name="notifypm" id="notifypm1" value="1"<!-- IF S_NOTIFY_PM --> checked="checked"<!-- ENDIF --> /> {L_YES}</label> 
-			<label for="notifypm0"><input type="radio" name="notifypm" id="notifypm0" value="0"<!-- IF not S_NOTIFY_PM --> checked="checked"<!-- ENDIF --> /> {L_NO}</label>
-		</dd>
-	</dl>
-	<dl>
-		<dt><label for="popuppm0">{L_POPUP_ON_PM}{L_COLON}</label></dt>
-		<dd>
-			<label for="popuppm1"><input type="radio" name="popuppm" id="popuppm1" value="1"<!-- IF S_POPUP_PM --> checked="checked"<!-- ENDIF --> /> {L_YES}</label> 
-			<label for="popuppm0"><input type="radio" name="popuppm" id="popuppm0" value="0"<!-- IF not S_POPUP_PM --> checked="checked"<!-- ENDIF --> /> {L_NO}</label>
-		</dd>
-	</dl>
-	<dl>
 		<dt><label for="lang">{L_BOARD_LANGUAGE}{L_COLON}</label></dt>
 		<dd><select name="lang" id="lang">{S_LANG_OPTIONS}</select></dd>
 	</dl>
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index d7ce9a7622..bebf3566ee 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -1,4 +1,4 @@
-/*  	
+/*
 --------------------------------------------------------------
 Colours and backgrounds for common.css
 -------------------------------------------------------------- */
@@ -65,7 +65,7 @@ hr {
 
 .panel {
 	background-color: #ECF1F3;
-	color: #28313F;	
+	color: #28313F;
 }
 
 .post:target .content {
@@ -219,7 +219,7 @@ p.rules {
 	background-image: none;
 }
 
-/*  	
+/*
 --------------------------------------------------------------
 Colours and backgrounds for links.css
 -------------------------------------------------------------- */
@@ -312,7 +312,7 @@ a.topictitle:active {
 	color: #105289;
 }
 
-/* Profile searchresults */	
+/* Profile searchresults */
 .search .postprofile a {
 	color: #105289;
 }
@@ -349,7 +349,7 @@ a.right:hover {
 }
 
 
-/*  	
+/*
 --------------------------------------------------------------
 Colours and backgrounds for content.css
 -------------------------------------------------------------- */
@@ -644,7 +644,7 @@ fieldset.polls dd div {
 	background-image: url("./en/icon_user_online.gif");
 }
 
-/*  	
+/*
 --------------------------------------------------------------
 Colours and backgrounds for buttons.css
 -------------------------------------------------------------- */
@@ -752,7 +752,7 @@ a.sendemail {
 .pm_read														{ background-image: url("./images/topic_read.gif"); }
 .pm_unread														{ background-image: url("./images/topic_unread.gif"); }
 
-/*  	
+/*
 --------------------------------------------------------------
 Colours and backgrounds for cp.css
 -------------------------------------------------------------- */
@@ -921,7 +921,7 @@ dl.mini dt {
 	background-color: #EEE;
 }
 
-/*  	
+/*
 --------------------------------------------------------------
 Colours and backgrounds for forms.css
 -------------------------------------------------------------- */
@@ -976,7 +976,7 @@ fieldset.quick-login input.inputbox {
 /* Input field styles
 ---------------------------------------- */
 .inputbox {
-	background-color: #FFFFFF; 
+	background-color: #FFFFFF;
 	border-color: #B4BAC0;
 	color: #333333;
 }
@@ -1044,3 +1044,16 @@ input.disabled {
 	background-color: #000000;
 }
 
+#notification_list {
+	background-color: #FFFFFF;
+	border-color: #00608F;
+}
+
+#notification_list ul li:hover {
+	background-color: #CFE1F6;
+	color: #000000;
+}
+
+#notification_list > .header, .notification_list > .footer {
+	border-color: #00608F;
+}
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index 50b22f44df..570f709ddd 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -9,8 +9,8 @@ b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
@@ -21,7 +21,7 @@ time, mark, audio, video {
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
+article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
@@ -164,7 +164,7 @@ ul ul, ol ul {
 
 ol ol ul, ol ul ul, ul ol ul, ul ul ul {
 	list-style-type: square;
-} 
+}
 
 
 /* Main blocks
@@ -672,3 +672,75 @@ p.rules a {
 .smilies {
 	vertical-align: text-bottom;
 }
+
+#notification_list {
+	display: none;
+	position: absolute;
+	width: 330px;
+	z-index: 1;
+	border: 1px solid;
+	border-radius: 4px;
+	box-shadow: 4px 4px 5px;
+}
+
+#notification_list ul {
+	max-height: 350px;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+#notification_list ul li {
+	width: ;
+	padding: 10px;
+	margin: 0;
+	float: left;
+	border-bottom: 1px solid;
+	list-style-type: none;
+	font-size: 0.95em;
+	clear: both;
+}
+
+#notification_list ul li {
+	width: 310px;
+}
+
+#notification_list ul li:last-child {
+	border-bottom: 0px;
+}
+
+#notification_list > .header {
+	padding: 0 5px;
+	font-weight: bold;
+	border-bottom: 1px solid;
+}
+
+#notification_list > .footer {
+	text-align: center;
+	font-size: 1.2em;
+	border-top: 1px solid;
+}
+
+#notification_list ul li a, .notification_list dt > a, #notification_list > .footer > a {
+	display: block;
+}
+
+.notification_list ul li img {
+	float: left;
+	max-width: 50px;
+	max-height: 50px;
+	margin-right: 5px;
+}
+
+#notification_list ul li div {
+	width: 240px;
+	float: left;
+}
+
+.notification_list ul li p {
+	margin: 0;
+	word-wrap: break-word;
+}
+
+.notification_list ul.topiclist dt {
+	width: 88%;
+}