character counter

4 files changed, 78 insertions, 4 deletions

diff --git a/view/jot-header.tpl b/view/jot-header.tpl
index 6402d5db6..e2b196dc3 100644
--- a/view/jot-header.tpl
+++ b/view/jot-header.tpl
@@ -18,7 +18,31 @@ tinyMCE.init({
 	add_unload_trigger : false,
 	remove_linebreaks : false,
 	convert_urls: false,
-	content_css: "$baseurl/view/custom_tinymce.css"
+	content_css: "$baseurl/view/custom_tinymce.css",
+	     //Character count
+	theme_advanced_path : false,
+	setup : function(ed) {
+		ed.onKeyUp.add(function(ed, e) {
+			var txt = tinyMCE.activeEditor.getContent();
+			var text = txt.length;
+			if(txt.length <= 140) {
+				$('#character-counter').removeClass('red');
+				$('#character-counter').removeClass('orange');
+				$('#character-counter').addClass('grey');
+			}
+			if((txt.length > 140) && (txt .length <= 420)) {
+				$('#character-counter').removeClass('grey');
+				$('#character-counter').removeClass('red');
+				$('#character-counter').addClass('orange');
+			}
+			if(txt.length > 420) {
+				$('#character-counter').removeClass('grey');
+				$('#character-counter').removeClass('orange');
+				$('#character-counter').addClass('red');
+			}
+			$('#character-counter').text(text);
+    		});
+     	}
 });
 
 </script>
diff --git a/view/jot.tpl b/view/jot.tpl
index 9e9ab6468..718277210 100644
--- a/view/jot.tpl
+++ b/view/jot.tpl
@@ -1,8 +1,10 @@
 
 <div id="profile-jot-wrapper" >
-<p id="profile-jot-desc" >
-What's on your mind?
-</p>
+<div id="profile-jot-banner-wrapper">
+	<div id="profile-jot-desc" >What's on your mind?</div>
+	<div id="character-counter" class="grey"></div>
+</div>
+<div id="profile-jot-banner-end"></div>
 <form id="profile-jot-form" action="item" method="post" >
 <input type="hidden" name="type" value="wall" />
 <input type="hidden" name="profile_uid" value="$profile_uid" />
diff --git a/view/photo_item.tpl b/view/photo_item.tpl
new file mode 100644
index 000000000..ca9ead592
--- /dev/null
+++ b/view/photo_item.tpl
@@ -0,0 +1,22 @@
+<div class="wall-item-outside-wrapper$indent" id="wall-item-outside-wrapper-$id" >
+	<div class="wall-item-photo-wrapper" id="wall-item-photo-wrapper-$id" >
+		<a href="$profile_url" title="View $name's profile" class="wall-item-photo-link" id="wall-item-photo-link-$id">
+		<img src="$thumb" class="wall-item-photo" id="wall-item-photo-$id" height="80" width="80" alt="$name" /></a>
+	</div>
+
+	<div class="wall-item-wrapper" id="wall-item-wrapper-$id" >
+		<a href="$profile_url" title="View $name's profile" class="wall-item-name-link"><span class="wall-item-name" id="wall-item-name-$id" >$name</span></a>
+		<div class="wall-item-ago"  id="wall-item-ago-$id">$ago</div>
+	</div>
+	<div class="wall-item-content" id="wall-item-content-$id" >
+		<div class="wall-item-title" id="wall-item-title-$id">$title</div>
+		<div class="wall-item-body" id="wall-item-body-$id" >$body</div>
+	</div>
+	$drop
+	<div class="wall-item-wrapper-end"></div>
+	<div class="wall-item-comment-separator"></div>
+	$comment
+</div>
+
+<div class="wall-item-outside-wrapper-end$indent" ></div>
+
diff --git a/view/style.css b/view/style.css
index fa7fa58c0..4fa962033 100644
--- a/view/style.css
+++ b/view/style.css
@@ -1282,4 +1282,30 @@ input#dfrn-url {
 
 #photos-upload-no-java-message {
 	margin-bottom: 15px;
+}
+
+#profile-jot-desc {
+	float: left;
+	width: 480px;
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+#character-counter {
+	float: left;
+	font-size: 120%;
+}
+
+#character-counter.grey {
+	color: #888888;
+}
+
+#character-counter.orange {
+	color: orange;
+}
+#character-counter.red {
+	color: red;
+}
+
+#profile-jot-banner-end {
+	clear: both;
 }
\ No newline at end of file