[SSE mobile] updated styles for tabs bar. implemented 'add worksheet'

apps/spreadsheeteditor/mobile/app/controller/Statusbar.js

@@ -57,7 +57,8 @@ define([
         initialize: function() {
             this.addListeners({
                 'Statusbar': {
-                    'sheet:click': this.onTabClick
+                    'sheet:click': this.onTabClick,
+                    'sheet:addnew': this.onAddTab
                 }
             });
         },
@@ -79,6 +80,7 @@ define([
                     console.log('change in collection');
                 },
                 reset   : function (collection, opts) {
+                    me.statusbar.clearTabs();
                     collection.each(function(model) {
                         me.statusbar.addSheet(model);
                     });
@@ -134,54 +136,12 @@ define([
 
             return;
 
-            // this.tabbar.empty(true);
-            // this.btnAddWorksheet.setDisabled(true);
-
             if (this.api) {
-                var wc = this.api.asc_getWorksheetsCount(), i = -1;
+                // if (!this.tabbar.isTabVisible(sindex))
-                var hidentems = [], items = [], tab, locked;
+                //     this.tabbar.setTabVisible(sindex);
-                var sindex = this.api.asc_getActiveWorksheetIndex();
 
-                while (++i < wc) {
+                // this.btnAddWorksheet.setDisabled(me.mode.isDisconnected || me.api.asc_isWorkbookLocked());
-                    locked = me.api.asc_isWorksheetLockedOrDeleted(i);
+                // $('#status-label-zoom').text(Common.Utils.String.format(this.zoomText, Math.floor((this.api.asc_getZoom() +.005)*100)));
-                    tab = {
-                        sheetindex    : i,
-                        active        : sindex == i,
-                        label         : me.api.asc_getWorksheetName(i),
-//                          reorderable   : !locked,
-                        cls           : locked ? 'coauth-locked':'',
-                        isLockTheDrag : locked
-                    };
-
-                    this.api.asc_isWorksheetHidden(i)? hidentems.push(tab) : items.push(tab);
-                }
-
-                if (hidentems.length) {
-                    hidentems.forEach(function(item){
-                        me.tabMenu.items[6].menu.addItem(new Common.UI.MenuItem({
-                            style: 'white-space: pre-wrap',
-                            caption: Common.Utils.String.htmlEncode(item.label),
-                            value: item.sheetindex
-                        }));
-                    });
-                    this.tabMenu.items[6].show();
-                }
-
-                this.tabbar.add(items);
-
-                if (!_.isUndefined(this.tabBarScroll)) {
-                    this.tabbar.$bar.scrollLeft(this.tabBarScroll.scrollLeft);
-                    this.tabBarScroll = undefined;
-                }
-                if (!this.tabbar.isTabVisible(sindex))
-                    this.tabbar.setTabVisible(sindex);
-
-                this.btnAddWorksheet.setDisabled(me.mode.isDisconnected || me.api.asc_isWorkbookLocked());
-                $('#status-label-zoom').text(Common.Utils.String.format(this.zoomText, Math.floor((this.api.asc_getZoom() +.005)*100)));
-
-                me.fireEvent('sheet:changed', [me, sindex]);
-                me.fireEvent('sheet:updateColors', [true]);
-                Common.NotificationCenter.trigger('comments:updatefilter', {property: 'uid', value: new RegExp('^(doc_|sheet' + me.api.asc_getActiveWorksheetId() + '_)')}, false);
             }
         },
 
@@ -520,6 +480,11 @@ define([
             this.statusbar.setActiveTab(index);
         },
 
+        onAddTab: function () {
+            this.api.asc_closeCellEditor();
+            this.api.asc_addWorksheet(this.createSheetName());
+        },
+
         errorLastSheet  : 'Workbook must have at least one visible worksheet.',
         errorRemoveSheet: 'Can\'t delete the worksheet.',
         warnDeleteSheet : 'The worksheet maybe has data. Proceed operation?',

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

@@ -49,7 +49,7 @@ define([
             el: '.pages > .page',
             template: '<div class="statusbar">' +
                             '<div id="box-addtab" class="status-group">' +
-                                '<button id="btn-addtab" type="button" class="btn small btn-toolbar"><span class="btn-icon">&#10010;</span></button>' +
+                                '<a href="#" id="btn-addtab" class="button"><i class="icon icon-plus"></i></a>' +
                             '</div>' +
                             '<div class="box-tabs">' +
                                 '<ul class="sheet-tabs bottom"></ul>' +
@@ -69,6 +69,10 @@ define([
                 this.$el = $(this.template).appendTo($(this.el));
 
                 this.$boxTabs = this.$el.find('.box-tabs > ul');
+                this.$btnAddTab = this.$el.find('#box-addtab > .button');
+                this.$btnAddTab.on('click', function(e){
+                    me.fireEvent('sheet:addnew');
+                });
 
                 // this.editMode = false;
 
@@ -115,6 +119,11 @@ define([
             addSheets: function () {
             },
 
+            clearTabs: function () {
+                this.$boxTabs.children().off('click');
+                this.$boxTabs.empty();
+            },
+
             setActiveTab: function (index) {
                 this.$boxTabs.children().removeClass('active')
                         .eq(index).addClass('active');

apps/spreadsheeteditor/mobile/resources/less/app-material.less

@@ -59,6 +59,7 @@
 @import url('material/_icons.less');
 @import url('app-common');
 @import url('celleditor');
+@import url('statusbar');
 
 // Add Container
 

apps/spreadsheeteditor/mobile/resources/less/statusbar.less

@@ -1,4 +1,5 @@
 @statusBarHeight: 30px;
+@fontColor: #000;
 
 .statusbar {
   box-sizing: border-box;
@@ -9,41 +10,59 @@
 
   border-top: 1px solid @gray-dark;
   height: @statusBarHeight;
+  min-height: @statusBarHeight;
   display: flex;
   flex-direction: row;
 
   .box-tabs {
     flex-grow: 1;
   }
+
+  .button {
+    border: 0 none;
+    color: #000;
+    font-size: 18px;
+    line-height: inherit;
+  }
+
+  i.icon {
+    width: 22px;
+    height: 22px;
+
+    &.icon-plus {
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{fontColor}"><g><path d="M22,12H12v10h-1V12H1v-1h10V1h1v10h10V12z"/></g></svg>');
+    }
+  }
 }
 
 .box-tabs {
   ul {
     margin: 0;
     padding: 0;
+    white-space: nowrap;
 
     > li {
       list-style: none;
       display: inline;
 
-      &.active {
+      &:not(.active) {
         a {
-          background-color: yellow;
+          color: #848484;
         }
       }
 
       a {
         display: inline-block;
-        border-radius: 0;
         padding: 0 10px 0;
-        line-height: 24px;
+        line-height: @statusBarHeight;
         margin-right: -1px;
         background-color: #f1f1f1;
         outline: none;
-        border-left-color: #cbcbcb;
+        border: 1px solid #cbcbcb;
-        border-right-color: #cbcbcb;
+        border-top: 0 none;
-        border-top-color: #cbcbcb;
+        border-bottom: 0 none;
-        color: #848484;
+        color: #000;
+        height: 100%;
 
         &:hover {
           cursor: pointer;