From efe308b5ac9ac7e8d399fb880f31b6967de8fec1 Mon Sep 17 00:00:00 2001
From: Fabio Comuni <fabrix.xm@gmail.com>
Date: Fri, 6 Jan 2012 09:11:25 +0100
Subject: [PATCH] Use html5 placeholder for title text input

---
 include/conversation.php          |  3 ++-
 view/jot-header.tpl               | 32 -------------------------------
 view/theme/darkzero/style.css     | 18 +++++++++++++++++
 view/theme/duepuntozero/jot.tpl   | 25 ++++++++++--------------
 view/theme/duepuntozero/style.css | 32 ++++++++++++++++++-------------
 5 files changed, 49 insertions(+), 61 deletions(-)

diff --git a/include/conversation.php b/include/conversation.php
index 37fe32de12..2803d14e42 100644
--- a/include/conversation.php
+++ b/include/conversation.php
@@ -873,6 +873,7 @@ function status_editor($a,$x, $notes_cid = 0) {
 			'$placeholdertitle' => t('Set title'),
 			'$wait' => t('Please wait'),
 			'$permset' => t('Permission settings'),
+			'$shortpermset' => t('permissions'),
 			'$ptyp' => (($notes_cid) ? 'note' : 'wall'),
 			'$content' => '',
 			'$post_id' => '',
@@ -962,4 +963,4 @@ function find_thread_parent_index($arr,$x) {
 		if($v['id'] == $x['parent'])
 			return $k;
 	return false;
-}
\ No newline at end of file
+}
diff --git a/view/jot-header.tpl b/view/jot-header.tpl
index cdef9ef832..352c48647e 100644
--- a/view/jot-header.tpl
+++ b/view/jot-header.tpl
@@ -113,42 +113,10 @@ function enableOnUser(){
 
 	$(document).ready(function() {
 		
-<<<<<<< HEAD
 		/* enable tinymce on focus and click */
 		$("#profile-jot-text").focus(enableOnUser);
 		$("#profile-jot-text").click(enableOnUser);
-=======
-		/* enable tinymce on focus */
-		$("#profile-jot-text").focus(function(){
-			if (editor) return;
-			$(this).val("");
-			initEditor();
-		});
 
-		$("#jot-title").mouseout(function() {
-			$("#jot-title").hide();
-			var ttl = $("#jot-title").val();
-			$('#jot-title-display').html(ttl);
-			if(ttl.length) {
-				$("#jot-title-display").show();
-			}
-			else {
-				$("#jot-title-desc").show();
-			}
-		});
-
-		$("#jot-title-display").hover(function() {
-			$("#jot-title-display").hide();
-			$("#jot-title").show();
-			$("#jot-title").focus();
-		});		
-
-		$("#jot-title-desc").click(function() {
-			$("#jot-title-desc").hide();
-			$("#jot-title").show();
-			$("#jot-title").focus();
-		});		
->>>>>>> friendica/master
 	
 		var uploader = new window.AjaxUpload(
 			'wall-image-upload',
diff --git a/view/theme/darkzero/style.css b/view/theme/darkzero/style.css
index 1aa1efe870..25ae0c71ff 100644
--- a/view/theme/darkzero/style.css
+++ b/view/theme/darkzero/style.css
@@ -70,3 +70,21 @@ input#dfrn-url {
     color: #000088;
 }
 
+#jot-perms-icon {
+	float: left;
+}
+
+
+#jot-title {
+	background-color: #333333;
+	border: 1px solid #333333;
+}
+
+#jot-title::-webkit-input-placeholder{ color: #555555!important;}
+#jot-title:-moz-placeholder{color: #555555!important;}
+		
+	
+#jot-title:hover,
+#jot-title:focus {
+	border: 1px solid #cccccc; 
+}
diff --git a/view/theme/duepuntozero/jot.tpl b/view/theme/duepuntozero/jot.tpl
index 36008c5a1e..e6ea1c1bd2 100644
--- a/view/theme/duepuntozero/jot.tpl
+++ b/view/theme/duepuntozero/jot.tpl
@@ -14,42 +14,37 @@
 		<input type="hidden" name="coord" id="jot-coord" value="" />
 		<input type="hidden" name="post_id" value="$post_id" />
 		<input type="hidden" name="preview" id="jot-preview" value="0" />
-		<div id="jot-title-wrapper">
-		<span id="jot-title-desc" style="display: none;">$addtitle</span>
-		<span id="jot-title-display" style="display: none;"></span>
-		<input type="text" name="title" id="jot-title" value="" style="display: none;" />
-		</div>
-
+		<input name="title" id="jot-title" type="text" placeholder="$placeholdertitle" value="$title" class="jothidden" style="display:none">
 		<img id="profile-jot-text-loading" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" />
 		<textarea rows="5" cols="64" class="profile-jot-text" id="profile-jot-text" name="body" >{{ if $content }}$content{{ else }}$share{{ endif }}</textarea>
 
 		{{ if $content }}<script>initEditor();</script>{{ endif }}
 
-<div id="profile-jot-submit-wrapper" style="display:none">
+<div id="profile-jot-submit-wrapper" class="jothidden">
 	<div id="profile-upload-wrapper" style="display: $visitor;" >
-		<div id="wall-image-upload-div" ><a href="#" onclick="return false;" id="wall-image-upload" class="camera" title="$upload">image upload</a></div>
+		<div id="wall-image-upload-div" ><a href="#" onclick="return false;" id="wall-image-upload" class="camera" title="$upload">$shortupload</a></div>
 	</div> 
 	<div id="profile-attach-wrapper" style="display: $visitor;" >
-		<div id="wall-file-upload-div" ><a href="#" onclick="return false;" id="wall-file-upload" class="attach" title="$attach">attach file</a></div>
+		<div id="wall-file-upload-div" ><a href="#" onclick="return false;" id="wall-file-upload" class="attach" title="$attach">$shortattach</a></div>
 	</div> 
 
 	<div id="profile-link-wrapper" style="display: $visitor;" ondragenter="linkdropper(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" >
-		<a id="profile-link" class="link" title="$weblink" ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink(); return false;">enter link</a>
+		<a id="profile-link" class="link" title="$weblink" ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink(); return false;">$shortweblink</a>
 	</div> 
 	<div id="profile-video-wrapper" style="display: $visitor;" >
-		<a id="profile-video" class="video" title="$video" onclick="jotVideoURL();return false;">video url</a>
+		<a id="profile-video" class="video" title="$video" onclick="jotVideoURL();return false;">$shortvideo</a>
 	</div> 
 	<div id="profile-audio-wrapper" style="display: $visitor;" >
-		<a id="profile-audio" class="audio" title="$audio" onclick="jotAudioURL();return false;">audio url</a>
+		<a id="profile-audio" class="audio" title="$audio" onclick="jotAudioURL();return false;">$shortaudio</a>
 	</div> 
 	<div id="profile-location-wrapper" style="display: $visitor;" >
-		<a id="profile-location" class="globe" title="$setloc" onclick="jotGetLocation();return false;">set location</a>
+		<a id="profile-location" class="globe" title="$setloc" onclick="jotGetLocation();return false;">$shortsetloc</a>
 	</div> 
 	<div id="profile-nolocation-wrapper" style="display: none;" >
-		<a id="profile-nolocation" class="noglobe" title="$noloc" onclick="jotClearLocation();return false;">no location</a>
+		<a id="profile-nolocation" class="noglobe" title="$noloc" onclick="jotClearLocation();return false;">$shortnoloc</a>
 	</div> 
 	<div id="profile-jot-perms" class="profile-jot-perms" style="display: $pvisit;" >
-		<a href="#profile-jot-acl-wrapper" id="jot-perms-icon" class="$lockstate"  title="$permset" >permissions</a>$bang
+		<a href="#profile-jot-acl-wrapper" id="jot-perms-icon" class="$lockstate"  title="$permset" >$shortpermset</a>$bang
 	</div>
 <input type="submit" id="profile-jot-submit" name="submit" value="$share" />
 	<div id="profile-jot-perms-end"></div>
diff --git a/view/theme/duepuntozero/style.css b/view/theme/duepuntozero/style.css
index 6ce4c52c05..2f9691cadd 100644
--- a/view/theme/duepuntozero/style.css
+++ b/view/theme/duepuntozero/style.css
@@ -269,22 +269,28 @@ div.wall-item-content-wrapper.shiny {
 	float: left;
 }
 
-#jot-title-desc {
-	color: #cccccc;
-}
-
-#jot-title-wrapper {
-	margin-bottom: 5px;
-}
-#jot-title-display {
-	font-weight: bold;
-}
 
 #jot-title {
-	border: 1px solid #cccccc;
-	width: 530px;
+	border: 0px;
+	margin: 0px;
+	height: 20px;
+	width: 90%;
+	font-weight: bold;
+	border: 1px solid #ffffff;
 }
 
+#jot-title::-webkit-input-placeholder{font-weight: normal;}
+#jot-title:-moz-placeholder{font-weight: normal;}
+		
+	
+#jot-title:hover,
+#jot-title:focus {
+	border: 1px solid #cccccc; 
+}
+
+.jothidden { display:none; }
+
+
 .fakelink, .fakelink:visited, .fakelink:link {
 	color: #3465a4;
 	text-decoration: none;
@@ -1540,7 +1546,7 @@ input#dfrn-url {
 	padding: 3px 0px 0px 5px;
 	-moz-border-radius: 3px;
 	border-radius: 3px;	
-
+	width: 100%;
 }