Minimize bar update

app/assets/javascripts/orbitdesktop.js

@@ -328,7 +328,7 @@ var orbitDesktop = function(dom){
       // }
       if($(o.contentHolder).find("div.app_frame").length > 0){
         $(o.contentHolder).find("div.app_frame").each(function(){
-          var app_holder_height = $(this).height() - 72;
+          var app_holder_height = $(this).height() - 60;
           var app_holder_width = $(this).width();
           $(this).find("div.app_holder").height(app_holder_height);
           $(this).find("div.app_holder iframe").attr({"height":app_holder_height,"width":app_holder_width});
@@ -746,7 +746,7 @@ var orbitDesktop = function(dom){
       $("#desktop #group_wrapper").empty();  
       $.getJSON("/desktop/getgroups",{sectionid:id},function(tiles){
         // tiles.sort(o.sortJSON("position",true,parseInt)); 
-        var tilecolors = (o.themesettings.tilecolor ? o.themesettings.tilecolor : ["thmc1","thmc2","thmc3","thmc4"]) ;
+        var tilecolors = ["thmc1","thmc2"];
         var totaltiles_in_a_row = 4;
         var opacity = ["op07","op08","op09",""];
         var row = 0, col = 1, x = 1, y = 1, total_x = 0, prev_y = 0; 
@@ -1513,11 +1513,9 @@ var orbitDesktop = function(dom){
   }
  
   this.loadWallpaper = function(wallpaper){  // this is to load new wallpaper 
-    if(!wallpaper){
+    var img_path = (!wallpaper) ? o.themesettings.background : o.wallpaperPath+wallpaper;
-      $("#thmbackground").attr("src",o.themesettings.background);
+
-    } else {
+    $("#thmbackground").attr("style","background-image: url("+img_path+");");
-      $("#thmbackground").attr("src",o.wallpaperPath+wallpaper);
-    }
   };
 
   this.loadIconCache = function(){  // this function load or refresh icon cache for the theme
@@ -1834,11 +1832,12 @@ var orbitDesktop = function(dom){
       });
       minimizeBar.append($e);
       win.hide();
+      miniBarEffect();
       // var minimizeOffset = minimizeBar.offset();
       // win.animate({"left":minimizeOffset.left + "px","top":minimizeOffset.top + "px","height":"25px","width":"200px"},function(){
         
       // });
-      
+      $('body').attr('style','');
     }
     this.minimizeBarManager.maximize = function(win){
       var position = minimizedApps.indexOf(win.attr("id"));
@@ -1852,10 +1851,23 @@ var orbitDesktop = function(dom){
     }
     var generateMiniBar = function(id){
       var position = minimizedApps.indexOf(id),
-          template = '<div id="mini_'+id+'" data-app-id="'+id+'" data-position="'+position+'" style="height:25px; width:200px; bottom:0; margin:3px 3px 3px 3px; float:right; cursor:pointer;" class="minimize thmc2"><span class="thmtxth" style="font-size:18px;margin 3px 3px;" for="title"></span><span class="icon-remove hh2 hp thmtxt" style="float:right;cursor:pointer;"></span></div>',
+          template = '<div id="mini_'+id+'" data-app-id="'+id+'" data-position="'+position+'" class="minimize w2 hh1 hp admbg admtxt"><span for="title"></span><span class="icon-remove hh1"></span></div>',
           $e = $(template);
       return $e;
     }
+    var miniBarEffect = function(){
+      var minimize = $('.minimize'),
+          normalState = 'admbg admtxt',
+          hoverState = 'thmc1 thmtxt';
+      minimize.hover(
+        function(){
+          $(this).switchClass(normalState,hoverState, 200);
+        },
+        function(){
+          $(this).switchClass(hoverState,normalState, 200);
+        }
+      );
+    }
 
     var updatePositions = function(){
       minimizeBar.find("div.minimize").each(function(){

app/assets/javascripts/orbitdesktopAPI.js

@@ -159,11 +159,11 @@ var orbitDesktopAPI = function(){
 				}
 			}
 			var whtml = $('<div id="app_frame_'+o.windowcounter+'" class="thmc2 app_frame" data-app="'+settings.appid+'" data-title="'+ settings.title +'"><div class="app_frame_header"><div class="dtitle hh2 hp"><span class="thmtxth">'+settings.title+'</span></div><span class="icon-remove hh2 hp thmtxt"></span><span class="icon-minus hh2 hp thmtxt"></span></div><div id="holder_'+o.windowcounter+'" class="app_holder clear"><iframe src="'+appurl+'" frameborder="0" scrolling="auto"></iframe></div></div>');
-			$("body").append(whtml);
+			$("body").append(whtml).css('overflow','hidden');
-			var parentwindow = $(o.contentHolder).find("#app_frame_"+o.windowcounter);
+			var parentwindow = $("#app_frame_"+o.windowcounter);
-			var app_holder_height = parentwindow.height() - 72;
+			var app_holder_height = parentwindow.height() - 60;
 			var app_holder_width = parentwindow.width();
-			parentwindow.find("iframe").attr({"height":app_holder_height,"width":app_holder_width});
+			parentwindow.find("iframe").attr({"height":app_holder_height});
 			parentwindow.find(".app_holder").height(app_holder_height);
 			parentwindow.find(".icon-remove").click(function(){
 				o.appWindow.close(parentwindow);
@@ -176,10 +176,40 @@ var orbitDesktopAPI = function(){
 
 		this.appWindow.close = function(win){
 			win.remove();
+			$('body').attr('style','');
 		}
 
 		this.appWindow.minimize = function(win){
-			o.minimizeBarManager.minimize(win)
+			o.minimizeBarManager.minimize(win);
+			var minimizeBar = $('#minimizebar'),
+				minimizeHeight = minimizeBar.height();
+
+			minimizeBar
+				.stop(1,1)
+				.delay(2000)
+				.animate({
+					//'bottom': -minimizeHeight
+					'opacity': 0
+				}, 900, 'easeInOutQuint');
+
+			minimizeBar.on({
+				mouseenter: function(){
+					$(this)
+						.stop(1,1)
+						.animate({
+							'opacity': 1
+						}, 900, 'easeInOutQuint');
+				},
+				mouseleave: function(){
+					$(this)
+						.stop(1,1)
+						.delay(2000)
+						.animate({
+							//'bottom': -minimizeHeight
+							'opacity': 0
+						}, 900, 'easeInOutQuint');
+				}
+			});
 		}
 
 		if(typeof callbackfn=="function"){

app/assets/stylesheets/desktop/desktop-main.css

@@ -455,7 +455,7 @@ a.admtxt.admbg2:hover {
         font-size: 15px;
         line-height: 36px; }
         #orbitdiag .diag_holder .diag_holder_inner .diag_btn:hover {
-          outline: solid 2px white; }
+          outline: solid 2px #fff; }
 
 /* Tile */
 .appname {
@@ -553,7 +553,7 @@ a.admtxt.admbg2:hover {
   cursor: pointer; }
 
 .theme_thumb, .stock_wallpaper img {
-  border: solid 1px white;
+  border: solid 1px #fff;
   width: 120px;
   margin: 0 auto; }
 
@@ -606,7 +606,7 @@ a.admtxt.admbg2:hover {
   padding: 24px 0;
   margin-top: 12px;
   overflow: hidden;
-  border-top: solid 1px #eeeeee; }
+  border-top: solid 1px #eee; }
   .s_action .setting_btn {
     margin-left: 12px; }
 
@@ -751,9 +751,9 @@ a.admtxt.admbg2:hover {
 
 /* App */
 .app_frame {
-  margin: 48px 96px 48px 156px;
+  margin: 60px 0 48px 156px;
   min-width: 800px;
-  min-height: 588px;
+  min-height: 576px;
   position: absolute;
   top: 0;
   left: 0;
@@ -764,20 +764,35 @@ a.admtxt.admbg2:hover {
     background-color: #fff;
     position: absolute;
     width: 100%; }
+    .app_frame .app_holder iframe {
+      width: 100%; }
   .app_frame .app_frame_header {
-    height: 72px; }
+    height: 60px; }
-    .app_frame .app_frame_header .icon-remove {
+    .app_frame .app_frame_header .icon-remove, .app_frame .app_frame_header .icon-minus {
       display: block;
       float: right;
       line-height: 60px;
       font-size: 20px;
       cursor: pointer; }
-     .app_frame .app_frame_header .icon-minus {
+
-      display: block;
+/* Minimize Section */
+#minimizebar {
+  position: fixed;
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  z-index: 14; }
+  #minimizebar .minimize {
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 36px;
+    font-size: 15px;
+    float: left; }
+    #minimizebar .minimize .icon-remove {
       float: right;
-      line-height: 60px;
+      line-height: 36px; }
-      font-size: 20px;
-      cursor: pointer; }
 
 /*Tooltip popup */
 .desktop_toolpopup {

app/assets/stylesheets/desktop/desktop-main.scss

@@ -751,9 +751,9 @@ a.admtxt.admbg2:hover {
 
 /* App */
 .app_frame {
-	margin: 48px 96px 48px 156px;
+	margin: 60px 0 48px 156px;
 	min-width: 800px;
-	min-height: 588px;
+	min-height: 576px;
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -765,11 +765,15 @@ a.admtxt.admbg2:hover {
 		background-color: #fff;
 		position: absolute;
 		width: 100%;
+
+		iframe {
+			width: 100%;
+		}
 	}
 	.app_frame_header{
-		height: 72px;
+		height: 60px;
 
-		.icon-remove {
+		.icon-remove, .icon-minus {
 			display: block;
 			float: right;
 			line-height: 60px;
@@ -779,6 +783,33 @@ a.admtxt.admbg2:hover {
 	}
 }
 
+/* Minimize Section */
+#minimizebar {
+	position: fixed;
+	width: 100%;
+	left: 0;
+	bottom: 0;
+	z-index: 14;
+
+	.minimize {
+		cursor: pointer;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		line-height: 36px;
+		font-size: 15px;
+		float: left;
+
+		.icon-remove {
+			float: right;
+			line-height: 36px;
+		}
+	}
+	> :first-child {
+		// margin-top: 48px;
+	}
+}
+
 /*Tooltip popup */
 .desktop_toolpopup {
 	position: absolute;

app/views/desktop/index.html.erb

@@ -68,8 +68,8 @@
   </div>
 </div>
 <!--<div id="orbitbar"></div>-->
-<div id="minimizebar" style="height:30px; bottom:0px; z-index:10; background-color:#ccc; width:auto; position:absolute; margin:0 30px 0 20px;"></div>
+<div id="minimizebar" class="admbg"></div>
-<img id="thmbackground"></div>
+<div id="thmbackground"></div>
 <div id="bgover" ></div>
 <div id="orbitnote"></div>
 <div id="orbitdiag">