isotope embedded inside desktop kernel

app/assets/javascripts/desktop/desktop.js

@@ -17,4 +17,5 @@
 //= require desktop/jquery.gridster
 //= require desktop/books_pages
 //= require select2
+//= require jquery.isotope.min.js
 //= require orbit_js_1.0.1-front-end

app/assets/javascripts/desktop/orbitdesktop.js

@@ -330,13 +330,9 @@ var orbitDesktop = function(dom){
     });
 
     $(window).resize(function(){
-      // var ww = $(window).width();
-      // $("img#thmbackground").attr({"width":ww});
-      // if( $('.tinycanvas').length > 0 ){
       $('.tinycanvas').tinyscrollbar_update('relative'); 
-      // }
+      if($("body").find("div.app_frame").length > 0){
-      if($(o.contentHolder).find("div.app_frame").length > 0){
+        $("body").find("div.app_frame").each(function(){
-        $(o.contentHolder).find("div.app_frame").each(function(){
           var app_holder_height = $(this).height() - 60;
           var app_holder_width = $(this).width();
           $(this).find("div.app_holder").height(app_holder_height);
@@ -361,14 +357,6 @@ var orbitDesktop = function(dom){
     var extractLast = function( term ) {
         return split( term ).pop();
     }
-
-
-    // $("body").on("keydown","*[autocomplete]", function( event ) {
-    //   var autocompleteList = $(this).attr("autocomplete-list");
-    //   console.log($(this));
-        
-    // });
-    // 
   };
 
   this.layout_data = function(h){
@@ -460,13 +448,51 @@ var orbitDesktop = function(dom){
     $("div[container=true] div.overview").html(f.markup);
     var settings = {main : ".tinycanvas"};
     var tsettings = {};
+
+    var ist = function(){
+      $('#holder').css('height', $('#container').height() - 72);
+      $('.tinycanvas').css('height', $('#panel_r').height() - 36);
+      var dom = $("*[isotope=true]").isotope({
+         layoutMode: 'fitColumns',
+         onLayout: function($elems, instance){
+          $elems.width(base_width);
+          setTimeout(function(){
+            dom.isotope('reLayout',function(){
+              $("div[container=true] div.overview").width(dom.width());
+              o.tinyscrollbar.tinyscrollbar_update("relative");
+            })
+          },500);
+         }
+      });
+      
+
+      $(window).resize(function(){
+        if($("*[isotope=true]").length > 0){
+          $('#holder').css('height', $('#container').height() - 72);
+          $('.tinycanvas').css('height', $('#panel_r').height() - 36);
+          $(".isotope").isotope('reLayout',function(){
+            $("div[container=true] div.overview").width($(".isotope").width());
+            o.tinyscrollbar.tinyscrollbar_update("relative");
+          });
+        }
+      });
+      $('.s_grid_h_full').parent().css('height','100%');
+     
+      return dom;
+    }
+
+    if($("*[isotope=true]").length > 0){
+      var dom = ist();
+      f.width = dom.width();
+    }
+
     if(f.width){
       settings.fill = f.width;
     }
     if(pagination_variable){
       var page_no = 1;
-      tsettings.onMove = function(x){
+      tsettings.onMove = function(e){
-        if(x < 50){
+        if(e < 50){
           if(!pagination_link)
             pagination_link = o.lastlink;
           if(o.paging){
@@ -477,6 +503,8 @@ var orbitDesktop = function(dom){
         }
       }
     }
+
+  
     // call other functions here
     o.tinyscrollbar_ext(settings,tsettings);
     o.simple_drop_down();
@@ -484,6 +512,7 @@ var orbitDesktop = function(dom){
     o.use_select2();
     o.check_simple_layout();
   }
+
   this.paging = true;
   this.pagination = function(link,variable,page_no){
     var retvalue = null;
@@ -492,7 +521,20 @@ var orbitDesktop = function(dom){
       type : "get",
       success : function(html){
         var f = o.layout_data.generate_layout_html(html);
-        // console.log(f.total)
+        if($("*[isotope=true]").length > 0){
+          var $ul = $(f.markup),
+              elems = $ul.children("li[item=true]");
+          if(elems.length > 1)
+            o.paging = true;
+          else
+            o.paging = false;
+          $(".isotope").append(elems).isotope("appended",elems,function(){
+            $(".isotope").isotope("reLayout",function(){
+              $("div[container=true] div.overview").width($(".isotope").width()+50);
+              o.tinyscrollbar.tinyscrollbar_update("relative");
+            })
+          });
+        }else{
           if(f.total > 0){
             $("div[container=true] .overview").append(f.markup);
             if(f.width){
@@ -505,6 +547,7 @@ var orbitDesktop = function(dom){
             o.paging = false;
           }
         }
+      }
     });
   }
 

app/assets/stylesheets/desktop/desktop-component.css

@@ -1,4 +1,4 @@
-.noSelect {
+.noSelect, .noSelect * {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -220,7 +220,7 @@
   .s_form .s_table td {
     vertical-align: middle; }
   .s_form .s_table thead th {
-    border-bottom: solid 1px #eeeeee; }
+    border-bottom: solid 1px #eee; }
 
 /* simple select */
 .s_select_g {
@@ -311,7 +311,7 @@
         width: 16px;
         height: 20px;
         background-color: #000;
-        border: solid 2px white;
+        border: solid 2px #fff;
         cursor: pointer;
         -webkit-transition: left 0.3s ease;
         -moz-transition: left 0.3s ease;
@@ -366,7 +366,7 @@
       width: 100%; }
     .tinycanvas .overview > .column {
       float: left;
-      border-right: solid 1px #eeeeee;
+      border-right: solid 1px #eee;
       padding: 0 12px 0 0;
       margin: 0 12px 0 0;
       height: 100%; }

app/assets/stylesheets/desktop/desktop-component.scss

@@ -1,6 +1,6 @@
 @import "desktop-helper";
 
-.noSelect {
+.noSelect, .noSelect * {
 	@include no-select;
 }
 

app/assets/stylesheets/desktop/desktop-main.css

@@ -223,7 +223,8 @@ a.admtxt.admbg2:hover {
   width: 100%; }
 
 .pw {
-  width: 540px; }
+  /*width: 540px;*/
+}
 
 .h1 {
   height: 120px; }
@@ -375,7 +376,8 @@ a.admtxt.admbg2:hover {
   background-color: #fff;
   margin-left: 252px;
   position: relative;
-  width: auto; }
+  width: calc(100% - 272px);
+}
 
 /* Desktop Notification */
 #orbitnote {
@@ -798,7 +800,7 @@ a.admtxt.admbg2:hover {
 /*Tooltip popup */
 .desktop_toolpopup {
   position: absolute;
-  z-index: 10px;
+  z-index: 10;
   display: none;
   padding: 12px;
   cursor: default;

app/assets/stylesheets/desktop/desktop-main.scss

@@ -824,7 +824,7 @@ a:focus { outline: none; }
 /*Tooltip popup */
 .desktop_toolpopup {
 	position: absolute;
-	z-index: 10px;
+	z-index: 10;
 	display: none;
 	padding: 12px;
 	cursor: default;

app/assets/stylesheets/desktop/desktop-media.css

@@ -1,10 +1,10 @@
 @media only screen and (min-width: 1240px){
 
-	#panel_r.pw { width: 800px; }
+	/*#panel_r.pw { width: 800px; }*/
 
 }
 @media only screen and (min-width: 1900px){
 
-	#panel_r.pw { width: 1400px; }
+	/*#panel_r.pw { width: 1400px; }*/
 
 }

app/assets/stylesheets/desktop/desktop.css

@@ -14,4 +14,5 @@
  *= require desktop/desktop-media
  *= require desktop/desktop-select2
  *= require desktop/desktop-timeline
+ *= require desktop/isotope.css
 */

app/assets/stylesheets/desktop/isotope.css

@@ -0,0 +1,72 @@
+ #side {
+    height: auto;
+    min-height: 516px;
+    right: 0;
+    bottom: 12px;
+  }
+  #rwidget {
+    height: 100%;
+  }
+  #container {
+    padding: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 12px;
+    left: 0;
+    min-height: 588px;
+  }
+  #panel_l, #panel_r {
+    height: 100%;
+  }
+  .isotope {
+    height: 100%;
+  }
+  .isotope .s_grid_row {
+    width: 420px;
+    margin: 0 24px 12px 0;
+  }
+  .s_grid_row .s_grid_h_full {
+    height: 100%;
+  }
+  .list_t_item {
+    float: left;
+    display: inline;
+  }
+  .isotope,
+.isotope .isotope-item {
+  /* change duration value to whatever you like */
+  -webkit-transition-duration: 0.8s;
+     -moz-transition-duration: 0.8s;
+      -ms-transition-duration: 0.8s;
+       -o-transition-duration: 0.8s;
+          transition-duration: 0.8s;
+}
+
+.isotope {
+  -webkit-transition-property: height, width;
+     -moz-transition-property: height, width;
+      -ms-transition-property: height, width;
+       -o-transition-property: height, width;
+          transition-property: height, width;
+}
+
+.isotope .isotope-item {
+  -webkit-transition-property: -webkit-transform, opacity;
+     -moz-transition-property:    -moz-transform, opacity;
+      -ms-transition-property:     -ms-transform, opacity;
+       -o-transition-property:      -o-transform, opacity;
+          transition-property:         transform, opacity;
+}
+
+/**** disabling Isotope CSS3 transitions ****/
+
+.isotope.no-transition,
+.isotope.no-transition .isotope-item,
+.isotope .isotope-item.no-transition {
+  -webkit-transition-duration: 0s;
+     -moz-transition-duration: 0s;
+      -ms-transition-duration: 0s;
+       -o-transition-duration: 0s;
+          transition-duration: 0s;
+}

vendor/built_in_modules/personal_journal/app/helpers/panel/personal_journal/desktop/journal_pages_helper.rb

@@ -9,6 +9,22 @@ module Panel::PersonalJournal::Desktop::JournalPagesHelper
       end
   end
 
+  def get_height view
+    case view
+    when "journal_title"
+     height = "50px"
+    when "keywords"
+     height = "100px"
+    when "abstract"
+     height = "200px"
+    when "file"
+      height = "200px"
+    else
+      height = "50px"
+    end
+    height
+  end
+
   def marker
     content_tag :div,
      :class => "list_item_action" do

vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_pages/_form.html.erb

@@ -30,10 +30,8 @@
     </div>
   </div>
   <div class="viewport"> -->
-    <div class="overview" content-layout="column" base-width="420">
+    <div class="overview" content-layout="simple" base-width="420">
-      <div column="true">
+          <ul class="s_form" isotope="true">
-        <div class="s_form">
-          <ul>
             <% @site_valid_locales.each_with_index do |locale, i| %>
               <% style = locale != I18n.locale.to_s ? 'style=display:none;' : "" %>
               <% data = "data-language=" + locale  %>
@@ -94,12 +92,7 @@
             <label class="s_grid_1 s_grid" for="">共</label>
             <%= f.text_field :total_pages, size: "20", class: "s_grid_2 s_grid"%>
             </li>
-          </ul>
+      
-        </div>
-      </div>
-      <div column="true">
-        <div class="s_form">
-          <ul>
             <li class="s_grid_row">
             <%= f.text_area :author_tokens,
               class: "s_grid_12 s_grid",
@@ -173,12 +166,7 @@
     <li class="s_grid_row">
     <%= label_tag("", t("personal_journal.url"), class: "s_grid_4 s_grid") %><%= f.text_field :url, size: "20", class: "s_grid_8 s_grid"%>
     </li>
-          </ul>
+        
-        </div>
-      </div>
-    <div column="true">
-      <div class="s_form">
-        <ul>
           <li class="s_grid_row">
           <table class="s_table">
             <thead>
@@ -208,23 +196,13 @@
             </tbody>
           </table>
           </li>
-        </ul>
+  
-      </div>
-    </div>
-      <div column="true">
-        <div class="s_form">
-          <ul>
             <li class="s_grid_row">
-            <%= f.text_area :note, size: "20x22", placeholder: t("personal_journal.note"), class: "s_grid_12 s_grid s_grid_h_10"%>
+            <%= f.text_area :note, size: "20x22", placeholder: t("personal_journal.note"), class: "s_grid_12 s_grid s_grid_h_10 s_grid_h_full"%>
             </li>
-          </ul>
+      
-        </div>
-      </div>
-      <div column="true">
-        <div class="s_form">
-          <ul>
             <li class="s_grid_row">
-            <%= f.text_area :abstract, size: "20x22", placeholder: t("personal_journal.abstract"), class: "s_grid_12 s_grid s_grid_h_10"%>
+            <%= f.text_area :abstract, size: "20x22", placeholder: t("personal_journal.abstract"), class: "s_grid_12 s_grid s_grid_h_10 s_grid_h_full"%>
             </li>
           </ul>
         </div>

vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_pages/index.html.erb

@@ -77,8 +77,10 @@
     <div class="sdm_t hh1"><span class="icon-question-sign"></span></div>
   </div>
 </div>
-    <div class="overview" page-name="journal_p_list" content-layout="datalist" base-width="300" per-column="<%= @per_column.to_s %>" pagination-var="view=<%= @view_by %>&page" >
+    <div class="overview" page-name="journal_p_list" content-layout="simple" base-width="300" per-column="<%= @per_column.to_s %>" pagination-var="view=<%= @view_by %>&page" >
+      <ul isotope="true">
       <% @writing_journals.each do |w| %>
         <%= publication_record w, @view_by%>
       <% end %>
+    </ul>
     </div>