apps setting view
This commit is contained in:
1 parent
9478bb13e2
commit
3ded19016a
6 files changed
+334
-82
No files matched your search
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in new issue
Block a user