diff --git a/apps/spreadsheeteditor/mobile/app/controller/Main.js b/apps/spreadsheeteditor/mobile/app/controller/Main.js index 212e91fd2..8ff677ee9 100644 --- a/apps/spreadsheeteditor/mobile/app/controller/Main.js +++ b/apps/spreadsheeteditor/mobile/app/controller/Main.js @@ -98,7 +98,7 @@ define([ me.api = new Asc.spreadsheet_api({ 'id-view' : 'editor_sdk', 'id-input' : 'ce-cell-content' - ,'mobile' : true + ,'mobile' : true }); if (me.api){ @@ -115,6 +115,7 @@ define([ me.api.asc_registerCallback('asc_onPrintUrl', _.bind(me.onPrintUrl, me)); me.api.asc_registerCallback('asc_onDocumentName', _.bind(me.onDocumentName, me)); me.api.asc_registerCallback('asc_onEndAction', _.bind(me.onLongActionEnd, me)); + me.api.asc_registerCallback('asc_onSelectionNameChanged', _.bind(me.onApiCellSelection, me)); /**/ // this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onCoAuthoringDisconnect, this)); // this.api.asc_registerCallback('asc_onPrintUrl', _.bind(this.onPrintUrl, this)); @@ -313,6 +314,15 @@ define([ // } }, + onApiCellSelection: function(info) { + if ( info ) { + if ( !this.$cellname ) + this.$cellname = $('#ce-cell-name'); + + this.$cellname.html(typeof(info)=='string' ? info : info.asc_getName()); + } + }, + onLongActionBegin: function(type, id) { var action = {id: id, type: type}; this.stackLongActions.push(action); diff --git a/apps/spreadsheeteditor/mobile/app/template/Editor.template b/apps/spreadsheeteditor/mobile/app/template/Editor.template index e01e15aef..d312c48a1 100644 --- a/apps/spreadsheeteditor/mobile/app/template/Editor.template +++ b/apps/spreadsheeteditor/mobile/app/template/Editor.template @@ -2,6 +2,18 @@
+
+
+ + +
+
+ +
+
+ +
+
diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-common.less b/apps/spreadsheeteditor/mobile/resources/less/app-common.less new file mode 100644 index 000000000..8df48ae56 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/less/app-common.less @@ -0,0 +1,6 @@ + +.navbar-through { + > .page { + padding-top: @appToolbarHeight; + } +} diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-ios.less b/apps/spreadsheeteditor/mobile/resources/less/app-ios.less index a1aa187ae..243edda19 100644 --- a/apps/spreadsheeteditor/mobile/resources/less/app-ios.less +++ b/apps/spreadsheeteditor/mobile/resources/less/app-ios.less @@ -2,7 +2,9 @@ @import url('../../../../../vendor/framework7/src/less/ios/_colors-vars.less'); // Colors -@themeColor: #8ca946; // (64,102,215) +@themeColor: #8ca946; // (140,169,70) + +@appToolbarHeight: @toolbarSize; @import url('../../../../../vendor/framework7/src/less/ios/intro.less'); @import url('../../../../../vendor/framework7/src/less/ios/grid.less'); @@ -62,18 +64,8 @@ @import url('ios/_search.less'); @import url('ios/_icons.less'); - -// Top offset - -#editor_sdk { - position: absolute; - left: 0; - right: 0; - top: @toolbarSize; - bottom: 0; - height: auto; - .transition(300ms); -} +@import url('app-common'); +@import url('celleditor'); // Add Container @@ -175,8 +167,3 @@ } } } - -#editor_sdk { - //position: absolute; - //left: 0; -} diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-material.less b/apps/spreadsheeteditor/mobile/resources/less/app-material.less index 3db17205e..f5e3171eb 100644 --- a/apps/spreadsheeteditor/mobile/resources/less/app-material.less +++ b/apps/spreadsheeteditor/mobile/resources/less/app-material.less @@ -2,9 +2,11 @@ @import url('../../../../../vendor/framework7/src/less/material/_colors-vars.less'); // Colors -@themeColor: #5a7dc9; // (64,102,215) +@themeColor: #8ca946; // (140,169,70) @navBarIconColor: #fff; +@appToolbarHeight: @navbarSize; + @import url('../../../../../vendor/framework7/src/less/material/intro.less'); @import url('../../../../../vendor/framework7/src/less/material/grid.less'); @import url('../../../../../vendor/framework7/src/less/material/views.less'); @@ -55,19 +57,8 @@ @import url('material/_search.less'); @import url('material/_icons.less'); - -// Top offset - -#editor_sdk { - position: absolute; - left: 0; - right: 0; - top: @toolbarSize; - bottom: 0; - height: auto; - .transition(300ms); -} - +@import url('app-common'); +@import url('celleditor'); // Add Container diff --git a/apps/spreadsheeteditor/mobile/resources/less/celleditor.less b/apps/spreadsheeteditor/mobile/resources/less/celleditor.less new file mode 100644 index 000000000..1c75a2d61 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/less/celleditor.less @@ -0,0 +1,132 @@ +@gray-dark: #c4c4c4; +@gray-darker: #848484; //rgb(132, 132, 132) +@gray-light: #f1f1f1; //rgb(241, 241, 241) + +@cellEditorHeight: 30px; + +.border-radius(@radius: 2px) { + border-radius: @radius; +} + +#cell-editing-box { + * { + box-sizing: border-box; + } + + border-bottom: solid 1px @gray-dark; + min-height: @cellEditorHeight; + background-color: #fff; + + .btn { + border: 0 none; + height: @cellEditorHeight; + background-color: transparent; + } + + .caret { + display: block; + transform: rotate(90deg); + font-size: 16px; + } + + .ce-group { + height: @cellEditorHeight; + } + + .group-name { + float: left; + background-color: @gray-light; + } + + #ce-cell-name { + display: inline-block; + width: 90px; + //height: 100%; + padding: 0px 4px; + //vertical-align: top; + display: inline-block; + border: 0 none; + line-height: 30px; + font-size: 17px; + text-align: center; + //transition: none; + //-webkit-transition: none; + + &[disabled] { + color: @gray-darker; + opacity: 0.5; + } + } + + #ce-func-label { + width: 34px; + + span.btn-icon { + font-size: 17px; + //display: block; + //margin-top: -5px; + } + + &.disabled { + span.btn-icon { + opacity: 0.6; + } + } + } + + .group-expand { + float: right; + + #ce-btn-expand { + width: @cellEditorHeight; + background: transparent; + padding: 0 2px 0; + + &:active, + &.active { + .caret { + background-color: #5d6c35; + //background-position: @arrow-small-offset-x @arrow-small-offset-y; + } + } + + &.btn-collapse { + .caret { + background-color: #5d6c35; + //background-position: @arrow-up-small-offset-x @arrow-up-small-offset-y; + } + } + } + } + + .group-content { + padding-left: 1px; + margin: 0 30px 0 128px; + border-left: 1px solid @gray-dark; + } + + #ce-cell-content { + display: block; + width: 100%; + padding: 3px 3px; + line-height: 1.428571429; + color: #000; + vertical-align: middle; + background-color: #fff; + + height: 100%; + resize: none; + min-height: 19px; + border: 0 none; + font-size: 16px; + + &[disabled] { + color: @gray-darker; + opacity: 0.5; + } + } + + #ce-cell-name, #ce-cell-content { + border-radius: 0; + } +}