[SSE mobile] updated styles for tabs bar. implemented 'add worksheet'
This commit is contained in:
Maxim Kadushkin
parent
e868764f93
commit
5b894fc0e4
|
|
@ -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;
|
||||
var hidentems = [], items = [], tab, locked;
|
||||
var sindex = this.api.asc_getActiveWorksheetIndex();
|
||||
// if (!this.tabbar.isTabVisible(sindex))
|
||||
// this.tabbar.setTabVisible(sindex);
|
||||
|
||||
while (++i < wc) {
|
||||
locked = me.api.asc_isWorksheetLockedOrDeleted(i);
|
||||
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);
|
||||
// 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)));
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -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?',
|
||||
|
|
|
|||
|
|
@ -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">✚</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');
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@
|
|||
@import url('material/_icons.less');
|
||||
@import url('app-common');
|
||||
@import url('celleditor');
|
||||
@import url('statusbar');
|
||||
|
||||
// Add Container
|
||||
|
||||
|
|
|
|||
|
|
@ -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-right-color: #cbcbcb;
|
||||
border-top-color: #cbcbcb;
|
||||
color: #848484;
|
||||
border: 1px solid #cbcbcb;
|
||||
border-top: 0 none;
|
||||
border-bottom: 0 none;
|
||||
color: #000;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
Loading…
Reference in a new issue