Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Maxim Kadushkin 2016-12-07 14:29:38 +03:00
parent 9be7b6ef28
commit 8164e2c89e
2 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
apps/spreadsheeteditor/mobile/app/view/CellEditor.js
View file

@ -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');
}

19
apps/spreadsheeteditor/mobile/resources/less/celleditor.less
View file

@ -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 {