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

Lets see

This commit is contained in:
Harry Bomrah 2012-04-11 15:36:32 +08:00
parent edf6089e0c 1fabe3d8f7
commit 68803c0c97
57 changed files with 766 additions and 468 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/miniColors/circle.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 B

BIN
app/assets/images/miniColors/gradient.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
app/assets/images/miniColors/line.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
app/assets/images/miniColors/rainbow.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
app/assets/images/miniColors/trigger.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
app/assets/images/sample_theme.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

1
app/assets/javascripts/desktop.js
View File

@ -8,6 +8,7 @@
//= require jquery_ujs //= require jquery_ujs
//= require jquery-ui //= require jquery-ui
//= require jquery.tinyscrollbar.min //= require jquery.tinyscrollbar.min
//= require jquery.miniColors.min
//= require bootstrap //= require bootstrap
//= require orbitdesktopAPI //= require orbitdesktopAPI
//= require orbitdesktop //= require orbitdesktop

9
app/assets/javascripts/jquery.miniColors.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

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

@ -138,12 +138,14 @@ var orbitDesktop = function(dom){
} }
}); });
$('#holder').tinyscrollbar({ axis: 'x'}); $('.tinycanvas').tinyscrollbar({ axis: 'x'});
$("div.scrollbar").hover(function(){ $("div.scrollbar").hover(function(){
$(this).removeClass('op01'); $(this).removeClass('op01');
}, function(){ }, function(){
$(this).addClass('op01'); $(this).addClass('op01');
}); });
// simple dropdown menu
var $sdm = $('.sdm'); var $sdm = $('.sdm');
if( !$sdm.children('.sdm_o') ){ if( !$sdm.children('.sdm_o') ){
@ -216,9 +218,10 @@ var orbitDesktop = function(dom){
bindSecondaryHandlers(); bindSecondaryHandlers();
} }
}; };
this.tempFunc = function(){ this.tempFunc = function(th){
//o.notify("This is test notification!!","alert",2) //o.notify("This is test notification!!","alert",2)
$.post("/desktop/save_desktop_settings",{"id":o.desktopId,"theme":$("#change_theme").val()},function(){ console.log(th);
$.post("/desktop/save_desktop_settings",{"id":o.desktopId,"theme":th},function(){
o.notify("Settings Saved!!","success"); o.notify("Settings Saved!!","success");
}) })
} }
@ -261,7 +264,7 @@ var orbitDesktop = function(dom){
$(".group_search").html(allApps); $(".group_search").html(allApps);
return false; return false;
}) })
$('#holder').tinyscrollbar({ axis: 'x'}); $('.tinycanvas').tinyscrollbar({ axis: 'x'});
} }
if(!o.desktopData[o.currentface]){ if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){ $(o.contentHolder).empty().load("/desktop/"+target,function(){
@ -296,14 +299,15 @@ var orbitDesktop = function(dom){
} }
else else
$("#"+$(this).attr("data-category")).append(element); $("#"+$(this).attr("data-category")).append(element);
},over:function(){ },
over:function(){
$(this).find('span.tile').removeClass('op06'); $(this).find('span.tile').removeClass('op06');
}, },
out:function(){ out:function(){
$(this).find('span.tile').addClass('op06'); $(this).find('span.tile').addClass('op06');
} }
}); });
$('#holder').tinyscrollbar({ axis: 'x'}); $('.tinycanvas').tinyscrollbar({ axis: 'x'});
var $sdm = $('.sdm'); var $sdm = $('.sdm');
if( !$sdm.children('.sdm_o') ){ if( !$sdm.children('.sdm_o') ){
@ -331,18 +335,82 @@ var orbitDesktop = function(dom){
o.currenthtml = target; o.currenthtml = target;
o.currentface = "settings"; o.currentface = "settings";
var bindHandlers = function(){ var bindHandlers = function(){
$("select#change_theme").change(function(){ $(".theme_list > li").click(function(){
o.changeTheme($(this).val()); o.changeTheme($(this).find('.theme_name').text());
}) $(".theme_list > li")
.removeClass('thmc1')
.data('clicked',null)
.find('.theme_name')
.removeClass('thmtxt');
$(this)
.addClass('thmc1')
.data('clicked',true)
.find('.theme_name')
.addClass('thmtxt');
od.tempFunc($(this).text());
});
$('.tinycanvas').each(function(){
var h = $(this).parent().height(),
sh = $(this).siblings('.s_tab').height();
$(this).css({'height': h-sh-24}).tinyscrollbar({ axis: 'y'});
});
// simple tab navgation
var $anchor = $('.s_tab a[href*=#]'),
$tabcontent = $('.st_c');
$anchor.each(function(){
$(this).click(function(){
var target = $(this).attr('href');
$anchor
.removeClass('thmc2 thmtxt admtxt admbg')
.addClass('admtxt admbg');
$(this).toggleClass('thmc2 thmtxt admtxt admbg');
$tabcontent.hide();
$(target).show();
$('.tinycanvas').tinyscrollbar_update();
return false;
});
});
// simple menu
// miniColors
$('.color-picker').miniColors({
});
$('.theme_list li:first-child').data('clicked',true); // this line just for demo
$('.theme_list li').hover(function(){
$(this)
.addClass('thmc1')
.find('.theme_name')
.addClass('thmtxt');
}, function(){
var c = 'thmc1',
t = 'thmtxt';
if( $(this).data('clicked') ){
t = '', c = '';
}
$(this)
.removeClass(c)
.find('.theme_name')
.removeClass(t);
});
} }
// if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){ $(o.contentHolder).empty().load("/desktop/"+target,function(){
bindHandlers(); bindHandlers();
}); });
// }else{ // }else{
// $(o.contentHolder).html(o.desktopData[o.currentface]); // $(o.contentHolder).html(o.desktopData[o.currentface]);
// bindHandlers(); // bindHandlers();
// } // }
}; };
this.loadWallpaper = function(wallpaper){ this.loadWallpaper = function(wallpaper){
if(!wallpaper)wallpaper = o.themesettings.background; if(!wallpaper)wallpaper = o.themesettings.background;

2
app/assets/stylesheets/desktop.css
View File

@ -5,5 +5,7 @@
*= require style *= require style
*= require bootstrap *= require bootstrap
*= require bootstrap-orbit *= require bootstrap-orbit
*= require jquery.miniColors
*= require desktopmain *= require desktopmain
*= require desktopmedia
*/ */

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

@ -1,4 +1,3 @@
@import url(http://fonts.googleapis.com/css?family=Cuprum);
/* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 v2.0 | 20110126
License: none (public domain) License: none (public domain)
@ -60,6 +59,7 @@ body {
background-color: #000; background-color: #000;
} }
a, a:hover { text-decoration: none; } a, a:hover { text-decoration: none; }
a:focus { outline: none; }
/* desktop layout */ /* desktop layout */
#container { #container {
margin: 48px 0 0 156px; margin: 48px 0 0 156px;
@ -70,7 +70,7 @@ a, a:hover { text-decoration: none; }
} }
#side { #side {
width: 156px; width: 156px;
height: 540px; height: 516px;
position: absolute; position: absolute;
top: 120px; top: 120px;
left: 0; left: 0;
@ -79,7 +79,7 @@ a, a:hover { text-decoration: none; }
#holder { #holder {
/*overflow: hidden; /*overflow: hidden;
overflow-x: auto;*/ overflow-x: auto;*/
height: 540px; height: 516px;
width: auto; width: auto;
position: relative; position: relative;
} }
@ -160,7 +160,7 @@ a, a:hover { text-decoration: none; }
line-height: 30px; line-height: 30px;
overflow: hidden; overflow: hidden;
cursor: default; cursor: default;
z-index: 2; z-index: 3;
} }
.w1.h1 .appname { text-align: center; } .w1.h1 .appname { text-align: center; }
.w2.h2 .appname { font-size: 21px; } .w2.h2 .appname { font-size: 21px; }
@ -173,16 +173,18 @@ a, a:hover { text-decoration: none; }
} }
.appholder { .appholder {
position: relative; position: relative;
z-index: 2;
padding-bottom: 12px; padding-bottom: 12px;
} }
.holder_f { .holder_f .appholder {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
/* left: 0; left: 0;
top: 0; */ top: 0;
} }
.holder_f .appname { display: none; }
.dtitle { .dtitle {
font-size: 30px; font-size: 30px;
line-height: 60px; line-height: 60px;
@ -213,6 +215,10 @@ a, a:hover { text-decoration: none; }
top: 0; top: 0;
} }
/* panel */
#panel_l { background-color: #f0f0f0; float: left; }
#panel_r { margin-left: 252px; position: relative;}
/* simple dropdown menu */ /* simple dropdown menu */
.sdm {} .sdm {}
.sdm:hover .sdm_o { display: block; } .sdm:hover .sdm_o { display: block; }
@ -227,6 +233,52 @@ a, a:hover { text-decoration: none; }
.sdm_o li:first-child { border: none; } .sdm_o li:first-child { border: none; }
.sdm_o .admtxt { display: block; line-height: 36px; } .sdm_o .admtxt { display: block; line-height: 36px; }
.sdm_o .admtxt:hover { background-color: #F0F0F0; } .sdm_o .admtxt:hover { background-color: #F0F0F0; }
/* simple menu */
.s_menu { font-size: 15px; line-height: 36px; }
.s_menu li { border-top: solid 1px #ddd; }
.s_menu li:first-child { border: none; }
.s_menu a { display: block; }
/* simple tabs */
.s_tab { font-size: 15px; line-height: 36px; }
.stb_h {}
.stb_v {}
.s_tab ul { overflow: hidden; }
.s_tab li { float: left; }
.s_tab a { display: block; }
.s_tab .admbg { background-color: #f0f0f0; }
.st_c { display: none; }
.st_c:first-child { display: block; }
/* Setting Page */
.theme_list {}
.theme_list li {
display: inline-block;
vertical-align: top;
margin: 0 0 24px 0;
padding: 6px 0px;
width: 132px;
text-align: center;
cursor: pointer
}
.theme_thumb { border: solid 1px #fff; width: 120px; margin: 0 auto; }
.theme_thumb img { display: block; }
.theme_name { font-size: 15px; padding: 8px 6px; display: block; }
.theme_preview { width: 528px; height: 150px; line-height: 36px; font-size: 15px; }
.theme_plate { overflow: hidden; }
.theme_plate > div { float: left; margin-right: 12px; }
.theme_plate > div:first-child { margin-right: 48px;}
.s_title { font-size: 15px; line-height: 60px; text-align: left; }
.s_action { padding: 24px 0; overflow: hidden; }
#theme_submit {
display: block;
float: right;
font-size: 15px;
line-height: 36px;
text-align: center;
}
/* theme color opacity */ /* theme color opacity */
.op10 { opacity: 1; } .op10 { opacity: 1; }
.op09 { opacity: 0.9; } .op09 { opacity: 0.9; }
@ -247,6 +299,8 @@ a, a:hover { text-decoration: none; }
.wh1 { width: 30px; } .wh1 { width: 30px; }
.wh2 { width: 36px; } .wh2 { width: 36px; }
.wh3 { width: 60px; } .wh3 { width: 60px; }
.w100 { width: 100%; }
.pw { width: 540px; }
.h1 { height: 96px; } .h1 { height: 96px; }
.h2 { height: 228px; } .h2 { height: 228px; }
@ -254,6 +308,7 @@ a, a:hover { text-decoration: none; }
.hh1 { height: 30px; } .hh1 { height: 30px; }
.hh2 { height: 36px; } .hh2 { height: 36px; }
.hh3 { height: 60px; } .hh3 { height: 60px; }
.ph { height: 516px; }
.hp { padding-left: 12px; padding-right: 12px; } .hp { padding-left: 12px; padding-right: 12px; }
.vp { padding-top: 12px; padding-bottom: 12px; } .vp { padding-top: 12px; padding-bottom: 12px; }
@ -285,18 +340,16 @@ a, a:hover { text-decoration: none; }
.clear { clear: both; } .clear { clear: both; }
/* tiny scrollbar */ /* tiny scrollbar */
#holder .viewport { width: auto; height: 516px; overflow: hidden; position: relative; } .tinycanvas { overflow: hidden; position: relative; height: 100%; }
#holder .overview { position: absolute; left: 0; top: 0; } .tinycanvas .viewport { width: auto; height: 100%; overflow: hidden; position: relative; }
#holder .scrollbar { .tinycanvas .overview { position: absolute; left: 0; top: 0; }
position: absolute; .tinycanvas .scrollbar { position: absolute; z-index: 9; }
bottom: 0; .tinycanvas .scrollbar.sb_h { left: 0; bottom: 0; height: 12px; }
left: 0; .tinycanvas .scrollbar.sb_v { right: 0; top: 0; width: 12px; }
height: 12px; .tinycanvas .track { height: 100%; width: 12px; position: relative; }
} .tinycanvas .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#holder .track { height: 100%; width: 12px; position: relative; } .tinycanvas .thumb .end { overflow: hidden; height: 12px; width: 12px; }
#holder .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; } .tinycanvas .disable{ display: none; }
#holder .thumb .end { overflow: hidden; height: 12px; width: 12px; }
#holder .disable{ display: none; }
/* Orbit Notification */ /* Orbit Notification */
#orbitnote { #orbitnote {
@ -331,4 +384,3 @@ a, a:hover { text-decoration: none; }
.grp{ .grp{
min-height:540px; min-height:540px;
} }

10
app/assets/stylesheets/desktopmedia.css Normal file
View File

@ -0,0 +1,10 @@
@media only screen and (min-width: 1200px){
#panel_r.pw { width: 800px; }
}
@media only screen and (min-width: 1900px){
#panel_r.pw { width: 1560px; }
}

59
app/assets/stylesheets/jquery.miniColors.css Executable file
View File

@ -0,0 +1,59 @@
.miniColors-trigger {
height: 36px;
width: 36px;
border: solid 3px #e8e8e8;
vertical-align: middle;
margin: 0 6px 0 0;
display: inline-block;
outline: none;
}
.miniColors-selector {
position: absolute;
width: 175px;
height: 150px;
background: #FFF;
border: solid 1px #BBB;
padding: 5px;
z-index: 999999;
}
.miniColors-selector.black {
background: #222;
border-color: #222;
}
.miniColors-colors {
position: absolute;
top: 5px;
left: 5px;
width: 150px;
height: 150px;
background: url(miniColors/gradient.png) center no-repeat;
cursor: crosshair;
}
.miniColors-hues {
position: absolute;
top: 5px;
left: 160px;
width: 20px;
height: 150px;
background: url(miniColors/rainbow.png) center no-repeat;
cursor: crosshair;
}
.miniColors-colorPicker {
position: absolute;
width: 11px;
height: 11px;
background: url(miniColors/circle.gif) center no-repeat;
}
.miniColors-huePicker {
position: absolute;
left: -3px;
width: 26px;
height: 3px;
background: url(miniColors/line.gif) center no-repeat;
}

1
app/assets/stylesheets/style.css.erb
View File

@ -1,3 +1,4 @@
@import url(http://fonts.googleapis.com/css?family=Cuprum);
@font-face{ @font-face{
font-family: 'WebSymbolsRegular'; font-family: 'WebSymbolsRegular';
src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>); src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>);

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

@ -13,170 +13,172 @@
</div> </div>
<div id="holder"> <div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div> <div class="tinycanvas">
<div class="viewport"> <div class="scrollbar sb_h"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div id="group_wrapper" class="overview"> <div class="viewport">
<div id="group_wrapper" class="overview">
<div class="group g_sep op03" id='seperator' style="height: 516px;display:none;"></div> <div class="group g_sep op03" id='seperator' style="height: 516px;display:none;"></div>
<div class="group_search"> <div class="group_search">
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">社團記事</h1> <h1 class="appname thmtxt">社團記事</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">每日英文</h1> <h1 class="appname thmtxt">每日英文</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">名人名言</h1> <h1 class="appname thmtxt">名人名言</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Homework</h1> <h1 class="appname thmtxt">Homework</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">School Events</h1> <h1 class="appname thmtxt">School Events</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">MyCoursesTimeTable</h1> <h1 class="appname thmtxt">MyCoursesTimeTable</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Clock</h1> <h1 class="appname thmtxt">Clock</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Weather</h1> <h1 class="appname thmtxt">Weather</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">myRefer</h1> <h1 class="appname thmtxt">myRefer</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">O-Journals</h1> <h1 class="appname thmtxt">O-Journals</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">O-Doc</h1> <h1 class="appname thmtxt">O-Doc</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">ToDos</h1> <h1 class="appname thmtxt">ToDos</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Project Progress</h1> <h1 class="appname thmtxt">Project Progress</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Paper Progress</h1> <h1 class="appname thmtxt">Paper Progress</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Team Stream</h1> <h1 class="appname thmtxt">Team Stream</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">TED</h1> <h1 class="appname thmtxt">TED</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Twitter</h1> <h1 class="appname thmtxt">Twitter</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Facebook</h1> <h1 class="appname thmtxt">Facebook</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">News Feed</h1> <h1 class="appname thmtxt">News Feed</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">iClock</h1> <h1 class="appname thmtxt">iClock</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Research Networks</h1> <h1 class="appname thmtxt">Research Networks</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Gmail</h1> <h1 class="appname thmtxt">Gmail</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Youtube</h1> <h1 class="appname thmtxt">Youtube</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Calendar</h1> <h1 class="appname thmtxt">Calendar</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Talk</h1> <h1 class="appname thmtxt">Talk</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Diary</h1> <h1 class="appname thmtxt">Diary</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Bookeeper</h1> <h1 class="appname thmtxt">Bookeeper</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Movies</h1> <h1 class="appname thmtxt">Movies</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Girls Wall</h1> <h1 class="appname thmtxt">Girls Wall</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">Album</h1> <h1 class="appname thmtxt">Album</h1>
</div> </div>
<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <div class="element w1 h1 hp vp thmc2" data-category="desktop">
<span class="tile thmc2"></span> <span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a> <a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">O-Music</h1> <h1 class="appname thmtxt">O-Music</h1>
</div> </div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>

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

@ -14,87 +14,16 @@
</div> </div>
</div> </div>
<div id="holder"> <div id="holder">
<div class="scrollbar op01"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div> <div class="tinycanvas">
<div class="viewport"> <div class="scrollbar sb_h op01"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div id="group_wrapper" class="overview"> <div class="viewport">
<!-- <div class="group"> <div id="group_wrapper" class="overview">
<ul class="grp ui-sortable">
<li class="element w2 h2 hp vp" data-category="abc"> <div class="clear"></div>
<span class="tile thmc1 op07"></span>
<h1 class="appname thmtxt">MyCourseTimeTable</h1>
<div class="appholder">test content</div>
</li>
<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 w2 h2 hp vp" data-category="widget" data-content='weather'>
<span class="tile thmc2 op09"></span>
<h1 class="appname thmtxt">Weather</h1>
<div class="appholder holder_f">
</div>
</li>
<li class="element w2 h1 hp vp" data-category="widget" data-content='clock'>
<span class="tile thmc1 op08"></span>
<h1 class="appname thmtxt">Clock</h1>
<div class="appholder holder_f">test content</div>
</li>
<li class="element w2 h1 hp vp" data-category="widget" data-content="school_events">
<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" 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>
<div class="group">
<ul class="grp ui-sortable">
<li style="" class="element w2 h2 hp vp thmc2 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li><li class="element w2 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 style="" 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 w2 h1 hp vp thmc1 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li><li style="" class="element w2 h2 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="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 thmc2 op07" data-category="desktop">
<h1 class="appname thmtxt">Aperture</h1>
</li><li style="" class="element w1 h1 hp vp thmc2 op07" data-category="abc">
<h1 class="appname thmtxt">Garage Band</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 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>
</ul>
</div>-->
<div class="clear"></div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>

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

@ -5,169 +5,171 @@
</div> </div>
</div> </div>
<div id="holder"> <div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div> <div class="tinycanvas">
<div class="viewport"> <div class="scrollbar sb_h"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div id="group_wrapper" class="overview"> <div class="viewport">
<div class="group"> <div id="group_wrapper" class="overview">
<div class="section_label" > <div class="group">
<ul> <div class="section_label" >
<li class="element w1 h1 hp vp thmtxt"><span class="tile thmc1"></span><span class="thmtxt">section 1</span></li> <ul>
<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"><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="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="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="section4"><span class="tile thmc2 op06"></span><span class="thmtxt">section 4</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">
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
</ul> </ul>
</div> </div>
<ul class="grp" id="section1"> <div class="group">
<li class="element w1 hh2 hp vp" data-category="abc"> <div class="section_label" >
<h1 class="appname thmtxt">Garage Band</h1> <ul>
</li> <li class="element w1 h1 hp vp thmtxt"><span class="tile thmc1"></span><span class="thmtxt">section 2</span></li>
<li class="element w1 hh2 hp vp" data-category="abc"> <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>
<h1 class="appname thmtxt">Garage Band</h1> <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> <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>
<li class="element w1 hh2 hp vp" data-category="abc"> </ul>
<h1 class="appname thmtxt">Garage Band</h1> </div>
</li> <ul class="grp" id="section2">
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc"> <li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1> <h1 class="appname thmtxth">Garage Band</h1>
</li> </li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxth">Garage Band</h1>
</li>
</ul>
</div>
<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 2</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> </ul>
</div> </div>
<ul class="grp" id="section2"> <div class="clear"></div>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
<li class="element w1 hh2 hp vp" data-category="abc">
<h1 class="appname thmtxt">Garage Band</h1>
</li>
</ul>
</div> </div>
<div class="clear"></div>
</div> </div>
</div> </div>
</div> </div>

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

@ -5,20 +5,97 @@
</div> </div>
</div> </div>
<div id="holder"> <div id="holder">
<div class="scrollbar"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport"> <div id="panel_l" class="ph">
<div class="overview"> <div class="s_menu sm_v">
<ul> <ul>
<li><a href="" class="admtxt">Overview</a></li> <li><a href="" class="admtxt hh2 w2 hp">Overview</a></li>
<li><a href="" class="admtxt">Account</a></li> <li><a href="" class="admtxt hh2 w2 hp">Account</a></li>
<li><a href="" class="admtxt">Sections</a></li> <li><a href="" class="admtxt hh2 w2 hp">Sections</a></li>
<li><a href="" class="admtxt">Theme</a></li> <li><a href="" class="admtxt hh2 w2 hp thmtxt thmc1">Theme</a></li>
<li><a href="" class="admtxt">Connection</a></li> <li><a href="" class="admtxt hh2 w2 hp">Connection</a></li>
</ul> </ul>
</div>
</div>
<div id="panel_r" class="ph pw admbg hp">
<div class="s_tab stb_h">
<ul>
<li><a href="#st1" class="hh2 hp thmtxt thmc2">Select Theme</a></li>
<li><a href="#st2" class="hh2 hp admtxt admbg">Custom Theme</a></li>
</ul>
</div>
<div class="tinycanvas vp">
<div class="scrollbar sb_v vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<div id="st1" class="st_c">
<ul class="theme_list">
<li class="thmc1"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name thmtxt">default</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">snake</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">sexy</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">vintage</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">natural</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">chris</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">Wood</span></li>
</ul>
</div>
<div id="st2" class="st_c">
<div class="s_title hh3">Preview</div>
<div class="theme_preview vp" style="background-image: url(/desktop_themes/default/images/background.jpg);">
<div class="thmtxth hh2 hp" style="margin-left:108px;">Theme Text1</div>
<div class="theme_plate">
<div class="thmc4 h1 wh3"></div>
<div class="thmc1 h1 w1"><div class="thmtxt hp">Theme Text2</div></div>
<div class="g_sep h1 op07"></div>
<div class="thmc2 h1 w1"><div class="thmtxt hp">Theme Text</div></div>
</div>
</div>
<div>
<table cellpadding="0" cellspacing="0" border="0" width="528">
<tr>
<th class="s_title hh3" width="190px">Theme Color</th>
<th class="s_title hh3">Line Color</th>
<th class="s_title hh3" width="120px">Text Color</th>
<th class="s_title hh3" width="120px">Background Color</th>
</tr>
<tr>
<td>
<input type="hidden" class="color-picker black" value="#000000">
<input type="hidden" class="color-picker black" value="#0099cc">
<input type="hidden" class="color-picker black" value="#3366cc">
</td>
<td>
<input type="hidden" class="color-picker black" value="#ffffff">
</td>
<td>
<input type="hidden" class="color-picker black" value="#ffffff">
<input type="hidden" class="color-picker black" value="#ffffff">
</td>
<td>
<input type="hidden" class="color-picker black" value="#000000">
</td>
</tr>
</table>
<div class="s_action">
<a href="" id="theme_submit" class="thmc1 thmtxt w1 hh2 hp">Confirm</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div> <div class="clear"></div>
<<<<<<< HEAD <!-- <select id="change_theme">
=======
<select id="change_theme">
<option value='default'>Default Theme</option> <option value='default'>Default Theme</option>
<option value='snake'>Snake Theme</option> <option value='snake'>Snake Theme</option>
<option value='sexy'>Sexy Theme</option> <option value='sexy'>Sexy Theme</option>
@ -26,9 +103,6 @@
<option value='chris'>Chris Theme</option> <option value='chris'>Chris Theme</option>
</select> </select>
<br /> <br />
<button onClick="od.tempFunc();">Save</button> <button onClick="od.tempFunc();">Save</button> -->
>>>>>>> desktop_harry
</div>
</div>
</div> </div>
</div> </div>

2
public/desktop_themes/default/css/default.css
View File

@ -30,7 +30,7 @@ apply to:
/* Theme Text Color */ /* Theme Text Color */
.thmtxt { color: #fff; } .thmtxt, .thmtxt:hover { color: #fff; }
.thmtxth { color: #fff; } .thmtxth { color: #fff; }
/* Group Seprate Color */ /* Group Seprate Color */

45
public/desktop_themes/natural/css/natural.css Executable file
View File

@ -0,0 +1,45 @@
/*
Theme Color
random apply to:
.widget_fn - on hover status
#search_app .submit
.tile
*/
.thmc1 { background: #B6662C; }
.thmc2 { background: #34520C; }
/*
sub1 Theme Color
apply to:
#search_app
*/
.thmc3 { background: #FFFFFF; }
/*
sub1 Theme Color
apply to:
#rwidget
*/
.thmc4 { background: #5CA360; }
/* Theme Text Color */
.thmtxt, .thmtxt:hover { color: #fff; }
.thmtxth { color: #fff; }
/* Group Seprate Color */
.g_sep { border-color: #fff; }
/*
theme bg image
#thmbackground img - background
#bgover - upon #thmbackground
*/

BIN
public/desktop_themes/natural/images/background.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 258 KiB

BIN
public/desktop_themes/natural/images/d_activities.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 535 B

BIN
public/desktop_themes/natural/images/d_album.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 720 B

BIN
public/desktop_themes/natural/images/d_app_manager.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 415 B

BIN
public/desktop_themes/natural/images/d_appstore.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 B

BIN
public/desktop_themes/natural/images/d_blog.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 436 B

BIN
public/desktop_themes/natural/images/d_books.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 589 B

BIN
public/desktop_themes/natural/images/d_calendar.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 598 B

BIN
public/desktop_themes/natural/images/d_certification.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 714 B

BIN
public/desktop_themes/natural/images/d_clubs.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 524 B

BIN
public/desktop_themes/natural/images/d_connection.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 454 B

BIN
public/desktop_themes/natural/images/d_courses.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 500 B

BIN
public/desktop_themes/natural/images/d_education.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 513 B

BIN
public/desktop_themes/natural/images/d_experience.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 533 B

BIN
public/desktop_themes/natural/images/d_files.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 379 B

BIN
public/desktop_themes/natural/images/d_home.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 488 B

BIN
public/desktop_themes/natural/images/d_homework.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 506 B

BIN
public/desktop_themes/natural/images/d_honors.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 670 B

BIN
public/desktop_themes/natural/images/d_journal_p.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 517 B

BIN
public/desktop_themes/natural/images/d_labs.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 805 B

BIN
public/desktop_themes/natural/images/d_landt.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 481 B

BIN
public/desktop_themes/natural/images/d_mypage.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 464 B

BIN
public/desktop_themes/natural/images/d_orbit.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 628 B

BIN
public/desktop_themes/natural/images/d_patents.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 495 B

BIN
public/desktop_themes/natural/images/d_personal.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 589 B

BIN
public/desktop_themes/natural/images/d_publication.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 524 B

BIN
public/desktop_themes/natural/images/d_research.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 575 B

BIN
public/desktop_themes/natural/images/d_research_d.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 533 B

BIN
public/desktop_themes/natural/images/d_research_p.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 557 B

BIN
public/desktop_themes/natural/images/d_sections.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 243 B

BIN
public/desktop_themes/natural/images/d_seminar_p.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 532 B

BIN
public/desktop_themes/natural/images/d_settings.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 573 B

BIN
public/desktop_themes/natural/images/d_working.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 B

39
public/desktop_themes/natural/settings/natural.json Executable file
View File

@ -0,0 +1,39 @@
{
"css":"natural.css",
"background":"background.jpg",
"tilecolor":["thmc1","thmc2"],
"icons":{
"home":"d_home.png",
"app_manager":"d_app_manager.png",
"sections":"d_sections.png",
"settings":"d_settings.png",
"publication":"d_publication.png",
"journal_p":"d_journal_p.png",
"seminar_p":"d_seminar_p.png",
"books":"d_books.png",
"research":"d_research.png",
"research_d":"d_research_d.png",
"research_p":"d_research_p.png",
"patents":"d_patents.png",
"labs":"d_labs.png",
"experience":"d_experience.png",
"working":"d_working.png",
"education":"d_education.png",
"honors":"d_honors.png",
"activities":"d_activities.png",
"clubs":"d_clubs.png",
"landt":"d_landt.png",
"courses":"d_courses.png",
"homework":"d_homework.png",
"certification":"d_certification.png",
"personal":"d_personal.png",
"mypage":"d_mypage.png",
"blog":"d_blog.png",
"album":"d_album.png",
"calendar":"d_calendar.png",
"files":"d_files.png",
"orbit":"d_orbit.png",
"connection":"d_connection.png",
"appstore":"d_appstore.png"
}
}

19
public/desktop_widgets/clock/index.html.erb
View File

@ -1,7 +1,8 @@
<link href="http://fonts.googleapis.com/css?family=Rationale|Orbitron" rel="stylesheet" type="text/css">
<style> <style>
.clock{ .clock{
/* The .clock div. Created dynamically by jQuery */ /* The .clock div. Created dynamically by jQuery */
background-color:#252525; /*background-color:#252525;*/
height:75px; height:75px;
width:75px; width:75px;
position:relative; position:relative;
@ -26,7 +27,7 @@
.clock .bg, .clock .front{ .clock .bg, .clock .front{
width:50px; width:50px;
height:75px; height:75px;
background-color:#252525; /*background-color:#252525;*/
position:absolute; position:absolute;
top:0; top:0;
} }
@ -35,16 +36,14 @@
/* Holds the number of seconds, minutes or hours respectfully */ /* Holds the number of seconds, minutes or hours respectfully */
position:absolute; position:absolute;
width:75px; width:75px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-family: Orbitron, sans-serif;
z-index:20; z-index:20;
color:#F5F5F5; color:#F5F5F5;
font-size:22.5px; font-size:21px;
text-align:center; text-align:center;
top:27.5px; top:27.5px;
left:0; left:0;
/* CSS3 text shadow: */
text-shadow:4px 4px 5px #333333;
} }
/* The left part of the background: */ /* The left part of the background: */
@ -68,7 +67,13 @@
left:0; left:0;
z-index:10; z-index:10;
} }
#fancyClock {
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin: -36px 0 0 -114px;
}
</style> </style>
<div id="fancyClock"></div> <div id="fancyClock"></div>
<script> <script>

4
public/desktop_widgets/clock/temp/clock.css
View File

@ -1,6 +1,6 @@
.clock{ .clock{
/* The .clock div. Created dynamically by jQuery */ /* The .clock div. Created dynamically by jQuery */
background-color:#252525; /*background-color:#252525;*/
height:200px; height:200px;
width:200px; width:200px;
position:relative; position:relative;
@ -25,7 +25,7 @@
.clock .bg, .clock .front{ .clock .bg, .clock .front{
width:100px; width:100px;
height:200px; height:200px;
background-color:#252525; /*background-color:#252525;*/
position:absolute; position:absolute;
top:0; top:0;
} }

4
public/desktop_widgets/weather/index.html.erb
View File

@ -1,6 +1,6 @@
<div style='width: 180px; height: 150px; background-image: url( /desktop_widgets/weather/img/clouds_180x150_bg.jpg ); <div style='width: 100%; height: 100%; <!-- background-image: url( /desktop_widgets/weather/img/clouds_180x150_bg.jpg ); -->
background-repeat: no-repeat; background-color: #;' ><div id='NetweatherContainer' background-repeat: no-repeat; background-color: #;' ><div id='NetweatherContainer'
style='height: 138px;' ><script src='http://netweather.accuweather.com/adcbin/ style='height: 100%;' ><script src='http://netweather.accuweather.com/adcbin/
netweather_v2/netweatherV2ex.asp? netweather_v2/netweatherV2ex.asp?
partner=netweather&tStyle=normal&logo=1&zipcode=ASI|TW|TW018|HSINCHU| partner=netweather&tStyle=normal&logo=1&zipcode=ASI|TW|TW018|HSINCHU|
&lang=eng&size=8&theme=clouds&metric=0&target=_self'></script></div></div> &lang=eng&size=8&theme=clouds&metric=0&target=_self'></script></div></div>