saurabh
/
orbit-basic
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

custom theme settings

This commit is contained in:
devin 2012-04-10 17:44:36 +08:00
parent 6006f1b3c6
commit 360e5228b7
17 changed files with 610 additions and 427 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

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

@ -8,6 +8,7 @@
//= require jquery_ujs
//= require jquery-ui
//= require jquery.tinyscrollbar.min
//= require jquery.miniColors.min
//= require bootstrap
//= require orbitdesktopAPI
//= 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

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

@ -145,7 +145,7 @@ var orbitDesktop = function(dom){
}
});
$('#holder').tinyscrollbar({ axis: 'x'});
$('.tinycanvas').tinyscrollbar({ axis: 'x'});
$("div.scrollbar").hover(function(){
$(this).removeClass('op01');
}, function(){
@ -221,7 +221,7 @@ var orbitDesktop = function(dom){
$(".group_search").html(allApps);
return false;
})
$('#holder').tinyscrollbar({ axis: 'x'});
$('.tinycanvas').tinyscrollbar({ axis: 'x'});
}
if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){
@ -265,7 +265,7 @@ var orbitDesktop = function(dom){
$(this).find('span.tile').addClass('op06');
}
});
$('#holder').tinyscrollbar({ axis: 'x'});
$('.tinycanvas').tinyscrollbar({ axis: 'x'});
var $sdm = $('.sdm');
if( !$sdm.children('.sdm_o') ){
@ -295,7 +295,41 @@ var orbitDesktop = function(dom){
$("select#change_theme").change(function(){
o.changeTheme($(this).val());
});
$('#panel_r').tinyscrollbar({ axis: 'y'});
$('.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')
.addClass('admtxt');
$(this).toggleClass('thmc2 thmtxt admtxt');
$tabcontent.hide();
$(target).show();
$('.tinycanvas').tinyscrollbar_update();
return false;
});
});
// simple menu
// miniColors
$('.color-picker').miniColors({
});
}
if(!o.desktopData[o.currentface]){
$(o.contentHolder).empty().load("/desktop/"+target,function(){

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

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

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

@ -60,6 +60,7 @@ body {
background-color: #000;
}
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
/* desktop layout */
#container {
margin: 48px 0 0 156px;
@ -160,7 +161,7 @@ a, a:hover { text-decoration: none; }
line-height: 30px;
overflow: hidden;
cursor: default;
z-index: 2;
z-index: 3;
}
.w1.h1 .appname { text-align: center; }
.w2.h2 .appname { font-size: 21px; }
@ -243,11 +244,27 @@ a, a:hover { text-decoration: none; }
.s_tab { font-size: 15px; line-height: 36px; }
.stb_h {}
.stb_v {}
.s_tab li { display: inline-block; }
.s_tab ul { overflow: hidden; }
.s_tab li { float: left; }
.s_tab a { display: block; }
.st_c { display: none; }
.st_c:first-child { display: block; }
/* Setting Page */
.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 */
.op10 { opacity: 1; }
.op09 { opacity: 0.9; }
@ -269,7 +286,7 @@ a, a:hover { text-decoration: none; }
.wh2 { width: 36px; }
.wh3 { width: 60px; }
.w100 { width: 100%; }
.pw { width: 572px; }
.pw { width: 540px; }
.h1 { height: 96px; }
.h2 { height: 228px; }
@ -309,15 +326,16 @@ a, a:hover { text-decoration: none; }
.clear { clear: both; }
/* tiny scrollbar */
#holder .viewport { width: auto; height: 516px; overflow: hidden; position: relative; }
#holder .overview { position: absolute; left: 0; top: 0; }
#holder .scrollbar { position: absolute; }
#holder .scrollbar.sb_h { left: 0; bottom: 0; height: 12px; }
#holder .scrollbar.sb_v { right: 0; top: 0; width: 12px; }
#holder .track { height: 100%; width: 12px; position: relative; }
#holder .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#holder .thumb .end { overflow: hidden; height: 12px; width: 12px; }
#holder .disable{ display: none; }
.tinycanvas { overflow: hidden; position: relative; height: 100%; }
.tinycanvas .viewport { width: auto; height: 100%; overflow: hidden; position: relative; }
.tinycanvas .overview { position: absolute; left: 0; top: 0; }
.tinycanvas .scrollbar { position: absolute; z-index: 9; }
.tinycanvas .scrollbar.sb_h { left: 0; bottom: 0; height: 12px; }
.tinycanvas .scrollbar.sb_v { right: 0; top: 0; width: 12px; }
.tinycanvas .track { height: 100%; width: 12px; position: relative; }
.tinycanvas .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
.tinycanvas .thumb .end { overflow: hidden; height: 12px; width: 12px; }
.tinycanvas .disable{ display: none; }
/* Orbit Notification */
#orbitnote {

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: #000;
border-color: #000;
}
.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;
}

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

@ -13,6 +13,7 @@
</div>
<div id="holder">
<div class="tinycanvas">
<div class="scrollbar sb_h"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div id="group_wrapper" class="overview">
@ -180,3 +181,4 @@
</div>
</div>
</div>
</div>

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

@ -13,6 +13,7 @@
</div>
</div>
<div id="holder">
<div class="tinycanvas">
<div class="scrollbar sb_h op01"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div id="group_wrapper" class="overview">
@ -94,6 +95,7 @@
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>

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

@ -5,6 +5,7 @@
</div>
</div>
<div id="holder">
<div class="tinycanvas">
<div class="scrollbar sb_h"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport">
<div id="group_wrapper" class="overview">
@ -172,3 +173,4 @@
</div>
</div>
</div>
</div>

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

@ -12,23 +12,67 @@
<li><a href="" class="admtxt hh2 w2 hp">Overview</a></li>
<li><a href="" class="admtxt hh2 w2 hp">Account</a></li>
<li><a href="" class="admtxt hh2 w2 hp">Sections</a></li>
<li><a href="" class="admtxt hh2 w2 hp">Theme</a></li>
<li><a href="" class="admtxt hh2 w2 hp thmtxt thmc1">Theme</a></li>
<li><a href="" class="admtxt hh2 w2 hp">Connection</a></li>
</ul>
</div>
</div>
<div id="panel_r" class="ph pw admbg">
<div id="panel_r" class="ph pw admbg hp">
<div class="s_tab stb_h">
<ul>
<li><a href="#st1" class="hh2 hp thmtxt thmc1">Select Theme</a></li>
<li><a href="#st1" class="hh2 hp thmtxt thmc2">Select Theme</a></li>
<li><a href="#st2" class="hh2 hp admtxt">Custom Theme</a></li>
</ul>
</div>
<div class="scrollbar sb_v"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></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 w100">
<div id="st1" class="st_c hp vp">try</div>
<div id="st2" class="st_c hp vp">test</div>
<div class="overview hp">
<div id="st1" class="st_c">try</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">Theme Color</th>
<th class="s_title hh3">Line Color</th>
<th class="s_title hh3">Text Color</th>
<th class="s_title hh3">Background Color</th>
</tr>
<tr>
<td>
<input type="hidden" class="color-picker" value="#000000">
<input type="hidden" class="color-picker" value="#0099cc">
<input type="hidden" class="color-picker" value="#3366cc">
</td>
<td>
<input type="hidden" class="color-picker" value="#ffffff">
</td>
<td>
<input type="hidden" class="color-picker" value="#ffffff">
<input type="hidden" class="color-picker" value="#ffffff">
</td>
<td>
<input type="hidden" class="color-picker" 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>

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

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