diff --git a/app/assets/javascripts/orbitdesktop.js b/app/assets/javascripts/orbitdesktop.js index fc9453904..5d3d3eb71 100755 --- a/app/assets/javascripts/orbitdesktop.js +++ b/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){ - $("#thmbackground").attr("src",o.themesettings.background); - } else { - $("#thmbackground").attr("src",o.wallpaperPath+wallpaper); - } + var img_path = (!wallpaper) ? o.themesettings.background : o.wallpaperPath+wallpaper; + + $("#thmbackground").attr("style","background-image: url("+img_path+");"); }; 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 = '
', + template = '
', $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(){ diff --git a/app/assets/javascripts/orbitdesktopAPI.js b/app/assets/javascripts/orbitdesktopAPI.js index 81cdb68f6..ff7d94e8b 100644 --- a/app/assets/javascripts/orbitdesktopAPI.js +++ b/app/assets/javascripts/orbitdesktopAPI.js @@ -158,12 +158,12 @@ var orbitDesktopAPI = function(){ return; } } - var whtml =$('
'+settings.title+'
'); - $("body").append(whtml); - var parentwindow = $(o.contentHolder).find("#app_frame_"+o.windowcounter); - var app_holder_height = parentwindow.height() - 72; + var whtml = $('
'+settings.title+'
'); + $("body").append(whtml).css('overflow','hidden'); + var parentwindow = $("#app_frame_"+o.windowcounter); + 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"){ diff --git a/app/assets/stylesheets/desktop/desktop-main.css b/app/assets/stylesheets/desktop/desktop-main.css index bc240f270..95534f70b 100644 --- a/app/assets/stylesheets/desktop/desktop-main.css +++ b/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; } - .app_frame .app_frame_header .icon-remove { + height: 60px; } + .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; - font-size: 20px; - cursor: pointer; } + line-height: 36px; } /*Tooltip popup */ .desktop_toolpopup { diff --git a/app/assets/stylesheets/desktop/desktop-main.scss b/app/assets/stylesheets/desktop/desktop-main.scss index 413cb0ceb..8cb48886f 100644 --- a/app/assets/stylesheets/desktop/desktop-main.scss +++ b/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; diff --git a/app/views/desktop/index.html.erb b/app/views/desktop/index.html.erb index d1800b30b..1aac5e043 100644 --- a/app/views/desktop/index.html.erb +++ b/app/views/desktop/index.html.erb @@ -68,8 +68,8 @@ -
- +
+