From ead749cfed024591ef732ef5ad4cc7ef0ad5e496 Mon Sep 17 00:00:00 2001 From: devin chen Date: Tue, 16 Apr 2013 15:48:14 +0800 Subject: [PATCH] minor update --- app/assets/javascripts/orbitdesktop.js | 111 +++++++++++++----- app/assets/javascripts/orbitdesktopAPI.js | 33 +++--- .../stylesheets/desktop/desktop-component.css | 1 - .../desktop/desktop-component.scss | 1 - .../stylesheets/desktop/desktop-main.css | 59 +++++++--- .../stylesheets/desktop/desktop-main.scss | 47 ++++++-- app/views/desktop/index.html.erb | 9 +- config/mongoid.yml | 2 +- 8 files changed, 181 insertions(+), 82 deletions(-) diff --git a/app/assets/javascripts/orbitdesktop.js b/app/assets/javascripts/orbitdesktop.js index e241c2b28..9f2599b03 100755 --- a/app/assets/javascripts/orbitdesktop.js +++ b/app/assets/javascripts/orbitdesktop.js @@ -109,7 +109,7 @@ var orbitDesktop = function(dom){ this.themesettings = ""; this.theme = "4f8d3f493b67fcd05f086359"; this.transitionTime = 1000; - this.currenthtml = "desktop.html"; + this.currenthtml = "home"; this.currentface = "home"; this.desktopData = {}; this.tp = ""; @@ -378,8 +378,8 @@ var orbitDesktop = function(dom){ }; this.layout_data = function(h){ - var $e; - var column_container,layout, base_width, total_width, gutter, no_of_entries = 0, pagination_link, pagination_variable; + var $e; + var column_container,layout, base_width , no_of_entries = 0, pagination_link , pagination_variable, gutter, total_width; o.paging = true; gutter = (!isNaN(gutter)) ? gutter : 12; this.layout_data.generate_layout_html = function(l){ @@ -393,6 +393,7 @@ var orbitDesktop = function(dom){ case "simple": total_columns++; temp_div.append(column_container.html()); + total_width = "auto"; break; case "datalist": no_of_entries = (typeof column_container.attr("per-column") != "undefined"? parseInt(column_container.attr("per-column")) : 4); @@ -411,7 +412,10 @@ var orbitDesktop = function(dom){ x = 0; temp_div.append(column); } - }); + }) + if(x != 0){ + temp_div.append(column); + } } total_width = (!isNaN(base_width)) ? (base_width + gutter*2 +1) * total_columns : null; break; @@ -419,17 +423,16 @@ var orbitDesktop = function(dom){ entries = column_container.find("div[column=true]"),x = 0,column; if(entries.length!=0){ entries.each(function(i,ul){ - column = $("
'); - var w = $(this).find('.text_wrapper').width(); - if (w > 96){ - var text = $(this).find('.text_wrapper').text(); - slice = text.substr(0,12); - $(this).find('.text_wrapper').attr('title',text).text(slice+'...'); - } - } - }); - + o.appname_substr('.gridster li'); o.simple_drop_down(); o.tinyscrollbar_ext({ main: '.tinycanvas' @@ -731,22 +722,43 @@ var orbitDesktop = function(dom){ var loadTiles = function(id){ //This will load tiles for a specific desktop .. id of section has to be passed here to load tiles $("#desktop #group_wrapper").empty(); $.getJSON("/desktop/getgroups",{sectionid:id},function(tiles){ - tiles.sort(o.sortJSON("position",true,parseInt)); + // tiles.sort(o.sortJSON("position",true,parseInt)); var tilecolors = o.themesettings.tilecolor; var totaltiles_in_a_row = 4; var opacity = ["op07","op08","op09",""]; - var row = 1, col = 1, x = 1, y = 1; + var row = 0, col = 1, x = 1, y = 1, total_x = 0, prev_y = 0; var $group = $('
'); var $ul = $(''); $.each(tiles,function(i,tile){ - if(row >= 4){ - row = 1; - col++; - } var shape = tile.shape.split(" "); - x = parseInt(shape[0].substr(1,1)); - y = parseInt(shape[1].substr(1,1)); + // if(tile.title == "Weather")console.log("Big - row : " + tile.row + ", col : "+ tile.column); + // if(tile.title == "Google Scholar")console.log("Scholar - row : " + tile.row + ", col : "+ tile.column); + + // if(total_x % 2 != 0) + // row = row - y; + // if(i == 7)tile.row = null; + if(tile.row){ + row = tile.row; + col = tile.column; + x = parseInt(shape[0].substr(1,1)); + y = parseInt(shape[1].substr(1,1)); + }else{ + x = parseInt(shape[0].substr(1,1)); + if(total_x % 2 == 0){ + row = row + y; + }else if(x == 1){ + col++; + } + y = parseInt(shape[1].substr(1,1)); + total_x = total_x + ( x * y ); + prev_y = y; + if(total_x > 8){ + row = 1; + total_x = 0; + col++; + } + } var tilecolor = tilecolors[Math.floor(Math.random()*tilecolors.length)]; var op = opacity[Math.floor(Math.random()*opacity.length)]; var f = (tile.fullsize?"fullsize":null); @@ -757,7 +769,7 @@ var orbitDesktop = function(dom){ $li = $('

  • '+tile.title+'

    • '); } - row = row + y; + $ul.append($li); }); @@ -805,6 +817,7 @@ var orbitDesktop = function(dom){ $("#desktop #section_list").append($('
  • '+section.name+'
    • ')); }); bindSecondaryHandlers(); + o.simple_drop_down(); }else{ loadSectionList(); loadTiles(o.sectionId); @@ -878,6 +891,7 @@ var orbitDesktop = function(dom){ }); return false; }); + o.appname_substr('#group_wrapper .element'); } var loadApps = function(){ //this load apps for sorting and searching $.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){ @@ -977,9 +991,9 @@ var orbitDesktop = function(dom){ }); $.post("/desktop/save_desktop_settings",{"save":"appnewsection","appid":ui.draggable.attr("id"),"newsectionid":$(this).data("content"),"desktopid":o.desktopId}); - if(o.sectionId == $(this).data("content") || o.sectionId == elementParent.attr("id")){ + // if(o.sectionId == $(this).data("content") || o.sectionId == elementParent.attr("id")){ o.desktopData["home"]=""; - } + // } } $(this).find('span.tile').addClass('op06',400); }, @@ -991,6 +1005,10 @@ var orbitDesktop = function(dom){ }, accept: '.to_drop' }); + o.tinyscrollbar_ext({ + main: '.tinycanvas', + }); + o.appname_substr('#group_wrapper .element',9); }; var loadApps = function(){ // this loads apps from db to in each sections $.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){ @@ -1583,6 +1601,35 @@ var orbitDesktop = function(dom){ }); }); } + this.use_select2 = function(){ + $('select:not(.select2-offscreen)').select2({ + minimumResultsForSearch: -1 + // minimumInputLength: -1 + }); + } + this.appname_substr = function(target,length){ + var $target = $(target), + length = (length && typeof length == 'number') ? length : 12, + wrapper = '', + w1, w2; + if(!$target && $target.find('.text_wrapper').length > 0){ + return; + } else { + for(i = 0; i < $target.length; i++){ + var $this = $target.eq(i); + if($this.find('.appname').text().length > length + 1){ + $this.find('.appname').wrapInner(wrapper); + w1 = $this.find('.appname').width() - 24 + w2 = $this.find('.text_wrapper').width(); + if(w2 > w1){ + var text = $this.find('.text_wrapper').text(); + slice = text.substr(0,length); + $this.find('.text_wrapper').attr('title',text).text(slice+'...'); + } + } + } + } + } o.initialize(); } diff --git a/app/assets/javascripts/orbitdesktopAPI.js b/app/assets/javascripts/orbitdesktopAPI.js index 9e4700ea8..373d1a7cf 100644 --- a/app/assets/javascripts/orbitdesktopAPI.js +++ b/app/assets/javascripts/orbitdesktopAPI.js @@ -8,32 +8,37 @@ var orbitDesktopAPI = function(){ //msg (string) : message to display //type (string : success, imp, alert //time (int) : duration for notification in seconds - var $notify = $("#orbitnote"); - var img, n_height; + var $notify = $('#orbitnote'), + ani_method = { direction: 'up',easing: 'easeInOutQuint' }, + img, n_height; if(!type)type=""; switch(type){ case "alert": - img = "note_alert.png"; + img = "exclamation-sign"; break; case "imp": - img = "note_imp.png"; + img = "warning-sign"; break; case "success": - img = "note_success.png"; + img = "ok"; break; default: - img = "note_alert.png"; + img = "exclamation-sign"; break; } - $notify.find("img#note_img").attr("src",o.notifyImgPath+img); - $notify.find(".note_message").html(msg); - n_height = $notify.outerHeight(); - if(!time)time=5000; else time=time*1000; - $notify - .css({'top':-n_height, 'display':'block', 'opacity':0}) - .animate({top:0,opacity:1},200) + if( !time || time > 20) time = 5000; else time = time*1000; + + var sign = '
    ', + message = '
    '+ msg +'
    ', + item = '
    '+ sign + message +'
    '; + + $(item) + .prependTo($notify) + .stop(1,1) + .toggle('slide', ani_method, 300) .delay(time) - .animate({top:-n_height,opacity:0},200); + .toggle('slide', ani_method, 800); + $notify.find('.note_holder:hidden').remove(); }; this.executeFunc = function(func,callbackFn){ //takes 2 arguments diff --git a/app/assets/stylesheets/desktop/desktop-component.css b/app/assets/stylesheets/desktop/desktop-component.css index 9ad83872b..1baf8f1ca 100644 --- a/app/assets/stylesheets/desktop/desktop-component.css +++ b/app/assets/stylesheets/desktop/desktop-component.css @@ -162,7 +162,6 @@ font-size: 15px; } .s_form label { font-size: 13px; - font-weight: bold; display: inline-block; vertical-align: middle; width: 100px; diff --git a/app/assets/stylesheets/desktop/desktop-component.scss b/app/assets/stylesheets/desktop/desktop-component.scss index 58910b9c2..1f1da842d 100644 --- a/app/assets/stylesheets/desktop/desktop-component.scss +++ b/app/assets/stylesheets/desktop/desktop-component.scss @@ -135,7 +135,6 @@ // basic style label { font-size: 13px; - font-weight: bold; display: inline-block; vertical-align: middle; width: 100px; diff --git a/app/assets/stylesheets/desktop/desktop-main.css b/app/assets/stylesheets/desktop/desktop-main.css index 01acfd9fe..42bcbf7cb 100644 --- a/app/assets/stylesheets/desktop/desktop-main.css +++ b/app/assets/stylesheets/desktop/desktop-main.css @@ -251,7 +251,9 @@ a:focus { #header { padding: 0 0 12px 0; min-width: 800px; - height: 72px; } + height: 72px; + position: relative; + z-index: 2; } #side { width: 60px; @@ -265,7 +267,8 @@ a:focus { #holder { height: 516px; width: auto; - position: relative; } + position: relative; + z-index: 1; } #rwidget { height: 516px; } @@ -350,25 +353,45 @@ a:focus { position: fixed; top: 0; left: 50%; - margin-left: -206px; + margin-left: -200px; z-index: 99999; width: 400px; - padding: 0 6px 6px 6px; - background-color: #000; - background-color: rgba(0, 0, 0, 0.6); } + -webkit-transition: height 2s ease; + -moz-transition: height 2s ease; + transition: height 2s ease; } #orbitnote .note_holder { - background-color: #f3f3f3; - border: solid 1px white; - border-top: none; overflow: hidden; - padding: 24px 24px; } + padding: 36px; + border: solid 2px #dddddd; + border-top: 0; + display: none; } #orbitnote .note_holder .note_type { - float: left; } - #orbitnote .note_holder .note_type img { - display: block; } + display: inline-block; + vertical-align: middle; + width: 60px; + height: 60px; + color: #fff; } + #orbitnote .note_holder .note_type .sign { + display: block; + font-size: 40px; + width: 40px; + height: 40px; + padding: 10px; + border-radius: 30px; + text-align: center; } + #orbitnote .note_holder .note_type .sign.icon-ok { + background-color: #5BB75B; } + #orbitnote .note_holder .note_type .sign.icon-exclamation-sign { + background-color: #DA4F49; } + #orbitnote .note_holder .note_type .sign.icon-warning-sign { + background-color: #FAA732; } #orbitnote .note_holder .note_message { color: #333; - margin: 10px 0 0 48px; + display: inline-block; + vertical-align: middle; + word-wrap: break-word; + width: 240px; + margin: 0 0 0 20px; font-size: 15px; } /* Desktop Dialogue */ @@ -378,7 +401,8 @@ a:focus { height: 100%; left: 0; top: 0; - z-index: 12; } + z-index: 12; + display: none; } #orbitdiag .tile { background-color: #000; } #orbitdiag .diag_holder { @@ -480,6 +504,11 @@ a:focus { cursor: move; overflow: hidden; } +.gs_w.dragging { + -webkit-transform: scale(0.92); + -moz-transform: scale(0.92); + transform: scale(0.92); } + /* header drop menu */ .sdm_mdr .sdm_o { top: 36px; } diff --git a/app/assets/stylesheets/desktop/desktop-main.scss b/app/assets/stylesheets/desktop/desktop-main.scss index d0dc77e9d..334c57d59 100644 --- a/app/assets/stylesheets/desktop/desktop-main.scss +++ b/app/assets/stylesheets/desktop/desktop-main.scss @@ -180,6 +180,8 @@ a:focus { outline: none; } padding: 0 0 12px 0; min-width: 800px; height: 72px; + position: relative; + z-index: 2; } #side { width: 60px; @@ -194,6 +196,7 @@ a:focus { outline: none; } height: 516px; width: auto; position: relative; + z-index: 1; } #rwidget { height: 516px; @@ -295,30 +298,46 @@ a:focus { outline: none; } position: fixed; top: 0; left: 50%; - margin-left: -206px; + margin-left: -200px; z-index: 99999; width: 400px; - padding: 0 6px 6px 6px; - background-color: #000; - background-color: rgba(0,0,0,0.6); + @include transition-type(height,2); .note_holder { - background-color: #f3f3f3; - border: solid 1px #fff; - border-top: none; overflow: hidden; - padding: 24px 24px; + padding: 36px; + border: solid 2px $gray; + border-top: 0; + display: none; .note_type { - float: left; + display: inline-block; + vertical-align: middle; + width: 60px; + height: 60px; + color: #fff; - img { + .sign { display: block; + font-size: 40px; + width: 40px; + height: 40px; + padding: 10px; + border-radius: 30px; + text-align: center; + + &.icon-ok { background-color: #5BB75B; } + &.icon-exclamation-sign { background-color: #DA4F49; } + &.icon-warning-sign { background-color: #FAA732; } } } .note_message { color: #333; - margin: 10px 0 0 48px; + display: inline-block; + vertical-align: middle; + word-wrap: break-word; + width: 240px; + margin: 0 0 0 20px; font-size: 15px; // font-weight: normal; } @@ -333,6 +352,7 @@ a:focus { outline: none; } left: 0; top: 0; z-index: 12; + display: none; .tile { background-color: #000; @@ -460,6 +480,11 @@ a:focus { outline: none; } cursor: move; overflow: hidden; } +.gs_w.dragging { + -webkit-transform: scale(0.92); + -moz-transform: scale(0.92); + transform: scale(0.92); +} // .app.gs_w:active { // -webkit-transform: scale(0.9); // -moz-transform: scale(0.9); diff --git a/app/views/desktop/index.html.erb b/app/views/desktop/index.html.erb index 7dd6c3c17..642ab1126 100644 --- a/app/views/desktop/index.html.erb +++ b/app/views/desktop/index.html.erb @@ -73,13 +73,8 @@
    - -