developers
/
orbit-4-1
Archived
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

apps setting view

This commit is contained in:
devin chen 2013-04-29 15:13:36 +08:00 committed by saurabhbhatia
parent 9478bb13e2
commit 3ded19016a
6 changed files with 334 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
app/assets/Archive/javascripts/orbitdesktop.js
View File

@ -820,18 +820,23 @@ var orbitDesktop = function(dom){
this.initializeAppManager = function(target,url,cache){ //this is application search ie is app manager initialization this.initializeAppManager = function(target,url,cache){ //this is application search ie is app manager initialization
var searchArray,allApps; var searchArray,allApps;
var bindHandlers = function(){ // bind handler for app manager page var bindHandlers = function(){ // bind handler for app manager page
var gn = $('.g_col').length, // var gn = $('.g_col').length,
gw = $('.g_col').outerWidth(true); // gw = $('.g_col').outerWidth(true);
$("#app_manager #group_wrapper").css("width",gn*gw); // $("#app_manager #group_wrapper").css("width",gn*gw);
// $("div#app_manager .group_search").css("width",$(window).width()-200); // $("div#app_manager .group_search").css("width",$(window).width()-200);
//for textbox search //for textbox search
$("#app_manager #searchbox").focus(function(){$(this).val("");}).keyup(function(e){ var $elements = $("#app_manager .element"),
$result = $("#app_manager .search_result");
$("#app_manager #searchbox")
.focus(function(){
$(this).val("");
})
.keyup(function(e){
if($(this).val()){ if($(this).val()){
$("#app_manager .search_result").empty(); $result.empty();
$("#app_manager #seperator").hide(); $elements.hide();
$("#app_manager .element").hide("fold","fast");
searchArray = $("#app_manager .element:containsi("+$(this).val()+")"); searchArray = $elements.filter(":containsi("+$(this).val()+")");
if(searchArray.length > 0){ if(searchArray.length > 0){
// searchArray.each(function(){ // searchArray.each(function(){
// $(this).hide("fold","fast"); // $(this).hide("fold","fast");
@ -842,23 +847,30 @@ var orbitDesktop = function(dom){
searchArray.each(function(){ searchArray.each(function(){
i++; i++;
if(i == 1){ if(i == 1){
$column = $("<div style='width:120px; float:left;'></div>"); $column = $('<div class="g_col g_col_w1"></div>');
} }
var $newelement = $('<div class="search element w1 h1 hp vp thmc2" data-category="desktop">'+$(this).html()+'</div>'); var $newelement = $('<div class="element w1 h1 hp vp thmc2">'+$(this).html()+'</div>');
$column.append($newelement); $column.append($newelement);
if(i == 4){ if(i == 4){
$("#app_manager .search_result").append($column); $result.append($column);
i = 0; i = 0;
} }
}) })
if(i != 0){ if(i != 0){
$("#app_manager .search_result").append($column); $result.append($column);
} }
} else { } else {
$("#app_manager .search_result").text("No Result Found."); $result.text("No Result Found.");
} }
}else{ $("#app_manager .search_result").empty(); $("#app_manager .element").show("fold","fast");}
}).blur(function(){if($(this).val()=="")$(this).val("Search");}); } else {
$result.empty();
$elements.show();
}
})
.blur(function(){
if($(this).val()=="") $(this).val("Search");
});
//for Alphabet sorting //for Alphabet sorting
$("#app_manager #alphabet_sort_btn").click(function(){ $("#app_manager #alphabet_sort_btn").click(function(){
@ -888,6 +900,7 @@ var orbitDesktop = function(dom){
return false; return false;
}); });
o.appname_substr('#group_wrapper .element'); o.appname_substr('#group_wrapper .element');
o.simple_switch();
} }
var loadApps = function(){ //this load apps for sorting and searching var loadApps = function(){ //this load apps for sorting and searching
$.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){ $.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){
@ -1561,6 +1574,33 @@ var orbitDesktop = function(dom){
}); });
}); });
}; };
this.simple_switch = function(){
$('.s_switch').each(function(){
var $switcher = $(this).find('.s_switch_switcher'),
$checkbox = $(this).find('input[type=checkbox]'),
$status = $(this).find('.s_switch_status'),
toggle = '<span class="s_switch_toggle"></span>',
status_on = $status.attr('status-on'),
status_off = $status.attr('status-off'),
ini, set;
ini = ($switcher.hasClass('admbg2')) ? null : $switcher.addClass('admbg2');
ini = ($switcher.find('.s_switch_toggle').length < 1) ? $checkbox.after(toggle) : null;
set = ($checkbox.is(':checked')) ? $status.text(status_on) : $status.text(status_off);
$checkbox.change(function(){
var v = $(this).attr('checked');
switch (v) {
case 'checked':
$switcher.switchClass('admbg2','thmc2');
$status.text(status_on);
break;
case undefined:
$switcher.switchClass('thmc2','admbg2');
$status.text(status_off);
break;
}
});
});
};
this.single_select = function(){ this.single_select = function(){
// single select // single select
$('.ssl .ssl_item').each(function(){ $('.ssl .ssl_item').each(function(){

48
app/assets/Archive/stylesheets/desktop/desktop-component.css
View File

@ -50,6 +50,14 @@
width: 384px; } width: 384px; }
.s_grid_row .s_grid_12 { .s_grid_row .s_grid_12 {
width: 420px; } width: 420px; }
.s_grid_row .s_grid_13 {
width: 456px; }
.s_grid_row .s_grid_14 {
width: 492px; }
.s_grid_row .s_grid_15 {
width: 528px; }
.s_grid_row .s_grid_16 {
width: 564px; }
.s_grid_row:last-child { .s_grid_row:last-child {
margin-bottom: 0; } margin-bottom: 0; }
.s_grid_row .s_grid_h_1 { .s_grid_row .s_grid_h_1 {
@ -216,6 +224,7 @@
.s_form .s_table thead th { .s_form .s_table thead th {
border-bottom: solid 1px #eeeeee; } border-bottom: solid 1px #eeeeee; }
/* simple select */
.s_select_g { .s_select_g {
padding: 4px 8px; padding: 4px 8px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -273,6 +282,45 @@
font-size: 9px; font-size: 9px;
-webkit-text-size-adjust: none; } -webkit-text-size-adjust: none; }
/* simple switch */
.s_switch {
overflow: hidden; }
.s_switch .s_switch_status {
font-size: 1.5em;
line-height: 20px;
height: 20px;
float: left;
margin-right: 60px; }
.s_switch .s_switch_switcher {
display: block;
float: right;
position: relative;
width: 48px;
height: 20px;
overflow: hidden; }
.s_switch .s_switch_switcher input[type=checkbox] {
width: 144px;
height: 20px;
margin: 0;
position: absolute;
top: 0;
left: -96px; }
.s_switch .s_switch_switcher input[type=checkbox] + .s_switch_toggle {
display: block;
position: absolute;
left: -2px;
top: -2px;
width: 16px;
height: 20px;
background-color: #000;
border: solid 2px white;
cursor: pointer;
-webkit-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
transition: left 0.3s ease; }
.s_switch .s_switch_switcher input[type=checkbox]:checked + .s_switch_toggle {
left: 32px; }
/* tool bar */ /* tool bar */
.toolbar { .toolbar {
background-color: #f0f0f0; background-color: #f0f0f0;

57
app/assets/Archive/stylesheets/desktop/desktop-component.scss
View File

@ -19,9 +19,11 @@
margin-left: 0; margin-left: 0;
} }
} }
// fixed width column // fixed width column with 12px gutter
// full width 420px // 276px width for 8 columns
@for $i from 1 through 12 { // 420px width for 12 columns
// 564px width for 16 columns
@for $i from 1 through 16 {
.s_grid_#{$i} { .s_grid_#{$i} {
width: 36px * $i - 12px; width: 36px * $i - 12px;
} }
@ -38,6 +40,7 @@
height: 44px * $j - 12px; height: 44px * $j - 12px;
} }
} }
} }
/* simple dropdown menu */ /* simple dropdown menu */
@ -202,7 +205,7 @@
} }
} }
/* simple select */
.s_select_g { .s_select_g {
padding: 4px 8px; padding: 4px 8px;
// border: solid 1px $gray; // border: solid 1px $gray;
@ -266,6 +269,52 @@
} }
} }
/* simple switch */
.s_switch {
overflow: hidden;
.s_switch_status {
font-size: 1.5em;
line-height: 20px;
height: 20px;
float: left;
margin-right: 60px;
}
.s_switch_switcher {
display: block;
float: right;
position: relative;
width: 48px;
height: 20px;
overflow: hidden;
input[type=checkbox] {
width: 144px;
height: 20px;
margin: 0;
position: absolute;
top: 0;
left: -96px;
+ .s_switch_toggle {
display: block;
position: absolute;
left: -2px;
top: -2px;
width: 16px;
height: 20px;
background-color: #000;
border: solid 2px #fff;
cursor: pointer;
@include transition-type(left,0.3);
}
&:checked + .s_switch_toggle {
left: 32px;
}
}
}
}
/* tool bar */ /* tool bar */
.toolbar { .toolbar {
background-color: #f0f0f0; background-color: #f0f0f0;

62
app/assets/Archive/stylesheets/desktop/desktop-main.css
View File

@ -72,6 +72,12 @@ a:focus {
content: ''; content: '';
clear: both; } clear: both; }
.valign:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle; }
.o-loading { .o-loading {
font-size: 13px; } font-size: 13px; }
.fullsize .o-loading { .fullsize .o-loading {
@ -581,6 +587,8 @@ a.admtxt.admbg2:hover {
margin-top: 12px; margin-top: 12px;
overflow: hidden; overflow: hidden;
border-top: solid 1px #eeeeee; } border-top: solid 1px #eeeeee; }
.s_action .setting_btn {
margin-left: 12px; }
.setting_btn { .setting_btn {
display: block; display: block;
@ -590,18 +598,17 @@ a.admtxt.admbg2:hover {
text-align: center; text-align: center;
border: 0; } border: 0; }
.group_search { /* Apps Manager */
#app_info {
float: left; float: left;
width: 420px;
height: 516px;
margin-right: 36px; } margin-right: 36px; }
#app_info .app_info_header {
.search_result { height: 120px;
float: left; margin: -12px -12px 12px -12px;
margin-right: 24px; position: relative;
max-width: 340px; } background-color: #f7f7f7;
.g_sep {
width: 12px;
border-left: solid 1px white;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
/* webkit */ /* webkit */
-khtml-box-sizing: border-box; -khtml-box-sizing: border-box;
@ -612,6 +619,41 @@ a.admtxt.admbg2:hover {
/* ie */ /* ie */
box-sizing: border-box; box-sizing: border-box;
/* css3 */ } /* css3 */ }
#app_info .app_info_header > * {
height: 100%; }
#app_info .app_info_header .app_info_icon {
display: block;
margin: 0 auto;
margin-top: 30px;
-webkit-box-sizing: border-box;
/* webkit */
-khtml-box-sizing: border-box;
/* konqueror */
-moz-box-sizing: border-box;
/* firefox */
-ms-box-sizing: border-box;
/* ie */
box-sizing: border-box;
/* css3 */ }
#app_info .app_info_header .app_info_name {
display: inline-block;
vertical-align: middle;
font-size: 2em;
width: 300px;
word-wrap: break-word; }
#app_info .app_info_header .panel_close {
position: absolute;
right: 12px;
top: 12px;
font-size: 20px; }
#app_info .app_info_list {
line-height: 1.5em;
overflow: hidden; }
#app_info .app_info_list label {
color: #aaaaaa; }
.search_result {
overflow: hidden; }
.grp { .grp {
height: 528px; height: 528px;

68
app/assets/Archive/stylesheets/desktop/desktop-main.scss
View File

@ -68,6 +68,12 @@ a:focus { outline: none; }
content: ''; content: '';
clear: both; clear: both;
} }
.valign:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.o-loading { .o-loading {
font-size: 13px; font-size: 13px;
// font-weight: normal; // font-weight: normal;
@ -490,11 +496,6 @@ a.admtxt.admbg2:hover {
-moz-transform: scale(0.92); -moz-transform: scale(0.92);
transform: scale(0.92); transform: scale(0.92);
} }
// .app.gs_w:active {
// -webkit-transform: scale(0.9);
// -moz-transform: scale(0.9);
// transform: scale(0.9);
// }
/* header drop menu */ /* header drop menu */
.sdm_mdr .sdm_o { top: 36px; } .sdm_mdr .sdm_o { top: 36px; }
@ -577,6 +578,10 @@ a.admtxt.admbg2:hover {
overflow: hidden; overflow: hidden;
border-top: solid 1px #eee; border-top: solid 1px #eee;
// background-color: #fff; // background-color: #fff;
.setting_btn {
margin-left: 12px;
}
} }
.setting_btn { .setting_btn {
display: block; display: block;
@ -588,21 +593,54 @@ a.admtxt.admbg2:hover {
border: 0; border: 0;
} }
/* Apps Manager */
.group_search{ #app_info {
float: left; float: left;
width: 420px;
height: 516px;
margin-right: 36px; margin-right: 36px;
.app_info_header {
height: 120px;
margin: -12px -12px 12px -12px;
position: relative;
background-color: lighten($gray, 10%);
@include box-sizing;
> * {
height: 100%;
}
.app_info_icon {
display: block;
margin: 0 auto;
margin-top: 30px;
@include box-sizing;
}
.app_info_name {
display: inline-block;
vertical-align: middle;
font-size: 2em;
width: 300px;
word-wrap: break-word;
}
.panel_close {
position: absolute;
right: 12px;
top: 12px;
font-size: 20px;
}
}
.app_info_list {
line-height: 1.5em;
overflow: hidden;
label {
color: darken($gray, 20%);
}
}
} }
.search_result{ .search_result{
float: left; overflow: hidden;
margin-right: 24px;
max-width: 340px;
}
.g_sep {
width: 12px;
border-left: solid 1px #fff;
@include box-sizing;
} }

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

@ -13,17 +13,52 @@
<div id="holder"> <div id="holder">
<div id="group_wrapper" class="overview" content-layout="simple"> <div id="group_wrapper" class="overview" content-layout="simple">
<div class="search_result" style="min-width:120px;"> <div id="app_info" class="admbg vp hp">
<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>
<!-- <div class="group g_sep op03" id='seperator' style="height: 516px;display:none;"></div> --> <div class="s_grid s_grid_9 valign">
<div class="group_search" id="app_list"> <h2 class="app_info_name">Clock</h2>
<!--<div class="element w1 h1 hp vp thmc2" data-category="desktop"> <a href="" class="panel_close icon-remove"></a>
<span class="tile thmc2"></span>
<a href="" class="appicon"><img src="" alt=""></a>
<h1 class="appname thmtxt">O-Music</h1>
</div>-->
</div> </div>
</div>
<ul class="app_info_list">
<li class="s_grid_row">
<label class="s_grid s_grid_3">Activation</label>
<div class="s_grid s_grid_9 s_switch">
<div class="s_switch_status" status-on="On" status-off="Off"></div>
<label class="s_switch_switcher">
<input type="checkbox">
</label>
</div>
</li>
<li class="s_grid_row">
<label class="s_grid s_grid_3">Description</label>
<div class="s_grid s_grid_9">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</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>
</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>
</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>
</li>
</ul>
<div class="s_action">
<a href="" id="" class="setting_btn admbg2 admtxt w1 hh1 hp" onclick="return false;">Remove</a>
<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="clear"></div>
</div> </div>
</div> </div>