Ticket #711 - User end.

inc/js/classes/BxDolCmts.js

@@ -421,7 +421,7 @@ BxDolCmts.prototype.showLiveUpdate = function(oData)
 BxDolCmts.prototype.previousLiveUpdate = function(oLink)
 {
 	var fPrevious = function() {
-		var sClass = 'cmt-notif';
+		var sClass = 'bx-popup-chain-item';
 		$(oLink).parents('.' + sClass + ':first').hide().prev('.' + sClass).show();
 	};
 

template/comments_notification.html

@@ -1,40 +1,24 @@
-<div id="__html_id__" class="__style_prefix__-notifs" style="display:none;">
-	<bx_repeat:notifs>
-		<div class="__style_prefix__-notif bx-def-border bx-def-round-corners bx-def-box-sizing"<bx_if:show_as_hidden> style="display:none;"</bx_if:show_as_hidden>>
-			<div class="__style_prefix__-notif-cnt bx-def-margin-leftright">
-				<div class="__style_prefix__-notif-comment bx-def-margin-topbottom">
-					<div class="__style_prefix__-notif-avatar bx-def-thumb bx-def-thumb-size">
-						<bx_if:show_icon>
-							<img class="bx-def-thumb bx-def-thumb-size" src="__author_icon__" />
-						</bx_if:show_icon>
-						<bx_if:show_icon_empty>
-							<i class="sys-icon user"></i>
-						</bx_if:show_icon_empty>
-					</div>
-					<div class="__style_prefix__-notif-info bx-def-thumb-size-min-height bx-def-thumb-size-left-indent bx-def-font-small">
-						<div class="__style_prefix__-notifi-username">
-							<b class="__style_prefix__-notifi-username">
-								<bx_if:show_author_link><a href="__author_link__" title="__author_title__">__author_name__</a>: </bx_if:show_author_link>
-								<bx_if:show_author_text>__author_name__: </bx_if:show_author_text>
-							</b>
-							__text__
-						</div>
-						<div class="__style_prefix__-notifi-actions">
-							<a href="javascript:void(0)" onclick="__show_onclick__"><bx_text:_cmt_txt_link_show /></a>
-							<bx_text:_cmt_txt_or />
-							<a href="javascript:void(0)" onclick="__reply_onclick__"><bx_text:_cmt_txt_link_reply /></a>
-						</div>
-					</div>
-				</div>
-			</div>
-			<bx_if:show_previous>
-				<div class="__style_prefix__-notif-actions cmt-na-left bx-def-padding-thd-left">
-					<a href="javascript:void(0)" onclick="javascript:__js_object__.previousLiveUpdate(this);"><i class="sys-icon arrow-left"></i></a>
-				</div>
-			</bx_if:show_previous>
-			<div class="__style_prefix__-notif-actions cmt-na-right bx-def-padding-thd-right">
-				<a href="javascript:void(0)" onclick="javascript:__js_object__.hideLiveUpdate(this);"><i class="sys-icon times"></i></a>
-			</div>
+<div class="__style_prefix__-notif-comment">
+	<div class="__style_prefix__-notif-avatar bx-def-thumb bx-def-thumb-size">
+		<bx_if:show_icon>
+			<img class="bx-def-thumb bx-def-thumb-size" src="__author_icon__" />
+		</bx_if:show_icon>
+		<bx_if:show_icon_empty>
+			<i class="sys-icon user"></i>
+		</bx_if:show_icon_empty>
+	</div>
+	<div class="__style_prefix__-notif-info bx-def-thumb-size-min-height bx-def-thumb-size-left-indent bx-def-font-small">
+		<div class="__style_prefix__-notifi-username">
+			<b class="__style_prefix__-notifi-username">
+				<bx_if:show_author_link><a href="__author_link__" title="__author_title__">__author_name__</a>: </bx_if:show_author_link>
+				<bx_if:show_author_text>__author_name__: </bx_if:show_author_text>
+			</b>
+			__text__
 		</div>
-	</bx_repeat:notifs>
+		<div class="__style_prefix__-notifi-actions">
+			<a href="javascript:void(0)" onclick="__onclick_show__"><bx_text:_cmt_txt_link_show /></a>
+			<bx_text:_cmt_txt_or />
+			<a href="javascript:void(0)" onclick="__onclick_reply__"><bx_text:_cmt_txt_link_reply /></a>
+		</div>
+	</div>
 </div>

template/css/cmts.css

@@ -203,38 +203,7 @@
     div.cmts-uploader-file-preview img {
 		background-position: center center;
 		background-repeat: no-repeat;
-    }
-
-    /*--- Live Update Notification Styles ---*/
-    div.cmt-notifs {
-		position: relative;
-    	max-width: 22.5rem;
-    }
-    div.cmt-notif {
-    	position: relative;
-
-    	width: 100%;
-
-    	border-color: rgba(0, 0, 0, 0.2);
-    	background-color: #ffffff;
-
-    	box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2);
-    }
-    div.cmt-notif-cnt {}
-    div.cmt-notif-actions {
-		position: absolute;
-    	top: 0px;
-    }
-	div.cmt-na-left {
-    	left: 0px;
-	}
-    div.cmt-na-right {
-    	right: 0px;
-	}
-    div.cmt-notif-actions a {
-    	line-height: initial;
-    	text-decoration: none;
-    }
+    }  
 
     /*--- Comment Styles in Live Update Notification ---*/
 	div.cmt-notif-comment {

template/css/common.css

@@ -331,8 +331,48 @@ body > .bx-popup-wrapper {
 	font-size: 1.75rem;
 	color: #9c9c9c;
 }
-/* --------------- message box */
 
+/* --------------- chain notifications */
+div.bx-popup-chain {
+    position: relative;
+    max-width: 22.5rem;
+}
+div.bx-popup-chain-item {
+    position: relative;
+
+    width: 100%;
+
+    border-color: rgba(0, 0, 0, 0.2);
+    background-color: #ffffff;
+
+    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2);
+}
+div.bx-popup-chain-item-cnt {
+	padding: 1.25rem;
+}
+div.bx-popup-chain-item-actions {
+    position: absolute;
+    top: 0px;
+}
+div.bx-popup-cia-left {
+    left: 0px;
+}
+div.bx-popup-cia-right {
+    right: 0px;
+}
+div.bx-popup-chain-item-actions a {
+    line-height: initial;
+    text-decoration: none;
+}
+div.bx-popup-chain-item-actions .sys-icon {
+	display: inline-block;
+	width: 1.5rem;
+	height: 1.5rem;
+	line-height: 1.5rem;
+	text-align: center;
+}
+
+/* --------------- message box */
 .bx-msg-box-container {
     padding:0px 5px;
     text-align:center;

template/popup_chain.html

@@ -0,0 +1,15 @@
+<div id="__html_id__" class="bx-popup-chain" style="display:none;">
+	<bx_repeat:items>
+		<div class="bx-popup-chain-item bx-def-border bx-def-round-corners bx-def-box-sizing"<bx_if:show_as_hidden> style="display:none;"</bx_if:show_as_hidden>>
+			<div class="bx-popup-chain-item-cnt">__item__</div>
+			<bx_if:show_previous>
+				<div class="bx-popup-chain-item-actions bx-popup-cia-left">
+					<a href="javascript:void(0)" onclick="javascript:__onclick_previous__;"><i class="sys-icon arrow-left"></i></a>
+				</div>
+			</bx_if:show_previous>
+			<div class="bx-popup-chain-item-actions bx-popup-cia-right">
+				<a href="javascript:void(0)" onclick="javascript:__onclick_close__;"><i class="sys-icon times"></i></a>
+			</div>
+		</div>
+	</bx_repeat:items>
+</div>

template/scripts/BxBaseCmts.php

@@ -328,6 +328,7 @@ class BxBaseCmts extends BxDolCmts
 			return '';
 
 		$sJsObject = $this->getJsObjectName();
+		$oTemplate = BxDolTemplate::getInstance();
 
 		$aComments = array_reverse($aComments);
 		$iComments = count($aComments);
@@ -339,29 +340,29 @@ class BxBaseCmts extends BxDolCmts
 			$sShowOnClick = "javascript:" . $sJsObject . ".goTo(this, '" . $this->_sSystem . $iCommentId . "', '" . $iCommentId . "');";
 			$sReplyOnClick = "javascript:" . $sJsObject . ".goToAndReply(this, '" . $this->_sSystem . $iCommentId . "', '" . $iCommentId . "');";
 
-	    	$aTmplVarsNotifs[] = array_merge(array(
-	    		'style_prefix' => $this->_sStylePrefix,
-	    		'js_object' => $sJsObject,
+	    	$aTmplVarsNotifs[] = array(
 	    		'bx_if:show_as_hidden' => array(
 	    			'condition' => $iIndex < ($iComments - 1),
 	    			'content' => array(),
 	    		),
-				'show_onclick' => $sShowOnClick,
-	    		'reply_onclick' => $sReplyOnClick,
+	    		'item' => $oTemplate->parseHtmlByName('comments_notification.html', array_merge(array(
+	    			'style_prefix' => $this->_sStylePrefix,
+	    			'onclick_show' => $sShowOnClick,
+	    			'onclick_reply' => $sReplyOnClick,
+	    		), $this->_getTmplVarsAuthor($aComment), $this->_getTmplVarsText($aComment))),
 	    		'bx_if:show_previous' => array(
 	    			'condition' => $iIndex > 0,
 	    			'content' => array(
-	    				'style_prefix' => $this->_sStylePrefix,
-	    				'js_object' => $sJsObject
+	    				'onclick_previous' => $sJsObject . '.previousLiveUpdate(this)'
 	    			)
-	    		)
-			), $this->_getTmplVarsAuthor($aComment), $this->_getTmplVarsText($aComment));
+	    		),
+	    		'onclick_close' => $sJsObject . '.hideLiveUpdate(this)'
+			);
 		}
 
-		return BxDolTemplate::getInstance()->parseHtmlByName('comments_notification.html', array(
+		return $oTemplate->parseHtmlByName('popup_chain.html', array(
 			'html_id' => $this->getNotificationId(),
-			'style_prefix' => $this->_sStylePrefix,
-			'bx_repeat:notifs' => $aTmplVarsNotifs
+			'bx_repeat:items' => $aTmplVarsNotifs
 		));
     }