Merge pull request #77 from git-marijus/master

add spin.js a themable js spinner to red 

8 files changed, 23 insertions, 16 deletions

diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 9caa9145a..34f42f9a8 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1067,7 +1067,9 @@ footer {
 }
 
 .like-rotator {
-	margin-left: 5px;
+	float: left;
+	margin: 8px;
+	color: #777;
 }
 
 .wall-item-delete-wrapper {
@@ -1689,6 +1691,12 @@ tr.mceLast {
 	color: #000000;
 }
 
+#profile-jot-text-loading {
+	float: left;
+	margin: 14px 0px 0px 12px;
+	color: #777;
+}
+
 .wall-item-photo, .photo, .contact-block-img, .my-comment-photo {
     border-radius: $radiuspx;
     -moz-border-radius: $radiuspx;
@@ -2411,9 +2419,7 @@ aside input[type='text'] {
 
 #nav-search-spinner {
 	float: right;
-	margin-top: 8px;
-	margin-left: 5px;
-	margin-right: 5px;
+	margin: 12px 12px 0px 0px;
 }
 
 #nav-search-text:hover {
@@ -3687,7 +3693,8 @@ ul.menu-popup {
 }
 
 #page-spinner {
-	margin-left: 50%;
+	color: #777;
+	margin: 24px;
 }
 
 .tabs-end {
diff --git a/view/tpl/conv_frame.tpl b/view/tpl/conv_frame.tpl
index 81d655be2..359b8e7fc 100755
--- a/view/tpl/conv_frame.tpl
+++ b/view/tpl/conv_frame.tpl
@@ -15,5 +15,5 @@
 <div id="item-delete-selected-end"></div>
 {{/if}}
 
-<img id="page-spinner" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait}}" style="display: none;" />
+<div id="page-spinner"></div>
 
diff --git a/view/tpl/conv_item.tpl b/view/tpl/conv_item.tpl
index e4178eb39..d678bfbee 100755
--- a/view/tpl/conv_item.tpl
+++ b/view/tpl/conv_item.tpl
@@ -90,7 +90,7 @@
 			{{if $item.filer}}
 			<a href="#" id="filer-{{$item.id}}" onclick="itemFiler({{$item.id}}); return false;" class="filer-item filer-icon item-tool" title="{{$item.filer}}"></a>
 			{{/if}}			
-			<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
+			<div id="like-rotator-{{$item.id}}" class="like-rotator"></div>
 
 			<div class="wall-item-delete-wrapper" id="wall-item-delete-wrapper-{{$item.id}}" >
 				{{if $item.drop.dropping}}<a href="item/drop/{{$item.id}}" onclick="return confirmDelete();" class="icon drophide" title="{{$item.drop.delete}}" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a>{{/if}}
diff --git a/view/tpl/jot-header.tpl b/view/tpl/jot-header.tpl
index ae0ccc8e8..dfc707fb5 100755
--- a/view/tpl/jot-header.tpl
+++ b/view/tpl/jot-header.tpl
@@ -12,9 +12,9 @@ var plaintext = '{{$editselect}}';
 
 function initEditor(cb){
 	if (editor==false){
-		$("#profile-jot-text-loading").show();
+		$("#profile-jot-text-loading").spin('small');
 		if(plaintext == 'none') {
-			$("#profile-jot-text-loading").hide();
+			$("#profile-jot-text-loading").spin(false);
 			$("#profile-jot-text").css({ 'height': 200, 'color': '#000' });
 			$("#profile-jot-text").contact_autocomplete(baseurl+"/acl");
 			editor = true;
@@ -83,7 +83,7 @@ function initEditor(cb){
 
 				ed.onInit.add(function(ed) {
 					ed.pasteAsPlainText = true;
-					$("#profile-jot-text-loading").hide();
+					$("#profile-jot-text-loading").spin(false);
 					$(".jothidden").show();
 					if (typeof cb!="undefined") cb();
 				});
@@ -200,12 +200,12 @@ function enableOnUser(){
 	function jotShare(id) {
 		if ($('#jot-popup').length != 0) $('#jot-popup').show();
 
-		$('#like-rotator-' + id).show();
+		$('#like-rotator-' + id).spin('tiny);
 		$.get('{{$baseurl}}/share/' + id, function(data) {
 			if (!editor) $("#profile-jot-text").val("");
 			initEditor(function(){
 				addeditortext(data);
-				$('#like-rotator-' + id).hide();
+				$('#like-rotator-' + id).spin(false);
 				$(window).scrollTop(0);
 			});
 
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index 4f52cff20..f3410c5f4 100755
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -23,9 +23,9 @@
 		<div id="jot-pagetitle-wrap"><input name="pagetitle" id="jot-pagetitle" type="text" placeholder="{{$placeholdpagetitle}}" value="{{$pagetitle}}" class="jothidden" style="display:none" /></div>
 		{{/if}}
 		<div id="jot-text-wrap">
-		<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}}{{/if}}</textarea>
 		</div>
+		<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}}" />
diff --git a/view/tpl/like_noshare.tpl b/view/tpl/like_noshare.tpl
index b8258d64a..261b61815 100755
--- a/view/tpl/like_noshare.tpl
+++ b/view/tpl/like_noshare.tpl
@@ -6,5 +6,5 @@
 <div class="wall-item-like-buttons" id="wall-item-like-buttons-{{$id}}">
 	<a href="#" class="icon like" title="{{$likethis}}" onclick="dolike({{$id}},'like'); return false"></a>
 	<a href="#" class="icon dislike" title="{{$nolike}}" onclick="dolike({{$id}},'dislike'); return false"></a>
-	<img id="like-rotator-{{$id}}" class="like-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait}}" style="display: none;" />
+	<div id="like-rotator-{{$id}}" class="like-rotator"></div>
 </div>
diff --git a/view/tpl/main_slider.tpl b/view/tpl/main_slider.tpl
index fe4495f77..8169de6ec 100755
--- a/view/tpl/main_slider.tpl
+++ b/view/tpl/main_slider.tpl
@@ -26,7 +26,7 @@
 			return;
 		if((bParam_cmin == old_cmin) && (bParam_cmax == old_cmax))
 			return;
-		setTimeout(function() { $("#profile-jot-text-loading").show(); }, 1000 );
+		setTimeout(function() { $("#profile-jot-text-loading").spin('small'); }, 1000 );
 		slideTimer = setTimeout(networkTimerRefresh,2000);
 	}
 
diff --git a/view/tpl/nav.tpl b/view/tpl/nav.tpl
index 1470d0725..550cda911 100755
--- a/view/tpl/nav.tpl
+++ b/view/tpl/nav.tpl
@@ -144,7 +144,7 @@
 				<input id="nav-search-text" type="text" value="" placeholder="{{$nav.search.1}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();" />
 			</form>
 		</li>
-		<img src="images/rotator.gif" id="nav-search-spinner" style="display: none;" alt="{{$pleasewait}}" />
+		<div id="nav-search-spinner"></div>
 
 	</ul>
 </nav>