aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMike Macgirvin <mike@macgirvin.com>2010-08-07 02:53:59 -0700
committerMike Macgirvin <mike@macgirvin.com>2010-08-07 02:53:59 -0700
commitedff5b5289f80be89e4fc6b072ccd84812960349 (patch)
tree6801eaba13fdc5b0558771f8a344e9c3693d3c99
parent4a7643b3ec532a211ec284dc1c57b0686403730d (diff)
downloadvolse-hubzilla-edff5b5289f80be89e4fc6b072ccd84812960349.tar.gz
volse-hubzilla-edff5b5289f80be89e4fc6b072ccd84812960349.tar.bz2
volse-hubzilla-edff5b5289f80be89e4fc6b072ccd84812960349.zip
character counter
-rw-r--r--view/jot-header.tpl26
-rw-r--r--view/jot.tpl8
-rw-r--r--view/photo_item.tpl22
-rw-r--r--view/style.css26
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