Custom thème done and theme id done…

This commit is contained in:
Harry Bomrah 2012-04-17 21:15:40 +08:00
parent b2d72902c3
commit 95a1e266ae
229 changed files with 100 additions and 27 deletions

View File

@ -5,7 +5,7 @@ var orbitDesktop = function(dom){
o = this; o = this;
this.contentHolder = dom; this.contentHolder = dom;
this.themesettings = ""; this.themesettings = "";
this.theme = "default"; this.theme = "4f8d3f493b67fcd05f086359";
// this.themefolder = "themes"; // this.themefolder = "themes";
this.transitionTime = 500; this.transitionTime = 500;
this.currenthtml = "desktop.html"; this.currenthtml = "desktop.html";
@ -15,17 +15,27 @@ var orbitDesktop = function(dom){
this.sectionList; this.sectionList;
this.initialize = function(){ this.initialize = function(){
var theme = o.theme; var theme = o.theme;
var custom = false;
$.getJSON("/desktop/get_desktop_settings",{"get":"desktop","desktopid":o.desktopId},function(desktopSettings){ $.getJSON("/desktop/get_desktop_settings",{"get":"desktop","desktopid":o.desktopId},function(desktopSettings){
if(desktopSettings){ if(desktopSettings){
if(desktopSettings.theme!="custom"){
theme = desktopSettings.theme; theme = desktopSettings.theme;
}else{
theme = "4f8d3f493b67fcd05f086359";
custom = true;
}
o.theme = theme; o.theme = theme;
loadTheme(); loadTheme(desktopSettings.customtheme);
}else{loadTheme();} }else{loadTheme();}
}) })
var loadTheme = function(){ var loadTheme = function(dhtml){
$.getJSON("/"+o.themefolder+"/"+theme+"/settings/"+theme+".json",function(ts){ $.getJSON("/"+o.themefolder+"/"+theme+"/settings/"+theme+".json",function(ts){
o.themesettings = eval(ts); o.themesettings = eval(ts);
$('head').append( $('<link rel="stylesheet" id="dyn_css" type="text/css" />').attr('href', "/"+o.themefolder+"/"+theme+"/css/"+ts.css)); $('head').append( $('<link rel="stylesheet" id="dyn_css" type="text/css" />').attr('href', "/"+o.themefolder+"/"+theme+"/css/"+ts.css));
if(custom){
$("head").find("#dyn_css").remove();
$("head").append(dhtml);
}
$(document).ready(function(){o.loadWallpaper();o.bindDesktopEvents();o.loadIconCache();o.initializeDesktop();}); $(document).ready(function(){o.loadWallpaper();o.bindDesktopEvents();o.loadIconCache();o.initializeDesktop();});
}) })
} }
@ -422,6 +432,7 @@ var orbitDesktop = function(dom){
o.currentface = "settings"; o.currentface = "settings";
var bindHandlers = function(){ var bindHandlers = function(){
$("div#settings ul#setting_left_nav li a").click(function(){ $("div#settings ul#setting_left_nav li a").click(function(){
if(!$(this).data("clicked")){
var tfunc = $(this).attr("href"); var tfunc = $(this).attr("href");
switch(tfunc){ switch(tfunc){
case "themes": case "themes":
@ -433,6 +444,7 @@ var orbitDesktop = function(dom){
} }
$("div#settings ul#setting_left_nav li a").removeClass('thmc1 thmtxt').data('clicked',null); $("div#settings ul#setting_left_nav li a").removeClass('thmc1 thmtxt').data('clicked',null);
$(this).addClass('thmc1 thmtxt').data('clicked',true); $(this).addClass('thmc1 thmtxt').data('clicked',true);
}
}); });
$("div#settings ul#setting_left_nav li a").hover(function(){ $("div#settings ul#setting_left_nav li a").hover(function(){
$(this).removeClass('admtxt').addClass('thmc1 thmtxt'); $(this).removeClass('admtxt').addClass('thmc1 thmtxt');
@ -482,10 +494,10 @@ var orbitDesktop = function(dom){
var themes = function(){ var themes = function(){
var bindHandlers = function(){ var bindHandlers = function(){
$(".theme_list > li").click(function(){ $(".theme_list > li").click(function(){
o.changeTheme($(this).find('.theme_name').text()); o.changeTheme($(this).attr("id"));
$(".theme_list > li").removeClass('thmc1').data('clicked',null).find('.theme_name').removeClass('thmtxt'); $(".theme_list > li").removeClass('thmc1').data('clicked',null).find('.theme_name').removeClass('thmtxt');
$(this).addClass('thmc1').data('clicked',true).find('.theme_name').addClass('thmtxt'); $(this).addClass('thmc1').data('clicked',true).find('.theme_name').addClass('thmtxt');
$.post("/desktop/save_desktop_settings",{"save":"theme","desktopid":o.desktopId,"theme":$(this).text()},function(result,status){ $.post("/desktop/save_desktop_settings",{"save":"theme","desktopid":o.desktopId,"theme":$(this).attr("id")},function(result,status){
if(status=="success"){ if(status=="success"){
if(result[0].success=="true") if(result[0].success=="true")
o.notify("Theme Saved!!","success",2); o.notify("Theme Saved!!","success",2);
@ -516,7 +528,33 @@ var orbitDesktop = function(dom){
return false; return false;
}); });
}); });
$('.color-picker').miniColors(); /* $("tr#color_inputs input").each(function(){
var what = $(this).attr("for");
alert($("#theme_preview_area ."+what).css("background-color"))
$(this).val()
}) */
$('.color-picker').miniColors({
change:function(hex){
var changewhat = $(this).attr("for");
var previewarea = $("#theme_preview_area");
switch(changewhat){
case "thmtxt":
case "thmtxth":
previewarea.find("."+changewhat).css({"color":hex});
break;
case "g_sep":
previewarea.find("."+changewhat).css({"border-color":hex});
break;
case "background":
previewarea.css({"background-color":hex});
break;
default:
previewarea.find("."+changewhat).css({"background-color":hex});
break;
}
}
});
$('.theme_list li:first-child').data('clicked',true); // this line just for demo $('.theme_list li:first-child').data('clicked',true); // this line just for demo
$('.theme_list li').hover(function(){ $('.theme_list li').hover(function(){
$(this).addClass('thmc1').find('.theme_name').addClass('thmtxt'); $(this).addClass('thmc1').find('.theme_name').addClass('thmtxt');
@ -526,10 +564,30 @@ var orbitDesktop = function(dom){
$(this).removeClass(c).find('.theme_name').removeClass(t); $(this).removeClass(c).find('.theme_name').removeClass(t);
}); });
$("a#theme_submit").click(function(){
var colors = new Array;
$("tr#color_inputs input").each(function(){
colors[$(this).attr("for")] = $(this).val();
})
var dhtml ="<style> .thmc1 { background: "+colors['thmc1']+"; }.thmc2 { background: "+colors['thmc2']+"; }.thmc3 { background: #FFFFFF; }.thmc4 { background: "+colors['thmc4']+"; }.thmtxt { color: "+colors['thmtxt']+"; }.thmtxth { color: "+colors['thmtxth']+"; }.g_sep { border-color: "+colors['g_sep']+"; #thmbackground{background-color: "+colors['background']+"} }</style>";
$("head").find("#dyn_css").remove();
$("head").append(dhtml);
$.post("/desktop/save_desktop_settings",{"save":"customtheme","desktopid":o.desktopId,"theme":dhtml},function(result,status){
if(status=="success"){
if(result[0].success=="true")
o.notify("Custom theme saved!!","success",2);
else
o.notify("Custom theme saving failed!!","imp",2);
}else{
o.notify("Connection problem!!","alert",2);
}
})
})
} }
$("div#settings div#panel_r").load("/desktop/settingthemes",function(){ $("div#settings div#panel_r").load("/desktop/settingthemes",function(){
$.getJSON("/desktop/get_desktop_settings",{"get":"theme","desktopid":o.desktopId},function(theme){ $.getJSON("/desktop/get_desktop_settings",{"get":"theme","desktopid":o.desktopId},function(theme){
$("#st1 ul.theme_list li:containsi("+theme+")").addClass("thmc1").find("span").addClass("thmtxt"); $("#st1 ul.theme_list li#"+theme).addClass("thmc1").find("span").addClass("thmtxt");
bindHandlers(); bindHandlers();
}) })
}) })

View File

@ -25,6 +25,8 @@ class DesktopController< ApplicationController
end end
def settingthemes def settingthemes
# @themes = Theme.count
# raise @themes.inspect
render "desktop/settings/themes", :layout => false render "desktop/settings/themes", :layout => false
end end
@ -59,7 +61,9 @@ class DesktopController< ApplicationController
break break
end end
end end
when "customtheme"
@desktop.update_attributes(:theme => "custom")
@desktop.update_attributes(:customtheme => params['theme'])
end end
a = Array.new a = Array.new
a << {"success"=>"true"} a << {"success"=>"true"}

View File

@ -3,8 +3,10 @@ class Desktop
include Mongoid::Timestamps include Mongoid::Timestamps
field :theme, default: "default" field :theme, default: "default"
field :customtheme
belongs_to :user belongs_to :user
has_many :sections, :autosave => true, :dependent => :destroy has_many :sections, :autosave => true, :dependent => :destroy
before_create :initialize_section before_create :initialize_section

10
app/models/theme.rb Normal file
View File

@ -0,0 +1,10 @@
class Theme
include Mongoid::Document
include Mongoid::Timestamps
field :name
field :author
embedded_in :desktop
end

View File

@ -11,18 +11,17 @@
<div class="overview"> <div class="overview">
<div id="st1" class="st_c"> <div id="st1" class="st_c">
<ul class="theme_list"> <ul class="theme_list">
<li><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">default</span></li> <li id="4f8d3f493b67fcd05f086359"><div class="theme_thumb"><img src="assets/sample_theme.jpg" alt="" width="120" height="96"></div><span class="theme_name">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 id="4f8d3f673b67fcd05f08635c"><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 id="4f8d3f5d3b67fcd05f08635b"><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 id="4f8d3f783b67fcd05f08635d"><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 id="4f8d3f533b67fcd05f08635a"><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 id="4f8d3f3c3b67fcd05f086358"><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>
</ul> </ul>
</div> </div>
<div id="st2" class="st_c"> <div id="st2" class="st_c">
<div class="s_title hh3">Preview</div> <div class="s_title hh3">Preview</div>
<div class="theme_preview vp" style="background-color:#000000;"> <div class="theme_preview vp" style="background-color:#000000;" id="theme_preview_area">
<div class="thmtxth hh2 hp" style="margin-left:108px;">Theme Text1</div> <div class="thmtxth hh2 hp" style="margin-left:108px;">Theme Text1</div>
<div class="theme_plate"> <div class="theme_plate">
<div class="thmc4 h1 wh3"></div> <div class="thmc4 h1 wh3"></div>
@ -39,26 +38,26 @@
<th class="s_title hh3" width="120px">Text Color</th> <th class="s_title hh3" width="120px">Text Color</th>
<th class="s_title hh3" width="120px">Background Color</th> <th class="s_title hh3" width="120px">Background Color</th>
</tr> </tr>
<tr> <tr id="color_inputs">
<td> <td>
<input type="hidden" class="color-picker black" value="#000000"> <input type="hidden" class="color-picker black" value="#000000" for="thmc4">
<input type="hidden" class="color-picker black" value="#0099cc"> <input type="hidden" class="color-picker black" value="#0099cc" for="thmc1">
<input type="hidden" class="color-picker black" value="#3366cc"> <input type="hidden" class="color-picker black" value="#3366cc" for="thmc2">
</td> </td>
<td> <td>
<input type="hidden" class="color-picker black" value="#ffffff"> <input type="hidden" class="color-picker black" value="#ffffff" for="g_sep">
</td> </td>
<td> <td>
<input type="hidden" class="color-picker black" value="#ffffff"> <input type="hidden" class="color-picker black" value="#ffffff" for="thmtxth">
<input type="hidden" class="color-picker black" value="#ffffff"> <input type="hidden" class="color-picker black" value="#ffffff" for="thmtxt">
</td> </td>
<td> <td>
<input type="hidden" class="color-picker black" value="#000000"> <input type="hidden" class="color-picker black" value="#000000" for="background">
</td> </td>
</tr> </tr>
</table> </table>
<div class="s_action"> <div class="s_action">
<a href="" id="theme_submit" class="setting_btn thmc1 thmtxt w1 hh2 hp">Confirm</a> <a href="" id="theme_submit" class="setting_btn thmc1 thmtxt w1 hh2 hp" onclick="return false;">Confirm</a>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>

View File

Before

Width:  |  Height:  |  Size: 287 B

After

Width:  |  Height:  |  Size: 287 B

View File

Before

Width:  |  Height:  |  Size: 362 KiB

After

Width:  |  Height:  |  Size: 362 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 MiB

After

Width:  |  Height:  |  Size: 4.0 MiB

View File

Before

Width:  |  Height:  |  Size: 535 B

After

Width:  |  Height:  |  Size: 535 B

View File

Before

Width:  |  Height:  |  Size: 720 B

After

Width:  |  Height:  |  Size: 720 B

View File

Before

Width:  |  Height:  |  Size: 415 B

After

Width:  |  Height:  |  Size: 415 B

View File

Before

Width:  |  Height:  |  Size: 553 B

After

Width:  |  Height:  |  Size: 553 B

View File

Before

Width:  |  Height:  |  Size: 436 B

After

Width:  |  Height:  |  Size: 436 B

View File

Before

Width:  |  Height:  |  Size: 589 B

After

Width:  |  Height:  |  Size: 589 B

View File

Before

Width:  |  Height:  |  Size: 598 B

After

Width:  |  Height:  |  Size: 598 B

View File

Before

Width:  |  Height:  |  Size: 714 B

After

Width:  |  Height:  |  Size: 714 B

View File

Before

Width:  |  Height:  |  Size: 524 B

After

Width:  |  Height:  |  Size: 524 B

View File

Before

Width:  |  Height:  |  Size: 454 B

After

Width:  |  Height:  |  Size: 454 B

View File

Before

Width:  |  Height:  |  Size: 500 B

After

Width:  |  Height:  |  Size: 500 B

View File

Before

Width:  |  Height:  |  Size: 513 B

After

Width:  |  Height:  |  Size: 513 B

View File

Before

Width:  |  Height:  |  Size: 533 B

After

Width:  |  Height:  |  Size: 533 B

View File

Before

Width:  |  Height:  |  Size: 379 B

After

Width:  |  Height:  |  Size: 379 B

View File

Before

Width:  |  Height:  |  Size: 488 B

After

Width:  |  Height:  |  Size: 488 B

View File

Before

Width:  |  Height:  |  Size: 506 B

After

Width:  |  Height:  |  Size: 506 B

View File

Before

Width:  |  Height:  |  Size: 670 B

After

Width:  |  Height:  |  Size: 670 B

View File

Before

Width:  |  Height:  |  Size: 517 B

After

Width:  |  Height:  |  Size: 517 B

View File

Before

Width:  |  Height:  |  Size: 805 B

After

Width:  |  Height:  |  Size: 805 B

View File

Before

Width:  |  Height:  |  Size: 481 B

After

Width:  |  Height:  |  Size: 481 B

View File

Before

Width:  |  Height:  |  Size: 464 B

After

Width:  |  Height:  |  Size: 464 B

View File

Before

Width:  |  Height:  |  Size: 628 B

After

Width:  |  Height:  |  Size: 628 B

View File

Before

Width:  |  Height:  |  Size: 495 B

After

Width:  |  Height:  |  Size: 495 B

View File

Before

Width:  |  Height:  |  Size: 589 B

After

Width:  |  Height:  |  Size: 589 B

View File

Before

Width:  |  Height:  |  Size: 524 B

After

Width:  |  Height:  |  Size: 524 B

View File

Before

Width:  |  Height:  |  Size: 575 B

After

Width:  |  Height:  |  Size: 575 B

View File

Before

Width:  |  Height:  |  Size: 533 B

After

Width:  |  Height:  |  Size: 533 B

View File

Before

Width:  |  Height:  |  Size: 557 B

After

Width:  |  Height:  |  Size: 557 B

View File

Before

Width:  |  Height:  |  Size: 243 B

After

Width:  |  Height:  |  Size: 243 B

View File

Before

Width:  |  Height:  |  Size: 532 B

After

Width:  |  Height:  |  Size: 532 B

View File

Before

Width:  |  Height:  |  Size: 573 B

After

Width:  |  Height:  |  Size: 573 B

View File

Before

Width:  |  Height:  |  Size: 553 B

After

Width:  |  Height:  |  Size: 553 B

View File

Before

Width:  |  Height:  |  Size: 362 B

After

Width:  |  Height:  |  Size: 362 B

View File

Before

Width:  |  Height:  |  Size: 359 B

After

Width:  |  Height:  |  Size: 359 B

View File

Before

Width:  |  Height:  |  Size: 362 KiB

After

Width:  |  Height:  |  Size: 362 KiB

View File

Before

Width:  |  Height:  |  Size: 535 B

After

Width:  |  Height:  |  Size: 535 B

View File

Before

Width:  |  Height:  |  Size: 720 B

After

Width:  |  Height:  |  Size: 720 B

View File

Before

Width:  |  Height:  |  Size: 415 B

After

Width:  |  Height:  |  Size: 415 B

View File

Before

Width:  |  Height:  |  Size: 553 B

After

Width:  |  Height:  |  Size: 553 B

View File

Before

Width:  |  Height:  |  Size: 436 B

After

Width:  |  Height:  |  Size: 436 B

View File

Before

Width:  |  Height:  |  Size: 589 B

After

Width:  |  Height:  |  Size: 589 B

View File

Before

Width:  |  Height:  |  Size: 598 B

After

Width:  |  Height:  |  Size: 598 B

View File

Before

Width:  |  Height:  |  Size: 714 B

After

Width:  |  Height:  |  Size: 714 B

View File

Before

Width:  |  Height:  |  Size: 524 B

After

Width:  |  Height:  |  Size: 524 B

View File

Before

Width:  |  Height:  |  Size: 454 B

After

Width:  |  Height:  |  Size: 454 B

View File

Before

Width:  |  Height:  |  Size: 500 B

After

Width:  |  Height:  |  Size: 500 B

View File

Before

Width:  |  Height:  |  Size: 513 B

After

Width:  |  Height:  |  Size: 513 B

View File

Before

Width:  |  Height:  |  Size: 533 B

After

Width:  |  Height:  |  Size: 533 B

View File

Before

Width:  |  Height:  |  Size: 379 B

After

Width:  |  Height:  |  Size: 379 B

View File

Before

Width:  |  Height:  |  Size: 488 B

After

Width:  |  Height:  |  Size: 488 B

View File

Before

Width:  |  Height:  |  Size: 506 B

After

Width:  |  Height:  |  Size: 506 B

View File

Before

Width:  |  Height:  |  Size: 670 B

After

Width:  |  Height:  |  Size: 670 B

View File

Before

Width:  |  Height:  |  Size: 517 B

After

Width:  |  Height:  |  Size: 517 B

View File

Before

Width:  |  Height:  |  Size: 805 B

After

Width:  |  Height:  |  Size: 805 B

View File

Before

Width:  |  Height:  |  Size: 481 B

After

Width:  |  Height:  |  Size: 481 B

View File

Before

Width:  |  Height:  |  Size: 464 B

After

Width:  |  Height:  |  Size: 464 B

View File

Before

Width:  |  Height:  |  Size: 628 B

After

Width:  |  Height:  |  Size: 628 B

View File

Before

Width:  |  Height:  |  Size: 495 B

After

Width:  |  Height:  |  Size: 495 B

View File

Before

Width:  |  Height:  |  Size: 589 B

After

Width:  |  Height:  |  Size: 589 B

View File

Before

Width:  |  Height:  |  Size: 524 B

After

Width:  |  Height:  |  Size: 524 B

View File

Before

Width:  |  Height:  |  Size: 575 B

After

Width:  |  Height:  |  Size: 575 B

View File

Before

Width:  |  Height:  |  Size: 533 B

After

Width:  |  Height:  |  Size: 533 B

View File

Before

Width:  |  Height:  |  Size: 557 B

After

Width:  |  Height:  |  Size: 557 B

View File

Before

Width:  |  Height:  |  Size: 243 B

After

Width:  |  Height:  |  Size: 243 B

View File

Before

Width:  |  Height:  |  Size: 532 B

After

Width:  |  Height:  |  Size: 532 B

View File

Before

Width:  |  Height:  |  Size: 573 B

After

Width:  |  Height:  |  Size: 573 B

View File

Before

Width:  |  Height:  |  Size: 553 B

After

Width:  |  Height:  |  Size: 553 B

View File

Before

Width:  |  Height:  |  Size: 258 KiB

After

Width:  |  Height:  |  Size: 258 KiB

View File

Before

Width:  |  Height:  |  Size: 535 B

After

Width:  |  Height:  |  Size: 535 B

View File

Before

Width:  |  Height:  |  Size: 720 B

After

Width:  |  Height:  |  Size: 720 B

View File

Before

Width:  |  Height:  |  Size: 415 B

After

Width:  |  Height:  |  Size: 415 B

View File

Before

Width:  |  Height:  |  Size: 553 B

After

Width:  |  Height:  |  Size: 553 B

View File

Before

Width:  |  Height:  |  Size: 436 B

After

Width:  |  Height:  |  Size: 436 B

View File

Before

Width:  |  Height:  |  Size: 589 B

After

Width:  |  Height:  |  Size: 589 B

View File

Before

Width:  |  Height:  |  Size: 598 B

After

Width:  |  Height:  |  Size: 598 B

View File

Before

Width:  |  Height:  |  Size: 714 B

After

Width:  |  Height:  |  Size: 714 B

View File

Before

Width:  |  Height:  |  Size: 524 B

After

Width:  |  Height:  |  Size: 524 B

View File

Before

Width:  |  Height:  |  Size: 454 B

After

Width:  |  Height:  |  Size: 454 B

View File

Before

Width:  |  Height:  |  Size: 500 B

After

Width:  |  Height:  |  Size: 500 B

View File

Before

Width:  |  Height:  |  Size: 513 B

After

Width:  |  Height:  |  Size: 513 B

View File

Before

Width:  |  Height:  |  Size: 533 B

After

Width:  |  Height:  |  Size: 533 B

View File

Before

Width:  |  Height:  |  Size: 379 B

After

Width:  |  Height:  |  Size: 379 B

View File

Before

Width:  |  Height:  |  Size: 488 B

After

Width:  |  Height:  |  Size: 488 B

View File

Before

Width:  |  Height:  |  Size: 506 B

After

Width:  |  Height:  |  Size: 506 B

View File

Before

Width:  |  Height:  |  Size: 670 B

After

Width:  |  Height:  |  Size: 670 B

View File

Before

Width:  |  Height:  |  Size: 517 B

After

Width:  |  Height:  |  Size: 517 B

View File

Before

Width:  |  Height:  |  Size: 805 B

After

Width:  |  Height:  |  Size: 805 B

Some files were not shown because too many files have changed in this diff Show More