[SSE] Add methods and styles to change compact mode of statusbar
This commit is contained in:
JuliaSvinareva
parent
e5676c4c7c
commit
eda6510de0
|
|
@ -759,6 +759,8 @@ define([
|
|||
this.statusbar.fireEvent('view:compact', [this.statusbar, compact]);
|
||||
Common.localStorage.setBool('sse-compact-statusbar', compact);
|
||||
Common.NotificationCenter.trigger('layout:changed', 'status');
|
||||
this.statusbar.onChangeCompact(compact);
|
||||
|
||||
Common.NotificationCenter.trigger('edit:complete', this.statusbar);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
|
||||
<div class="statusbar">
|
||||
<div class="statusbar-top">
|
||||
<div id="status-tabs-scroll" class="status-group">
|
||||
<button id="status-btn-tabfirst" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="F"><i class="icon toolbar__icon btn-firstitem"> </i></button>
|
||||
<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="B"><i class="icon toolbar__icon btn-previtem"> </i></button>
|
||||
|
|
@ -24,7 +23,7 @@
|
|||
<button id="status-btn-zoomup" type="button" class="btn small btn-toolbar" style="margin-right:40px;"><i class="icon toolbar__icon btn-zoomup"> </i></button>
|
||||
</div>
|
||||
<div id="status-math-box" class="status-group">
|
||||
<div class="separator short" style="margin-right: 12px;"></div>
|
||||
<div class="separator short"></div>
|
||||
<label id="status-math-average">AVERAGE: 10</label>
|
||||
<label id="status-math-count">COUNT: 3</label>
|
||||
<label id="status-math-min">MIN: 1</label>
|
||||
|
|
@ -32,14 +31,17 @@
|
|||
<label id="status-math-sum">SUM: 5</label>
|
||||
</div>
|
||||
<div id="status-filtered-box" class="status-group">
|
||||
<div class="separator short" style="margin-right: 12px;"></div>
|
||||
<div class="separator short"></div>
|
||||
<label id="status-filtered-records"></label>
|
||||
</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">Sheet 1 of 9</label>
|
||||
</div>
|
||||
<div class="statusbar-bottom">
|
||||
<div id="status-action">
|
||||
<label id="label-action" class="status-label">All changes saved</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -79,6 +79,12 @@ define([
|
|||
scope: this
|
||||
}));
|
||||
|
||||
this.cntStatusbar = $('.statusbar', this.el);
|
||||
this.isCompact = Common.localStorage.getBool('sse-compact-statusbar', false);
|
||||
if (!this.isCompact) {
|
||||
this.cntStatusbar.addClass('no-compact');
|
||||
}
|
||||
|
||||
this.editMode = false;
|
||||
this.rangeSelectionMode = Asc.c_oAscSelectionDialogType.None;
|
||||
|
||||
|
|
@ -472,6 +478,12 @@ define([
|
|||
this.boxZoom = $('#status-zoom-box', this.el);
|
||||
this.boxZoom.find('.separator').css('border-left-color','transparent');
|
||||
|
||||
this.boxNumberSheets = $('#status-number-of-sheet', this.el);
|
||||
this.isCompact && this.boxNumberSheets.hide();
|
||||
|
||||
this.boxAction = $('#status-action', this.el);
|
||||
this.isCompact && this.boxAction.hide();
|
||||
|
||||
this.$el.append('<div id="statusbar-menu" style="width:0; height:0;"></div>');
|
||||
this.$customizeStatusBarMenu = this.$el.find('#statusbar-menu');
|
||||
this.$customizeStatusBarMenu.on({
|
||||
|
|
@ -789,19 +801,32 @@ define([
|
|||
},
|
||||
|
||||
updateTabbarBorders: function() {
|
||||
var right = parseInt(this.boxZoom.css('width')), visible = false;
|
||||
var visible = false;
|
||||
var right = parseInt(this.boxZoom.css('width'));
|
||||
if (this.boxMath.is(':visible')) {
|
||||
right += parseInt(this.boxMath.css('width'));
|
||||
this.boxMath.css({'right': right + 'px'});
|
||||
right += parseInt(this.boxMath.css('width'));
|
||||
visible = true;
|
||||
}
|
||||
|
||||
if (this.boxFiltered.is(':visible')) {
|
||||
right += parseInt(this.boxFiltered.css('width'));
|
||||
this.boxFiltered.css({'right': right + 'px'});
|
||||
right += parseInt(this.boxFiltered.css('width'));
|
||||
visible = true;
|
||||
}
|
||||
this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent');
|
||||
|
||||
this.boxZoom.find('.separator').css('border-left-color',visible?'':'transparent');
|
||||
this.tabBarBox.css('right', right + 'px');
|
||||
if (this.isCompact) {
|
||||
this.boxMath.is(':visible') && this.boxMath.css({'top': '0px', 'bottom': 'auto'});
|
||||
this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': '0px', 'bottom': 'auto'});
|
||||
this.boxZoom.css({'top': '0px', 'bottom': 'auto'});
|
||||
this.tabBarBox.css('right', right + 'px');
|
||||
} else {
|
||||
this.boxAction.css({'right': right + 'px'})
|
||||
this.boxMath.is(':visible') && this.boxMath.css({'top': 'auto', 'bottom': '0px'});
|
||||
this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': 'auto', 'bottom': '0px'});
|
||||
this.boxZoom.css({'top': 'auto', 'bottom': '0px'});
|
||||
this.tabBarBox.css('right', '0px');
|
||||
}
|
||||
},
|
||||
|
||||
updateVisibleItemsBoxMath: function () {
|
||||
|
|
@ -879,6 +904,21 @@ define([
|
|||
item.$el.find('a').blur();
|
||||
},
|
||||
|
||||
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.updateTabbarBorders();
|
||||
this.onTabInvisible(undefined, this.tabbar.checkInvisible(true));
|
||||
},
|
||||
|
||||
tipZoomIn : 'Zoom In',
|
||||
tipZoomOut : 'Zoom Out',
|
||||
tipZoomFactor : 'Magnification',
|
||||
|
|
|
|||
|
|
@ -6,18 +6,26 @@
|
|||
width: 112px;
|
||||
float: left;
|
||||
padding: 3px 12px 0 10px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
#status-zoom-box {
|
||||
width: 160px;
|
||||
float: right;
|
||||
//float: right;
|
||||
padding-top: 3px;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 25px;
|
||||
|
||||
.separator {
|
||||
margin-right: 10px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
#status-btn-zoomdown {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#status-label-zoom {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
|
@ -120,11 +128,17 @@
|
|||
|
||||
#status-math-box,
|
||||
#status-filtered-box {
|
||||
float: right;
|
||||
//float: right;
|
||||
padding-top: 6px;
|
||||
padding-right: 14px;
|
||||
|
||||
position: absolute;
|
||||
height: 25px;
|
||||
|
||||
label {
|
||||
&:first-of-type {
|
||||
padding-left: 14px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
|
@ -138,10 +152,10 @@
|
|||
#status-sheets-bar-box {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 32px;
|
||||
height: 25px;
|
||||
left: 112px;
|
||||
right: 160px;
|
||||
margin-right: 3px;
|
||||
//margin-right: 3px;
|
||||
}
|
||||
|
||||
#status-sheets-bar {
|
||||
|
|
@ -337,6 +351,36 @@
|
|||
}
|
||||
}
|
||||
|
||||
#status-number-of-sheet , #status-action {
|
||||
position: absolute;
|
||||
height: 25px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.status-label {
|
||||
font-weight: bold;
|
||||
color: @text-normal;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#status-number-of-sheet {
|
||||
width: 135px;
|
||||
}
|
||||
|
||||
#status-action {
|
||||
left: 135px;
|
||||
}
|
||||
|
||||
&.no-compact {
|
||||
#status-tabs-scroll, #status-sheets-bar-box, #status-addtabs-box {
|
||||
border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
|
||||
border-bottom: @scaled-one-px-value solid @border-toolbar;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-tpl(@top-position) {
|
||||
.btn-icon {
|
||||
background-position: 0 @top-position;
|
||||
|
|
@ -426,10 +470,6 @@
|
|||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.statusbar-top, .statusbar-bottom {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.statusbar-mask {
|
||||
|
|
|
|||
Loading…
Reference in a new issue