character counter

diff --git a/view/jot-header.tpl b/view/jot-header.tpl
index 6402d5db60d6ea30d39d04625cf2f230d0972728..e2b196dc3e7ac2427912edbc7bd2d732e404036e 100644 (file)
--- 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 9e9ab646803ca3956f26f8c8c0ca85e8d1e98f6a..71827721085e9f13484035be69f1c1d3756e4a65 100644 (file)
--- 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 (file)
index 0000000..ca9ead5
--- /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 fa7fa58c043dd80dcb1a7bf770d435af1fcde528..4fa962033797ba0016b234e399da87579379c1c3 100644 (file)
--- 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