Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE] Add methods and styles to change compact mode of statusbar

Browse source
This commit is contained in:
JuliaSvinareva 2021-07-26 16:57:01 +03:00
parent e5676c4c7c
commit eda6510de0
4 changed files with 103 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/spreadsheeteditor/main/app/controller/Statusbar.js
View file

@ -759,6 +759,8 @@ define([
this.statusbar.fireEvent('view:compact', [this.statusbar, compact]); this.statusbar.fireEvent('view:compact', [this.statusbar, compact]);
Common.localStorage.setBool('sse-compact-statusbar', compact); Common.localStorage.setBool('sse-compact-statusbar', compact);
Common.NotificationCenter.trigger('layout:changed', 'status'); Common.NotificationCenter.trigger('layout:changed', 'status');
this.statusbar.onChangeCompact(compact);
Common.NotificationCenter.trigger('edit:complete', this.statusbar); Common.NotificationCenter.trigger('edit:complete', this.statusbar);
}, },

10
apps/spreadsheeteditor/main/app/template/StatusBar.template
View file

@ -1,6 +1,5 @@
<div class="statusbar"> <div class="statusbar">
<div class="statusbar-top">
<div id="status-tabs-scroll" class="status-group"> <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">&nbsp;</i></button> <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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</i></button> <button id="status-btn-zoomup" type="button" class="btn small btn-toolbar" style="margin-right:40px;"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
</div> </div>
<div id="status-math-box" class="status-group"> <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-average">AVERAGE: 10</label>
<label id="status-math-count">COUNT: 3</label> <label id="status-math-count">COUNT: 3</label>
<label id="status-math-min">MIN: 1</label> <label id="status-math-min">MIN: 1</label>
@ -32,14 +31,17 @@
<label id="status-math-sum">SUM: 5</label> <label id="status-math-sum">SUM: 5</label>
</div> </div>
<div id="status-filtered-box" class="status-group"> <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> <label id="status-filtered-records"></label>
</div> </div>
<div id="status-sheets-bar-box"> <div id="status-sheets-bar-box">
<div id="status-sheets-bar" class="status-group"> <div id="status-sheets-bar" class="status-group">
</div> </div>
</div> </div>
<div id="status-number-of-sheet">
<label id="label-sheets" class="status-label">Sheet 1 of 9</label>
</div> </div>
<div class="statusbar-bottom"> <div id="status-action">
<label id="label-action" class="status-label">All changes saved</label>
</div> </div>
</div> </div>

52
apps/spreadsheeteditor/main/app/view/Statusbar.js
View file

@ -79,6 +79,12 @@ define([
scope: this 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.editMode = false;
this.rangeSelectionMode = Asc.c_oAscSelectionDialogType.None; this.rangeSelectionMode = Asc.c_oAscSelectionDialogType.None;
@ -472,6 +478,12 @@ define([
this.boxZoom = $('#status-zoom-box', this.el); this.boxZoom = $('#status-zoom-box', this.el);
this.boxZoom.find('.separator').css('border-left-color','transparent'); 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.$el.append('<div id="statusbar-menu" style="width:0; height:0;"></div>');
this.$customizeStatusBarMenu = this.$el.find('#statusbar-menu'); this.$customizeStatusBarMenu = this.$el.find('#statusbar-menu');
this.$customizeStatusBarMenu.on({ this.$customizeStatusBarMenu.on({
@ -789,19 +801,32 @@ define([
}, },
updateTabbarBorders: function() { 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')) { 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; visible = true;
} }
if (this.boxFiltered.is(':visible')) { 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; visible = true;
} }
this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent');
this.boxZoom.find('.separator').css('border-left-color',visible?'':'transparent'); if (this.isCompact) {
this.tabBarBox.css('right', right + 'px'); 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 () { updateVisibleItemsBoxMath: function () {
@ -879,6 +904,21 @@ define([
item.$el.find('a').blur(); 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', tipZoomIn : 'Zoom In',
tipZoomOut : 'Zoom Out', tipZoomOut : 'Zoom Out',
tipZoomFactor : 'Magnification', tipZoomFactor : 'Magnification',

58
apps/spreadsheeteditor/main/resources/less/statusbar.less
View file

@ -6,18 +6,26 @@
width: 112px; width: 112px;
float: left; float: left;
padding: 3px 12px 0 10px; padding: 3px 12px 0 10px;
height: 25px;
} }
#status-zoom-box { #status-zoom-box {
width: 160px; width: 160px;
float: right; //float: right;
padding-top: 3px; padding-top: 3px;
position: absolute;
right: 0;
height: 25px;
.separator { .separator {
margin-right: 10px;
margin-top: -3px; margin-top: -3px;
} }
#status-btn-zoomdown {
margin-left: 10px;
}
#status-label-zoom { #status-label-zoom {
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
@ -120,11 +128,17 @@
#status-math-box, #status-math-box,
#status-filtered-box { #status-filtered-box {
float: right; //float: right;
padding-top: 6px; padding-top: 6px;
padding-right: 14px; padding-right: 14px;
position: absolute;
height: 25px;
label { label {
&:first-of-type {
padding-left: 14px;
}
&:not(:last-child) { &:not(:last-child) {
padding-right: 10px; padding-right: 10px;
} }
@ -138,10 +152,10 @@
#status-sheets-bar-box { #status-sheets-bar-box {
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
height: 32px; height: 25px;
left: 112px; left: 112px;
right: 160px; right: 160px;
margin-right: 3px; //margin-right: 3px;
} }
#status-sheets-bar { #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-tpl(@top-position) {
.btn-icon { .btn-icon {
background-position: 0 @top-position; background-position: 0 @top-position;
@ -426,10 +470,6 @@
height: 25px; height: 25px;
} }
} }
.statusbar-top, .statusbar-bottom {
height: 25px;
}
} }
.statusbar-mask { .statusbar-mask {