developers
/
orbit-basic
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

details changed 

orbitdesktop.js, orbitdesktopAPI.js update!
This commit is contained in:
devin 2012-04-06 04:42:20 +08:00
parent 39e1bc8948
commit 74f083b226
8 changed files with 149 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/javascripts/orbitdesktop.js
View File

@ -65,7 +65,7 @@ var orbitDesktop = function(dom){
if(o.currenthtml!=target){
o.desktopData[o.currentface] = $(o.contentHolder).html();
$("#content").hide("drop",o.transitionTime,function(){
o.initializeSectionsManager(target);
o.initializeSettings(target);
});
}
});
@ -132,6 +132,7 @@ var orbitDesktop = function(dom){
});
$('#holder').tinyscrollbar({ axis: 'x'});
sdm();
}
if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){
@ -219,11 +220,14 @@ var orbitDesktop = function(dom){
}
else
$("#"+$(this).attr("data-category")).append(element);
},
over:function(){
$(this).find('span.tile').removeClass('op06');
},
out:function(){
$(this).find('span.tile').addClass('op06');
}
});
$(".section_label ul li:not(:nth-child(1)) span.tile").hover(function(){
$(this).toggleClass("op06");
})//.mouseleave(function(){$(this).addClass("op06");});
$('#holder').tinyscrollbar({ axis: 'x'});
};
if(!o.desktopData[o.currentface]){
@ -283,7 +287,7 @@ var orbitDesktop = function(dom){
};
this.initializeSettings = function(target){
o.currenthtml = target;
o.currentface = "sections";
o.currentface = "settings";
if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){
// bindHandlers();
@ -301,6 +305,7 @@ orbitDesktop.prototype.themefolder = "themes";
// devin
(function(){
$(document).ready(function(){
// dock effect
var $widget_fn = $('.widget_fn'),
$fn_des = $('.fn_des');
@ -324,8 +329,20 @@ orbitDesktop.prototype.themefolder = "themes";
$fn_des.stop(true, true).fadeOut();
});
});
}());
// Simple Dropdown Menu
function sdm(){
var $sdm = $('.sdm');
if( !$sdm.children('.sdm_o') ){
return;
} else {
$sdm.hover(function(){
$(this).addClass('thmc2');
}, function(){
$(this).removeClass('thmc2');
});
}
}

9
app/assets/javascripts/orbitdesktopAPI.js
View File

@ -17,7 +17,7 @@ var orbitDesktopAPI = function(){
o = this;
this.notify = function(msg,type,time){
var $notify = $("#orbitnote");
var img;
var img, n_height;
if(!type)type="";
switch(type){
case "alert":
@ -35,8 +35,13 @@ var orbitDesktopAPI = function(){
}
$notify.find("img#note_img").attr("src","/assets/"+img);
$notify.find(".note_message").text(msg);
n_height = $notify.outerHeight();
if(!time)time=5000; else time=time*1000;
$notify.slideDown().delay(time).slideUp();
$notify
.css({'top':-n_height, 'display':'block', 'opacity':0})
.animate({top:0,opacity:1},200)
.delay(time)
.animate({top:-n_height,opacity:0},200);
};
};

68
app/assets/stylesheets/desktopmain.css
View File

@ -154,7 +154,35 @@ a, a:hover { text-decoration: none; }
height:516px;
}
.appname { font-size: 15px; }
.appname {
font-size: 15px;
height: 30px;
line-height: 30px;
overflow: hidden;
cursor: default;
z-index: 2;
}
.w1.h1 .appname { text-align: center; }
.w2.h2 .appname { font-size: 21px; }
.appicon {
display: block;
width: 60px;
height: 60px;
margin: 0 auto;
position: relative;
}
.appholder {
position: relative;
padding-bottom: 12px;
}
.holder_f {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
left: 0;
top: 0;
}
.dtitle {
font-size: 30px;
line-height: 60px;
@ -163,22 +191,8 @@ a, a:hover { text-decoration: none; }
position: relative;
z-index: 9;
}
.dtitle:hover {
/* $(this).addClass( .thmc1 or .thmc2 ); */
}
.dtitle:hover .section_slc { display: block; }
.section_slc {
display: none;
position: absolute;
width: 252px;
left: 0;
top: 60px;
font-size: 15px;
line-height: 34px;
}
.section_slc li { border-top: solid 1px #f2f2f2; padding: 0 12px; }
.section_slc li:first-child { border: none; }
.section_slc li:hover { background-color: #F0F0F0; }
/*.section_slc { width: 252px; }*/
.admbg { background-color: #fff; }
.admtxt { color: #666; }
.admtxt:hover { color: #666; }
@ -198,6 +212,21 @@ a, a:hover { text-decoration: none; }
left: 0;
top: 0;
}
/* simple dropdown menu */
.sdm {}
.sdm:hover .sdm_o { display: block; }
.sdm_o {
display: none;
position: absolute;
left: 0;
top: 60px;
font-size: 15px;
}
.sdm_o li { border-top: solid 1px #f2f2f2; }
.sdm_o li:first-child { border: none; }
.sdm_o .admtxt { display: block; line-height: 36px; }
.sdm_o .admtxt:hover { background-color: #F0F0F0; }
/* theme color opacity */
.op10 { opacity: 1; }
.op09 { opacity: 0.9; }
@ -231,6 +260,7 @@ a, a:hover { text-decoration: none; }
.element {
margin: 0 12px 12px 0;
float: left;
position: relative;
/*display:inline-block;*/
}
.group{
@ -250,7 +280,7 @@ a, a:hover { text-decoration: none; }
max-width: 340px;
}
.g_sep { width: 11px; border-left: solid 1px #fff; }
.appicon { width: 60px; height: 60px; }
.clear { clear: both; }
@ -270,7 +300,7 @@ a, a:hover { text-decoration: none; }
/* Orbit Notification */
#orbitnote {
position: absolute;
position: fixed;
top: 0;
left: 50%;
margin-left: -206px;

2
app/views/desktop/app_manager.html.erb
View File

@ -13,7 +13,7 @@
</div>
<div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc1"><div class="end"></div></div></div></div>
<div class="scrollbar"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div id="group_wrapper" class="overview">

77
app/views/desktop/desktop.html.erb
View File

@ -1,66 +1,51 @@
<div id="content">
<div id="header" class="hh3">
<div class="dtitle w2 hh3 hp">
<span class="thmtxth">Desktop</span>
<div class="section_slc admbg">
<div class="dtitle w2 hh3 hp sdm">
<span class="thmtxth">Campus</span>
<div class="admbg sdm_o">
<ul>
<li><a class="admtxt" href="">Section 1</a></li>
<li><a class="admtxt" href="">Section 2</a></li>
<li><a class="admtxt" href="">Section 3</a></li>
<li><a class="admtxt hp w2 hh2" href="">Research</a></li>
<li><a class="admtxt hp w2 hh2" href="">Social</a></li>
<li><a class="admtxt hp w2 hh2" href="">Private</a></li>
</ul>
</div>
</div>
</div>
<div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc1"><div class="end"></div></div></div></div>
<div class="scrollbar"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div id="group_wrapper" class="overview">
<div class="group">
<ul class="grp ui-sortable">
<li class="element w2 h2 hp vp thmc1 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
<li class="element w2 h2 hp vp" data-category="abc">
<span class="tile thmc1 op07"></span>
<h1 class="appname thmtxt">MyCourseTimeTable</h1>
<div class="appholder">test content</div>
</li>
<li class="element w2 h2 hp vp thmc2 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
<li class="element w1 h1 hp vp" data-category="desktop">
<span class="tile thmc2 op09"></span>
<a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">名人名言</h1>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
<li class="element w2 h2 hp vp" data-category="abc">
<span class="tile thmc2 op09"></span>
<h1 class="appname thmtxt">Weather</h1>
<div class="appholder holder_f">test content</div>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
<li class="element w2 h1 hp vp" data-category="abc">
<span class="tile thmc1 op08"></span>
<h1 class="appname thmtxt">Clock</h1>
<div class="appholder holder_f">test content</div>
</li>
<li class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
<li class="element w2 h1 hp vp" data-category="abc">
<span class="tile thmc1 op08"></span>
<h1 class="appname thmtxt">School Events</h1>
<div class="appholder">test content</div>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w2 h1 hp vp thmc1 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li>
<li class="element w1 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc1 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li><li style="" class="element w2 h1 hp vp thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
<li class="element w1 h1 hp vp" data-category="desktop">
<span class="tile thmc2 op09"></span>
<a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">每日英文</h1>
</li>
</ul>
</div>

12
app/views/desktop/index.html.erb
View File

@ -8,14 +8,14 @@
<li class="dock_item"><a href="settings" class="widget_fn wh3 hh3" id="d_settings" onclick="return false;"><span class="widget_icon"><img src="" alt="Settings" id="settings_icon" width="30" height="30"/></span></a></li>
</ul>
</li>
<li class="d_cate"><a href="publication" class="widget_fn wh3 hh3" id='d_publication' onclick="return false;"><span class="widget_icon"><img src="" alt="Publication" id="publication_icon" width="30" height="30"/></span></a>
<li class="d_cate"><a href="" class="widget_fn wh3 hh3" id='d_publication' onclick="return false;"><span class="widget_icon"><img src="" alt="Publication" id="publication_icon" width="30" height="30"/></span></a>
<ul class="dock_child hh3 thmc4" style="width: 180px;">
<li class="dock_item"><a href="journal_p" class="widget_fn wh3 hh3" id='d_journal_p' onclick="return false;"><span class="widget_icon"><img src="" alt="Journal Papers" id="journal_p_icon" width="30" height="30"/></span></a></li>
<li class="dock_item"><a href="seminar_p" class="widget_fn wh3 hh3" id='d_seminar_p' onclick="return false;"><span class="widget_icon"><img src="" alt="Seminar Papers" id="seminar_p_icon" width="30" height="30"/></span></a></li>
<li class="dock_item"><a href="books" class="widget_fn wh3 hh3" id='d_books' onclick="return false;"><span class="widget_icon"><img src="" alt="Books" id="books_icon" width="30" height="30"/></span></a></li>
</ul>
</li>
<li class="d_cate"><a href="research" class="widget_fn wh3 hh3" id='d_research' onclick="return false;"><span class="widget_icon"><img src="" alt="Research" id="research_icon" width="30" height="30"/></span></a>
<li class="d_cate"><a href="" class="widget_fn wh3 hh3" id='d_research' onclick="return false;"><span class="widget_icon"><img src="" alt="Research" id="research_icon" width="30" height="30"/></span></a>
<ul class="dock_child hh3 thmc4" style="width: 240px;">
<li class="dock_item"><a href="research_d" class="widget_fn wh3 hh3" id='d_research_d' onclick="return false;"><span class="widget_icon"><img src="" alt="Research Domain" id="research_d_icon" width="30" height="30"/></span></a></li>
<li class="dock_item"><a href="research_p" class="widget_fn wh3 hh3" id='d_research_p' onclick="return false;"><span class="widget_icon"><img src="" alt="Research Project" id="research_p_icon" width="30" height="30"/></span></a></li>
@ -23,7 +23,7 @@
<li class="dock_item"><a href="labs" class="widget_fn wh3 hh3" id='d_labs' onclick="return false;"><span class="widget_icon"><img src="" alt="Labs" id="labs_icon" width="30" height="30"/></span></a></li>
</ul>
</li>
<li class="d_cate"><a href="experience" class="widget_fn wh3 hh3" id='d_experience' onclick="return false;"><span class="widget_icon"><img src="" alt="Experience" id="experience_icon" width="30" height="30"/></span></a>
<li class="d_cate"><a href="" class="widget_fn wh3 hh3" id='d_experience' onclick="return false;"><span class="widget_icon"><img src="" alt="Experience" id="experience_icon" width="30" height="30"/></span></a>
<ul class="dock_child hh3 thmc4" style="width: 300px;">
<li class="dock_item"><a href="working" class="widget_fn wh3 hh3" id='d_working' onclick="return false;"><span class="widget_icon"><img src="" alt="Working" id="working_icon" width="30" height="30"/></span></a></li>
<li class="dock_item"><a href="education" class="widget_fn wh3 hh3" id='d_education' onclick="return false;"><span class="widget_icon"><img src="" alt="Education" id="education_icon" width="30" height="30"/></span></a></li>
@ -32,14 +32,14 @@
<li class="dock_item"><a href="clubs" class="widget_fn wh3 hh3" id='d_clubs' onclick="return false;"><span class="widget_icon"><img src="" alt="Clubs" id="clubs_icon" width="30" height="30"/></span></a></li>
</ul>
</li>
<li class="d_cate"><a href="landt" class="widget_fn wh3 hh3" id='d_landt' onclick="return false;"><span class="widget_icon"><img src="" alt="Learning & Teaching" id="landt_icon" width="30" height="30"/></span></a>
<li class="d_cate"><a href="" class="widget_fn wh3 hh3" id='d_landt' onclick="return false;"><span class="widget_icon"><img src="" alt="Learning & Teaching" id="landt_icon" width="30" height="30"/></span></a>
<ul class="dock_child hh3 thmc4" style="width: 180px;">
<li class="dock_item"><a href="courses" class="widget_fn wh3 hh3" id='d_courses' onclick="return false;"><span class="widget_icon"><img src="" alt="Courses" id="courses_icon" width="30" height="30"/></span></a></li>
<li class="dock_item"><a href="homework" class="widget_fn wh3 hh3" id='d_homework' onclick="return false;"><span class="widget_icon"><img src="" alt="Homework" id="homework_icon" width="30" height="30"/></span></a></li>
<li class="dock_item"><a href="certification" class="widget_fn wh3 hh3" id='d_certification' onclick="return false;"><span class="widget_icon"><img src="" alt="Certification" id="certification_icon" width="30" height="30"/></span></a></li>
</ul>
</li>
<li class="d_cate"><a href="personal" class="widget_fn wh3 hh3" id='d_personal' onclick="return false;"><span class="widget_icon"><img src="" alt="Personal" id="personal_icon" width="30" height="30"/></span></a>
<li class="d_cate"><a href="" class="widget_fn wh3 hh3" id='d_personal' onclick="return false;"><span class="widget_icon"><img src="" alt="Personal" id="personal_icon" width="30" height="30"/></span></a>
<ul class="dock_child hh3 thmc4" style="width: 300px;">
<li class="dock_item"><a href="mypage" class="widget_fn wh3 hh3" id='d_mypage' onclick="return false;"><span class="widget_icon"><img src="" alt="myPage" id="mypage_icon" width="30" height="30"/></span></a></li>
<li class="dock_item"><a href="blog" class="widget_fn wh3 hh3" id='d_blog' onclick="return false;"><span class="widget_icon"><img src="" alt="Blog" id="blog_icon" width="30" height="30"/></span></a></li>
@ -48,7 +48,7 @@
<li class="dock_item"><a href="files" class="widget_fn wh3 hh3" id='d_files' onclick="return false;"><span class="widget_icon"><img src="" alt="Files" id="files_icon" width="30" height="30"/></span></a></li>
</ul>
</li>
<li class="d_cate"><a href="orbit" class="widget_fn wh3 hh3" id='d_orbit' onclick="return false;"><span class="widget_icon"><img src="" alt="Orbit" id="orbit_icon" width="30" height="30"/></span></a>
<li class="d_cate"><a href="" class="widget_fn wh3 hh3" id='d_orbit' onclick="return false;"><span class="widget_icon"><img src="" alt="Orbit" id="orbit_icon" width="30" height="30"/></span></a>
<ul class="dock_child hh3 thmc4" style="width: 60px;">
<li class="dock_item"><a href="connection" class="widget_fn wh3 hh3" id='d_connection' onclick="return false;"><span class="widget_icon"><img src="" alt="Academia Connection" id="connection_icon" width="30" height="30"/></span></a></li>
</ul>

14
app/views/desktop/sections.html.erb
View File

@ -5,16 +5,16 @@
</div>
</div>
<div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc1"><div class="end"></div></div></div></div>
<div class="scrollbar"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div id="group_wrapper" class="overview">
<div class="group">
<div class="section_label" >
<ul>
<li class="element w1 h1 hp vp thmtxt"><span class="tile thmc1"></span><span class="thmtxt">section 1</span></li>
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section2"><span class="tile thmc1 op06"></span><span class="thmtxt">section 2</span></li>
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section3"><span class="tile thmc1 op06"></span><span class="thmtxt">section 3</span></li>
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section4"><span class="tile thmc1 op06"></span><span class="thmtxt">section 4</span></li>
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section2"><span class="tile thmc2 op06"></span><span class="thmtxt">section 2</span></li>
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section3"><span class="tile thmc2 op06"></span><span class="thmtxt">section 3</span></li>
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section4"><span class="tile thmc2 op06"></span><span class="thmtxt">section 4</span></li>
</ul>
</div>
<ul class="grp" id="section1">
@ -92,9 +92,9 @@
<div class="section_label" >
<ul>
<li class="element w1 h1 hp vp thmtxt"><span class="tile thmc1"></span><span class="thmtxt">section 2</span></li>
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section1"><span class="tile thmc1 op06"></span><span class="thmtxt">section 1</span></li>
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section3"><span class="tile thmc1 op06"></span><span class="thmtxt">section 3</span></li>
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section4"><span class="tile thmc1 op06"></span><span class="thmtxt">section 4</span></li>
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section1"><span class="tile thmc2 op06"></span><span class="thmtxt">section 1</span></li>
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section3"><span class="tile thmc2 op06"></span><span class="thmtxt">section 3</span></li>
<li class="element w1 h1 hp vp thmtxt " style="display: none;" data-category="section4"><span class="tile thmc2 op06"></span><span class="thmtxt">section 4</span></li>
</ul>
</div>
<ul class="grp" id="section2">

23
app/views/desktop/settings.html.erb
View File

@ -1 +1,22 @@
settings
<div id="content">
<div id="header" class="hh3">
<div class="dtitle w2 hh3 hp">
<span class="thmtxth">Settings</span>
</div>
</div>
<div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<ul>
<li><a href="" class="admtxt">Overview</a></li>
<li><a href="" class="admtxt">Account</a></li>
<li><a href="" class="admtxt">Sections</a></li>
<li><a href="" class="admtxt">Theme</a></li>
<li><a href="" class="admtxt">Connection</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</div>