custom theme settings

app/assets/javascripts/desktop.js

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

app/assets/javascripts/orbitdesktop.js

@@ -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(){

app/assets/stylesheets/desktop.css

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

app/assets/stylesheets/desktopmain.css

@@ -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; }
+.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 { position: absolute; }
+.tinycanvas .overview { position: absolute; left: 0; top: 0; }
-#holder .scrollbar.sb_h { left: 0; bottom: 0; height: 12px; }
+.tinycanvas .scrollbar { position: absolute; z-index: 9; }
-#holder .scrollbar.sb_v { right: 0; top: 0; width: 12px; }
+.tinycanvas .scrollbar.sb_h { left: 0; bottom: 0; height: 12px; }
-#holder .track { height: 100%; width: 12px; position: relative; }
+.tinycanvas .scrollbar.sb_v { right: 0; top: 0; width: 12px; }
-#holder .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
+.tinycanvas .track { height: 100%; width: 12px; position: relative; }
-#holder .thumb .end { overflow: hidden; height: 12px; width: 12px; }
+.tinycanvas .thumb { height: 12px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
-#holder .disable{ display: none; }
+.tinycanvas .thumb .end { overflow: hidden; height: 12px; width: 12px; }
+.tinycanvas .disable{ display: none; }
 
 /* Orbit Notification */
 #orbitnote {

app/assets/stylesheets/desktopmedia.css

@@ -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; }
+
+}

app/assets/stylesheets/jquery.miniColors.css

@@ -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;
+}

app/views/desktop/app_manager.html.erb

@@ -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">
@@ -179,4 +180,5 @@
     				</div>
     			</div>
     	</div>
+	</div>
 </div>

app/views/desktop/desktop.html.erb

@@ -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>

app/views/desktop/sections.html.erb

@@ -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>

app/views/desktop/settings.html.erb

@@ -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 class="overview hp">
-							<div id="st1" class="st_c hp vp">try</div>
+								<div id="st1" class="st_c">try</div>
-							<div id="st2" class="st_c hp vp">test</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>

public/desktop_themes/default/css/default.css

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