[SSE mobile] debug CellEditor for android, added animation on collapse/expand event

apps/spreadsheeteditor/mobile/app/view/CellEditor.js

@@ -47,8 +47,6 @@ define([
     'use strict';
 
     SSE.Views.CellEditor = Backbone.View.extend({
-        defEditorHeight: 30,
-        maxEditorHeight: 70,
 
         el: '.pages > .page',
         template: _.template(template),
@@ -68,8 +66,6 @@ define([
             this.$btnexpand = $('#ce-btn-expand', this.el);
             // this.$btnfunc = $('#ce-func-label', this.el);
 
-            // this.$el.height(this.defEditorHeight);
-
             return this;
         },
 
@@ -80,12 +76,11 @@ define([
         },
 
         expandEditor: function() {
-            if (this.$el.height() > this.defEditorHeight) {
-                this.$el.height(this.defEditorHeight).removeClass('expanded');
+            if (this.$el.hasClass('expanded')) {
+                this.$el.removeClass('expanded');
                 this.$btnexpand.removeClass('collapse');
             } else {
-                out_height = this.maxEditorHeight;
-                this.$el.height(this.maxEditorHeight).addClass('expanded');
+                this.$el.addClass('expanded');
                 this.$btnexpand.addClass('collapse');
             }
 

apps/spreadsheeteditor/mobile/resources/less/celleditor.less

@@ -3,7 +3,7 @@
 @gray-light:            #f1f1f1; //rgb(241, 241, 241)
 
 @cellEditorHeight: 30px;
-@cellEditorHeightExp: 70px;
+@cellEditorExpandedHeight: 70px;
 
 .border-radius(@radius: 2px) {
     border-radius: @radius;
@@ -16,14 +16,24 @@
     }
 
     position: relative;
+
+    height: @cellEditorHeight;
     min-height: @cellEditorHeight;
+    transition: min-height .15s;
+
     background-color: #fff;
     display: flex;
-    align-items: stretch;
+    //align-items: stretch;
     overflow: hidden;
     z-index: 500;
     .hairline(bottom, @gray-dark);//@toolbarBorderColor);
 
+    &.expanded {
+        min-height: @cellEditorExpandedHeight;
+        //height: @cellEditorExpandedHeight;
+        transition: min-height .15s;
+    }
+
     .btn {
         border: 0 none;
         height: @cellEditorHeight;
@@ -32,11 +42,12 @@
 
     .ce-group {
         overflow: hidden;
+        height: 100%;
     }
 
     .group-name {
         float: left;
-        background-color: @toolbarBg;
+        background-color: @gray-light;
     }
 
     #ce-cell-name {
@@ -79,7 +90,7 @@
         padding-left: 1px;
         .hairline(left, @gray-dark);
         flex-grow: 1;
-        height: 100%;
+        //height: 100%;
     }
 
     #ce-btn-expand {