From 7e5c029520c725f444a5c6932a77abd15d4c9bf8 Mon Sep 17 00:00:00 2001
From: hyung-hwan <hyunghwan.chung@gmail.com>
Date: Thu, 9 Apr 2015 03:34:49 +0000
Subject: [PATCH] added preview to the issue change form

---
 codepot/src/codepot/views/issue_show.php | 31 ++++++++++++++++---
 codepot/src/css/issue.css                | 39 ++++++++++++++++++++++--
 2 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/codepot/src/codepot/views/issue_show.php b/codepot/src/codepot/views/issue_show.php
index f1f31721..6ea004b9 100644
--- a/codepot/src/codepot/views/issue_show.php
+++ b/codepot/src/codepot/views/issue_show.php
@@ -148,6 +148,12 @@ $(function () {
 		}
 	);
 
+
+	$("#issue_change_comment_preview_button").button().click(
+		function () {
+			render_wiki_comment_preview ($("#issue_change_comment").val());
+		}
+	);
 });
 </script>
 
@@ -424,6 +430,7 @@ $this->load->view (
 
 		<div>
 			<?=form_label ($this->lang->line('Comment'), 'issue_change_comment')?>
+			<a href='#' id='issue_change_comment_preview_button'><?=$this->lang->line('Preview')?></a>
 			<?php
 				$xdata = array (
 					'name' => 'issue_change_comment',
@@ -434,6 +441,8 @@ $this->load->view (
 				);
 				print form_textarea ($xdata);
 			?>
+
+			<div id='issue_change_comment_preview' class='form_input_preview'></div>
 		</div>
 	<?=form_close()?>
 </div> <!-- issue_show_change_form -->
@@ -453,14 +462,14 @@ $this->load->view (
 
 </div> <!--  issue_show_content -->
 
+<?php 
+	$creole_base = site_url() . "/wiki/show/{$project->id}/"; 
+	$creole_attachment_base = site_url() . "/wiki/attachment0/{$project->id}/"; 
+?>
+
 <script type="text/javascript">
 function render_wiki()
 {
-	<?php 
-		$creole_base = site_url() . "/wiki/show/{$project->id}/"; 
-		$creole_attachment_base = site_url() . "/wiki/attachment0/{$project->id}/"; 
-	?>
-
 	creole_render_wiki (
 		"issue_show_mainarea_description_pre", 
 		"issue_show_mainarea_description", 
@@ -484,6 +493,18 @@ function render_wiki()
 
 	prettyPrint ();
 }
+
+function render_wiki_comment_preview(input_text)
+{
+	creole_render_wiki_with_input_text (
+		input_text,
+		"issue_change_comment_preview", 
+		"<?=$creole_base?>",
+		"<?=$creole_attachment_base?>"
+	);
+
+	prettyPrint ();
+}
 </script>
 
 </body>
diff --git a/codepot/src/css/issue.css b/codepot/src/css/issue.css
index 18a7e5d4..ea547aa4 100644
--- a/codepot/src/css/issue.css
+++ b/codepot/src/css/issue.css
@@ -104,11 +104,18 @@
 }
 
 #issue_show_mainarea_change_form textarea {
-	display: block;
-	padding: 1px;
-	font-size: inherit;
+	-moz-box-shadow: 0 2px 4px #bbb inset;
+	-webkit-box-shadow: 0 2px 4px #BBB inset;
+	box-shadow: 0 2px 4px #BBB inset;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+
+	border: 0 none;
 	font-family: consolas, "Andale Mono", monospace;
+
 	width: 100%;
+	font-size: 0.9em;
 }
 
 #issue_show_mainarea_changes {
@@ -168,6 +175,32 @@
 	padding-bottom: 0.3em;
 }
 
+#issue_change_form {
+	font-size: 1em;
+}
+
+/* all these elements inside the form requires a lot of refinement.
+ * many of these are duplicates of elemenents in common.css */
+#issue_change_form .form_input_preview {
+	background-color: #FFFFF0;
+	font-size: 0.9em;
+	padding: 0.2em 0.2em 0.2em 0.2em;
+	margin-bottom: 0.5em;
+}
+
+#issue_change_form .form_input_preview table {
+	font-size: 1em;
+}
+
+#issue_change_form .form_input_preview pre {
+	background-color: #F8F8FA;
+	padding: 0.2em 0.2em 0.2em 0.2em;
+}
+
+#issue_change_comment_preview_button {
+	font-size: 0.8em;
+}
+
 /*---------------------------------------------
  * issue edit
  *---------------------------------------------*/