diff --git a/app/assets/Archive/javascripts/orbitdesktop.js b/app/assets/Archive/javascripts/orbitdesktop.js index e98ab8a17..06d254d43 100755 --- a/app/assets/Archive/javascripts/orbitdesktop.js +++ b/app/assets/Archive/javascripts/orbitdesktop.js @@ -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 = $("
"); + 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 = $('
'); + } + var $newelement = $('
'+$(this).html()+'
'); + $column.append($newelement); + if(i == 4){ + $result.append($column); + i = 0; + } + }) + if(i != 0){ + $result.append($column); } - var $newelement = $('
'+$(this).html()+'
'); - $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 = '', + 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(){ diff --git a/app/assets/Archive/stylesheets/desktop/desktop-component.css b/app/assets/Archive/stylesheets/desktop/desktop-component.css index c8790aaa0..ce66cf836 100644 --- a/app/assets/Archive/stylesheets/desktop/desktop-component.css +++ b/app/assets/Archive/stylesheets/desktop/desktop-component.css @@ -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; diff --git a/app/assets/Archive/stylesheets/desktop/desktop-component.scss b/app/assets/Archive/stylesheets/desktop/desktop-component.scss index 5da5f5d98..62858fbdc 100644 --- a/app/assets/Archive/stylesheets/desktop/desktop-component.scss +++ b/app/assets/Archive/stylesheets/desktop/desktop-component.scss @@ -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; diff --git a/app/assets/Archive/stylesheets/desktop/desktop-main.css b/app/assets/Archive/stylesheets/desktop/desktop-main.css index d1840c5e6..523e99f63 100644 --- a/app/assets/Archive/stylesheets/desktop/desktop-main.css +++ b/app/assets/Archive/stylesheets/desktop/desktop-main.css @@ -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; diff --git a/app/assets/Archive/stylesheets/desktop/desktop-main.scss b/app/assets/Archive/stylesheets/desktop/desktop-main.scss index 186920136..d08476464 100644 --- a/app/assets/Archive/stylesheets/desktop/desktop-main.scss +++ b/app/assets/Archive/stylesheets/desktop/desktop-main.scss @@ -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; } diff --git a/app/views/desktop/app_manager.html.erb b/app/views/desktop/app_manager.html.erb index b40ab9632..70831dde7 100644 --- a/app/views/desktop/app_manager.html.erb +++ b/app/views/desktop/app_manager.html.erb @@ -13,17 +13,52 @@
-
- -
- -