From b004121187479e6fdddc2ffacea7ed45b9c156c7 Mon Sep 17 00:00:00 2001 From: Harry Bomrah Date: Mon, 19 Aug 2013 12:33:00 +0800 Subject: [PATCH] minimize bar updated to new style and more flexible. --- .../javascripts/desktop/orbitdesktop.js | 28 +++++++---- .../javascripts/desktop/orbitdesktopAPI.js | 38 ++++++++++++-- .../stylesheets/desktop/desktop-main.css | 38 +++++++++----- .../stylesheets/desktop/desktop-main.scss | 49 ++++++++++++++++--- app/views/desktop/index.html.erb | 4 +- 5 files changed, 122 insertions(+), 35 deletions(-) diff --git a/app/assets/javascripts/desktop/orbitdesktop.js b/app/assets/javascripts/desktop/orbitdesktop.js index 9685011b..94d84563 100755 --- a/app/assets/javascripts/desktop/orbitdesktop.js +++ b/app/assets/javascripts/desktop/orbitdesktop.js @@ -337,7 +337,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}); @@ -1523,11 +1523,8 @@ 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",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 @@ -1844,11 +1841,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")); @@ -1862,11 +1860,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(){ $(this).attr("data-position",minimizedApps.indexOf($(this).data("app-id"))); diff --git a/app/assets/javascripts/desktop/orbitdesktopAPI.js b/app/assets/javascripts/desktop/orbitdesktopAPI.js index 2d89a727..e5c3aed1 100644 --- a/app/assets/javascripts/desktop/orbitdesktopAPI.js +++ b/app/assets/javascripts/desktop/orbitdesktopAPI.js @@ -158,10 +158,10 @@ var orbitDesktopAPI = function(){ return; } } - var whtml =$('
'+settings.title+'
'); - $(o.contentHolder).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(".app_holder").height(app_holder_height); @@ -179,7 +179,35 @@ var orbitDesktopAPI = function(){ } 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 eb833caa..ed610f56 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,36 @@ 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; } + + /* 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; } + .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 { + #minimizebar .minimize .icon-remove { display: block; 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 d0dc77e9..e8f37314 100644 --- a/app/assets/stylesheets/desktop/desktop-main.scss +++ b/app/assets/stylesheets/desktop/desktop-main.scss @@ -764,9 +764,9 @@ a:focus { outline: none; } /* 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; @@ -778,16 +778,49 @@ a:focus { outline: none; } background-color: #fff; position: absolute; width: 100%; + + iframe { + width: 100%; + } } - #header .icon-remove { - display: block; - float: right; - line-height: 60px; - font-size: 20px; - cursor: pointer; + .app_frame_header{ + height: 60px; + + .icon-remove, .icon-minus { + display: block; + float: right; + line-height: 60px; + font-size: 20px; + cursor: pointer; + } } } +/* 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 dbc1a826..2290f7d6 100644 --- a/app/views/desktop/index.html.erb +++ b/app/views/desktop/index.html.erb @@ -69,8 +69,8 @@ -
- +
+