developers
/
Orbit
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

app manager's view update

This commit is contained in:
devin chen 2013-05-13 17:13:44 +08:00 committed by Matt K. Fu
parent 269264d232
commit c9747f9fc6
10 changed files with 255 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -315,7 +315,9 @@ var orbitDesktop = function(dom){
$(window).resize(function(){
// var ww = $(window).width();
// $("img#thmbackground").attr({"width":ww});
if( $('.tinycanvas').length > 0 ){ $('.tinycanvas').tinyscrollbar_update('relative'); }
// if( $('.tinycanvas').length > 0 ){
$('.tinycanvas').tinyscrollbar_update('relative');
// }
if($(o.contentHolder).find("div.app_frame").length > 0){
$(o.contentHolder).find("div.app_frame").each(function(){
var app_holder_height = $(this).height() - 72;
@ -369,7 +371,7 @@ var orbitDesktop = function(dom){
var temp_div = $("<div></div>");
var entries = [];
switch (layout){
case "simple":
case "simple":
total_columns++;
temp_div.append(column_container.html());
total_width = "auto";
@ -462,6 +464,7 @@ var orbitDesktop = function(dom){
o.simple_drop_down();
o.autocomplete();
o.use_select2();
o.check_simple_layout();
}
this.paging = true;
this.pagination = function(link,variable,page_no){
@ -612,7 +615,6 @@ var orbitDesktop = function(dom){
}
}
this.sub_menu_item = function(dom,data){
console.log(dom)
var sub_data_method = dom.attr('callback-method');
if(sub_data_method){
o.lastlink = dom.attr("href");
@ -833,26 +835,37 @@ var orbitDesktop = function(dom){
var $elements = $("#app_manager .element"),
$result = $("#app_manager .search_result"),
$appinfo = $("#app_info"),
$apptitle = $("#app_info .app_info_name"),
$appicon = $("#app_info .app_info_icon")
$appinfolist = $("#app_info .app_info_list");
$applist = $("#app_list"),
$apptitle = $appinfo.find(".app_info_name"),
$appicon = $appinfo.find(".app_info_icon"),
$appinfolist = $appinfo.find(".app_info_list"),
$canvas = $result.parents('.overview'),
current_width = $canvas.css('width');
$("#app_manager #searchbox")
.focus(function(){
$(this).val("");
})
.keyup(function(e){
if($(this).val()){
$result.empty();
$elements.hide();
var query = $(this).val();
if(query){
$appinfo.hide().attr('style','');
$result.empty().show();
$applist.hide();
searchArray = $elements.filter(":containsi("+$(this).val()+")");
// searchArray = $elements.filter(":containsi("+$(this).val()+")").clone(1,1);
// searchArray = $('#app_list').find('[data-title*="'+query+'"]').clone(1,1);
searchArray = $elements.filter(function(){
var matcher = new RegExp(query, "i");
return matcher.test( $(this).attr('data-title') );
}).clone(1,1);
if(searchArray.length > 0){
// searchArray.each(function(){
// $(this).hide("fold","fast");
// })
// $("#app_manager #seperator").show();
var i = 0;
var i = 0, c = 1; // c for numbers of columns
var $column;
searchArray.each(function(){
i++;
@ -864,23 +877,50 @@ var orbitDesktop = function(dom){
if(i == 4){
$result.append($column);
i = 0;
c++;
}
})
});
if(i != 0){
$result.append($column);
c*=132;
searchArray
.eq(0)
.parents('.overview')
.animate({
'width': c
},0, function(){
$(this)
.parents('.tinycanvas')
.tinyscrollbar_update();
});
}
elementSetting();
} else {
$result.text("No Result Found.");
var $no_result = $('<div class="w2 h1 thmtxt thmc2 vp hp message"><span class="tile"></span>No result for <b></b></div>');
$no_result
.find('b')
.text('"'+$(this).val()+'"')
.end()
.show()
.appendTo($result);
$canvas.animate({
'width':252
}, 0, function(){
$(this)
.parents('.tinycanvas')
.tinyscrollbar_update();
});
}
} else {
} else if( query == "" ) {
info_close();
$result.empty();
$elements.show();
$applist.show();
$canvas.css('width',current_width);
}
})
.blur(function(){
if($(this).val()=="") $(this).val("Search");
if($(this).val()==""){
$(this).val("Search");
}
});
//for Alphabet sorting
@ -914,15 +954,20 @@ var orbitDesktop = function(dom){
var elementSetting = function(){// for element setting load
$(".element").click(function(){
$e = $(this);
$elements.click(function(){
var $e = $(this);
$apptitle.text($e.data("title"));
$appicon.attr("src",$e.find("img").attr("src"));
$appinfolist.find("li:eq(2) div").text($e.data("version"));
$appinfolist.find("[info=app_version]").text($e.data("version"));
var dt = new Date($e.data("update"));
$appinfolist.find("li:eq(3) div").text(dt.toUTCString());
$appinfolist.find("li:eq(4) div").text($e.data("author"));
$appinfolist.find("[info=app_last_update]").text(dt.toUTCString());
$appinfolist.find("[info=app_author]").text($e.data("author"));
$appinfo
.find(".app_info_header")
.css({
"background-color": $e.data("background"),
"color": $e.data("text-color")
});
var sections = elementSettingsData[$e.data("id")].sections;
var sectionids = new Array();
@ -930,18 +975,18 @@ var orbitDesktop = function(dom){
sectionids.push(sec.id);
})
$appinfolist.find("[info=section_activation]").empty();
$appinfolist.find("[info=app_section_activation]").empty();
$.each(o.sectionList,function(i,sec){
var present = $.inArray(sec._id,sectionids);
if(present == -1){
$sectionswitch = $('<div class="s_grid_row"><label class="s_grid s_grid_3">'+ sec.name +'</label><div class="s_grid s_grid_6 s_switch"><div class="s_switch_status" status-off="Off">Off</div><label class="s_switch_switcher admbg2"><input type="checkbox" data-widget="'+ $e.data("id") +'" data-section="'+ sec._id +'"><span class="s_switch_toggle"></span></label></div></div>');
$sectionswitch = $('<div class="s_grid_row s_switch"><label class="s_grid s_grid_3">'+ sec.name +'</label><div class="s_grid s_grid_6 s_switch"><div class="s_switch_status" status-on="On" status-off="Off">Off</div><label class="s_switch_switcher admbg2"><input type="checkbox" data-widget="'+ $e.data("id") +'" data-section="'+ sec._id +'"><span class="s_switch_toggle"></span></label></div></div>');
}else{
$sectionswitch = $('<div class="s_grid_row"><label class="s_grid s_grid_3">'+ sec.name +'</label><div class="s_grid s_grid_6 s_switch"><div class="s_switch_status" status-on="On">On</div><label class="s_switch_switcher thmc2"><input type="checkbox" checked="checked" data-widget="'+ $e.data("id") +'" data-section="'+ sec._id +'"><span class="s_switch_toggle"></span></label></div></div>');
$sectionswitch = $('<div class="s_grid_row s_switch"><label class="s_grid s_grid_3">'+ sec.name +'</label><div class="s_grid s_grid_6 s_switch"><div class="s_switch_status" status-on="On" status-off="Off">On</div><label class="s_switch_switcher thmc2"><input type="checkbox" checked="checked" data-widget="'+ $e.data("id") +'" data-section="'+ sec._id +'"><span class="s_switch_toggle"></span></label></div></div>');
}
$appinfolist.find("[info=section_activation]").append($sectionswitch);
})
$appinfo.show();
$appinfolist.find("[info=app_section_activation]").append($sectionswitch);
});
info_open();
o.simple_switch(function(dom){
var options = {
"status" : dom.is(":checked"),
@ -956,45 +1001,101 @@ var orbitDesktop = function(dom){
data : options,
success : function(data){
if(data.success == "true"){
elementSettingsData[$e.data("id")].sections.push({"id" : dom.data("section"),"name":sectionDetails.name});
if(dom.is(":checked"))
elementSettingsData[$e.data("id")].sections.push({
"id" : dom.data("section"),
"name":sectionDetails.name
});
if(options.status)
o.notify("Added to " + sectionDetails.name,"success");
else
o.notify("Removed from " + sectionDetails.name,"success");
}
}
})
});
});
})
return false;
});
}
$appinfo.find("a.panel_close").click(function(){
$appinfo.hide();
info_close();
return false;
})
});
var info_open = function(){
if($appinfo.is(":hidden")){
$('.overview').stop().animate({'width': '+=480'},0 , function(){
$('.tinycanvas').tinyscrollbar_update();
});
$appinfo
.css({
'display': 'block',
'margin-left': -480
})
.delay(300)
.animate({
'margin-left': 0
}, 500, 'easeInOutQuint');
} else {
$('.tinycanvas').tinyscrollbar_update();
}
}
var info_close = function(){
if( $appinfo.is(":visible") ){
$appinfo
.stop()
.animate({
'margin-left': -480
},500 , 'easeInOutQuint', function(){
$('.overview').animate({'width': '-=480'}, 0, function(){
$('.tinycanvas').tinyscrollbar_update();
});
$(this).attr("style","");
});
} else {
$('.tinycanvas').tinyscrollbar_update();
}
}
$(window).on('keydown', function(){
if($('#searchbox').val() == 'Search'){
$('#searchbox').focus();
}
});
elementSetting();
o.appname_substr('#group_wrapper .element');
o.check_simple_layout();
}
var elementSettingsData = {};
var loadApps = function(){ //this load apps for sorting and searching
$('#app_list').empty();
$('#app_info').attr('style','');
$('.search_result').hide().text("");
$('#app_list').empty().show();
$.getJSON("/desktop/getapplistforManager",{desktopid:o.desktopId},function(apps){
var count = 0, colindex = 0;
$('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
$.each(apps,function(i,app){
var $app;
count++;
elementSettingsData[app.id] = {"sections" : app.sections};
$app = $('<div class="element w1 h1 thmc2" data-category="'+app.data_category+'" data-title="'+app.title+'" data-author="'+app.author+'" data-version="'+app.version+'" data-update="'+app.last_update+'" data-id="'+app.id+'" ><span class="tile thmc2"></span><a href="'+app.id+'" class="appicon"><img src="'+app.icon+'" alt="" onclick="return false;"></a><h1 class="appname thmtxt">'+app.title+'</h1></div>');
if( count > 4 ){
count = 1, colindex+=1;
$('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
$('.g_col.col'+ colindex).append($app);
} else {
$('.g_col.col'+ colindex).append($app);
}
});
var count = 0,
colindex = 0,
apps_sum = apps.length,
col_sum;
col_sum = (apps_sum - (apps_sum % 4)) / 4 + 1;
$('#app_list')
.css('width',col_sum * 132)
.append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
$.each(apps,function(i,app){
var $app;
count++;
elementSettingsData[app.id] = {"sections" : app.sections};
$app = $('<div class="element w1 h1 thmc2" data-category="'+app.data_category+'" data-title="'+app.title+'" data-author="'+app.author+'" data-version="'+app.version+'" data-update="'+app.last_update+'" data-id="'+app.id+'" data-text-color="'+app.text_color+'" data-background="'+app.background+'" ><span class="tile thmc2"></span><a href="'+app.id+'" class="appicon"><img src="'+app.icon+'" alt="" onclick="return false;"></a><h1 class="appname thmtxt">'+app.title+'</h1></div>');
if( count > 4 ){
count = 1, colindex+=1;
$('#app_list').append('<div class="g_col g_col_w1 col'+ colindex +'"/>');
$('.g_col.col'+ colindex).append($app);
} else {
$('.g_col.col'+ colindex).append($app);
}
});
bindHandlers();
});
}
@ -1614,6 +1715,25 @@ var orbitDesktop = function(dom){
o.tinyscrollbar = target.main.tinyscrollbar( settings );
};
this.check_simple_layout = function(){
// use for various width of columns inside canvas(.overview)
// only count width for visible element which has "s_column" class
// then set width to canvas
// ** not sure to update canvas here ( $.tinyscrollbar_update() )
var sw = 0,
$simple_layout = $('#content .overview[content-layout=simple]');
if($simple_layout.find(".s_column").length > 0){
$simple_layout.each(function(){
$(this).find(".s_column").filter(":visible").each(function(){
sw += $(this).outerWidth();
});
$simple_layout.css('width',sw);
});
}
// if($simple_layout.find(".s_column").length > 0){
// $simple_layout.css('width',sw);
// }
};
this.simple_drop_down = function(){
// simple dropdown menu
var $sdm = $('.sdm');
@ -1673,8 +1793,9 @@ var orbitDesktop = function(dom){
$status.text(status_off);
break;
}
if(typeof func == "function")
if(typeof func == "function"){
func.call(this,$(this));
}
});
});
};

6
app/assets/stylesheets/desktop/desktop-component.css
View File

@ -360,8 +360,12 @@
position: absolute;
left: 0;
top: 0;
min-width: 100%;
width: 100%;
height: 100%; }
.tinycanvas .overview:after {
content: "";
display: table;
width: 100%; }
.tinycanvas .overview > .column {
float: left;
border-right: solid 1px #eeeeee;

8
app/assets/stylesheets/desktop/desktop-component.scss
View File

@ -362,9 +362,15 @@
position: absolute;
left: 0;
top: 0;
min-width: 100%;
width: 100%;
height: 100%;
&:after {
content: "";
display: table;
width: 100%;
}
> .column {
float: left;
border-right: solid 1px #eee;

30
app/assets/stylesheets/desktop/desktop-main.css
View File

@ -245,7 +245,15 @@ a.admtxt.admbg2:hover {
.element {
margin: 0 12px 12px 0;
float: left;
position: relative; }
position: relative;
cursor: pointer;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease; }
.element:active {
-webkit-transform: scale(0.92);
-moz-transform: scale(0.92);
transform: scale(0.92); }
.group {
float: left;
@ -253,11 +261,11 @@ a.admtxt.admbg2:hover {
/* desktop layout */
#container {
padding: 48px 0 0 156px; }
padding: 48px 0 0 156px;
min-width: 800px; }
#header {
padding: 0 0 12px 0;
min-width: 800px;
height: 72px;
position: relative;
z-index: 2; }
@ -603,7 +611,8 @@ a.admtxt.admbg2:hover {
float: left;
width: 420px;
height: 516px;
margin-right: 36px; }
margin-right: 36px;
display: none; }
#app_info .app_info_header {
height: 120px;
margin: -12px -12px 12px -12px;
@ -652,8 +661,21 @@ a.admtxt.admbg2:hover {
#app_info .app_info_list label {
color: #aaaaaa; }
#app_list {
float: left; }
#app_list .element > * {
cursor: pointer; }
.search_result {
float: left;
overflow: hidden; }
.search_result .message {
font-size: 15px;
word-wrap: break-word; }
.search_result .message b {
font-size: 20px;
display: block;
margin-top: 12px; }
.grp {
height: 528px;

30
app/assets/stylesheets/desktop/desktop-main.scss
View File

@ -175,7 +175,15 @@ a.admtxt.admbg2:hover {
margin: 0 12px 12px 0;
float: left;
position: relative;
cursor: pointer;
@include transition-type(all,0.2);
&:active {
-webkit-transform: scale(0.92);
-moz-transform: scale(0.92);
transform: scale(0.92);
}
}
.group{
float: left;
margin-right: 24px;
@ -184,10 +192,10 @@ a.admtxt.admbg2:hover {
/* desktop layout */
#container {
padding: 48px 0 0 156px;
min-width: 800px;
}
#header {
padding: 0 0 12px 0;
min-width: 800px;
height: 72px;
position: relative;
z-index: 2;
@ -599,6 +607,7 @@ a.admtxt.admbg2:hover {
width: 420px;
height: 516px;
margin-right: 36px;
display: none;
.app_info_header {
height: 120px;
@ -639,8 +648,27 @@ a.admtxt.admbg2:hover {
}
}
}
#app_list {
float: left;
.element > * {
cursor: pointer;
}
}
.search_result{
float: left;
overflow: hidden;
.message {
font-size: 15px;
word-wrap: break-word;
b {
font-size: 20px;
display: block;
margin-top: 12px;
}
}
}

2
app/controllers/desktop_controller.rb
View File

@ -215,7 +215,7 @@ class DesktopController< ApplicationController
sec = Section.find(grp.section_id);
@sections << {"id"=>sec.id,"name"=>sec.name}
end
@allWidgets << {"id"=>dw.id, "data_category"=> "widget","title" => dw.name, "version" => dw.version, "author"=>dw.author, "last_update"=>dw.updated_at, "icon"=>dw.images.where(:name=>dw.icon).first.file.url, "sections" => @sections}
@allWidgets << {"id"=>dw.id, "data_category"=> "widget","title" => dw.name, "version" => dw.version, "author"=>dw.author, "last_update"=>dw.updated_at, "icon"=>dw.images.where(:name=>dw.icon).first.file.url, "text_color" => dw.text_color, "background" => dw.bg_color, "sections" => @sections}
end
render :json=>@allWidgets.to_json
end

4
app/models/desktop/desktop_widget.rb
View File

@ -8,8 +8,8 @@ class DesktopWidget
field :shape
field :fullsize, :type => Boolean, default: false
field :version, :type => String
field :text_color, :type => String, default: "#fff"
field :bg_color, :type => String, default: "#fff"
field :text_color, :type => String, default: ""
field :bg_color, :type => String, default: ""
field :icon, default: "icon.png"
has_one :css_default, as: :css, :autosave => true, :dependent => :destroy

5
app/views/desktop/allsections.html.erb
View File

@ -6,10 +6,7 @@
</div>
</div>
<div id="holder">
<div id="group_wrapper" class="overview" content-layout="simple">
<div class="clear"></div>
</div>
<div id="group_wrapper" class="overview" content-layout="simple"></div>
</div>
</div>
</div>

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

@ -5,7 +5,7 @@
<a href="" class="hfn w1 hh1 hp"><span class="tile thmc1 op06"></span><span class="thmtxt">Date</span></a>
<a href="ascending" class="hfn w1 hh1 hp" id="alphabet_sort_btn" ><span class="tile thmc2 op03"></span><span class="thmtxt">Alphabet [A-Z]</span></a>
<div id="search_app" class="hfn w2 hh1 hp thmc3">
<input type="text" class="ini_input form" value="Search" id="searchbox" />
<input type="text" class="ini_input form" value="Search" maxlength="30" id="searchbox" />
<input type="submit" class="ini_input submit thmc1" value="Submit"/>
</div>
<div class="clear"></div>
@ -13,20 +13,20 @@
<div id="holder">
<div id="group_wrapper" class="overview" content-layout="simple">
<div id="app_info" class="admbg vp hp" style="display:none;">
<div id="app_info" class="admbg vp hp s_column">
<div class="app_info_header s_grid_row hp">
<div class="s_grid s_grid_3">
<img class="app_info_icon" src="/assets/icons/wikibooks.png" alt="">
</div>
<div class="s_grid s_grid_9 valign">
<h2 class="app_info_name">Clock</h2>
<h2 class="app_info_name"></h2>
<a href="" class="panel_close icon-remove"></a>
</div>
</div>
<ul class="app_info_list">
<li class="s_grid_row">
<label class="s_grid s_grid_3">Activation</label>
<div info="section_activation" class="s_grid s_grid_9 s_switch"></div>
<div info="app_section_activation" class="s_grid s_grid_9"></div>
</li>
<li class="s_grid_row">
<label class="s_grid s_grid_3">Description</label>
@ -36,15 +36,15 @@
</li>
<li class="s_grid_row">
<label class="s_grid s_grid_3">Version</label>
<div class="s_grid s_grid_9">3.0</div>
<div class="s_grid s_grid_9" info="app_version"></div>
</li>
<li class="s_grid_row">
<label class="s_grid s_grid_3">Last Update</label>
<div class="s_grid s_grid_9">Sep 2, 2013</div>
<div class="s_grid s_grid_9" info="app_last_update"></div>
</li>
<li class="s_grid_row">
<label class="s_grid s_grid_3">Author</label>
<div class="s_grid s_grid_9">Takayuki Miyoshi</div>
<div class="s_grid s_grid_9" info="app_author"></div>
</li>
</ul>
<div class="s_action">
@ -52,9 +52,8 @@
<a href="" id="" class="setting_btn thmc1 thmtxt w1 hh1 hp" onclick="return false;">Setting</a>
</div>
</div>
<div class="search_result"></div>
<div id="app_list"></div>
<div class="clear"></div>
<div class="search_result s_column"></div>
<div id="app_list" class="s_column"></div>
</div>
</div>
</div>

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

@ -14,8 +14,6 @@
<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">
<div class="clear"></div>
</div>
</div>
</div>