From 136e3cb7720d2caf3ba1baa5142e08c286b4be9f Mon Sep 17 00:00:00 2001
From: ovclas <ovclas@gmail.com>
Date: Wed, 26 Sep 2012 05:07:38 +0000
Subject: [PATCH] issue 2384 Comment UI refactoring

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11519 201d5d3c-b55e-5fd7-737f-ddc643e51545
---
 modules/comment/tpl/comment_list.html  | 133 ++++++++++++++-----------
 modules/comment/tpl/declared_list.html |  18 ++--
 modules/comment/tpl/header.html        |  12 ++-
 3 files changed, 90 insertions(+), 73 deletions(-)

diff --git a/modules/comment/tpl/comment_list.html b/modules/comment/tpl/comment_list.html
index dde204367..3bfc71ab3 100644
--- a/modules/comment/tpl/comment_list.html
+++ b/modules/comment/tpl/comment_list.html
@@ -10,15 +10,17 @@ xe.lang.msg_empty_search_keyword = '{$lang->msg_empty_search_keyword}';
 <form id="fo_list" action="./" method="post" class="form">
 	<h1 class="h1">{$lang->comment}</h1>
 	<div class="table even">
-		<div class="cnb">
-			<a href="{getUrl('search_keyword','','act','dispCommentAdminList', 'Y')}" <!--@if($search_keyword == '')-->class="active"<!--@end-->>{$lang->all}</a>
-			| <a href="{getUrl('search_target','is_secret','search_keyword', 'N')}" <!--@if($search_target == 'is_secret' && $search_keyword == 'N')-->class="active"<!--@end-->>{$secret_name_list['N']}</a>
-			| <a href="{getUrl('search_target','is_secret','search_keyword', 'Y')}" <!--@if($search_target == 'is_secret' && $search_keyword == 'Y')-->class="active"<!--@end-->>{$secret_name_list['Y']}</a>
-			| <a href="{getUrl('search_target','is_published','search_keyword', 'N')}" <!--@if($search_target == 'is_published' && $search_keyword == 'N')-->class="active"<!--@end-->>{$lang->published_name_list['N']}</a>
-			| <a href="{getUrl('search_target','is_published','search_keyword', 'Y')}" <!--@if($search_target == 'is_published' && $search_keyword == 'Y')-->class="active"<!--@end-->>{$lang->published_name_list['Y']}</a>
+		<div class="x_tabbable">
+			<ul class="x_nav x_nav-tabs">
+				<li <!--@if($search_keyword == '')-->class="x_active"<!--@end-->><a href="{getUrl('search_keyword','','act','dispCommentAdminList', 'Y')}">{$lang->all}</a></li>
+				<li <!--@if($search_target == 'is_secret' && $search_keyword == 'N')-->class="x_active"<!--@end-->><a href="{getUrl('search_target','is_secret','search_keyword', 'N')}">{$secret_name_list['N']}</a></li>
+				<li <!--@if($search_target == 'is_secret' && $search_keyword == 'Y')-->class="x_active"<!--@end-->><a href="{getUrl('search_target','is_secret','search_keyword', 'Y')}">{$secret_name_list['Y']}</a></li>
+				<li <!--@if($search_target == 'is_published' && $search_keyword == 'N')-->class="x_active"<!--@end-->><a href="{getUrl('search_target','is_published','search_keyword', 'N')}">{$lang->published_name_list['N']}</a></li>
+				<li <!--@if($search_target == 'is_published' && $search_keyword == 'Y')-->class="x_active"<!--@end-->><a href="{getUrl('search_target','is_published','search_keyword', 'Y')}">{$lang->published_name_list['Y']}</a></li>
+			</ul>
 
 			<block cond="$modules_list">
-			| <label for="comment_modules" <!--@if($search_target == 'module')-->class="active"<!--@end-->>{$lang->select_module}:
+			<label for="comment_modules" <!--@if($search_target == 'module')-->class="active"<!--@end-->>{$lang->select_module}:
 			<select id="comment_modules" name="comment_modules" onchange="location.href='{getUrl('search_target','module','search_keyword','')}&amp;search_keyword='+this.value">
 				<option></option>
 				<!--@foreach($modules_list as $key => $node)-->
@@ -27,7 +29,7 @@ xe.lang.msg_empty_search_keyword = '{$lang->msg_empty_search_keyword}';
 			</select></label>
 			</block>
 		</div>
-		<table width="100%" border="1" cellspacing="0" id="commentListTable">
+		<table width="100%" id="commentListTable" class="x_table x_table-striped x_table-hover">
 			<caption>
 				<!--@if($search_keyword == '')-->
 				{$lang->all}
@@ -41,8 +43,8 @@ xe.lang.msg_empty_search_keyword = '{$lang->msg_empty_search_keyword}';
 				{$published_name_list['Y']}
 				<!--@end-->
 				({number_format($total_count)})
-				<div class="side">
-					<span class="btn"><a href="#listManager" class="modalAnchor" onclick="getCommentList();">{$lang->comment_manager}...</a></span>
+				<div class="x_pull-right">
+					<a href="#listManager" class="x_btn modalAnchor" onclick="getCommentList();">{$lang->comment_manager}...</a>
 				</div>
 			</caption>
 			<thead>
@@ -85,23 +87,26 @@ xe.lang.msg_empty_search_keyword = '{$lang->msg_empty_search_keyword}';
 				<!--@end-->
 			</tbody>
 		</table>
-		<div class="btnArea">
-			<span class="btn"><a href="#listManager" class="modalAnchor" onclick="getCommentList();">{$lang->comment_manager}...</a></span>
+		<div class="x_pull-right">
+			<a href="#listManager" class="x_btn modalAnchor" onclick="getCommentList();">{$lang->comment_manager}...</a>
 		</div>
 	</div>
 </form>
-<div class="modal" id="listManager">
-	<form ruleset="deleteChecked" action="./" method="post" class="fg form">
-	<input type="hidden" name="module" value="comment" />
-	<input type="hidden" name="act" value="procCommentAdminDeleteChecked" />
-	<input type="hidden" name="page" value="{$page}" />
-	<input type="hidden" name="is_trash" value="false" />
-	<input type="hidden" name="will_publish" value="0" />
-	<input type="hidden" name="search_target" value="{$search_target}" />
-	<input type="hidden" name="search_keyword" value="{$search_keyword}" />
-		<h2 class="h2">{$lang->comment_manager}</h2>
+
+<form ruleset="deleteChecked" action="./" method="post" class="x_modal fg form" id="listManager">
+<input type="hidden" name="module" value="comment" />
+<input type="hidden" name="act" value="procCommentAdminDeleteChecked" />
+<input type="hidden" name="page" value="{$page}" />
+<input type="hidden" name="is_trash" value="false" />
+<input type="hidden" name="will_publish" value="0" />
+<input type="hidden" name="search_target" value="{$search_target}" />
+<input type="hidden" name="search_keyword" value="{$search_keyword}" />
+	<div class="x_modal-header">
+	<h2 class="h2">{$lang->comment_manager}</h2>
+	</div>
+	<div class="x_modal-body">
 		<div class="table even">
-			<table width="100%" border="1" cellspacing="0" id="commentManageListTable">
+			<table width="100%" id="commentManageListTable" class="x_table x_table-striped x_table-hover">
 				<caption>
 				{$lang->selected_comment} <strong id="selectedCommentCount"></strong>
 				</caption>
@@ -121,20 +126,23 @@ xe.lang.msg_empty_search_keyword = '{$lang->msg_empty_search_keyword}';
 		<p>
 			<textarea rows="8" cols="42" name="message_content" id="message" style="width:98%"></textarea>
 		</p>
-		<div class="btnArea">
-			<!--@if ($search_target=='is_published' && $search_keyword=="N")-->
-				<span class="btn"><button type="submit" name="will_publish" value="1" onclick="doChangePublishedStatus(this.value);">{$lang->cmd_publish}</button></span>
-			<!--@elseif ($search_target=='is_published' && $search_keyword=="Y")-->
-				<span class="btn"><button type="submit" name="will_publish" value="0" onclick="doChangePublishedStatus(this.value);">{$lang->cmd_unpublish}</button></span>
-			<!--@else-->
-				<span class="btn"><button type="submit" name="will_publish" value="1" onclick="doChangePublishedStatus(this.value);">{$lang->cmd_publish}</button></span>
-				<span class="btn"><button type="submit" name="will_publish" value="0" onclick="doChangePublishedStatus(this.value);">{$lang->cmd_unpublish}</button></span>
-			<!--@end-->
-			<span class="btn"><button type="submit" name="is_trash" value="true">{$lang->cmd_trash}</button></span>
-			<span class="btn"><button type="submit" name="is_trash" value="false">{$lang->cmd_delete}</button></span>
+	</div>
+	<div class="x_modal-footer">
+		<div class="x_btn-group">
+		<!--@if ($search_target=='is_published' && $search_keyword=="N")-->
+			<button type="submit" class="x_btn x_btn-primary" name="will_publish" value="1" onclick="doChangePublishedStatus(this.value);">{$lang->cmd_publish}</button>
+		<!--@elseif ($search_target=='is_published' && $search_keyword=="Y")-->
+			<button type="submit" class="x_btn x_btn-primary" name="will_publish" value="0" onclick="doChangePublishedStatus(this.value);">{$lang->cmd_unpublish}</button>
+		<!--@else-->
+			<button type="submit" class="x_btn x_btn-primary" name="will_publish" value="1" onclick="doChangePublishedStatus(this.value);">{$lang->cmd_publish}</button>
+			<button type="submit" class="x_btn x_btn-primary" name="will_publish" value="0" onclick="doChangePublishedStatus(this.value);">{$lang->cmd_unpublish}</button>
+		<!--@end-->
+			<button type="submit" class="x_btn x_btn-warning" name="is_trash" value="true">{$lang->cmd_trash}</button>
+			<button type="submit" class="x_btn x_btn-danger" name="is_trash" value="false">{$lang->cmd_delete}</button>
 		</div>
-	</form>
-</div>
+	</div>
+</form>
+
 <div class="search">
 <form action="./" class="pagination">
 	<input type="hidden" name="error_return_url" value="" />
@@ -143,29 +151,33 @@ xe.lang.msg_empty_search_keyword = '{$lang->msg_empty_search_keyword}';
   	<input cond="$search_keyword" type="hidden" name="search_keyword" value="{$search_keyword}" />
   	<input cond="$search_target" type="hidden" name="search_target" value="{$search_target}" />
 
-	<a href="{getUrl('page', '')}" class="direction">&laquo; {$lang->first_page}</a>
-	<block cond="$page_navigation->first_page + $page_navigation->page_count > $page_navigation->last_page && $page_navigation->page_count != $page_navigation->total_page">
-		{@$isGoTo = true}
-		<a href="{getUrl('page', '')}">1</a>
-		<a href="#goTo" class="tgAnchor" title="{$lang->cmd_go_to_page}">...</a>
-	</block>
-	<!--@while($page_no = $page_navigation->getNextPage())-->
-		{@$last_page = $page_no}
-		<strong cond="$page_no == $page">{$page_no}</strong>
-		<a cond="$page_no != $page" href="{getUrl('page', $page_no)}">{$page_no}</a>
-	<!--@end-->
-	<block cond="$last_page != $page_navigation->last_page">
-		{@$isGoTo = true}
-		<a href="#goTo" class="tgAnchor" title="{$lang->cmd_go_to_page}">...</a>
-		<a href="{getUrl('page', $page_navigation->last_page)}">{$page_navigation->last_page}</a>
-	</block>
-	<a href="{getUrl('page', $page_navigation->last_page)}" class="direction">{$lang->last_page} &raquo;</a>
-	<span cond="$isGoTo" id="goTo" class="tgContent">
-		<input name="page" title="{$lang->cmd_go_to_page}" />
-		<button type="submit">Go</button>
-	</span>
+	<div class="x_pagination x_pagination-centered">
+	<ul>
+		<li class="x_disabled"|cond="$page == 1"><a href="{getUrl('page', '')}">&laquo;</a></li>
+		<block cond="$page_navigation->first_page + $page_navigation->page_count > $page_navigation->last_page && $page_navigation->page_count != $page_navigation->total_page">
+			{@$isGoTo = true}
+			<li><a href="{getUrl('page', '')}">1</a></li>
+			<li><a href="#goTo" class="tgAnchor" title="{$lang->cmd_go_to_page}">...</a></li>
+		</block>
+		<!--@while($page_no = $page_navigation->getNextPage())-->
+			{@$last_page = $page_no}
+			<li class="x_active"|cond="$page_no == $page"><a href="{getUrl('page', $page_no)}">{$page_no}</a></li>
+		<!--@end-->
+		<block cond="$last_page != $page_navigation->last_page">
+			{@$isGoTo = true}
+			<li><a href="#goTo" class="tgAnchor" title="{$lang->cmd_go_to_page}">...</a></li>
+			<li><a href="{getUrl('page', $page_navigation->last_page)}">{$page_navigation->last_page}</a></li>
+		</block>
+		<li class="x_disabled"|cond="$page == $last_page"><a href="{getUrl('page', $page_navigation->last_page)}">&raquo;</a></li>
+		<span cond="$isGoTo" id="goTo" class="tgContent">
+			<input name="page" title="{$lang->cmd_go_to_page}" />
+			<button type="submit" class="x_btn">Go</button>
+		</span>
+	</ul>
+	</div>
 </form>
 
+	<div class="search center x_input-append">
 	<form action="./" method="get" class="adminSearch" onsubmit="return checkSearch(this)">
 	<input type="hidden" name="module" value="{$module}" />
 	<input type="hidden" name="act" value="{$act}" />
@@ -177,8 +189,9 @@ xe.lang.msg_empty_search_keyword = '{$lang->msg_empty_search_keyword}';
 			<option value="{$key}" <!--@if($search_target==$key)-->selected="selected"<!--@end-->>{$val}</option>
 			<!--@end-->
 		</select>
-		<input type="text" name="search_keyword" value="{htmlspecialchars($search_keyword)}" />
-		<input type="submit" value="{$lang->cmd_search}" />
-		<a href="{getUrl('','module',$module,'act',$act)}">{$lang->cmd_cancel}</a>
+		<input type="search" name="search_keyword" value="{htmlspecialchars($search_keyword)}" />
+		<button type="submit" class="x_btn x_btn-inverse">{$lang->cmd_search}</button>
+		<button class="x_btn" type="button" onclick="document.location.href='{getUrl('','module',$module,'act',$act)}'">{$lang->cmd_cancel}</button>
 	</form>
+	</div>
 </div>
diff --git a/modules/comment/tpl/declared_list.html b/modules/comment/tpl/declared_list.html
index ec3140a01..804e5effe 100644
--- a/modules/comment/tpl/declared_list.html
+++ b/modules/comment/tpl/declared_list.html
@@ -12,7 +12,7 @@
 	
 	<!-- 목록 -->
 	<div class="table">
-		<table width="100%" border="1" cellspacing="0">
+		<table width="100%" class="x_table x_table-striped x_table-hover">
 		<caption>{$lang->all} {number_format($total_count)}, {$lang->page} {number_format($page)}/{number_format($total_page)}</caption>
 		<thead>
 			<tr>
@@ -27,8 +27,8 @@
 		<tbody>
 			<!--@foreach($comment_list as $no => $oComment)-->
 			<tr>
-				<td>{$no}</td>
-				<td><input type="checkbox" name="cart" value="{$oComment->get('comment_srl')}" /> <a href="{getUrl('','document_srl',$oComment->get('document_srl'))}#comment_{$oComment->get('comment_srl')}" onclick="window.open(this.href);return false;">{$oComment->getSummary(100)}</a></td>
+				<td><input type="checkbox" name="cart" value="{$oComment->get('comment_srl')}" /></td>
+				<td><a href="{getUrl('','document_srl',$oComment->get('document_srl'))}#comment_{$oComment->get('comment_srl')}" onclick="window.open(this.href);return false;">{$oComment->getSummary(100)}</a></td>
 				<td><span class="member_{$oComment->getMemberSrl()}">{$oComment->getNickName()}</span></td>
 				<td>{$oComment->getRegdate("Y-m-d")}</td>
 				<td><strong>{$oComment->get('declared_count')}</strong></td>
@@ -39,11 +39,13 @@
 		</table>
 	</div>
 	<div class="btnArea">
-		<span class="btn"><button type="button" onclick="doCancelDeclare();">{$lang->cmd_cancel_declare}</button></span>
-		<span class="btn"><a href="javascript:XE.checkboxToggleAll({ checked:true })">{$lang->cmd_select_all}</a></span>
-		<span class="btn"><a href="javascript:XE.checkboxToggleAll()">{$lang->cmd_reverse_all}</a></span>
-		<span class="btn"><input type="submit" value="{$lang->cmd_delete_checked_comment}" onclick="this.form.is_trash.value=false" /></span>
-		<span class="btn"><input type="submit" name="trash" value="{$lang->cmd_trash}" onclick="this.form.is_trash.value=true" /></span>
+		<div class="x_btn-group">
+			<button class="x_btn" type="button" onclick="doCancelDeclare();">{$lang->cmd_cancel_declare}</button>
+			<button class="x_btn" type="button" onclick="XE.checkboxToggleAll({ checked:true })">{$lang->cmd_select_all}</button>
+			<button class="x_btn" type="button" onclick="XE.checkboxToggleAll()">{$lang->cmd_reverse_all}</button>
+			<button class="x_btn x_btn-primary" type="submit" onclick="this.form.is_trash.value=false">{$lang->cmd_delete_checked_comment}</button>
+			<button class="x_btn x_btn-primary" type="submit" name="trash" onclick="this.form.is_trash.value=true">{$lang->cmd_trash}</button>
+		</div>
 	</div>
 </form>
 
diff --git a/modules/comment/tpl/header.html b/modules/comment/tpl/header.html
index 4c47e5a15..77dff0f81 100644
--- a/modules/comment/tpl/header.html
+++ b/modules/comment/tpl/header.html
@@ -1,10 +1,12 @@
 <load target="js/comment_admin.js" usecdn="true" />
 
-<h3 class="xeAdmin">{$lang->comment} <span class="gray">{$lang->cmd_management}</span></h3>
+<div class="x_page-header">
+<h1>{$lang->comment} {$lang->cmd_management}</h1>
+</div>
 
-<div class="header4">
-    <ul class="localNavigation">
-        <li <!--@if($act=='dispCommentAdminList')-->class="on"<!--@end-->><a href="{getUrl('act','dispCommentAdminList')}">{$lang->comment_list}</a></li>
-        <li <!--@if($act=='dispCommentAdminDeclared')-->class="on"<!--@end-->><a href="{getUrl('act','dispCommentAdminDeclared')}">{$lang->cmd_declared_list}</a></li>
+<div class="x_tabbable">
+    <ul class="x_nav x_nav-tabs">
+        <li <!--@if($act=='dispCommentAdminList')-->class="x_active"<!--@end-->><a href="{getUrl('act','dispCommentAdminList')}">{$lang->comment_list}</a></li>
+        <li <!--@if($act=='dispCommentAdminDeclared')-->class="x_active"<!--@end-->><a href="{getUrl('act','dispCommentAdminDeclared')}">{$lang->cmd_declared_list}</a></li>
     </ul>
 </div>