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

[DE] compact view for toolbar

Browse source
This commit is contained in:
Maxim Kadushkin 2017-04-06 12:34:01 +03:00
parent b388be7dca
commit c1c6ce3061
9 changed files with 59 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/common/main/lib/component/Layout.js
View file

@ -454,7 +454,7 @@ define([
style = {top: height};
panel.rely!==true && (style.height = panel.height);
panel.el.css(style);
height += this.getElementHeight(panel.el);
height += style.height || this.getElementHeight(panel.el);
}
}, this);
}

6
apps/common/main/lib/util/LocalStorage.js
View file

@ -90,6 +90,11 @@ define(['gateway'], function () {
return (value !== null && parseInt(value) != 0);
}
var _getItemExists = function (name) {
var value = _getItem(name);
return value !== null;
}
try {
var _lsAllowed = !!window.localStorage;
} catch (e) {
@ -109,6 +114,7 @@ define(['gateway'], function () {
setKeysFilter: function(value) {
_filter = value;
},
itemExists: _getItemExists,
sync: _refresh,
save: _save
};

23
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -105,7 +105,7 @@ define([
this.addListeners({
'Toolbar': {
'changecompact' : this.onChangeCompactView,
'view:compact' : this.onChangeCompactView,
'insert:break' : this.onClickPageBreak
}
});
@ -326,8 +326,9 @@ define([
},
onChangeCompactView: function(view, compact) {
Common.localStorage.setItem('de-compact-toolbar', compact ? 1 : 0);
this.toolbar.setFolded(compact);
Common.localStorage.setItem('de-compact-toolbar', compact ? 1 : 0);
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
},
@ -2730,16 +2731,6 @@ define([
this.onToolbarAfterRender(this.toolbar);
},
setToolbarFolding: function (f) {
this.toolbar.setFolded(f);
var viewport = this.getApplication().getController('Viewport').getView('Viewport');
viewport.vlayout.items[0].rely = !f;
viewport.vlayout.items[0].height = 42;
Common.NotificationCenter.trigger('layout:changed', 'toolbar');
},
onAppShowed: function (config) {
var me = this;
// if ( config.canReview )
@ -2751,13 +2742,17 @@ define([
me.toolbar.addTab(tab, $panel, 3);
}
}
if ( !Common.localStorage.itemExists("de-compact-toolbar") &&
config.customization && config.customization.compactToolbar ) {
me.onChangeCompactView(me.toolbar, true);
}
},
onAppReady: function (config) {
var me = this;
// me.setToolbarFolding(true);
if (config.canComments) {
if ( config.canComments ) {
var _btnsComment = [];
var slots = me.toolbar.$el.find('.slot-comment');
slots.each(function(index, el) {

3
apps/documenteditor/main/app/controller/Viewport.js
View file

@ -72,6 +72,9 @@ define([
'render:before' : function (toolbar) {
toolbar.setExtra('right', me.header.getPanel('right'));
toolbar.setExtra('left', me.header.getPanel('left'));
},
'view:compact' : function (toolbar, state) {
me.viewport.vlayout.panels[0].height = state ? 40 : 40+67;
}
},
'Common.Views.Header': {

1
apps/documenteditor/main/app/view/LeftMenu.js
View file

@ -259,7 +259,6 @@ define([
close: function(menu) {
if ( this.menuFile.isVisible() ) {
this.menuFile.hide();
Common.NotificationCenter.trigger('layout:changed', 'menufile');
} else {
this.btnAbout.toggle(false);

82
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -127,8 +127,8 @@ define([
optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout);
}
function setFolded(f) {
isFolded = f;
function setFolded(value) {
isFolded = value;
if ( isFolded ) {
if ( !optsFold.$bar ) optsFold.$bar = this.$el.find('.toolbar');
@ -138,13 +138,9 @@ define([
optsFold.$box.on({
mouseleave: function (e) {
optsFold.timer = setTimeout(collapseToolbar, optsFold.timeout);
console.log('mouse out');
},
mouseenter: function (e) {
clearTimeout(optsFold.timer);
console.log('mouse in');
}
});
@ -1346,15 +1342,12 @@ define([
// } else
// this.btnPageMargins.menu.items[0].setVisible(false);
var value = Common.localStorage.getItem("de-compact-toolbar");
var valueCompact = !!(value !== null && parseInt(value) == 1 || value === null && mode.customization && mode.customization.compactToolbar);
me.$el.html( me.rendererComponents(config.$dom) );
me.isCompactView = valueCompact;
this.fireEvent('render:after', [this]);
me.isCompactView = Common.localStorage.getBool("de-compact-toolbar");
/** coauthoring begin **/
value = Common.localStorage.getItem("de-hide-synch");
this.showSynchTip = !(value && parseInt(value) == 1);
@ -1391,7 +1384,9 @@ define([
}
});
me.setTab('home');
if ( me.isCompactView )
me.setFolded(true); else
me.setTab('home');
return this;
},
@ -2157,19 +2152,10 @@ define([
/**/
var mode = this.mode;
var value = Common.localStorage.getItem("de-compact-toolbar");
var valueCompact = !!(value !== null && parseInt(value) == 1 || value === null && this.mode.customization && this.mode.customization.compactToolbar);
value = Common.localStorage.getItem("de-hidden-title");
var valueTitle = (value !== null && parseInt(value) == 1);
value = Common.localStorage.getItem("de-hidden-status");
var valueStatus = (value !== null && parseInt(value) == 1);
value = Common.localStorage.getItem("de-hidden-rulers");
var valueRulers = (value !== null && parseInt(value) == 1);
this.mnuitemCompactToolbar.setChecked(valueCompact, true);
// value = Common.localStorage.getItem("de-compact-toolbar");
// var valueCompact = !!(value !== null && parseInt(value) == 1 || value === null && this.mode.customization && this.mode.customization.compactToolbar);
this.mnuitemCompactToolbar.setChecked(this.isCompactView, true);
this.mnuitemCompactToolbar.on('toggle', _.bind(this.changeViewMode, this));
this.mnuitemHideTitleBar.setChecked(valueTitle, true);
@ -2294,53 +2280,7 @@ define([
},
changeViewMode: function (item, compact) {
var me = this,
toolbarFull = $('#id-toolbar-full'),
toolbarShort = $('#id-toolbar-short');
me.isCompactView = compact;
if (toolbarFull && toolbarShort) {
if (compact) {
toolbarShort.css({
display: 'table'
});
toolbarFull.css({
display: 'none'
});
toolbarShort.parent().css({
height: '41px'
});
this.rendererComponents('short');
} else {
toolbarShort.css({
display: 'none'
});
toolbarFull.css({
display: 'table'
});
toolbarShort.parent().css({
height: '67px'
});
this.rendererComponents('full');
// layout styles
_.defer(function () {
var listStylesVisible = (me.listStyles.rendered);
if (me.listStyles.menuPicker.store.length > 0 && listStylesVisible) {
me.listStyles.fillComboView(me.listStyles.menuPicker.getSelectedRec(), true);
}
if (me.btnInsertText.rendered)
DE.getController('Toolbar').fillTextArt();
if (me.btnInsertEquation.rendered)
DE.getController('Toolbar').fillEquations();
}, 100);
}
this.fireEvent('changecompact', [this, compact]);
}
this.fireEvent('view:compact', [this, compact]);
},
onSendThemeColorSchemes: function (schemas) {

3
apps/documenteditor/main/app/view/Viewport.js
View file

@ -84,7 +84,8 @@ define([
box: $container,
items: [{
el: $container.find(' > .layout-item#toolbar'),
rely: true
// rely: true
height: Common.localStorage.getBool('de-compact-toolbar') ? 40 : 40+67
}, {
el: $container.find(' > .layout-item.middle'),
stretch: true

1
apps/documenteditor/main/resources/less/filemenu.less
View file

@ -5,7 +5,6 @@
bottom: 0;
left: 0;
padding: 0;
border-top: 1px solid @gray-dark;
> div {
height: 100%;

31
apps/documenteditor/main/resources/less/toolbar.less
View file

@ -7,7 +7,8 @@
}
.toolbar {
//overflow: hidden;
position: relative;
z-index: 101;
&:not(.folded) {
height: @height-tabs + @height-controls;
@ -16,15 +17,28 @@
&.folded {
height: @height-tabs;
transition: height .2s;
overflow: hidden;
&.expanded {
height: @height-tabs + @height-controls;
overflow: visible;
}
&:not(.expanded) {
.marker {
opacity: 0;
}
.rib-tab.active {
> a {
font-weight: normal;
}
}
}
}
.box-tabs {
height: @height-tabs;
.box-shadow(0 1px 0 @gray-dark);
display: flex;
align-items: stretch;
@ -32,6 +46,14 @@
.extra {
background-color: @tabs-bg-color;
}
&::after {
content: '';
position: absolute;
width: 100%;
border-top: 1px solid @gray-dark;
top: @height-tabs - 1;
}
}
.tabs {
@ -87,9 +109,10 @@
.marker {
position: relative;
border-top: 3px solid @gray-darker;
top: -4px;
top: -5px;
-webkit-transition: width .2s, left .2s ease-out;
transition: width .2s, left .2s ease-out;
opacity: 1;
transition: width .2s, left .2s ease-out, opacity .2s;
}
&:not(.short) {