Desktop Commit

.gitignore

@@ -15,3 +15,5 @@ public/stylesheets
 config/application.rb
 
 .rvmrc
+
+app/assets/javascripts/.DS_Store

app/assets/javascripts/desktop.js

@@ -0,0 +1,13 @@
+// This is a manifest file that'll be compiled into including all the files listed below.
+// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
+// be included in the compiled file accessible from http://example.com/assets/application.js
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+//= require jquery
+//= require jquery_ujs
+//= require jquery-ui
+//= require bootstrap
+//= require orbitdesktopAPI
+//= require orbitdesktop
+//= require desktopload

app/assets/javascripts/desktopload.js.erb

@@ -0,0 +1,10 @@
+
+//orbitDesktop.prototype.themesfolder = "<%= "#{Rails.root}/lib/desktop_themes" %>";
+var od = new orbitDesktop("#ajax_container");
+	//	alert(od.themefolder);
+$(document).ready(function(){
+	alert("something");
+	
+//	od.initializeDesktop();	
+});
+

app/assets/javascripts/orbitdesktop.js

@@ -0,0 +1,242 @@
+// JavaScript Document
+//harry         
+var orbitDesktop = function(dom){
+	orbitDesktopAPI.apply(this);
+	o = this;
+	this.contentHolder = dom;
+	this.themesettings = "";
+	this.theme = "default";
+	this.themefolder = "themes";
+	this.transitionTime = 500;
+	this.currenthtml = "desktop.html";
+	this.currentface = "home";
+	this.desktopData = {"home":"","fun":"","work":"","favorite":"","apps_manager":"","sections":""};
+	this.tp = "";
+	this.initialize = function(){
+		var theme = o.theme;
+		$.getJSON(o.themefolder+"/"+theme+"/settings/"+theme+".json",function(ts){
+			o.themesettings = eval(ts);
+			$('head').append( $('<link rel="stylesheet" id="dyn_css" type="text/css" />').attr('href', o.themefolder+"/"+theme+"/css/"+ts.css));
+		})
+		$(document).ready(function(){o.loadWallpaper();o.bindDesktopEvents();o.loadIconCache();});
+	};
+	this.changeTheme = function(theme){
+		o.theme = theme;
+		$.getJSON(o.themefolder+"/"+theme+"/settings/"+theme+".json",function(ts){
+			o.themesettings = eval(ts);
+			$('head').find("#dyn_css").remove();
+			$('head').append( $('<link rel="stylesheet" id="dyn_css" type="text/css" />').attr('href', o.themefolder+"/"+theme+"/css/"+ts.css));
+			o.loadWallpaper();
+			o.loadIconCache();
+		})
+		
+	};
+	this.bindDesktopEvents = function(){
+		$("a#app_manager").click(function(){
+			var target = $(this).attr("href");
+			if(o.currenthtml!=target){
+				o.desktopData[o.currentface] = $(o.contentHolder).html();
+				$("#content").hide("drop",o.transitionTime,function(){
+					o.initializeAppSearch(target);
+				});
+			}
+		});
+		$("a#desktop").click(function(){
+			var target = $(this).attr("href");
+			if(o.currenthtml!=target){
+				o.desktopData[o.currentface] = $(o.contentHolder).html();
+				$("#content").hide("drop",o.transitionTime,function(){
+					o.initializeDesktop(target);
+				});
+			}
+		});
+		$("a#sections").click(function(){
+			var target = $(this).attr("href");
+			if(o.currenthtml!=target){
+				o.desktopData[o.currentface] = $(o.contentHolder).html();
+				$("#content").hide("drop",o.transitionTime,function(){
+					o.initializeSectionsManager(target);
+				});
+			}
+		});
+		$("select#change_theme").change(function(){
+			o.changeTheme($(this).val());	
+		})
+		$(window).resize(function(){
+			var ww = $(window).width();
+			$("img#thmbackground").attr({"width":ww})
+		});
+		$(o.contentHolder).mousemove(function(event){
+			/*if(($(window).width()-50)<=event.pageX){
+				$("#holder").animate({scrollLeft:$("#holder").scrollLeft()+500},1000);
+			}
+			if(event.pageX<300){
+				$("#holder").animate({scrollLeft:0},1000);
+			}*/
+		});
+	};
+	this.initializeDesktop = function(target){
+		if(!target)target = "desktop.html";
+		o.currenthtml = target;
+		o.currentface = "home";
+		var groupWrapperWidth = 0;
+		var groupWrapperHeight = 0;
+		var extraspace = 300;
+		var currentElement, elementParent, targetParent, tempElement, widthcheck;
+		widthcheck = false;
+		var bindHandlers = function(){
+			$(".element").mousedown(function(){
+				currentElement = $(this);
+				elementParent = $(this).parent();
+			})
+			$(".group").mouseenter(function(){
+				targetParent = $(this);
+			})
+			$(".group").each(function(){groupWrapperWidth+=$(this).width();})
+			groupWrapperWidth+=200;
+			groupWrapperHeight = $(".group").height() + 20;
+			groupWrapperHeight = (groupWrapperHeight > ($(window).height()-extraspace))? $(window).height()-extraspace:groupWrapperHeight;
+			$("#group_wrapper").css("width",groupWrapperWidth);
+				
+			$(".grp").sortable({
+				connectWith: ".grp",
+				tolerance: 'pointer' ,
+				revert:true,
+				stop:function(){
+					o.tp = targetParent.height();
+					var currentElementWidth = currentElement.width();
+					var targetElementWidth = targetParent.width();
+					if(targetParent.height()>540){
+						//targetParent.width(currentElement.width());
+						var newWidth = targetElementWidth+currentElementWidth;
+						targetParent.css("max-width",newWidth);
+						var newParentWidth = $("#group_wrapper").width()+currentElementWidth;
+						$("#group_wrapper").css("width",newParentWidth);
+					}else if(targetParent.height()<540){
+						var newWidth = targetElementWidth - (540-targetElementWidth);
+						targetParent.css("max-width",newWidth);
+						var newParentWidth = $("#group_wrapper").width()+currentElementWidth;
+						$("#group_wrapper").css("width",newParentWidth);
+					}	
+				}
+			
+			});
+		}
+		if(!o.desktopData[o.currentface]){
+			$(o.contentHolder).empty().load("pages/"+target,function(){
+				bindHandlers();
+			});
+		}else{
+			$(o.contentHolder).html(o.desktopData[o.currentface]);
+			bindHandlers();
+		}
+	};
+	this.tempFunc = function(){
+		alert(o.tp);
+	}
+	this.initializeAppSearch = function(target){
+		o.currenthtml = target;
+		o.currentface = "apps_manager";
+		var searchArray,allApps;
+		var bindHandlers = function(){
+			$("#group_wrapper").css("min-width",$(window).width()-100);
+			$(".group_search").css("width",$(window).width()-200);
+			//for textbox search			
+			$("#searchbox").focus(function(){$(this).val("");}).keyup(function(e){
+				if($(this).val()){				
+					$(".search_result").empty();
+					$("#seperator").hide();
+					searchArray = $(".element:containsi("+$(this).val()+")");
+					if(searchArray.length>0){
+						$("#seperator").show();
+						searchArray.each(function(){
+							var $newelement = $('<div class="search element w1 h1 hp vp thmc2" data-category="desktop">'+$(this).html()+'</div>');
+							$(".search_result").prepend($newelement);
+						})
+					}
+				}else{$("#seperator").hide();$(".search_result").empty();}
+			}).blur(function(){$(this).val("Search");});
+			
+			//for Alphabet sorting
+			$("a#alphabet_sort_btn").click(function(){
+				switch ($(this).attr("href")) {
+					case "ascending":
+						$(this).attr("href","descending").find(".thmtxt").text("Alphabet [Z-A]");
+						allApps = $(".group_search .element").sort(sortAscending);
+						break;
+					case "descending":
+						$(this).attr("href","ascending").find(".thmtxt").text("Alphabet [A-Z]");
+						allApps = $(".group_search .element").sort(sortDescending);
+						break;
+				}
+				
+				$(".group_search").html(allApps);
+				return false;
+			})
+		}
+		if(!o.desktopData[o.currentface]){
+			$(o.contentHolder).empty().load("pages/"+target,function(){
+				bindHandlers();
+			});
+		}else{
+			$(o.contentHolder).html(o.desktopData[o.currentface]);
+				bindHandlers();	
+		}
+	};
+	this.initializeSectionsManager = function(target){
+		o.currenthtml = target;
+		o.currentface = "settings";
+		var elementParent,element;
+		var bindHandlers = function(){
+			$(".group").width(530);
+			$("#group_wrapper .element").sortable({
+				start:function(){
+					var $elementParent = $(this).parent().parent();
+					elementParent = $elementParent;
+					element = $(this);
+					$elementParent.find("div.section_label ul li").fadeIn(500);
+				},
+				stop:function(){
+					elementParent.find("div.section_label ul li:not(:nth-child(1))").fadeOut(500);
+				}
+			});
+			$(".section_label ul li:not(:nth-child(1))").droppable({
+				drop:function(){
+					if($("#"+$(this).attr("data-category")+" .element").length>=24)
+						o.notify("Section is full");
+					else
+						$("#"+$(this).attr("data-category")).append(element);
+				}	
+			});
+			$(".section_label ul li:not(:nth-child(1)) span.tile").hover(function(){
+				$(this).toggleClass("op06");
+			})//.mouseleave(function(){$(this).addClass("op06");});
+		};
+		if(!o.desktopData[o.currentface]){
+			$(o.contentHolder).empty().load("pages/"+target,function(){
+				bindHandlers();
+			});
+		}else{
+			$(o.contentHolder).html(o.desktopData[o.currentface]);
+			bindHandlers();
+		}
+		
+	};
+	this.loadWallpaper = function(wallpaper){
+		if(!wallpaper)wallpaper = o.themesettings.background;
+		var ww = $(window).width();
+		var wh = $(window).height();
+		if(o.themesettings.background)
+			$("img#thmbackground").attr({"src":o.themefolder+"/"+o.theme+"/images/"+wallpaper,"width":ww}).css({"position":"fixed","top":"0px","left":"0px","z-index":"-1","height":"auto"});
+		else
+			$("img#thmbackground").attr({"src":"images/"+wallpaper,"width":ww}).css({"position":"fixed","top":"0px","left":"0px","z-index":"-1","height":"auto"});
+			
+		$("div#bgover").css({"position":"fixed","top":"0px","left":"0px","z-index":"-1","width":ww,"height":wh});
+	};
+	this.loadIconCache = function(){
+		$("#home_icon").attr("src","themes/"+o.theme+"/images/"+o.themesettings.icons.home);
+		$("#app_manager_icon").attr("src","themes/"+o.theme+"/images/"+o.themesettings.icons.app_manager);
+		$("#sections_icon").attr("src","themes/"+o.theme+"/images/"+o.themesettings.icons.sections);
+	}
+	o.initialize();
+}

app/assets/javascripts/orbitdesktopAPI.js

@@ -0,0 +1,22 @@
+// JavaScript Document
+$.extend($.expr[':'], {
+	'containsi': function (elem, i, match, array) {
+		return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
+	}
+});
+$.fn.sort = function(c) {
+	return this.pushStack([].sort.apply(this, arguments), []);
+ };
+var sortAscending = function(a, b) {
+	 return $(a).find("h1").text() > $(b).find("h1").text() ? 1 : -1;
+};
+var sortDescending = function(a, b) {
+	 return $(a).find("h1").text() < $(b).find("h1").text() ? 1 : -1;
+};
+var orbitDesktopAPI = function(){
+	o = this;
+	this.notify = function(msg){
+		alert(msg);
+	};
+	
+};

app/assets/stylesheets/desktop.css

@@ -0,0 +1,10 @@
+/*
+ *This is a manifest file that'll automatically include all the stylesheets available in this directory
+ *and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ *the top of the compiled file, but it's generally better to create a new file per style scope.
+ *= require reset
+ *= require style
+*= require bootstrap
+ *= require bootstrap-orbit
+ *= require desktopmain
+*/

app/assets/stylesheets/desktopmain.css

@@ -0,0 +1,197 @@
+@import url(http://fonts.googleapis.com/css?family=Cuprum);
+@import url(reset.css);
+
+/* basic setting */
+body {
+	font-family: Cuprum, Arial, "Sans Serif";
+	font-size: 12px;
+	background-color: #000;
+	}
+a { text-decoration: none; }
+/* desktop layout */
+#container {
+	margin: 72px 0 0 156px;
+	}
+#header {
+	padding: 0 0 12px 0;
+	min-width: 800px;
+	}
+#side { 
+	width: 156px;
+	height: 540px;
+	position: absolute;
+	top: 144px;
+	left: 0;
+	z-index: 999;
+	}
+#holder {
+	overflow: hidden;
+	overflow-x: auto;
+	height: 540px;
+	}
+#rwidget {
+	height: 516px;
+	overflow: hidden;
+	}
+.widget_fn {
+	display: block;
+	overflow: hidden;
+	}
+.widget_icon {
+	display: block;
+	width: 30px;
+	height: 30px;
+	margin: 15px 0 0 15px;
+	}
+.ini_input {
+	margin: 0;
+	padding: 0;
+	border: none;
+	}
+.ini_input:focus { outline: none; }
+#search_app { position: relative; background-color: #fff; }
+#search_app .form {
+	position: absolute;
+	left: 0;
+	top: 2px;
+	padding: 2px 12px;
+	width: 192px;
+	height: 28px;
+	background: none;
+	}
+#search_app .submit {
+	position: absolute;
+	right: 2px;
+	top: 2px;
+	width: 32px;
+	height: 32px;
+	overflow: hidden;
+	text-indent: -999px;
+	cursor: pointer;
+	}
+.section_label {
+	float: left;
+	width: 132px;
+	height:516px;
+	}
+	
+.appname { font-size: 15px; }
+.dtitle { 
+	font-size: 30px;
+	line-height: 60px;
+	float: left;
+	margin: 0 12px 0 0;
+	position: relative;
+	z-index: 99;
+	}
+.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; }
+.admbg { background-color: #fff; }
+.admtxt { color: #666; }
+.hfn {
+	font-size: 15px;
+	line-height: 36px;
+	float: left;
+	margin: 12px 12px 0 0;
+	position: relative;
+	}
+.thmtxt { position: relative; }
+.tile {
+	display: block;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+/* theme color opacity */
+.op10 { opacity: 1; }
+.op09 { opacity: 0.9; }
+.op08 { opacity: 0.8; }
+.op07 { opacity: 0.7; }
+.op06 { opacity: 0.6; }
+.op05 { opacity: 0.5; }
+.op04 { opacity: 0.4; }
+.op03 { opacity: 0.3; }
+.op02 { opacity: 0.2; }
+.op01 { opacity: 0.1; }
+.op00 { opacity: 0; }
+
+/* box set */
+.w1 { width: 96px; }
+.w2 { width: 228px; }
+.w4 { width: 488px; }
+.wh1 { width: 30px; }
+.wh2 { width: 36px; }
+.wh3 { width: 60px; }
+
+.h1 { height: 96px; }
+.h2 { height: 228px; }
+.h4 { height: 488px; }
+.hh1 { height: 30px; }
+.hh2 { height: 36px; }
+.hh3 { height: 60px; }
+
+.hp { padding-left: 12px; padding-right: 12px; }
+.vp { padding-top: 12px; padding-bottom: 12px; }
+.element {
+	margin: 0 12px 12px 0;
+	float: left;
+	/*display:inline-block;*/
+	}
+.group{
+	float: left;
+	margin-right: 36px;
+	max-width: 800px;
+	/*max-height:540px;*/
+}
+.group_search{
+	float: left;
+	margin-right: 36px;
+	
+}
+.search_result{
+	float: left;
+	margin-right: 36px;
+	max-width: 340px;
+}
+.g_sep { width: 11px; border-left: solid 1px #fff; }
+.appicon { width: 60px; height: 60px; }
+
+.clear { clear: both; }
+
+
+/* fake Orbit bar */
+#orbitbar {
+	height: 28px;
+	border-radius: 0px;
+	padding-top: 2px;
+	padding-bottom: 1px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+	background-image: -webkit-linear-gradient(top, #444, #111);
+	position: absolute;
+	z-index: 9999;
+	top: 0;
+	width: 100%;
+}
+#group_wrapper{
+	
+}
+.grp{
+	min-height:540px;
+}
+

app/controllers/desktop_controller.rb

@@ -0,0 +1,7 @@
+class DesktopController< ApplicationController
+  layout 'desktop'
+  
+  def index
+    
+  end
+end

app/views/desktop/index.html.erb

@@ -0,0 +1,41 @@
+<!--	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
+    <script type="text/javascript" src="js/orbitdesktopAPI.js"></script>
+    <script type="text/javascript" src="js/orbitdesktop.js"></script>
+	<script src="ui/jquery.ui.core.js"></script>
+	<script src="ui/jquery.ui.widget.js"></script>
+	<script src="ui/jquery.ui.mouse.js"></script>
+    <script src="ui/jquery.effects.core.js"></script>
+    <script src="ui/jquery.effects.drop.js"></script>
+    <script src="ui/jquery.ui.draggable.js"></script>
+	<script src="ui/jquery.ui.resizable.js"></script>
+    <script src="ui/jquery.ui.sortable.js"></script>
+     
+  	<link rel="stylesheet" href="uithemes/base/jquery.ui.all.css">
+	<link rel="stylesheet" type="text/css" href="css/reset.css" media="all"/>
+	<link rel="stylesheet" type="text/css" href="css/desktop.css" media="all"/>	
+ 	<link rel="stylesheet" type="text/css" href="desktopthemes/default/css/default.css" media="all"/>	-->
+
+<div id="side">
+	<div id="rwidget" class="wh3 thmc4">
+		<a href="desktop.html" class="widget_fn wh3 hh3" id='desktop' onclick="return false;"><span class="widget_icon"><img src="" alt="" id="home_icon" width="30" height="30"/></span></a>
+		<a href="app_manager.html" class="widget_fn wh3 hh3" id="app_manager" onclick="return false;"><span class="widget_icon"><img src="" alt="" id="app_manager_icon" width="30" height="30"/></span></a>
+		<a href="sections.html" class="widget_fn wh3 hh3" id="sections" onclick="return false;"><span class="widget_icon"><img src="" alt="" id="sections_icon" width="30" height="30"/></span></a>
+	</div>
+</div>
+<div id="container">
+<div id='ajax_container'>
+ 
+	
+</div>
+</div>
+<!--<div id="orbitbar"></div>-->
+Change Theme: <select id="change_theme">
+<option value='default'>Default Theme</option>
+<option value='Snake'>Snake Theme</option>
+<option value='sexy'>Sexy Theme</option>
+<option value='vintage'>Vintage Theme</option>
+</select>
+<img src="" id="thmbackground" />
+<div id="bgover" ></div>
+<button onClick="od.tempFunc();">Click</button>

app/views/layouts/desktop.html.erb

@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+	<title><%= @title || APP_CONFIG['orbit'] %></title>
+	<!--[if lt IE 9]>
+	   <%= javascript_include_tag "html5" %>
+	<![endif]-->
+	<%= stylesheet_link_tag "desktop" %>
+	<%= javascript_include_tag "desktop" %>
+	<%= yield :page_specific_css %>
+	<%= yield :page_specific_javascript %>
+	<%= csrf_meta_tag %>
+</head>
+<body>
+	<%= render 'layouts/orbit_bar' %>
+	<%= yield %>
+</body>
+</html>

config/routes.rb

@@ -94,7 +94,7 @@ Orbit::Application.routes.draw do
   namespace :panel do
     resources :users
   end
-  
+  match '/desktop/'=>'desktop#index'
   match '/panel/:app_name/front_end/:app_action/:id' => 'pages#show_from_link', :constraints => lambda { |request|
     !request.query_string.include?("inner=true")
   }

lib/desktop_themes/chris/css/default.css

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

lib/desktop_themes/chris/settings/chris.json

@@ -0,0 +1 @@
+{"css":"default.css","background":"chris.jpeg","tilecolor":["thmc1","thmc2"],"icons":{"home":"home.png","app_manager":"apps.png","sections":"sections.png"}}

lib/desktop_themes/default/css/default.css

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

lib/desktop_themes/default/settings/default.json

@@ -0,0 +1 @@
+{"css":"default.css","background":"background.jpg","tilecolor":["thmc1","thmc2"],"icons":{"home":"home.png","app_manager":"apps.png","sections":"sections.png"}}

lib/desktop_themes/sexy/css/sexy.css

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

lib/desktop_themes/sexy/settings/sexy.json

@@ -0,0 +1 @@
+{"css":"sexy.css","background":"background.jpg","tilecolor":["thmc1","thmc2"],"icons":{"home":"home.png","app_manager":"apps.png","sections":"sections.png"}}

lib/desktop_themes/snake/css/snake.css

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

lib/desktop_themes/snake/settings/snake.json

@@ -0,0 +1 @@
+{"css":"snake.css","background":"background.jpg","tilecolor":["thmc1","thmc2"],"icons":{"home":"home.png","app_manager":"apps.png","sections":"sections.png"}}

lib/desktop_themes/vintage/css/default.css

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

lib/desktop_themes/vintage/settings/vintage.json

@@ -0,0 +1 @@
+{"css":"default.css","background":"background.jpg","tilecolor":["thmc1","thmc2"],"icons":{"home":"Home-icon.png","app_manager":"apps.png","sections":"sections.png"}}