some jot tools structuring and styling

3 files changed, 96 insertions, 54 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index eaa3140c9..3aa9bc346 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -351,7 +351,12 @@ footer {
 }
 
 #jot-perms-icon {
-	float: left;
+	display: block;
+	color: #fff;
+	padding: 8px;
+	text-align: center;
+	text-decoration: none;
+	text-shadow: 1px 1px #111;
 }
 
 #jot-title, #jot-category, #jot-pagetitle {
@@ -1177,10 +1182,14 @@ footer {
 	float: left;
 	margin-left: 15px;
 }
-#jot-preview-link {
-	float: left;
-	margin-left: 45px;
-	margin-top: 0px !important;
+
+#jot-preview-link .icon-eye-open {
+	display:block;
+	color: #fff;
+	padding-top: 8px;
+	text-align: center;
+	text-decoration: none;
+	text-shadow: 1px 1px #111;
 }
 
 #profile-nolocation-wrapper {
@@ -1192,13 +1201,27 @@ footer {
 	margin-left: 15px;
 }
 
-#profile-jot-perms {
+#profile-jot-perms,
+#jot-preview-link {
+	height: 28px;
+	width: 28px;
 	float: right;
-	background-color: $toolicon_colour;
+	background: linear-gradient(top, $toolicon_colour 0%, #707070);
+	background: -webkit-linear-gradient(top, $toolicon_colour 0%, #707070);
+	background: -moz-linear-gradient(top, $toolicon_colour 0%, #707070);
+	background: -o-linear-gradient(top, $toolicon_colour 0%, #707070);
+	background: -ms-linear-gradient(top, $toolicon_colour 0%, #707070);
 	border: 1px solid #666;
 	border-right: none;
-	border-radius: $radiuspx 0px 0px $radiuspx;
-	padding: 6px;
+}
+
+#profile-jot-perms:hover,
+#jot-preview-link:hover {
+	background: linear-gradient(top, #707070 0%, $toolicon_colour);
+	background: -webkit-linear-gradient(top, #707070 0%, $toolicon_colour);
+	background: -moz-linear-gradient(top, #707070 0%, $toolicon_colour);
+	background: -o-linear-gradient(top, #707070 0%, $toolicon_colour);
+	background: -ms-linear-gradient(top, #707070 0%, $toolicon_colour);
 }
 
 #profile-jot-perms-end {
@@ -1525,6 +1548,18 @@ tr.mceLast {
     box-shadow: 4px 4px 3px 0 #444444;
 }
 
+.jot-tools-right :last-child {
+	border-radius: $radiuspx 0px 0px $radiuspx;
+}
+
+.jot-tools-right :first-child {
+	border-radius: 0px $radiuspx $radiuspx 0px;
+}
+
+.jot-tools-right :only-child {
+	border-radius: $radiuspx;
+}
+
 #profile-jot-submit {
 	height: 30px;
 	width: 70px;
@@ -1535,7 +1570,6 @@ tr.mceLast {
 	background: -ms-linear-gradient(top, #0080ff 0%, #0080aa);
 	color: #fff;
 	font-weight: bold;
-	border-radius: 0px $radiuspx $radiuspx 0px;
 	float: right;
 	text-shadow: 1px 1px #111;
 	cursor: pointer;
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index e40a94fcc..eb50c188e 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -18,6 +18,14 @@ function cmtBbClose(comment, id) {
 
 $(document).ready(function() {
 
+document.jotpermsunlock = 'icon-unlock';
+document.jotpermslock = 'icon-lock';
+
+if($('#jot-perms-icon').hasClass('lock'))
+	$('#jot-perms-icon').addClass('icon-lock');
+if($('#jot-perms-icon').hasClass('unlock'))
+	$('#jot-perms-icon').addClass('icon-unlock');
+
 $('.group-edit-icon').hover(
 	function() {
 		$(this).addClass('icon'); $(this).removeClass('iconspacer');},
@@ -68,4 +76,4 @@ $(document).ready(function(){
 		}
 	};
 	setInterval(function () {checkNotify();}, 10 * 1000);
-});
\ No newline at end of file
+});
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index 666fae9cd..d260165ab 100755
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -29,51 +29,51 @@
 		<div id="profile-jot-text-loading"></div>
 
 <div id="profile-jot-submit-wrapper" class="jothidden">
-	<input type="submit" id="profile-jot-submit" name="submit" value="{{$share}}" />
-
-	<div id="profile-upload-wrapper" style="display: {{$visitor}};" >
-		<div id="wall-image-upload-div" ><i id="wall-image-upload" class="icon-camera jot-icons" title="{{$upload}}"></i></div>
-	</div> 
-	<div id="profile-attach-wrapper" style="display: {{$visitor}};" >
-		<div id="wall-file-upload-div" ><i id="wall-file-upload" class="icon-paper-clip jot-icons" title="{{$attach}}"></i></div>
-	</div> 
-
-	<div id="profile-link-wrapper" style="display: {{$visitor}};" ondragenter="linkdropper(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" >
-		<i id="profile-link" class="icon-link jot-icons" title="{{$weblink}}" ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink(); return false;"></i>
-	</div> 
-	<div id="profile-video-wrapper" style="display: {{$visitor}};" >
-		<i id="profile-video" class="icon-facetime-video jot-icons" title="{{$video}}" onclick="jotVideoURL();return false;"></i>
-	</div> 
-	<div id="profile-audio-wrapper" style="display: {{$visitor}};" >
-		<i id="profile-audio" class="icon-volume-up jot-icons" title="{{$audio}}" onclick="jotAudioURL();return false;"></i>
-	</div> 
-	<div id="profile-location-wrapper" style="display: {{$visitor}};" >
-		<i id="profile-location" class="icon-globe jot-icons" title="{{$setloc}}" onclick="jotGetLocation();return false;"></i>
-	</div> 
-	<div id="profile-nolocation-wrapper" style="display: none;" >
-		<i id="profile-nolocation" class="icon-circle-blank jot-icons" title="{{$noloc}}" onclick="jotClearLocation();return false;"></i>
+	<div class="jot-tools-left">
+		<div id="profile-upload-wrapper" style="display: {{$visitor}};" >
+			<div id="wall-image-upload-div" ><i id="wall-image-upload" class="icon-camera jot-icons" title="{{$upload}}"></i></div>
+		</div>
+		<div id="profile-attach-wrapper" style="display: {{$visitor}};" >
+			<div id="wall-file-upload-div" ><i id="wall-file-upload" class="icon-paper-clip jot-icons" title="{{$attach}}"></i></div>
+		</div>
+		<div id="profile-link-wrapper" style="display: {{$visitor}};" ondragenter="linkdropper(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" >
+			<i id="profile-link" class="icon-link jot-icons" title="{{$weblink}}" ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink(); return false;"></i>
+		</div>
+		<div id="profile-video-wrapper" style="display: {{$visitor}};" >
+			<i id="profile-video" class="icon-facetime-video jot-icons" title="{{$video}}" onclick="jotVideoURL();return false;"></i>
+		</div>
+			<div id="profile-audio-wrapper" style="display: {{$visitor}};" >
+			<i id="profile-audio" class="icon-volume-up jot-icons" title="{{$audio}}" onclick="jotAudioURL();return false;"></i>
+		</div>
+		<div id="profile-location-wrapper" style="display: {{$visitor}};" >
+			<i id="profile-location" class="icon-globe jot-icons" title="{{$setloc}}" onclick="jotGetLocation();return false;"></i>
+		</div>
+		<div id="profile-nolocation-wrapper" style="display: none;" >
+			<i id="profile-nolocation" class="icon-circle-blank jot-icons" title="{{$noloc}}" onclick="jotClearLocation();return false;"></i>
+		</div>
+		<div id="profile-expire-wrapper" style="display: {{$feature_expire}};" >
+			<i id="profile-expires" class="icon-eraser jot-icons" title="{{$expires}}" onclick="jotGetExpiry();return false;"></i>
+		</div>
+		<div id="profile-encrypt-wrapper" style="display: {{$feature_encrypt}};" >
+			<i id="profile-encrypt" class="icon-key jot-icons" title="{{$encrypt}}" onclick="red_encrypt('{{$cipher}}','#profile-jot-text',$('#profile-jot-text').val());return false;"></i>
+		</div>
+		<div id="profile-rotator-wrapper" style="display: {{$visitor}};" >
+			<div id="profile-rotator"></div>
+		</div>
 	</div>
-	<div id="profile-expire-wrapper" style="display: {{$feature_expire}};" >
-		<i id="profile-expires" class="icon-eraser jot-icons" title="{{$expires}}" onclick="jotGetExpiry();return false;"></i>
-	</div> 
-	<div id="profile-encrypt-wrapper" style="display: {{$feature_encrypt}};" >
-		<i id="profile-encrypt" class="icon-key jot-icons" title="{{$encrypt}}" onclick="red_encrypt('{{$cipher}}','#profile-jot-text',$('#profile-jot-text').val());return false;"></i>
-	</div> 
-
-
-	<div id="profile-rotator-wrapper" style="display: {{$visitor}};" >
-		<div id="profile-rotator"></div>
-	</div>  
-
-	{{if $showacl}}
-	<div id="profile-jot-perms" class="profile-jot-perms" style="display: {{$pvisit}};" >
-		<a href="#profile-jot-acl-wrapper" id="jot-perms-icon" class="icon {{$lockstate}}"  title="{{$permset}}" ></a>{{$bang}}
+	<div class="jot-tools-right">
+		<input type="submit" id="profile-jot-submit" name="submit" value="{{$share}}" />
+		{{if $preview}}
+		<div onclick="preview_post();" id="jot-preview-link" class="fakelink">
+			<i id="jot-preview-icon "class="icon-eye-open" title="{{$preview}}"></i>
+		</div>
+		{{/if}}
+		{{if $showacl}}
+		<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}}" ></a>{{$bang}}
+		</div>
+		{{/if}}
 	</div>
-	{{/if}}
-
-	{{if $preview}}<span onclick="preview_post();" id="jot-preview-link" class="fakelink"><i class="icon-eye-open jot-icons" title="{{$preview}}"></i></span>{{/if}}
-
-
 	<div id="profile-jot-perms-end"></div>