apps setting view
This commit is contained in:
devin chen
saurabhbhatia
parent
9478bb13e2
commit
3ded19016a
|
|
@ -820,18 +820,23 @@ 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){
|
||||
var $elements = $("#app_manager .element"),
|
||||
$result = $("#app_manager .search_result");
|
||||
$("#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");
|
||||
$result.empty();
|
||||
$elements.hide();
|
||||
|
||||
searchArray = $("#app_manager .element:containsi("+$(this).val()+")");
|
||||
searchArray = $elements.filter(":containsi("+$(this).val()+")");
|
||||
if(searchArray.length > 0){
|
||||
// searchArray.each(function(){
|
||||
// $(this).hide("fold","fast");
|
||||
|
|
@ -842,23 +847,30 @@ var orbitDesktop = function(dom){
|
|||
searchArray.each(function(){
|
||||
i++;
|
||||
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);
|
||||
if(i == 4){
|
||||
$("#app_manager .search_result").append($column);
|
||||
$result.append($column);
|
||||
i = 0;
|
||||
}
|
||||
})
|
||||
if(i != 0){
|
||||
$("#app_manager .search_result").append($column);
|
||||
$result.append($column);
|
||||
}
|
||||
} 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
|
||||
$("#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,18 +598,17 @@ a.admtxt.admbg2:hover {
|
|||
text-align: center;
|
||||
border: 0; }
|
||||
|
||||
.group_search {
|
||||
/* Apps Manager */
|
||||
#app_info {
|
||||
float: left;
|
||||
width: 420px;
|
||||
height: 516px;
|
||||
margin-right: 36px; }
|
||||
|
||||
.search_result {
|
||||
float: left;
|
||||
margin-right: 24px;
|
||||
max-width: 340px; }
|
||||
|
||||
.g_sep {
|
||||
width: 12px;
|
||||
border-left: solid 1px white;
|
||||
#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;
|
||||
|
|
@ -612,6 +619,41 @@ a.admtxt.admbg2:hover {
|
|||
/* 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 {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -13,17 +13,52 @@
|
|||
|
||||
<div id="holder">
|
||||
<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 class="group g_sep op03" id='seperator' style="height: 516px;display:none;"></div> -->
|
||||
<div class="group_search" id="app_list">
|
||||
<!--<div class="element w1 h1 hp vp thmc2" data-category="desktop">
|
||||
<span class="tile thmc2"></span>
|
||||
<a href="" class="appicon"><img src="" alt=""></a>
|
||||
<h1 class="appname thmtxt">O-Music</h1>
|
||||
</div>-->
|
||||
<div class="s_grid s_grid_9 valign">
|
||||
<h2 class="app_info_name">Clock</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 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>
|
||||
</div>
|
||||
|
|
|
|||
Reference in New Issue