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'; 'use strict';
SSE.Views.CellEditor = Backbone.View.extend({ SSE.Views.CellEditor = Backbone.View.extend({
defEditorHeight: 30,
maxEditorHeight: 70,
el: '.pages > .page', el: '.pages > .page',
template: _.template(template), template: _.template(template),
@ -68,8 +66,6 @@ define([
this.$btnexpand = $('#ce-btn-expand', this.el); this.$btnexpand = $('#ce-btn-expand', this.el);
// this.$btnfunc = $('#ce-func-label', this.el); // this.$btnfunc = $('#ce-func-label', this.el);
// this.$el.height(this.defEditorHeight);
return this; return this;
}, },
@ -80,12 +76,11 @@ define([
}, },
expandEditor: function() { expandEditor: function() {
if (this.$el.height() > this.defEditorHeight) { if (this.$el.hasClass('expanded')) {
this.$el.height(this.defEditorHeight).removeClass('expanded'); this.$el.removeClass('expanded');
this.$btnexpand.removeClass('collapse'); this.$btnexpand.removeClass('collapse');
} else { } else {
out_height = this.maxEditorHeight; this.$el.addClass('expanded');
this.$el.height(this.maxEditorHeight).addClass('expanded');
this.$btnexpand.addClass('collapse'); 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) @gray-light: #f1f1f1; //rgb(241, 241, 241)
@cellEditorHeight: 30px; @cellEditorHeight: 30px;
@cellEditorHeightExp: 70px; @cellEditorExpandedHeight: 70px;
.border-radius(@radius: 2px) { .border-radius(@radius: 2px) {
border-radius: @radius; border-radius: @radius;
@ -16,14 +16,24 @@
} }
position: relative; position: relative;
height: @cellEditorHeight;
min-height: @cellEditorHeight; min-height: @cellEditorHeight;
transition: min-height .15s;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
align-items: stretch; //align-items: stretch;
overflow: hidden; overflow: hidden;
z-index: 500; z-index: 500;
.hairline(bottom, @gray-dark);//@toolbarBorderColor); .hairline(bottom, @gray-dark);//@toolbarBorderColor);
&.expanded {
min-height: @cellEditorExpandedHeight;
//height: @cellEditorExpandedHeight;
transition: min-height .15s;
}
.btn { .btn {
border: 0 none; border: 0 none;
height: @cellEditorHeight; height: @cellEditorHeight;
@ -32,11 +42,12 @@
.ce-group { .ce-group {
overflow: hidden; overflow: hidden;
height: 100%;
} }
.group-name { .group-name {
float: left; float: left;
background-color: @toolbarBg; background-color: @gray-light;
} }
#ce-cell-name { #ce-cell-name {
@ -79,7 +90,7 @@
padding-left: 1px; padding-left: 1px;
.hairline(left, @gray-dark); .hairline(left, @gray-dark);
flex-grow: 1; flex-grow: 1;
height: 100%; //height: 100%;
} }
#ce-btn-expand { #ce-btn-expand {