minimize bar updated to new style and more flexible.
This commit is contained in:
saurabhbhatia
parent
bc596614fb
commit
b004121187
|
|
@ -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 = '<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(){
|
||||
$(this).attr("data-position",minimizedApps.indexOf($(this).data("app-id")));
|
||||
|
|
|
|||
|
|
@ -158,10 +158,10 @@ var orbitDesktopAPI = function(){
|
|||
return;
|
||||
}
|
||||
}
|
||||
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>');
|
||||
$(o.contentHolder).append(whtml);
|
||||
var parentwindow = $(o.contentHolder).find("#app_frame_"+o.windowcounter);
|
||||
var app_holder_height = parentwindow.height() - 72;
|
||||
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).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"){
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
}
|
||||
.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;
|
||||
|
|
|
|||
|
|
@ -69,8 +69,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>
|
||||
<img id="thmbackground"></div>
|
||||
<div id="minimizebar" class="admbg"></div>
|
||||
<div id="thmbackground"></div>
|
||||
<div id="bgover" ></div>
|
||||
<div id="orbitnote"></div>
|
||||
<div id="orbitdiag">
|
||||
|
|
|
|||
Reference in New Issue