mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-04-07 14:06:16 +08:00
[VE] Update statusbar
This commit is contained in:
Julia Radzhabova
@ -57,42 +57,38 @@ define([
|
||||
var me = this;
|
||||
this.addListeners({
|
||||
'Statusbar': {
|
||||
'zoom:value': function(value) {
|
||||
this.api.zoom(value);
|
||||
Common.NotificationCenter.trigger('edit:complete', this.statusbar);
|
||||
}.bind(this)
|
||||
'show:tab': _.bind(this.showTab, this)
|
||||
},
|
||||
'ViewTab': {
|
||||
'statusbar:hide': _.bind(me.onChangeCompactView, me)
|
||||
'statusbar:hide': _.bind(me.onChangeCompactView, me),
|
||||
'statusbar:setcompact': _.bind(me.onChangeViewMode, me)
|
||||
}
|
||||
});
|
||||
this._state = {
|
||||
zoom_type: undefined,
|
||||
zoom_percent: undefined
|
||||
};
|
||||
},
|
||||
|
||||
events: function() {
|
||||
return {
|
||||
'click #btn-zoom-down': _.bind(this.zoomDocument,this,'down'),
|
||||
'click #btn-zoom-up': _.bind(this.zoomDocument,this,'up'),
|
||||
'click #btn-zoom-topage': _.bind(this.onBtnZoomTo, this, 'topage'),
|
||||
'click #btn-zoom-towidth': _.bind(this.onBtnZoomTo, this, 'towidth')
|
||||
'click #status-btn-zoomdown': _.bind(this.zoomDocument,this,'down'),
|
||||
'click #status-btn-zoomup': _.bind(this.zoomDocument,this,'up'),
|
||||
'click .cnt-zoom': _.bind(this.onZoomShow, this)
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
onLaunch: function() {
|
||||
this.statusbar = this.createView('Statusbar', {
|
||||
// storeUsers: this.getApplication().getCollection('Common.Collections.Users')
|
||||
});
|
||||
this.statusbar = this.createView('Statusbar').render();
|
||||
this.statusbar.$el.css('z-index', 10);
|
||||
this.statusbar.labelZoom.css('min-width', 80);
|
||||
this.statusbar.labelZoom.text(Common.Utils.String.format(this.zoomText, 100));
|
||||
this.statusbar.btnZoomToPage.on('click', _.bind(this.onBtnZoomTo, this, 'topage'));
|
||||
this.statusbar.btnZoomToWidth.on('click', _.bind(this.onBtnZoomTo, this, 'towidth'));
|
||||
this.statusbar.zoomMenu.on('item:click', _.bind(this.menuZoomClick, this));
|
||||
|
||||
var me = this;
|
||||
Common.NotificationCenter.on('app:face', function (cfg) {
|
||||
me.statusbar.render(cfg);
|
||||
me.statusbar.$el.css('z-index', 1);
|
||||
|
||||
var lblzoom = $('.statusbar #label-zoom');
|
||||
lblzoom.css('min-width', 80);
|
||||
lblzoom.text(Common.Utils.String.format(me.zoomText, 100));
|
||||
});
|
||||
Common.NotificationCenter.on('app:ready', me.onAppReady.bind(me));
|
||||
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
|
||||
},
|
||||
|
||||
onAppReady: function (config) {
|
||||
@ -102,6 +98,7 @@ define([
|
||||
resolve();
|
||||
})).then(function () {
|
||||
me.bindViewEvents(me.statusbar, me.events);
|
||||
me.statusbar.update();
|
||||
});
|
||||
},
|
||||
|
||||
@ -120,27 +117,25 @@ define([
|
||||
setApi: function(api) {
|
||||
this.api = api;
|
||||
this.api.asc_registerCallback('asc_onZoomChange', _.bind(this._onZoomChange, this));
|
||||
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onApiDisconnect, this));
|
||||
Common.NotificationCenter.on('api:disconnect', _.bind(this.onApiDisconnect, this));
|
||||
this.api.asc_registerCallback('asc_onCurrentPage', _.bind(this.onCurrentPage, this));
|
||||
|
||||
this.statusbar.setApi(api);
|
||||
},
|
||||
|
||||
onBtnZoomTo: function(d, e) {
|
||||
var _btn, _func;
|
||||
if ( d == 'topage' ) {
|
||||
_btn = 'btnZoomToPage';
|
||||
_func = 'zoomFitToPage';
|
||||
} else {
|
||||
_btn = 'btnZoomToWidth';
|
||||
_func = 'zoomFitToWidth';
|
||||
}
|
||||
|
||||
if ( !this.statusbar[ _btn ].pressed )
|
||||
onBtnZoomTo: function(d, b, e) {
|
||||
this._state.zoom_type = undefined;
|
||||
this._state.zoom_percent = undefined;
|
||||
if (!b.pressed)
|
||||
this.api.zoomCustomMode(); else
|
||||
this.api[ _func ]();
|
||||
|
||||
this.api[d=='topage'?'zoomFitToPage':'zoomFitToWidth']();
|
||||
Common.NotificationCenter.trigger('edit:complete', this.statusbar);
|
||||
},
|
||||
|
||||
zoomDocument: function(d,e) {
|
||||
this._state.zoom_type = undefined;
|
||||
this._state.zoom_percent = undefined;
|
||||
switch (d) {
|
||||
case 'up': this.api.zoomIn(); break;
|
||||
case 'down': this.api.zoomOut(); break;
|
||||
@ -148,18 +143,37 @@ define([
|
||||
Common.NotificationCenter.trigger('edit:complete', this.statusbar);
|
||||
},
|
||||
|
||||
menuZoomClick: function(menu, item) {
|
||||
this._state.zoom_type = undefined;
|
||||
this._state.zoom_percent = undefined;
|
||||
this.api.zoom(item.value);
|
||||
Common.NotificationCenter.trigger('edit:complete', this.statusbar);
|
||||
},
|
||||
|
||||
onZoomShow: function(e){
|
||||
if (e.target.classList.contains('disabled')) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* api events
|
||||
* */
|
||||
|
||||
_onZoomChange: function(percent, type) {
|
||||
this.statusbar.btnZoomToPage.toggle(type == 2, true);
|
||||
this.statusbar.btnZoomToWidth.toggle(type == 1, true);
|
||||
$('.statusbar #label-zoom').text(Common.Utils.String.format(this.zoomText, percent));
|
||||
if(!this._isDocReady) return;
|
||||
var value = type == 2 ? -1 : (type == 1 ? -2 : percent);
|
||||
Common.localStorage.setItem('ve-last-zoom', value);
|
||||
Common.Utils.InternalSettings.set('ve-last-zoom', value);
|
||||
if (this._state.zoom_type !== type) {
|
||||
this.statusbar.btnZoomToPage.toggle(type == 2, true);
|
||||
this.statusbar.btnZoomToWidth.toggle(type == 1, true);
|
||||
this._state.zoom_type = type;
|
||||
}
|
||||
if (this._state.zoom_percent !== percent) {
|
||||
this.statusbar.labelZoom.text(Common.Utils.String.format(this.zoomText, percent));
|
||||
this._state.zoom_percent = percent;
|
||||
if(!this._isDocReady ) return;
|
||||
var value = this._state.zoom_type !== undefined ? this._state.zoom_type == 2 ? -1 : (this._state.zoom_type == 1 ? -2 : percent) : percent;
|
||||
Common.localStorage.setItem('ve-last-zoom', value);
|
||||
Common.Utils.InternalSettings.set('ve-last-zoom', value);
|
||||
}
|
||||
},
|
||||
|
||||
setStatusCaption: function(text, force, delay, callback) {
|
||||
@ -178,6 +192,26 @@ define([
|
||||
|
||||
createDelayedElements: function() {
|
||||
this.statusbar.$el.css('z-index', '');
|
||||
if (!Common.UI.LayoutManager.isElementVisible('statusBar-actionStatus')) {
|
||||
this.statusbar.boxAction.addClass('hide');
|
||||
}
|
||||
|
||||
Common.NotificationCenter.on('window:resize', _.bind(this.onWindowResize, this));
|
||||
},
|
||||
|
||||
onWindowResize: function(area) {
|
||||
this.statusbar.updateTabbarBorders();
|
||||
this.statusbar.onTabInvisible(undefined, this.statusbar.tabbar.checkInvisible(true));
|
||||
},
|
||||
|
||||
showTab: function (sheetIndex) {
|
||||
if (this.api && this._state.pageCurrent !== sheetIndex) {
|
||||
this.api.goToPage(sheetIndex);
|
||||
}
|
||||
var me = this;
|
||||
setTimeout(function(){
|
||||
me.statusbar.sheetListMenu.hide();
|
||||
}, 1);
|
||||
},
|
||||
|
||||
showDisconnectTip: function () {
|
||||
@ -208,6 +242,36 @@ define([
|
||||
this.disconnectTip = null;
|
||||
},
|
||||
|
||||
onApiDisconnect: function() {
|
||||
this.SetDisabled(true);
|
||||
},
|
||||
|
||||
SetDisabled: function(state) {
|
||||
this.statusbar.setMode({isDisconnected: state});
|
||||
this.statusbar.update();
|
||||
},
|
||||
|
||||
onCurrentPage: function (index) {
|
||||
this.statusbar.sheetListMenu.hide();
|
||||
if (this.statusbar.sheetListMenu.items[index]) {
|
||||
this.statusbar.sheetListMenu.clearAll();
|
||||
this.statusbar.sheetListMenu.items[index].setChecked(true);
|
||||
}
|
||||
var tab = _.findWhere(this.statusbar.tabbar.tabs, {sheetindex: index});
|
||||
if (tab) {
|
||||
this.statusbar.tabbar.setActive(tab);
|
||||
}
|
||||
},
|
||||
|
||||
onChangeViewMode: function(item, compact, suppressEvent) {
|
||||
this.statusbar.fireEvent('view:compact', [this.statusbar, compact]);
|
||||
!suppressEvent && Common.localStorage.setBool('ve-compact-statusbar', compact);
|
||||
Common.NotificationCenter.trigger('layout:changed', 'status');
|
||||
this.statusbar.onChangeCompact(compact);
|
||||
|
||||
Common.NotificationCenter.trigger('edit:complete', this.statusbar);
|
||||
},
|
||||
|
||||
zoomText : 'Zoom {0}%',
|
||||
textDisconnect: '<b>Connection is lost</b><br>Trying to connect. Please check connection settings.'
|
||||
}, VE.Controllers.Statusbar || {}));
|
||||
|
||||
@ -1,21 +1,34 @@
|
||||
|
||||
<div class="statusbar" style="display:table;">
|
||||
<div class="status-group dropup">
|
||||
<div class="statusbar">
|
||||
<div id="status-tabs-scroll" class="status-group" dir="ltr">
|
||||
<button id="status-btn-tabback" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="G"><i class="icon toolbar__icon btn-previtem"> </i></button>
|
||||
<button id="status-btn-tabnext" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="J"><i class="icon toolbar__icon btn-nextitem"> </i></button>
|
||||
</div>
|
||||
<div class="separator short space"></div>
|
||||
<div class="status-group" style="width:100%; text-align:center;">
|
||||
<label id="label-action" class="status-label margin-top-large" data-layout-name="statusBar-actionStatus"></label>
|
||||
<div id="status-addtabs-box" class="status-group">
|
||||
<div class="cnt-tabslist">
|
||||
<button id="status-btn-tabslist" type="button" class="btn small btn-toolbar dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="N"><i class="icon toolbar__icon btn-sheet-list"> </i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-group" style="">
|
||||
<div class="separator short hide-select-tools"></div>
|
||||
<button id="btn-zoom-topage" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtoslide"> </i></button>
|
||||
<button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth"> </i></button>
|
||||
<button id="btn-zoom-down" type="button" class="btn small btn-toolbar margin-top-small"><i class="icon toolbar__icon btn-zoomdown"> </i></button>
|
||||
<div id="status-zoom-box" class="status-group">
|
||||
<div class="separator short"></div>
|
||||
<button id="status-btn-zoom-topage" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtoslide"> </i></button>
|
||||
<button id="status-btn-zoom-towidth" type="button" class="btn small btn-toolbar" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth"> </i></button>
|
||||
<button id="status-btn-zoomdown" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown"> </i></button>
|
||||
<div class="cnt-zoom">
|
||||
<div class="dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top" role="button" aria-haspopup="menu" aria-expanded="false">
|
||||
<label id="label-zoom" class="status-label">Zoom 100%</label>
|
||||
<label id="status-label-zoom" class="status-label">Zoom 100%</label>
|
||||
</div>
|
||||
</div>
|
||||
<button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><i class="icon toolbar__icon btn-zoomup"> </i></button>
|
||||
<button id="status-btn-zoomup" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup"> </i></button>
|
||||
</div>
|
||||
<div id="status-sheets-bar-box">
|
||||
<div id="status-sheets-bar" class="status-group">
|
||||
</div>
|
||||
</div>
|
||||
<div id="status-number-of-sheet">
|
||||
<label id="label-sheets" class="status-label"></label>
|
||||
</div>
|
||||
<div id="status-action">
|
||||
<div class="separator short"></div>
|
||||
<label id="label-action" class="status-label"></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -36,18 +36,26 @@ define([
|
||||
'underscore',
|
||||
'backbone',
|
||||
'tip',
|
||||
'common/main/lib/component/TabBar',
|
||||
'common/main/lib/component/Menu',
|
||||
'common/main/lib/component/Window'
|
||||
],
|
||||
function(template, $, _, Backbone){
|
||||
'use strict';
|
||||
|
||||
function _onCurrentPage(number){
|
||||
this._state.pageCurrent = number;
|
||||
}
|
||||
|
||||
function _onAppReady(config) {
|
||||
var me = this;
|
||||
me.btnScrollBack.updateHint(me.tipPrev);
|
||||
me.btnScrollNext.updateHint(me.tipNext);
|
||||
me.btnZoomToPage.updateHint(me.tipFitPage);
|
||||
me.btnZoomToWidth.updateHint(me.tipFitWidth);
|
||||
me.btnZoomDown.updateHint(me.tipZoomOut + Common.Utils.String.platformKey('Ctrl+-'));
|
||||
me.btnZoomUp.updateHint(me.tipZoomIn + Common.Utils.String.platformKey('Ctrl++'));
|
||||
me.cntSheetList.updateHint(me.tipListOfSheets);
|
||||
|
||||
me.cntZoom.updateHint(me.tipZoomFactor);
|
||||
me.cntZoom.cmpEl.on({
|
||||
@ -63,53 +71,124 @@ define([
|
||||
}
|
||||
});
|
||||
|
||||
me.zoomMenu.on('item:click', function(menu, item) {
|
||||
me.fireEvent('zoom:value', [item.value]);
|
||||
me.tabbar.on({
|
||||
'tab:invisible' : _.bind(me.onTabInvisible, me),
|
||||
'tab:changed' : _.bind(me.onSheetChanged, me)
|
||||
});
|
||||
}
|
||||
|
||||
VE.Views.Statusbar = Backbone.View.extend(_.extend({
|
||||
VE.Views.Statusbar = Common.UI.BaseView.extend(_.extend({
|
||||
el: '#statusbar',
|
||||
template: _.template(template),
|
||||
|
||||
events: {
|
||||
events: function() {
|
||||
return {
|
||||
'click #status-btn-tabback': _.bind(this.onBtnTabScroll, this, 'backward'),
|
||||
'click #status-btn-tabnext': _.bind(this.onBtnTabScroll, this, 'forward')
|
||||
};
|
||||
},
|
||||
|
||||
api: undefined,
|
||||
|
||||
initialize: function (options) {
|
||||
_.extend(this, options);
|
||||
this._state = {
|
||||
};
|
||||
this._state = { pageCurrent: 0 };
|
||||
this._isDisabled = false;
|
||||
|
||||
var promise = new Promise(function (accept, reject) {
|
||||
accept();
|
||||
});
|
||||
|
||||
Common.NotificationCenter.on('app:ready', function(mode) {
|
||||
promise.then( _onAppReady.bind(this, mode) );
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
render: function(config) {
|
||||
var me = this;
|
||||
this.$layout = $(this.template({}));
|
||||
$(this.el).html(this.template({
|
||||
scope: this
|
||||
}));
|
||||
|
||||
this.cntStatusbar = $('.statusbar', this.el);
|
||||
this.isCompact = Common.localStorage.getBool('ve-compact-statusbar', true);
|
||||
if (!this.isCompact) {
|
||||
this.cntStatusbar.addClass('no-compact');
|
||||
}
|
||||
|
||||
this.editMode = false;
|
||||
this.isRtlSheet = false;
|
||||
this.tabBarDefPosition = 106;
|
||||
|
||||
this.btnZoomDown = new Common.UI.Button({
|
||||
el: $('#status-btn-zoomdown',this.el),
|
||||
hintAnchor: 'top'
|
||||
});
|
||||
|
||||
this.btnZoomUp = new Common.UI.Button({
|
||||
el: $('#status-btn-zoomup',this.el),
|
||||
hintAnchor: 'top-right'
|
||||
});
|
||||
|
||||
this.btnZoomToPage = new Common.UI.Button({
|
||||
el: $('#status-btn-zoom-topage',this.el),
|
||||
hintAnchor: 'top',
|
||||
toggleGroup: 'status-zoom',
|
||||
enableToggle: true
|
||||
});
|
||||
|
||||
this.btnZoomToWidth = new Common.UI.Button({
|
||||
el: $('#status-btn-zoom-towidth',this.el),
|
||||
hintAnchor: 'top',
|
||||
toggleGroup: 'status-zoom',
|
||||
enableToggle: true
|
||||
});
|
||||
|
||||
this.btnScrollBack = new Common.UI.Button({
|
||||
el: $('#status-btn-tabback',this.el),
|
||||
disabled: true,
|
||||
hintAnchor: 'top'
|
||||
});
|
||||
|
||||
this.btnScrollNext = new Common.UI.Button({
|
||||
el: $('#status-btn-tabnext',this.el),
|
||||
disabled: true,
|
||||
hintAnchor: 'top'
|
||||
});
|
||||
|
||||
this.cntSheetList = new Common.UI.Button({
|
||||
el: $('.cnt-tabslist', this.el),
|
||||
hintAnchor: 'top'
|
||||
});
|
||||
this.btnSheetList = $('#status-btn-tabslist',this.$el);
|
||||
this.sheetListMenu = new Common.UI.Menu({
|
||||
style: 'margin-top:-3px;',
|
||||
menuAlign: 'bl-tl',
|
||||
maxHeight: 300
|
||||
});
|
||||
this.sheetListMenu.on('item:click', function(obj,item) {
|
||||
me.fireEvent('show:tab', [item.value]);
|
||||
});
|
||||
this.cntSheetList.cmpEl.on({
|
||||
'show.bs.dropdown': function () {
|
||||
_.defer(function(){
|
||||
me.cntSheetList.cmpEl.find('ul').focus();
|
||||
}, 100);
|
||||
},
|
||||
'hide.bs.dropdown': function () {
|
||||
_.defer(function(){
|
||||
me.api.asc_enableKeyEvents(true);
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
this.sheetListMenu.render($('.cnt-tabslist',this.el));
|
||||
this.sheetListMenu.cmpEl.attr({tabindex: -1});
|
||||
|
||||
this.cntZoom = new Common.UI.Button({
|
||||
el: $('.cnt-zoom',this.el),
|
||||
hintAnchor: 'top'
|
||||
});
|
||||
|
||||
this.btnZoomDown = new Common.UI.Button({
|
||||
hintAnchor: 'top'
|
||||
});
|
||||
|
||||
this.btnZoomUp = new Common.UI.Button({
|
||||
hintAnchor: 'top-right'
|
||||
});
|
||||
|
||||
this.zoomMenu = new Common.UI.Menu({
|
||||
style: 'margin-top:-5px;',
|
||||
menuAlign: 'bl-tl',
|
||||
@ -126,36 +205,29 @@ define([
|
||||
{ caption: "500%", value: 500 }
|
||||
]
|
||||
});
|
||||
this.zoomMenu.render($('.cnt-zoom',this.el));
|
||||
this.zoomMenu.cmpEl.attr({tabindex: -1});
|
||||
|
||||
var promise = new Promise(function (accept, reject) {
|
||||
accept();
|
||||
});
|
||||
this.labelZoom = $('#status-label-zoom',this.$el);
|
||||
|
||||
Common.NotificationCenter.on('app:ready', function(mode) {
|
||||
promise.then( _onAppReady.bind(this, mode) );
|
||||
}.bind(this));
|
||||
},
|
||||
this.tabBarBox = $('#status-sheets-bar-box', this.el);
|
||||
this.tabbar = new Common.UI.TabBar({
|
||||
el: '#status-sheets-bar',
|
||||
placement: 'bottom',
|
||||
draggable: false
|
||||
}).render();
|
||||
|
||||
render: function(config) {
|
||||
var me = this;
|
||||
this.boxZoom = $('#status-zoom-box', this.el);
|
||||
this.boxZoom.find('.separator').css('border-left-color','transparent');
|
||||
|
||||
function _btn_render(button, slot) {
|
||||
button.setElement(slot, false);
|
||||
button.render();
|
||||
}
|
||||
this.boxNumberSheets = $('#status-number-of-sheet', this.el);
|
||||
this.isCompact && this.boxNumberSheets.hide();
|
||||
this.labelNumberSheets = $('#label-sheets', this.boxNumberSheets);
|
||||
|
||||
this.fireEvent('render:before', [this.$layout]);
|
||||
this.boxAction = $('#status-action', this.el);
|
||||
this.boxAction.hide();
|
||||
this.labelAction = $('#label-action', this.boxAction);
|
||||
|
||||
_btn_render(me.btnZoomToPage, $('#btn-zoom-topage', me.$layout));
|
||||
_btn_render(me.btnZoomToWidth, $('#btn-zoom-towidth', me.$layout));
|
||||
_btn_render(me.cntZoom, $('.cnt-zoom',me.$layout));
|
||||
_btn_render(me.btnZoomDown, $('#btn-zoom-down', me.$layout));
|
||||
_btn_render(me.btnZoomUp, $('#btn-zoom-up', me.$layout));
|
||||
|
||||
me.zoomMenu.render($('.cnt-zoom',me.$layout));
|
||||
me.zoomMenu.cmpEl.attr({tabindex: -1});
|
||||
|
||||
this.$el.html(me.$layout);
|
||||
this.fireEvent('render:after', [this]);
|
||||
|
||||
return this;
|
||||
@ -165,10 +237,7 @@ define([
|
||||
this.api = api;
|
||||
|
||||
if (this.api) {
|
||||
// this.api.asc_registerCallback('asc_onCountPages', _.bind(_onCountPages, this));
|
||||
// this.api.asc_registerCallback('asc_onCurrentPage', _.bind(_onCurrentPage, this));
|
||||
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onApiCoAuthoringDisconnect, this));
|
||||
Common.NotificationCenter.on('api:disconnect', _.bind(this.onApiCoAuthoringDisconnect, this));
|
||||
this.api.asc_registerCallback('asc_onCurrentPage', _.bind(_onCurrentPage, this));
|
||||
}
|
||||
return this;
|
||||
|
||||
@ -176,6 +245,8 @@ define([
|
||||
|
||||
setMode: function(mode) {
|
||||
this.mode = mode;
|
||||
this.updateTabbarBorders();
|
||||
|
||||
},
|
||||
|
||||
setVisible: function(visible) {
|
||||
@ -188,32 +259,257 @@ define([
|
||||
return this.$el && this.$el.is(':visible');
|
||||
},
|
||||
|
||||
getStatusLabel: function() {
|
||||
return $('.statusbar #label-action');
|
||||
update: function() {
|
||||
var me = this;
|
||||
|
||||
this.tabbar.empty(true);
|
||||
this.sheetListMenu.removeAll();
|
||||
|
||||
if (this.api) {
|
||||
var wc = this.api.getCountPages(), i = -1;
|
||||
var items = [], tab;
|
||||
var sindex = this._state.pageCurrent;
|
||||
|
||||
while (++i < wc) {
|
||||
tab = {
|
||||
sheetindex : i,
|
||||
index : items.length,
|
||||
active : sindex == i,
|
||||
label : me.txtPage + i,
|
||||
isLockTheDrag : true
|
||||
};
|
||||
items.push(tab);
|
||||
}
|
||||
this.tabbar.add(items);
|
||||
|
||||
items.forEach(function(item){
|
||||
var hidden = false;//me.api.asc_isWorksheetHidden(item.sheetindex);
|
||||
me.sheetListMenu.addItem(new Common.UI.MenuItem({
|
||||
style: 'white-space: pre',
|
||||
caption: Common.Utils.String.htmlEncode(item.label),
|
||||
value: item.sheetindex,
|
||||
checkable: true,
|
||||
checked: item.active,
|
||||
hidden: hidden,
|
||||
visible: !hidden,
|
||||
textHidden: me.itemHidden,
|
||||
template: _.template([
|
||||
'<a id="<%= id %>" style="<%= style %>" tabindex="-1" type="menuitem" <% if (options.hidden) { %> data-hidden="true" <% } %>>',
|
||||
'<div class="color"></div>',
|
||||
'<span class="name"><%= caption %></span>',
|
||||
'<span class="hidden-mark"><% if (options.hidden) { %><%= options.textHidden %><% } else { %><% } %></span>',
|
||||
'</a>'
|
||||
].join(''))
|
||||
}));
|
||||
});
|
||||
|
||||
if (!_.isUndefined(this.tabBarScroll)) {
|
||||
this.tabbar.$bar.scrollLeft(this.tabBarScroll.scrollLeft);
|
||||
this.tabBarScroll = undefined;
|
||||
}
|
||||
if (!this.tabbar.isTabVisible(sindex))
|
||||
this.tabbar.setTabVisible(sindex);
|
||||
|
||||
this.updateRtlSheet();
|
||||
this.updateNumberOfSheet(sindex, wc);
|
||||
this.updateTabbarBorders();
|
||||
|
||||
me.fireEvent('sheet:changed', [me, sindex]);
|
||||
}
|
||||
},
|
||||
|
||||
showStatusMessage: function(message) {
|
||||
this.getStatusLabel().text(message);
|
||||
updateRtlSheet: function() {
|
||||
this.isRtlSheet = Common.UI.isRTL();
|
||||
this.cntStatusbar.toggleClass('rtl-sheet', this.isRtlSheet);
|
||||
this.cntStatusbar.attr({dir: this.isRtlSheet ? 'rtl' : 'ltr'});
|
||||
this.tabbar.setDirection(this.isRtlSheet);
|
||||
var dir = (this.isCompact ? this.isRtlSheet : Common.UI.isRTL()) ? 'rtl' : 'ltr';
|
||||
this.boxZoom.attr({dir: dir});
|
||||
},
|
||||
|
||||
onSheetChanged: function(o, index, tab) {
|
||||
this.api.goToPage(tab.sheetindex);
|
||||
|
||||
this.updateNumberOfSheet(tab.sheetindex, this.api.getCountPages());
|
||||
|
||||
if (this.hasTabInvisible && !this.tabbar.isTabVisible(index)) {
|
||||
this.tabbar.setTabVisible(index);
|
||||
}
|
||||
|
||||
this.updateRtlSheet();
|
||||
this.updateTabbarBorders();
|
||||
this.fireEvent('sheet:changed', [this, tab.sheetindex]);
|
||||
},
|
||||
|
||||
onTabInvisible: function(obj, opts) {
|
||||
if (this.btnScrollBack.isDisabled() !== (!opts.first)) {
|
||||
this.btnScrollBack.setDisabled(!opts.first);
|
||||
}
|
||||
if (this.btnScrollNext.isDisabled() !== (!opts.last)) {
|
||||
this.btnScrollNext.setDisabled(!opts.last);
|
||||
}
|
||||
this.hasTabInvisible = opts.first || opts.last;
|
||||
},
|
||||
|
||||
onBtnTabScroll: function(action, e) {
|
||||
this.tabbar.setTabVisible(action);
|
||||
},
|
||||
|
||||
updateTabbarBorders: function() {
|
||||
var visible = false;
|
||||
var right = parseFloat(this.boxZoom.css('width'));
|
||||
if (this.isCompact) {
|
||||
var tabsWidth = this.tabbar.getWidth();
|
||||
if (this.boxAction.is(':visible')) {
|
||||
var actionWidth = this.actionWidth || 140;
|
||||
if (Common.Utils.innerWidth() - right - this.tabBarDefPosition - actionWidth - tabsWidth > 0) { // docWidth - right - left - this.boxAction.width
|
||||
var left = tabsWidth + this.tabBarDefPosition;
|
||||
if (this.isRtlSheet) {
|
||||
this.boxAction.css({'left': right + 'px', 'right': left + 'px', 'width': 'auto'});
|
||||
this.boxAction.find('.separator').css('border-right-color', 'transparent');
|
||||
} else {
|
||||
this.boxAction.css({'right': right + 'px', 'left': left + 'px', 'width': 'auto'});
|
||||
this.boxAction.find('.separator').css('border-left-color', 'transparent');
|
||||
}
|
||||
} else {
|
||||
if (this.isRtlSheet) {
|
||||
this.boxAction.css({'left': right + 'px', 'right': 'auto', 'width': actionWidth + 'px'});
|
||||
this.boxAction.find('.separator').css('border-right-color', '');
|
||||
} else {
|
||||
this.boxAction.css({'right': right + 'px', 'left': 'auto', 'width': actionWidth + 'px'});
|
||||
this.boxAction.find('.separator').css('border-left-color', '');
|
||||
}
|
||||
visible = true;
|
||||
}
|
||||
right += parseInt(this.boxAction.css('width'));
|
||||
} else if (Common.Utils.innerWidth() - right - this.tabBarDefPosition - tabsWidth <=0)
|
||||
visible = true;
|
||||
|
||||
this.boxZoom.css({'top': '0px', 'bottom': 'auto'});
|
||||
if (this.isRtlSheet) {
|
||||
this.tabBarBox.css('left', right + 'px');
|
||||
this.tabBarBox.css('right', this.tabBarDefPosition + 'px');
|
||||
this.boxZoom.find('.separator').css('border-right-color', visible ? '' : 'transparent');
|
||||
} else {
|
||||
this.tabBarBox.css('left', this.tabBarDefPosition + 'px');
|
||||
this.tabBarBox.css('right', right + 'px');
|
||||
this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent');
|
||||
}
|
||||
} else {
|
||||
if (this.boxAction.is(':visible')) {
|
||||
if (Common.UI.isRTL()) {
|
||||
this.boxAction.css({'left': right + 'px', 'right': '135px', 'width': 'auto'});
|
||||
this.boxAction.find('.separator').css('border-right-color', 'transparent');
|
||||
} else {
|
||||
this.boxAction.css({'right': right + 'px', 'left': '135px', 'width': 'auto'});
|
||||
this.boxAction.find('.separator').css('border-left-color', 'transparent');
|
||||
}
|
||||
}
|
||||
this.boxZoom.css({'top': 'auto', 'bottom': '0px'});
|
||||
this.boxZoom.find('.separator').css(Common.UI.isRTL() ? 'border-right-color' : 'border-left-color', visible ? '' : 'transparent');
|
||||
if (this.isRtlSheet) {
|
||||
this.tabBarBox.css('left', '0px');
|
||||
this.tabBarBox.css('right', this.tabBarDefPosition + 'px');
|
||||
} else {
|
||||
this.tabBarBox.css('left', this.tabBarDefPosition + 'px');
|
||||
this.tabBarBox.css('right', '0px');
|
||||
}
|
||||
}
|
||||
|
||||
if (this.statusMessage) {
|
||||
var status = this.getStatusMessage(this.statusMessage);
|
||||
if (status !== this.boxAction.text().trim()) {
|
||||
this.labelAction.text(status);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
changeViewMode: function (mode) {
|
||||
var edit = mode.isEdit,
|
||||
styleLeft = this.isRtlSheet ? 'right' : 'left';
|
||||
if (edit) {
|
||||
this.tabBarBox.css(styleLeft, this.tabBarDefPosition + 'px');
|
||||
} else {
|
||||
this.tabBarBox.css(styleLeft, '');
|
||||
}
|
||||
|
||||
this.tabbar.options.draggable = edit;
|
||||
this.editMode = edit;
|
||||
},
|
||||
|
||||
onChangeCompact: function (compact) {
|
||||
this.isCompact = compact;
|
||||
if (compact) {
|
||||
this.cntStatusbar.removeClass('no-compact');
|
||||
this.boxNumberSheets.hide();
|
||||
//this.boxAction.hide();
|
||||
} else {
|
||||
this.cntStatusbar.addClass('no-compact');
|
||||
this.boxNumberSheets.show();
|
||||
//this.boxAction.show();
|
||||
}
|
||||
this.updateRtlSheet();
|
||||
this.updateTabbarBorders();
|
||||
(this.tabbar.getCount()>0) && this.onTabInvisible(undefined, this.tabbar.checkInvisible(true));
|
||||
},
|
||||
|
||||
updateNumberOfSheet: function (active, count) {
|
||||
this.labelNumberSheets.text(
|
||||
Common.Utils.String.format(this.sheetIndexText, active + 1, count)
|
||||
);
|
||||
},
|
||||
|
||||
getStatusMessage: function (message) {
|
||||
var _message;
|
||||
if (this.isCompact && message.length > 23 && this.boxAction.width() < 180) {
|
||||
_message = message.substr(0, 23).trim() + '...'
|
||||
} else {
|
||||
_message = message;
|
||||
}
|
||||
return _message;
|
||||
},
|
||||
|
||||
getStatusLabel: function() {
|
||||
return this.labelAction;
|
||||
},
|
||||
|
||||
showStatusMessage: function(message, callback) {
|
||||
this.statusMessage = message;
|
||||
if (!this.actionWidth) {
|
||||
this.actionWidth = message.length > 22 ? 166 : 140;
|
||||
}
|
||||
this.labelAction.text(this.getStatusMessage(message));
|
||||
if (!this.boxAction.is(':visible')) {
|
||||
this.boxAction.show();
|
||||
}
|
||||
var me = this;
|
||||
_.delay(function(){
|
||||
me.updateTabbarBorders();
|
||||
me.onTabInvisible(undefined, me.tabbar.checkInvisible(true));
|
||||
callback && callback();
|
||||
},30);
|
||||
},
|
||||
|
||||
clearStatusMessage: function() {
|
||||
this.getStatusLabel().text('');
|
||||
this.labelAction.text('');
|
||||
this.statusMessage = undefined;
|
||||
},
|
||||
|
||||
SetDisabled: function(disable) {
|
||||
this._isDisabled = disable;
|
||||
},
|
||||
|
||||
onApiCoAuthoringDisconnect: function() {
|
||||
this.setMode({isDisconnected:true});
|
||||
this.SetDisabled(true);
|
||||
},
|
||||
|
||||
tipFitPage : 'Fit to Page',
|
||||
tipFitWidth : 'Fit to Width',
|
||||
tipZoomIn : 'Zoom In',
|
||||
tipZoomOut : 'Zoom Out',
|
||||
tipZoomFactor : 'Magnification',
|
||||
txtPage : 'Page',
|
||||
sheetIndexText : 'Page {0} of {1}',
|
||||
tipPrev : 'Previous Page',
|
||||
tipNext : 'Next Page',
|
||||
tipListOfSheets : 'List of Page',
|
||||
|
||||
}, VE.Views.Statusbar || {}));
|
||||
}
|
||||
);
|
||||
@ -35,6 +35,7 @@
|
||||
@import "../../../../common/main/resources/mods/less/dropdowns.less";
|
||||
@import "../../../../common/main/resources/mods/less/button-groups.less";
|
||||
@import "../../../../common/main/resources/mods/less/input-groups.less";
|
||||
@import "../../../../common/main/resources/mods/less/navs";
|
||||
|
||||
// Components w/ JavaScript
|
||||
@import "../../../../common/main/resources/mods/less/tooltip.less";
|
||||
@ -73,6 +74,7 @@
|
||||
@import "../../../../common/main/resources/less/tooltip.less";
|
||||
@import "../../../../common/main/resources/less/scroller.less";
|
||||
@import "../../../../common/main/resources/less/synchronize-tip.less";
|
||||
@import "../../../../common/main/resources/less/tabbar.less";
|
||||
@import "../../../../common/main/resources/less/common.less";
|
||||
@import "../../../../common/main/resources/less/switcher.less";
|
||||
@import "../../../../common/main/resources/less/opendialog.less";
|
||||
|
||||
@ -1,75 +1,355 @@
|
||||
.statusbar {
|
||||
display: table;
|
||||
padding: 2px;
|
||||
padding: 0 2px 0;
|
||||
z-index: 500;
|
||||
|
||||
.status-label {
|
||||
position: relative;
|
||||
.margin-left-sheet(@value) {
|
||||
margin-left: @value;
|
||||
margin-right: 0;
|
||||
|
||||
.rtl-sheet& {
|
||||
margin-left: 0;
|
||||
margin-right: @value;
|
||||
}
|
||||
}
|
||||
|
||||
#label-pages {
|
||||
.margin-left(40px);
|
||||
.margin-right-sheet(@value) {
|
||||
margin-right: @value;
|
||||
margin-left: 0;
|
||||
|
||||
.rtl-sheet& {
|
||||
margin-right: 0;
|
||||
margin-left: @value;
|
||||
}
|
||||
}
|
||||
|
||||
#btn-zoom-up {
|
||||
.margin-right(40px);
|
||||
.padding-x-sheet(@left, @right) {
|
||||
padding-left: @left;
|
||||
padding-right: @right;
|
||||
|
||||
.rtl-sheet& {
|
||||
padding-left: @right;
|
||||
padding-right: @left;
|
||||
}
|
||||
}
|
||||
|
||||
#label-pages, #label-zoom {
|
||||
cursor: pointer;
|
||||
.padding-right-sheet(@value) {
|
||||
padding-right: @value;
|
||||
padding-left: 0;
|
||||
.rtl-sheet& {
|
||||
padding-right: 0;
|
||||
padding-left: @value;
|
||||
}
|
||||
}
|
||||
|
||||
#label-zoom {
|
||||
text-align: center;
|
||||
#status-tabs-scroll {
|
||||
width: 66px;
|
||||
padding: 3px 12px 0 10px;
|
||||
height: 25px;
|
||||
float: left;
|
||||
|
||||
.rtl-sheet& {
|
||||
padding: 3px 10px 0 12px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
#btn-zoom-topage, #btn-zoom-towidth {
|
||||
.margin-right-8();
|
||||
#status-zoom-box {
|
||||
padding-top: 3px;
|
||||
|
||||
position: absolute;
|
||||
height: 25px;
|
||||
|
||||
.separator {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
#status-label-zoom {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#slot-status-btn-prev, #slot-status-btn-next {
|
||||
.margin-left-4();
|
||||
&.no-compact {
|
||||
#status-zoom-box {
|
||||
right: 0;
|
||||
.rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
#status-btn-zoomup {
|
||||
.margin-right(40px);
|
||||
}
|
||||
|
||||
#status-btn-zoomdown,
|
||||
#status-btn-zoom-towidth {
|
||||
.margin-left-10();
|
||||
}
|
||||
}
|
||||
&:not(.no-compact) {
|
||||
#status-zoom-box {
|
||||
right: 0;
|
||||
.rtl-sheet& {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
#status-btn-zoomup {
|
||||
.margin-right-sheet(40px);
|
||||
}
|
||||
#status-btn-zoomdown,
|
||||
#status-btn-zoom-towidth {
|
||||
.margin-left-sheet(10px);
|
||||
}
|
||||
#status-zoom-box,
|
||||
#status-action {
|
||||
.separator {
|
||||
border-right: none;
|
||||
border-left: @scaled-one-px-value-ie solid @border-divider-ie;
|
||||
border-left: @scaled-one-px-value solid @border-divider;
|
||||
.rtl-sheet& {
|
||||
border-left: none;
|
||||
border-right: @scaled-one-px-value-ie solid @border-divider-ie;
|
||||
border-right: @scaled-one-px-value solid @border-divider;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#status-addtabs-box {
|
||||
padding: 3px 8px 0;
|
||||
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
|
||||
border-left: @scaled-one-px-value solid @border-toolbar;
|
||||
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
|
||||
border-right: @scaled-one-px-value solid @border-toolbar;
|
||||
height: 25px;
|
||||
float: left;
|
||||
.rtl-sheet& {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
#status-sheets-bar-box {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 25px;
|
||||
left: 66px;
|
||||
right: 160px;
|
||||
|
||||
.rtl-sheet& {
|
||||
left: 160px;
|
||||
right: 66px;
|
||||
}
|
||||
}
|
||||
|
||||
#status-sheets-bar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.dropdown-menu {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
> li {
|
||||
background-color: @background-toolbar-ie;
|
||||
background-color: @background-toolbar;
|
||||
|
||||
&:first-of-type {
|
||||
span {
|
||||
border-left: none;
|
||||
.rtl-sheet& {
|
||||
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
|
||||
border-left: @scaled-one-px-value solid @border-toolbar;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
> span {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
> span {
|
||||
color: @text-secondary-ie;
|
||||
color: @text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
.border-radius(0);
|
||||
padding: 0 10px 0;
|
||||
line-height: 24px;
|
||||
background-color: @background-toolbar-additional-ie;
|
||||
background-color: @background-toolbar-additional;
|
||||
outline: none;
|
||||
border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
|
||||
border-left: @scaled-one-px-value solid @border-toolbar;
|
||||
border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
|
||||
border-right: @scaled-one-px-value solid @border-toolbar;
|
||||
border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
|
||||
border-top: @scaled-one-px-value solid @border-toolbar;
|
||||
.margin-right-sheet(-1px);
|
||||
&:hover {
|
||||
border-top-color: @border-toolbar-ie;
|
||||
border-top-color: @border-toolbar;
|
||||
border-bottom-color: @border-toolbar-ie;
|
||||
border-bottom-color: @border-toolbar;
|
||||
color: @text-normal-ie;
|
||||
color: @text-normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
> span {
|
||||
border-bottom-color: @background-toolbar-ie;
|
||||
border-bottom-color: @background-toolbar;
|
||||
background-color: @background-toolbar-ie;
|
||||
background-color: @background-toolbar;
|
||||
outline: none;
|
||||
|
||||
box-shadow: 0px 4px 0 #49795d inset;
|
||||
border-top-width: 0;
|
||||
padding-top: 1px;
|
||||
.font-weight-bold();
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
> span {
|
||||
border-bottom-color: @highlight-header-button-hover-ie;
|
||||
border-bottom-color: @highlight-header-button-hover;
|
||||
background-color: @background-normal-ie;
|
||||
background-color: @background-normal;
|
||||
box-shadow: 0px 4px 0 #49795d inset;
|
||||
color: @text-normal-ie;
|
||||
color: @text-normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: @component-disabled-opacity-ie;
|
||||
opacity: @component-disabled-opacity;
|
||||
|
||||
> span {
|
||||
cursor: default;
|
||||
color: @text-secondary-ie;
|
||||
color: @text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
&.separator-item {
|
||||
margin-top: 1px;
|
||||
.margin-left-sheet(20px);
|
||||
width: @scaled-one-px-value-ie;
|
||||
width: @scaled-one-px-value;
|
||||
> span {
|
||||
display: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: @scaled-one-px-value-ie;
|
||||
width: @scaled-one-px-value;
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#status-number-of-sheet , #status-action {
|
||||
position: absolute;
|
||||
height: 25px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.status-label {
|
||||
.font-weight-bold();
|
||||
color: @text-normal;
|
||||
margin-top: 6px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#status-number-of-sheet {
|
||||
width: 135px;
|
||||
left: 0;
|
||||
.rtl & {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-compact {
|
||||
#status-tabs-scroll, #status-sheets-bar-box, #status-addtabs-box {
|
||||
height: 26px;
|
||||
border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
|
||||
border-bottom: @scaled-one-px-value solid @border-toolbar;
|
||||
}
|
||||
}
|
||||
|
||||
.status-group {
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
&.dropup {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.status-label.margin-top-large {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
button.margin-top-small,
|
||||
.margin-top-small > button,
|
||||
.margin-top-small > .btn-group {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0px 6px;
|
||||
|
||||
&.short {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
&.space {
|
||||
margin: 0px 2px;
|
||||
border: none;
|
||||
.cnt-tabslist {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
.dropdown-menu {
|
||||
min-width: 112px;
|
||||
li {
|
||||
.text-align-left();
|
||||
a {
|
||||
position: relative;
|
||||
.padding-x(26px, 20px);
|
||||
.color {
|
||||
height: 21px;
|
||||
width: 4px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
.rtl & {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
.float-left();
|
||||
}
|
||||
}
|
||||
.hidden-mark {
|
||||
.margin-left-12();
|
||||
font-style: italic;
|
||||
color: @text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cnt-zoom {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: 4px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 80px;
|
||||
.margin-left(-4px);
|
||||
|
||||
li {
|
||||
> a {
|
||||
text-align: center;
|
||||
@ -84,32 +364,21 @@
|
||||
margin-bottom: 6px;
|
||||
|
||||
li {
|
||||
text-align: left;
|
||||
.rtl & {
|
||||
text-align: right;
|
||||
}
|
||||
.text-align-left();
|
||||
}
|
||||
}
|
||||
|
||||
#status-goto-box {
|
||||
padding: 10px;
|
||||
.margin-left(40px);
|
||||
margin-bottom: 2px;
|
||||
min-width: 130px;
|
||||
|
||||
> label {
|
||||
display: inline-block;
|
||||
.margin-right-10();
|
||||
line-height:22px;
|
||||
}
|
||||
|
||||
> input[type=text] {
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
.separator {
|
||||
&.short {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-select-tools {
|
||||
display: none;
|
||||
#btn-zoom-topage, #btn-zoom-towidth {
|
||||
.margin-right-8();
|
||||
}
|
||||
}
|
||||
|
||||
.rtl-sheet .nav {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user