some jot tools structuring and styling

2 files changed, 53 insertions, 11 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
+});