apps setting view

This commit is contained in:
devin chen authored and saurabhbhatia committed 2013-07-30 16:42:20 +08:00
1 parent 9478bb13e2
commit 3ded19016a
6 files changed
+334 -82

No files matched your search

+74 -34
View File
@@ -820,45 +820,57 @@ var orbitDesktop = function(dom){
this.initializeAppManager = function(target,url,cache){ //this is application search ie is app manager initialization
var searchArray,allApps;
var bindHandlers = function(){ // bind handler for app manager page
var gn = $('.g_col').length,
gw = $('.g_col').outerWidth(true);
$("#app_manager #group_wrapper").css("width",gn*gw);
// var gn = $('.g_col').length,
// gw = $('.g_col').outerWidth(true);
// $("#app_manager #group_wrapper").css("width",gn*gw);
// $("div#app_manager .group_search").css("width",$(window).width()-200);
//for textbox search
$("#app_manager #searchbox").focus(function(){$(this).val("");}).keyup(function(e){
if($(this).val()){
$("#app_manager .search_result").empty();
$("#app_manager #seperator").hide();
$("#app_manager .element").hide("fold","fast");
//for textbox search
var $elements = $("#app_manager .element"),
$result = $("#app_manager .search_result");
$("#app_manager #searchbox")
.focus(function(){
$(this).val("");
})
.keyup(function(e){
if($(this).val()){
$result.empty();
$elements.hide();
searchArray = $("#app_manager .element:containsi("+$(this).val()+")");
if(searchArray.length > 0){
// searchArray.each(function(){
// $(this).hide("fold","fast");
// })
// $("#app_manager #seperator").show();
var i = 0;
var $column;
searchArray.each(function(){
i++;
if(i == 1){
$column = $("<div style='width:120px; float:left;'></div>");
searchArray = $elements.filter(":containsi("+$(this).val()+")");
if(searchArray.length > 0){
// searchArray.each(function(){
// $(this).hide("fold","fast");
// })
// $("#app_manager #seperator").show();
var i = 0;
var $column;
searchArray.each(function(){
i++;
if(i == 1){
$column = $('<div class="g_col g_col_w1"></div>');
}
var $newelement = $('<div class="element w1 h1 hp vp thmc2">'+$(this).html()+'</div>');
$column.append($newelement);
if(i == 4){
$result.append($column);
i = 0;
}
})
if(i != 0){
$result.append($column);
}
var $newelement = $('<div class="search element w1 h1 hp vp thmc2" data-category="desktop">'+$(this).html()+'</div>');
$column.append($newelement);
if(i == 4){
$("#app_manager .search_result").append($column);
i = 0;
}
})
if(i != 0){
$("#app_manager .search_result").append($column);
} else {
$result.text("No Result Found.");
}
}else{
$("#app_manager .search_result").text("No Result Found.");
} else {
$result.empty();
$elements.show();
}
}else{ $("#app_manager .search_result").empty(); $("#app_manager .element").show("fold","fast");}
}).blur(function(){if($(this).val()=="")$(this).val("Search");});
})
.blur(function(){
if($(this).val()=="") $(this).val("Search");
});
//for Alphabet sorting
$("#app_manager #alphabet_sort_btn").click(function(){
@@ -888,6 +900,7 @@ var orbitDesktop = function(dom){
return false;
});
o.appname_substr('#group_wrapper .element');
o.simple_switch();
}
var loadApps = function(){ //this load apps for sorting and searching
$.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(){
// single select
$('.ssl .ssl_item').each(function(){
@@ -50,6 +50,14 @@
width: 384px; }
.s_grid_row .s_grid_12 {
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 {
margin-bottom: 0; }
.s_grid_row .s_grid_h_1 {
@@ -216,6 +224,7 @@
.s_form .s_table thead th {
border-bottom: solid 1px #eeeeee; }
/* simple select */
.s_select_g {
padding: 4px 8px;
-webkit-box-sizing: border-box;
@@ -273,6 +282,45 @@
font-size: 9px;
-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 */
.toolbar {
background-color: #f0f0f0;
@@ -19,9 +19,11 @@
margin-left: 0;
}
}
// fixed width column
// full width 420px
@for $i from 1 through 12 {
// fixed width column with 12px gutter
// 276px width for 8 columns
// 420px width for 12 columns
// 564px width for 16 columns
@for $i from 1 through 16 {
.s_grid_#{$i} {
width: 36px * $i - 12px;
}
@@ -38,6 +40,7 @@
height: 44px * $j - 12px;
}
}
}
/* simple dropdown menu */
@@ -202,7 +205,7 @@
}
}
/* simple select */
.s_select_g {
padding: 4px 8px;
// 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 */
.toolbar {
background-color: #f0f0f0;
@@ -72,6 +72,12 @@ a:focus {
content: '';
clear: both; }
.valign:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle; }
.o-loading {
font-size: 13px; }
.fullsize .o-loading {
@@ -581,6 +587,8 @@ a.admtxt.admbg2:hover {
margin-top: 12px;
overflow: hidden;
border-top: solid 1px #eeeeee; }
.s_action .setting_btn {
margin-left: 12px; }
.setting_btn {
display: block;
@@ -590,28 +598,62 @@ a.admtxt.admbg2:hover {
text-align: center;
border: 0; }
.group_search {
/* Apps Manager */
#app_info {
float: left;
width: 420px;
height: 516px;
margin-right: 36px; }
#app_info .app_info_header {
height: 120px;
margin: -12px -12px 12px -12px;
position: relative;
background-color: #f7f7f7;
-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 > * {
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 {
float: left;
margin-right: 24px;
max-width: 340px; }
.g_sep {
width: 12px;
border-left: solid 1px white;
-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 */ }
overflow: hidden; }
.grp {
height: 528px;
@@ -68,6 +68,12 @@ a:focus { outline: none; }
content: '';
clear: both;
}
.valign:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.o-loading {
font-size: 13px;
// font-weight: normal;
@@ -490,11 +496,6 @@ a.admtxt.admbg2:hover {
-moz-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 */
.sdm_mdr .sdm_o { top: 36px; }
@@ -577,6 +578,10 @@ a.admtxt.admbg2:hover {
overflow: hidden;
border-top: solid 1px #eee;
// background-color: #fff;
.setting_btn {
margin-left: 12px;
}
}
.setting_btn {
display: block;
@@ -588,21 +593,54 @@ a.admtxt.admbg2:hover {
border: 0;
}
.group_search{
/* Apps Manager */
#app_info {
float: left;
width: 420px;
height: 516px;
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{
float: left;
margin-right: 24px;
max-width: 340px;
}
.g_sep {
width: 12px;
border-left: solid 1px #fff;
@include box-sizing;
overflow: hidden;
}