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

Merge pull request #1541 from ONLYOFFICE/feature/header-share

Browse source 
Feature/header share
This commit is contained in:
Julia Radzhabova 2022-02-09 00:45:17 +03:00 committed by GitHub
parent f8051d648c cec7d71b04
commit 45221869c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
54 changed files with 908 additions and 1314 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/main/lib/controller/Themes.js
View file

@ -43,6 +43,10 @@ define([
"toolbar-header-spreadsheet",
"toolbar-header-presentation",
"text-toolbar-header-on-background-document",
"text-toolbar-header-on-background-spreadsheet",
"text-toolbar-header-on-background-presentation",
"background-normal",
"background-toolbar",
"background-toolbar-additional",

258
apps/common/main/lib/view/Header.js
View file

@ -52,7 +52,7 @@ define([
Common.Views.Header = Backbone.View.extend(_.extend(function(){
var storeUsers, appConfig;
var $userList, $panelUsers, $btnUsers;
var $userList, $panelUsers, $btnUsers, $btnUserName;
var _readonlyRights = false;
var templateUserItem =
@ -85,28 +85,34 @@ define([
'</div>' +
'<div class="hedset" data-layout-name="header-users">' +
// '<span class="btn-slot text" id="slot-btn-users"></span>' +
'<section id="tlb-box-users" class="box-cousers dropdown"">' +
'<div class="btn-users" data-hint="0" data-hint-direction="bottom" data-hint-offset="big">' +
'<i class="icon toolbar__icon icon--inverse btn-users"></i>' +
'<label class="caption">&plus;</label>' +
'<section id="tlb-box-users" class="box-cousers dropdown">' +
'<div class="btn-users dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="bottom" data-hint-offset="big">' +
'<div class="inner-box-icon">' +
'<svg class=""><use xlink:href="#svg-icon-users"></use></svg>' +
'</div>' +
'<label class="caption"></label>' +
'</div>' +
'<div class="cousers-menu dropdown-menu">' +
'<label id="tlb-users-menu-descr"><%= tipUsers %></label>' +
'<div class="cousers-list"></div>' +
'<label id="tlb-change-rights" class="link"><%= txtAccessRights %></label>' +
'</div>' +
'</section>'+
'</div>' +
'<div class="hedset">' +
'<div class="btn-slot" id="slot-btn-share"></div>' +
'</div>' +
'<div class="hedset">' +
'<div class="btn-slot" id="slot-btn-mode"></div>' +
'<div class="btn-slot" id="slot-btn-back"></div>' +
'<div class="btn-slot" id="slot-btn-favorite"></div>' +
'<div class="btn-slot" id="slot-btn-options"></div>' +
'</div>' +
'<div class="hedset">' +
'<div class="btn-slot" id="slot-btn-user-name"></div>' +
'<div class="btn-current-user btn-header hidden">' +
'<i class="icon toolbar__icon icon--inverse btn-user"></i>' +
// '<div class="btn-slot slot-btn-user-name"></div>' +
'<button type="button" class="btn btn-header slot-btn-user-name hidden">' +
'<div class="color-user-name"></div>' +
'</button>' +
'<div class="btn-current-user hidden">' +
'<div class="color-user-name"></div>' +
'</div>' +
'</div>' +
'</section>' +
@ -128,13 +134,21 @@ define([
// '<label id="title-doc-name" /></label>' +
'<input id="title-doc-name" autofill="off" autocomplete="off"/></input>' +
'</div>' +
'<label id="title-user-name"></label>' +
'<div class="hedset">' +
// '<div class="btn-slot slot-btn-user-name"></div>' +
'<button type="button" class="btn btn-header slot-btn-user-name hidden">' +
'<div class="color-user-name"></div>' +
'</button>' +
'<div class="btn-current-user hidden">' +
'<div class="color-user-name"></div>' +
'</div>' +
'</div>' +
'</section>';
function onResetUsers(collection, opts) {
var usercount = collection.getVisibleEditingCount();
if ( $userList ) {
if ( usercount > 1 || usercount > 0 && appConfig && !appConfig.isEdit && !appConfig.isRestrictedEdit) {
if (usercount > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit)) {
$userList.html(templateUserList({
users: collection.chain().filter(function(item){return item.get('online') && !item.get('view') && !item.get('hidden')}).groupBy(function(item) {return item.get('idOriginal');}).value(),
usertpl: _.template(templateUserItem),
@ -165,53 +179,27 @@ define([
function applyUsers(count, originalCount) {
if (!$btnUsers) return;
var has_edit_users = count > 1 || count > 0 && appConfig && !appConfig.isEdit && !appConfig.isRestrictedEdit; // has other user(s) who edit document
var has_edit_users = count > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit); // has other user(s) who edit document
if ( has_edit_users ) {
$btnUsers
.attr('data-toggle', 'dropdown')
.addClass('dropdown-toggle')
.menu = true;
$panelUsers['show']();
$btnUsers.find('.caption').html(originalCount);
} else {
$btnUsers
.removeAttr('data-toggle')
.removeClass('dropdown-toggle')
.menu = false;
$panelUsers[(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings)) ? 'show' : 'hide']();
}
$btnUsers.find('.caption')
.css({'font-size': ((has_edit_users) ? '12px' : '14px'),
'margin-top': ((has_edit_users) ? '0' : '-1px')})
.html((has_edit_users) ? originalCount : '&plus;');
var usertip = $btnUsers.data('bs.tooltip');
if ( usertip ) {
usertip.options.title = (has_edit_users) ? usertip.options.titleExt : usertip.options.titleNorm;
usertip.setContent();
$panelUsers['hide']();
}
}
function onLostEditRights() {
_readonlyRights = true;
$panelUsers && $panelUsers.find('#tlb-change-rights').hide();
$btnUsers && !$btnUsers.menu && $panelUsers.hide();
this.btnShare && this.btnShare.setVisible(false);
}
function onUsersClick(e) {
if ( !$btnUsers.menu ) {
$panelUsers.removeClass('open');
Common.NotificationCenter.trigger('collaboration:sharing');
} else {
var usertip = $btnUsers.data('bs.tooltip');
if ( usertip ) {
if ( usertip.dontShow===undefined)
usertip.dontShow = true;
var usertip = $btnUsers.data('bs.tooltip');
if ( usertip ) {
if ( usertip.dontShow===undefined)
usertip.dontShow = true;
usertip.hide();
}
usertip.hide();
}
}
@ -255,6 +243,14 @@ define([
Common.NotificationCenter.trigger('markfavorite', !me.options.favorite);
});
if (me.btnShare) {
me.btnShare.on('click', function (e) {
Common.NotificationCenter.trigger('collaboration:sharing');
});
me.btnShare.updateHint(me.tipAccessRights);
me.btnShare.setVisible(!_readonlyRights && appConfig && (appConfig.sharingSettingsUrl && appConfig.sharingSettingsUrl.length || appConfig.canRequestSharingSettings));
}
if ( me.logo )
me.logo.children(0).on('click', function (e) {
var _url = !!me.branding && !!me.branding.logo && (me.branding.logo.url!==undefined) ?
@ -277,33 +273,16 @@ define([
var editingUsers = storeUsers.getVisibleEditingCount();
$btnUsers.tooltip({
title: (editingUsers > 1 || editingUsers>0 && !appConfig.isEdit && !appConfig.isRestrictedEdit) ? me.tipViewUsers : me.tipAccessRights,
titleNorm: me.tipAccessRights,
titleExt: me.tipViewUsers,
title: me.tipUsers,
placement: 'bottom',
html: true
});
$btnUsers.on('click', onUsersClick.bind(me));
var $labelChangeRights = $panelUsers.find('#tlb-change-rights');
$labelChangeRights.on('click', function(e) {
$panelUsers.removeClass('open');
Common.NotificationCenter.trigger('collaboration:sharing');
});
$labelChangeRights[(!mode.isOffline && (mode.sharingSettingsUrl && mode.sharingSettingsUrl.length || mode.canRequestSharingSettings))?'show':'hide']();
$panelUsers[(editingUsers > 1 || editingUsers > 0 && !appConfig.isEdit && !appConfig.isRestrictedEdit || !mode.isOffline && (mode.sharingSettingsUrl && mode.sharingSettingsUrl.length || mode.canRequestSharingSettings)) ? 'show' : 'hide']();
$panelUsers[(editingUsers > 1 && appConfig && (appConfig.isEdit || appConfig.isRestrictedEdit)) ? 'show' : 'hide']();
}
if (appConfig.user.guest && appConfig.canRenameAnonymous) {
if (me.labelUserName) {
me.labelUserName.addClass('clickable');
me.labelUserName.on('click', function (e) {
Common.NotificationCenter.trigger('user:rename');
});
} else if (me.btnUserName) {
if (me.btnUserName) {
me.btnUserName.on('click', function (e) {
Common.NotificationCenter.trigger('user:rename');
});
@ -353,9 +332,6 @@ define([
});
}
}
if ( me.btnOptions )
me.btnOptions.updateHint(me.tipViewSettings);
}
function onFocusDocName(e){
@ -413,9 +389,6 @@ define([
}
}
function onContentThemeChangedToDark(isdark) {
}
return {
options: {
branding: {},
@ -445,7 +418,6 @@ define([
id: 'btn-goback',
cls: 'btn-header',
iconCls: 'toolbar__icon icon--inverse btn-goback',
split: true,
dataHint: '0',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
@ -458,17 +430,6 @@ define([
reset : onResetUsers
});
me.btnOptions = new Common.UI.Button({
cls: 'btn-header no-caret',
iconCls: 'toolbar__icon icon--inverse btn-ic-options',
menu: true,
dataHint: '0',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
me.mnuZoom = {options: {value: 100}};
me.btnFavorite = new Common.UI.Button({
id: 'btn-favorite',
cls: 'btn-header',
@ -480,10 +441,9 @@ define([
Common.NotificationCenter.on({
'app:ready': function(mode) {Common.Utils.asyncCall(onAppReady, me, mode);},
'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);}
'app:face': function(mode) {Common.Utils.asyncCall(onAppShowed, me, mode);},
'collaboration:sharingdeny': function(mode) {Common.Utils.asyncCall(onLostEditRights, me, mode);}
});
Common.NotificationCenter.on('collaboration:sharingdeny', onLostEditRights);
Common.NotificationCenter.on('contenttheme:dark', onContentThemeChangedToDark.bind(this));
Common.NotificationCenter.on('uitheme:changed', this.changeLogo.bind(this));
},
@ -524,7 +484,7 @@ define([
if ( role == 'right' ) {
var $html = $(_.template(templateRightBox)({
tipUsers: this.labelCoUsersDescr,
txtAccessRights: this.txtAccessRights
textShare: this.textShare
}));
if ( !me.labelDocName ) {
@ -564,22 +524,43 @@ define([
if ( config.canEdit && config.canRequestEditRights )
this.btnEdit = createTitleButton('toolbar__icon icon--inverse btn-edit', $html.findById('#slot-hbtn-edit'), undefined, 'bottom', 'big');
}
me.btnOptions.render($html.find('#slot-btn-options'));
if (!config.isEdit || config.customization && !!config.customization.compactHeader) {
if (config.user.guest && config.canRenameAnonymous)
me.btnUserName = createTitleButton('toolbar__icon icon--inverse btn-user', $html.findById('#slot-btn-user-name'), undefined, 'bottom', 'big' );
else {
if (config.user.guest && config.canRenameAnonymous) {
me.btnUserName = new Common.UI.Button({
el: $html.findById('.slot-btn-user-name'),
cls: 'btn-header',
dataHint:'0',
dataHintDirection: 'bottom',
dataHintOffset: 'big',
visible: true
});
me.btnUserName.cmpEl.removeClass('hidden');
} else {
me.elUserName = $html.find('.btn-current-user');
me.elUserName.removeClass('hidden');
}
$btnUserName = $html.find('.color-user-name');
me.setUserName(me.options.userName);
}
if (!_readonlyRights && config && (config.sharingSettingsUrl && config.sharingSettingsUrl.length || config.canRequestSharingSettings)) {
me.btnShare = new Common.UI.Button({
cls: 'btn-header btn-header-share',
iconCls: 'toolbar__icon icon--inverse btn-users-share',
caption: me.textShare,
dataHint: '0',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
me.btnShare.render($html.find('#slot-btn-share'));
} else {
$html.find('#slot-btn-share').hide();
}
$userList = $html.find('.cousers-list');
$panelUsers = $html.find('.box-cousers');
$btnUsers = $html.find('.btn-users');
$btnUsers = $panelUsers.find('> .btn-users');
$panelUsers.hide();
return $html;
} else
@ -591,7 +572,22 @@ define([
me.labelDocName.val( me.documentCaption );
me.options.wopi && me.labelDocName.attr('maxlength', me.options.wopi.FileNameMaxLength);
me.labelUserName = $('> #title-user-name', $html);
if (config.user.guest && config.canRenameAnonymous) {
me.btnUserName = new Common.UI.Button({
el: $html.findById('.slot-btn-user-name'),
cls: 'btn-header',
dataHint:'0',
dataHintDirection: 'bottom',
dataHintOffset: 'big',
visible: true
});
me.btnUserName.cmpEl.removeClass('hidden');
}
else {
me.elUserName = $html.find('.btn-current-user');
me.elUserName.removeClass('hidden');
}
$btnUserName = $html.find('.color-user-name');
me.setUserName(me.options.userName);
if ( config.canPrint && config.isEdit ) {
@ -761,23 +757,17 @@ define([
},
setUserName: function(name) {
if ( !!this.labelUserName ) {
if ( !!name ) {
this.labelUserName.text(name).show();
} else this.labelUserName.hide();
} else {
this.options.userName = name;
if ( this.btnUserName ) {
this.btnUserName.updateHint(name);
} else if (this.elUserName) {
this.elUserName.tooltip({
title: Common.Utils.String.htmlEncode(name),
placement: 'cursor',
html: true
});
}
this.options.userName = name;
if ( this.btnUserName ) {
this.btnUserName.updateHint(name);
} else if (this.elUserName) {
this.elUserName.tooltip({
title: Common.Utils.String.htmlEncode(name),
placement: 'cursor',
html: true
});
}
$btnUserName && $btnUserName.text(this.getInitials(name));
return this;
},
@ -786,24 +776,23 @@ define([
return this.btnSave;
else if (type == 'users')
return $panelUsers;
else if (type == 'share')
return this.btnShare;
},
lockHeaderBtns: function (alias, lock) {
var me = this;
if ( alias == 'users' ) {
if ( lock )
$btnUsers.addClass('disabled').attr('disabled', 'disabled'); else
if ( lock ) {
$btnUsers.addClass('disabled').attr('disabled', 'disabled');
} else {
$btnUsers.removeClass('disabled').removeAttr('disabled');
}
if (me.btnShare) {
me.btnShare.setDisabled(lock);
}
} else if ( alias == 'rename-user' ) {
if (me.labelUserName) {
if ( lock ) {
me.labelUserName.removeClass('clickable');
me.labelUserName.addClass('disabled');
} else {
me.labelUserName.addClass('clickable');
me.labelUserName.removeClass('disabled');
}
} else if (me.btnUserName) {
if (me.btnUserName) {
me.btnUserName.setDisabled(lock);
}
} else {
@ -824,20 +813,21 @@ define([
switch ( alias ) {
case 'undo': _lockButton(me.btnUndo); break;
case 'redo': _lockButton(me.btnRedo); break;
case 'opts': _lockButton(me.btnOptions); break;
default: break;
}
}
},
fakeMenuItem: function() {
return {
conf: {checked: false, disabled: false},
setChecked: function (val) { this.conf.checked = val; },
isChecked: function () { return this.conf.checked; },
setDisabled: function (val) { this.conf.disabled = val; },
isDisabled: function () { return this.conf.disabled; }
};
getInitials: function(name) {
var fio = name.split(' ');
var initials = fio[0].substring(0, 1).toUpperCase();
for (var i = fio.length-1; i>0; i--) {
if (fio[i][0]!=='(' && fio[i][0]!==')') {
initials += fio[i].substring(0, 1).toUpperCase();
break;
}
}
return initials;
},
textBack: 'Go to Documents',
@ -846,6 +836,7 @@ define([
tipAccessRights: 'Manage document access rights',
labelCoUsersDescr: 'Document is currently being edited by several users.',
tipViewUsers: 'View users and manage document access rights',
tipUsers: 'View users',
tipDownload: 'Download file',
tipPrint: 'Print file',
tipGoEdit: 'Edit current file',
@ -860,7 +851,8 @@ define([
tipViewSettings: 'View Settings',
textRemoveFavorite: 'Remove from Favorites',
textAddFavorite: 'Mark as favorite',
textHideNotes: 'Hide Notes'
textHideNotes: 'Hide Notes',
textShare: 'Share'
}
}(), Common.Views.Header || {}))
});

3
apps/common/main/resources/img/header/buttons.svg
View file

@ -178,4 +178,7 @@
<symbol id="svg-icon-crypted" viewBox="0 0 20 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.00049C6.99987 4.99948 4 5.00023 4 5.00023V8.50023C4 10.5001 4.56284 15.9767 9.99961 17.0001C15.4364 15.9767 16 10.5001 16 8.50023V5.00023C16 5.00023 13.0001 4.99948 10 3.00049ZM14.0232 7.96528L12.9768 7.03517L9.42726 11.0284L6.94813 8.96247L6.05187 10.038L9.57274 12.972L14.0232 7.96528Z" fill="white"/>
</symbol>
<symbol id="svg-icon-users" viewBox="0 0 28 20">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27 10C27 14.9706 22.9706 19 18 19C13.0294 19 9 14.9706 9 10C9 5.02944 13.0294 1 18 1C22.9706 1 27 5.02944 27 10ZM28 10C28 15.5228 23.5228 20 18 20C15.3747 20 12.9857 18.9884 11.2016 17.3336C10.2212 17.7622 9.13838 18 8 18C3.58172 18 0 14.4183 0 10C0 5.58172 3.58172 2 8 2C9.13838 2 10.2212 2.23777 11.2016 2.66636C12.9857 1.01164 15.3747 0 18 0C23.5228 0 28 4.47715 28 10ZM10.4512 3.44117C9.68831 3.15594 8.86237 3 8 3C4.13401 3 1 6.13401 1 10C1 11.5218 1.48561 12.9302 2.31032 14.0786C2.59986 13.8548 2.9787 13.5869 3.43399 13.319C4.5435 12.6664 6.13166 12 8 12C8.06722 12 8.13407 12.0009 8.20056 12.0026C8.13373 11.6738 8.08304 11.3392 8.04934 10.9996C8.03292 10.9999 8.01648 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C8.42609 5 8.83142 5.08883 9.19851 5.24898C9.54968 4.59978 9.97058 3.99383 10.4512 3.44117ZM8.76702 6.15236C8.53082 6.05419 8.27174 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10C8 8.63651 8.27289 7.33675 8.76702 6.15236ZM8.46271 13.0156C8.31059 13.0054 8.1563 13 8 13C6.36834 13 4.9565 13.5836 3.94101 14.181C3.54196 14.4157 3.20793 14.6503 2.95039 14.8478C4.22421 16.1743 6.01568 17 8 17C8.86237 17 9.68831 16.8441 10.4512 16.5588C9.56377 15.5384 8.87988 14.3362 8.46271 13.0156Z"/>
</symbol>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
apps/common/main/resources/img/toolbar/1.25x/btn-users-share.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 511 B

BIN
apps/common/main/resources/img/toolbar/1.5x/btn-users-share.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 564 B

BIN
apps/common/main/resources/img/toolbar/1.75x/btn-users-share.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 732 B

BIN
apps/common/main/resources/img/toolbar/1x/btn-users-share.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 445 B

BIN
apps/common/main/resources/img/toolbar/2x/btn-users-share.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 883 B

6
apps/common/main/resources/less/colors-table-classic.less
View file

@ -5,6 +5,10 @@
--toolbar-header-spreadsheet: #40865c;
--toolbar-header-presentation: #aa5252;
--text-toolbar-header-on-background-document: #38567A;
--text-toolbar-header-on-background-spreadsheet: #336B49;
--text-toolbar-header-on-background-presentation: #8D4444;
--background-normal: #fff;
--background-toolbar: #f1f1f1;
--background-toolbar-additional: #f1f1f1;
@ -55,7 +59,7 @@
--icon-normal: #444;
--icon-normal-pressed: #fff;
--icon-inverse: #444;
--icon-toolbar-header: fade(#fff, 80%);
--icon-toolbar-header: #fff;
--icon-notification-badge: #000;
--icon-contrast-popover: #fff;
--icon-success: #5b9f27;

6
apps/common/main/resources/less/colors-table-dark.less
View file

@ -5,6 +5,10 @@
--toolbar-header-spreadsheet: #2a2a2a;
--toolbar-header-presentation: #2a2a2a;
--text-toolbar-header-on-background-document: #2a2a2a;
--text-toolbar-header-on-background-spreadsheet: #2a2a2a;
--text-toolbar-header-on-background-presentation: #2a2a2a;
--background-normal: #333;
--background-toolbar: #404040;
--background-toolbar-additional: #505050;
@ -56,7 +60,7 @@
--icon-normal: fade(#fff, 80%);
--icon-normal-pressed: fade(#fff, 80%);
--icon-inverse: #444;
--icon-toolbar-header: fade(#fff, 80%);
--icon-toolbar-header: #fff;
--icon-notification-badge: #000;
--icon-contrast-popover: #fff;
--icon-success: #090;

6
apps/common/main/resources/less/colors-table-ie-fix.less
View file

@ -3,6 +3,10 @@
@toolbar-header-spreadsheet-ie: #40865c;
@toolbar-header-presentation-ie: #aa5252;
@text-toolbar-header-on-background-document-ie: #38567A;
@text-toolbar-header-on-background-spreadsheet-ie: #336B49;
@text-toolbar-header-on-background-presentation-ie: #8D4444;
@background-normal-ie: #fff;
@background-toolbar-ie: #f1f1f1;
@background-toolbar-additional-ie: #f1f1f1;
@ -51,7 +55,7 @@
@icon-normal-ie: #444;
@icon-normal-pressed-ie: #fff;
@icon-inverse-ie: #444;
@icon-toolbar-header-ie: fade(#fff, 80%);
@icon-toolbar-header-ie: #fff;
@icon-notification-badge-ie: #000;
@icon-contrast-popover-ie: #fff;
@icon-success-ie: #5b9f27;

4
apps/common/main/resources/less/colors-table.less
View file

@ -15,6 +15,10 @@
--toolbar-header-spreadsheet: #40865c;
--toolbar-header-presentation: #aa5252;
--text-toolbar-header-on-background-document: #38567A;
--text-toolbar-header-on-background-spreadsheet: #336B49;
--text-toolbar-header-on-background-presentation: #8D4444;
--background-normal: #fff;
--background-toolbar: #f7f7f7;
--background-toolbar-additional: #efefef;

351
apps/common/main/resources/less/header.less
View file

@ -162,143 +162,6 @@
margin-top: 15px;
}
.btn-users {
display: flex;
align-items: center;
cursor: pointer;
padding: 0 12px;
height: 100%;
.icon {
display: inline-block;
width: 20px;
height: 20px;
background-repeat: no-repeat;
padding: 0;
&.icon--inverse {
background-position-x: @button-header-normal-icon-offset-x-ie;
background-position-x: @button-header-normal-icon-offset-x;
}
}
.caption {
cursor: pointer;
font-size: 14px;
}
&.disabled {
opacity: @component-disabled-opacity;
pointer-events: none;
}
}
.btn-current-user {
display: flex;
align-items: center;
height: 100%;
width: 40px;
padding: 0 10px;
.icon {
width: 20px;
height: 20px;
display: inline-block;
background-repeat: no-repeat;
padding: 0;
&.icon--inverse {
background-position-x: -20px;
}
}
svg.icon {
vertical-align: middle;
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx),
only screen and (min-resolution: 144dpi) {
width:calc(~"28px/1.5");
height:calc(~"28px/1.5");
}
}
}
.cousers-menu {
position: fixed;
top: @height-tabs - 8px;
left: 100%;
margin-left: -285px;
padding: 14px;
width: 285px;
font-size: 12px;
z-index: 1042;
.top-title & {
top: @height-title + @height-tabs - 8px;
}
> label {
white-space: normal;
}
label {
color: @text-normal-ie;
color: @text-normal;
}
.cousers-list {
margin-top: 15px;
ul {
margin: 0;
padding: 0;
overflow: hidden;
max-height: 195px;
position: relative;
li {
list-style: none;
padding: 2px 0;
overflow: hidden;
&.offline, &.viewmode {
display: none;
}
}
}
.color {
width: 12px;
height: 12px;
display: inline-block;
vertical-align: middle;
border: @scaled-one-px-value solid @border-toolbar;
margin: 0 5px 1px 0;
}
.user-name {
color: @text-normal-ie;
color: @text-normal;
font-size: 12px;
.font-weight-bold();
white-space: nowrap;
cursor: default;
label {
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 200px;
.font-weight-bold();
}
}
}
}
.hedset {
font-size: 0;
display: flex;
@ -385,6 +248,204 @@
}
}
.btn-users {
display: flex;
align-items: center;
cursor: pointer;
padding: 0 8px 0 6px;
height: 100%;
.inner-box-icon {
width: 28px;
position: relative;
> svg {
position: absolute;
width: 28px;
height: 20px;
top: 50%;
margin-top: -10px;
fill: @icon-toolbar-header-ie;
fill: @icon-toolbar-header;
}
}
.caption {
cursor: pointer;
font-size: 9px;
margin-left: -18px;
width: 16px;
text-align: center;
overflow: hidden;
}
&:not(:disabled) {
.inner-box-icon, .caption {
opacity: @header-component-normal-icon-opacity;
}
}
&:hover:not(:disabled) {
.inner-box-icon, .caption {
opacity: @header-component-hover-icon-opacity;
}
}
&:active:not(:disabled), &.active:not(:disabled) {
.inner-box-icon, .caption {
opacity: @header-component-active-icon-opacity;
}
}
&.disabled {
opacity: @component-disabled-opacity;
pointer-events: none;
}
}
.btn-header-share {
display: flex;
align-items: center;
padding: 0 12px;
width: auto;
.caption {
margin: 2px 0 0 2px;
color: @text-toolbar-header-ie;
color: @text-toolbar-header;
}
&:not(:disabled) {
.caption {
opacity: @header-component-normal-icon-opacity;
}
}
&:hover:not(:disabled) {
.caption {
opacity: @header-component-hover-icon-opacity;
}
}
&:active:not(:disabled), &.active:not(:disabled) {
.caption {
opacity: @header-component-active-icon-opacity;
}
}
}
.btn-current-user {
display: flex;
align-items: center;
height: 100%;
width: 40px;
padding: 1px 3px;
border: var(--scaled-one-pixel, 1px) solid transparent;
}
.btn-current-user, .btn-header {
&:not(:disabled) .color-user-name {
opacity: @header-component-normal-icon-opacity;
}
&:active, &.active .color-user-name {
opacity: @header-component-active-icon-opacity;
}
&:hover:not(:disabled) .color-user-name {
opacity: @header-component-hover-icon-opacity;
}
.color-user-name {
width: 20px;
height: 20px;
border-radius: 20px;
background-color: @icon-toolbar-header-ie;
background-color: @icon-toolbar-header;
color: @toolbar-header-text-on-background-ie;
color: @toolbar-header-text-on-background;
font-size: 10px;
line-height: 20px;
overflow: hidden;
margin: 0 6px;
text-align: center;
}
}
.cousers-menu {
position: fixed;
top: @height-tabs - 8px;
left: 100%;
margin-left: -285px;
padding: 14px;
width: 285px;
font-size: 12px;
z-index: 1042;
.top-title & {
top: @height-title + @height-tabs - 8px;
}
> label {
white-space: normal;
}
label {
color: @text-normal-ie;
color: @text-normal;
}
.cousers-list {
margin-top: 15px;
ul {
margin: 0;
padding: 0;
overflow: hidden;
max-height: 195px;
position: relative;
li {
list-style: none;
padding: 2px 0;
overflow: hidden;
&.offline, &.viewmode {
display: none;
}
}
}
.color {
width: 12px;
height: 12px;
display: inline-block;
vertical-align: middle;
border: @scaled-one-px-value solid @border-toolbar;
margin: 0 5px 1px 0;
}
.user-name {
color: @text-normal-ie;
color: @text-normal;
font-size: 12px;
.font-weight-bold();
white-space: nowrap;
cursor: default;
label {
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 200px;
.font-weight-bold();
}
}
}
}
#box-document-title {
background-color: @header-background-color-ie;
background-color: @header-background-color;
@ -439,22 +500,6 @@
border: 0 none;
cursor: default;
}
#title-user-name {
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
text-align: right;
font-size: 11px;
width: 200px;
height: 100%;
padding: 0 12px;
line-height: @height-title;
pointer-events: none;
&.clickable {
cursor: pointer;
pointer-events: auto;
}
}
.lr-separator {
flex-grow: 1;

67
apps/common/main/resources/less/toolbar.less
View file

@ -461,10 +461,29 @@
}
// TODO: move to appropriate module
.btn-header, .btn-users {
&:not(:active) .icon--inverse {
background-position-x: 0;
background-position-x: @button-small-normal-icon-offset-x;
.btn-current-user, .btn-header {
.color-user-name {
background-color: @text-normal-ie;
background-color: @text-normal;
color: @text-inverse-ie;
color: @text-inverse;
}
}
.btn-header, .btn-users, .btn-header-share {
.icon {
&.icon--inverse {
background-position-x: 0 !important;
background-position-x: @button-small-normal-icon-offset-x !important;
}
}
&:active, &.active {
&:not(.disabled) .icon.toolbar__icon {
&.icon--inverse {
background-position-x: @button-small-active-icon-offset-x !important;
}
}
}
svg.icon {
@ -477,6 +496,13 @@
color: @text-normal;
}
.inner-box-icon {
> svg {
fill: @text-normal-ie;
fill: @text-normal;
}
}
&:hover:not(.disabled) {
background-color: @highlight-button-hover-ie;
background-color: @highlight-button-hover;
@ -487,34 +513,33 @@
background-color: @highlight-button-pressed-ie;
background-color: @highlight-button-pressed;
.icon--inverse {
background-position-x: @button-small-active-icon-offset-x;
}
svg.icon {
fill: @icon-toolbar-header-ie;
fill: @icon-toolbar-header;
}
.caption {
color: @text-inverse-ie;
color: @text-inverse;
color: @text-normal-pressed-ie;
color: @text-normal-pressed;
}
.inner-box-icon {
> svg {
fill: @text-normal-pressed-ie;
fill: @text-normal-pressed;
}
}
.color-user-name {
background-color: @text-normal-pressed-ie;
background-color: @text-normal-pressed;
color: @highlight-button-pressed-ie;
color: @highlight-button-pressed;
}
}
}
}
.btn-current-user {
.icon--inverse {
background-position-x: 0;
}
svg.icon {
fill: @icon-toolbar-header-ie;
fill: @icon-toolbar-header;
}
}
#rib-doc-name {
color: @text-normal-ie;
color: @text-normal;

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

@ -46,7 +46,7 @@ define([
'common/main/lib/view/SaveAsDlg',
'documenteditor/main/app/view/LeftMenu',
'documenteditor/main/app/view/FileMenu',
'documenteditor/main/app/view/ViewTab',
'documenteditor/main/app/view/ViewTab'
], function () {
'use strict';
@ -64,7 +64,6 @@ define([
'hide': _.bind(this.onHideChat, this)
},
'Common.Views.Header': {
'file:settings': _.bind(this.clickToolbarSettings,this),
'history:show': function () {
if ( !this.leftMenu.panelHistory.isVisible() )
this.clickMenuFileItem('header', 'history');

9
apps/documenteditor/main/app/controller/Main.js
View file

@ -607,6 +607,7 @@ define([
this.api.asc_coAuthoringDisconnect();
appHeader.setCanRename(false);
appHeader.getButton('users') && appHeader.getButton('users').hide();
appHeader.getButton('share') && appHeader.getButton('share').setVisible(false);
this.getApplication().getController('LeftMenu').getView('LeftMenu').showHistory();
this.disableEditing(true);
this._renameDialog && this._renameDialog.close();
@ -1595,12 +1596,10 @@ define([
reviewController = application.getController('Common.Controllers.ReviewChanges');
reviewController.setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api).loadDocument({doc:me.document});
if (this.appOptions.isEdit || this.appOptions.isRestrictedEdit) { // set api events for toolbar in the Restricted Editing mode
var toolbarController = application.getController('Toolbar');
toolbarController && toolbarController.setApi(me.api);
if (!this.appOptions.isEdit) return;
var toolbarController = application.getController('Toolbar');
toolbarController && toolbarController.setApi(me.api);
if (this.appOptions.isEdit) {
var rightmenuController = application.getController('RightMenu'),
fontsControllers = application.getController('Common.Controllers.Fonts');
fontsControllers && fontsControllers.setApi(me.api);

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

@ -64,9 +64,6 @@ define([
Common.NotificationCenter.trigger('edit:complete', this.statusbar);
}.bind(this)
},
'Common.Views.Header': {
'statusbar:hide': _.bind(me.onChangeCompactView, me)
},
'ViewTab': {
'statusbar:hide': _.bind(me.onChangeCompactView, me)
}

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

@ -125,7 +125,6 @@ define([
'menu:show': this.onFileMenu.bind(this, 'show')
},
'Common.Views.Header': {
'toolbar:setcompact': this.onChangeCompactView.bind(this),
'print': function (opts) {
var _main = this.getApplication().getController('Main');
_main.onPrint();
@ -3184,11 +3183,8 @@ define([
var links = me.getApplication().getController('Links');
links.setApi(me.api).setConfig({toolbar: me});
Array.prototype.push.apply(me.toolbar.lockControls, links.getView('Links').getButtons());
var viewtab = me.getApplication().getController('ViewTab');
viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
}
if ( config.isEdit && config.canFeatureContentControl && config.canFeatureForms || config.isRestrictedEdit && config.canFillForms ) {
if (config.isFormCreator) {
tab = {caption: me.textTabForms, action: 'forms', dataHintTitle: 'M'};
@ -3204,6 +3200,15 @@ define([
}
}
config.isEdit && config.canFeatureContentControl && me.onChangeSdtGlobalSettings();
tab = {caption: me.toolbar.textTabView, action: 'view', extcls: config.isEdit ? 'canedit' : '', layoutname: 'toolbar-view', dataHintTitle: 'W'};
var viewtab = me.getApplication().getController('ViewTab');
viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
$panel = viewtab.createToolbarPanel();
if ($panel) {
me.toolbar.addTab(tab, $panel, 7);
me.toolbar.setVisible('view', Common.UI.LayoutManager.isElementVisible('toolbar-view'));
}
},
onAppReady: function (config) {

44
apps/documenteditor/main/app/controller/ViewTab.js
View file

@ -61,12 +61,15 @@ define([
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this));
Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
Common.NotificationCenter.on('document:ready', _.bind(this.onDocumentReady, this));
},
setApi: function (api) {
if (api) {
this.api = api;
this.api.asc_registerCallback('asc_onZoomChange', _.bind(this.onZoomChange, this));
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onCoAuthoringDisconnect, this));
Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
}
return this;
},
@ -79,15 +82,7 @@ define([
mode: mode,
compactToolbar: this.toolbar.toolbar.isCompactView
});
if (mode.canBrandingExt && mode.customization && mode.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
this.view.chStatusbar.$el.remove();
var slotChkRulers = this.view.chRulers.$el,
groupRulers = slotChkRulers.closest('.group'),
groupToolbar = this.view.chToolbar.$el.closest('.group');
groupToolbar.find('.elset')[1].append(slotChkRulers[0]);
groupRulers.remove();
this.view.cmpEl.find('.separator-rulers').remove();
}
this.addListeners({
'ViewTab': {
'zoom:topage': _.bind(this.onBtnZoomTo, this, 'topage'),
@ -104,11 +99,6 @@ define([
'view:hide': _.bind(function (statusbar, state) {
this.view.chStatusbar.setValue(!state, true);
}, this)
},
'Common.Views.Header': {
'rulers:hide': _.bind(function (isChecked) {
this.view.chRulers.setValue(!isChecked, true);
}, this)
}
});
},
@ -117,13 +107,17 @@ define([
this.view && this.view.SetDisabled(state);
},
createToolbarPanel: function() {
return this.view.getPanel();
},
getView: function(name) {
return !name && this.view ?
this.view : Backbone.Controller.prototype.getView.call(this, name);
},
onCoAuthoringDisconnect: function() {
this.SetDisabled(true);
Common.Utils.lockControls(Common.enumLock.lostConnect, true, {array: this.view.lockedControls});
},
onAppReady: function (config) {
@ -134,6 +128,21 @@ define([
})).then(function(){
me.view.setEvents();
if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
me.view.chStatusbar.$el.remove();
var slotChkRulers = me.view.chRulers.$el,
groupRulers = slotChkRulers.closest('.group'),
groupToolbar = me.view.chToolbar.$el.closest('.group');
groupToolbar.find('.elset')[1].append(slotChkRulers[0]);
groupRulers.remove();
me.view.$el.find('.separator-rulers').remove();
}
if (!config.isEdit) { // if view tab will be visible in view/restricted-editing mode
me.view.chRulers.hide();
me.view.$el.find('.separator-rulers').remove();
}
me.view.cmbZoom.on('selected', _.bind(me.onSelectedZoomValue, me))
.on('changed:before',_.bind(me.onZoomChanged, me, true))
.on('changed:after', _.bind(me.onZoomChanged, me, false))
@ -173,6 +182,10 @@ define([
}
},
onDocumentReady: function() {
Common.Utils.lockControls(Common.enumLock.disableOnStart, false, {array: this.view.lockedControls});
},
onZoomChange: function (percent, type) {
this.view.btnFitToPage.toggle(type == 2, true);
this.view.btnFitToWidth.toggle(type == 1, true);
@ -229,7 +242,6 @@ define([
Common.localStorage.setBool('de-hidden-rulers', !checked);
Common.Utils.InternalSettings.set("de-hidden-rulers", !checked);
this.api.asc_SetViewRulers(checked);
this.view.fireEvent('rulers:hide', [!checked]);
Common.NotificationCenter.trigger('layout:changed', 'rulers');
Common.NotificationCenter.trigger('edit:complete', this.view);
},

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

@ -80,7 +80,6 @@ define([
toolbar.setExtra('left', me.header.getPanel('left', config));
},
'view:compact' : function (toolbar, state) {
me.header.mnuitemCompactToolbar.setChecked(state, true);
me.viewport.vlayout.getItem('toolbar').height = state ?
Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal');
},
@ -105,21 +104,12 @@ define([
if ( me.header.btnSave )
me.header.btnSave.setDisabled(state);
}
},
'ViewTab': {
'rulers:hide': function (state) {
me.header.mnuitemHideRulers.setChecked(state, true);
},
'statusbar:hide': function (view, state) {
me.header.mnuitemHideStatusBar.setChecked(state, true);
}
}
});
},
setApi: function(api) {
this.api = api;
this.api.asc_registerCallback('asc_onZoomChange', this.onApiZoomChange.bind(this));
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',this.onApiCoAuthoringDisconnect.bind(this));
Common.NotificationCenter.on('api:disconnect', this.onApiCoAuthoringDisconnect.bind(this));
},
@ -156,13 +146,8 @@ define([
this.boxSdk = $('#editor_sdk');
this.boxSdk.css('border-left', 'none');
this.header.mnuitemFitPage = this.header.fakeMenuItem();
this.header.mnuitemFitWidth = this.header.fakeMenuItem();
Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
Common.NotificationCenter.on('contenttheme:dark', this.onContentThemeChangedToDark.bind(this));
},
onAppShowed: function (config) {
@ -213,131 +198,6 @@ define([
},
onAppReady: function (config) {
var me = this;
if ( me.header.btnOptions ) {
var compactview = !(config.isEdit || config.isRestrictedEdit && config.canFillForms && config.isFormCreator);
if ( config.isEdit || config.isRestrictedEdit && config.canFillForms && config.isFormCreator) {
if ( Common.localStorage.itemExists("de-compact-toolbar") ) {
compactview = Common.localStorage.getBool("de-compact-toolbar");
} else
if ( config.customization && config.customization.compactToolbar )
compactview = true;
}
me.header.mnuitemCompactToolbar = new Common.UI.MenuItem({
caption: me.header.textCompactView,
checked: compactview,
checkable: true,
value: 'toolbar'
});
if (!config.isEdit) {
me.header.mnuitemCompactToolbar.hide();
Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
if ((action=='plugins' || action=='review' || action=='forms') && visible) {
me.header.mnuitemCompactToolbar.show();
}
}, this));
}
me.header.mnuitemHideStatusBar = new Common.UI.MenuItem({
caption: me.header.textHideStatusBar,
checked: Common.localStorage.getBool("de-hidden-status"),
checkable: true,
value: 'statusbar'
});
if ( config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar'))
me.header.mnuitemHideStatusBar.hide();
me.header.mnuitemHideRulers = new Common.UI.MenuItem({
caption: me.header.textHideLines,
checked: Common.Utils.InternalSettings.get("de-hidden-rulers"),
checkable: true,
value: 'rulers'
});
if (!config.isEdit)
me.header.mnuitemHideRulers.hide();
me.header.menuItemsDarkMode = new Common.UI.MenuItem({
caption: me.txtDarkMode,
checkable: true,
checked: Common.UI.Themes.isContentThemeDark(),
value: 'mode:dark'
});
me.header.mnuitemFitPage = new Common.UI.MenuItem({
caption: me.textFitPage,
checkable: true,
checked: me.header.mnuitemFitPage.isChecked(),
value: 'zoom:page'
});
me.header.mnuitemFitWidth = new Common.UI.MenuItem({
caption: me.textFitWidth,
checkable: true,
checked: me.header.mnuitemFitWidth.isChecked(),
value: 'zoom:width'
});
me.header.mnuZoom = new Common.UI.MenuItem({
template: _.template([
'<div id="hdr-menu-zoom" class="menu-zoom" style="height: 26px;" ',
'<% if(!_.isUndefined(options.stopPropagation)) { %>',
'data-stopPropagation="true"',
'<% } %>', '>',
'<label class="title">' + me.header.textZoom + '</label>',
'<button id="hdr-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>',
'<label class="zoom"><%= options.value %>%</label>',
'<button id="hdr-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>',
'</div>'
].join('')),
stopPropagation: true,
value: me.header.mnuZoom.options.value
});
me.header.btnOptions.setMenu(new Common.UI.Menu({
cls: 'pull-right',
style: 'min-width: 180px;',
items: [
me.header.mnuitemCompactToolbar,
me.header.mnuitemHideStatusBar,
me.header.mnuitemHideRulers,
{caption:'--'},
me.header.menuItemsDarkMode,
{caption:'--'},
me.header.mnuitemFitPage,
me.header.mnuitemFitWidth,
me.header.mnuZoom,
{caption:'--'},
new Common.UI.MenuItem({
caption: me.header.textAdvSettings,
value: 'advanced'
})
]
})
);
var _on_btn_zoom = function (btn) {
btn == 'up' ? me.api.zoomIn() : me.api.zoomOut();
Common.NotificationCenter.trigger('edit:complete', me.header);
};
(new Common.UI.Button({
el : $('#hdr-menu-zoom-out', me.header.mnuZoom.$el),
cls : 'btn-toolbar'
})).on('click', _on_btn_zoom.bind(me, 'down'));
(new Common.UI.Button({
el : $('#hdr-menu-zoom-in', me.header.mnuZoom.$el),
cls : 'btn-toolbar'
})).on('click', _on_btn_zoom.bind(me, 'up'));
me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
if ( !Common.UI.Themes.isDarkTheme() ) {
me.header.menuItemsDarkMode.hide();
me.header.menuItemsDarkMode.$el.prev('.divider').hide();
}
}
},
onLayoutChanged: function(area) {
@ -377,22 +237,6 @@ define([
this.api.Resize();
},
onThemeChanged: function (id) {
if ( this.header.menuItemsDarkMode ) {
var current_dark = Common.UI.Themes.isDarkTheme();
var menuItem = this.header.menuItemsDarkMode;
menuItem.setVisible(current_dark);
menuItem.$el.prev('.divider')[current_dark ? 'show' : 'hide']();
menuItem.setChecked(Common.UI.Themes.isContentThemeDark());
}
},
onContentThemeChangedToDark: function (isdark) {
if ( this.header.menuItemsDarkMode )
this.header.menuItemsDarkMode.setChecked(isdark, true);
},
onWindowResize: function(e) {
this.onLayoutChanged('window');
Common.NotificationCenter.trigger('window:resize');
@ -404,46 +248,9 @@ define([
me.header.lockHeaderBtns( 'undo', _need_disable );
me.header.lockHeaderBtns( 'redo', _need_disable );
me.header.lockHeaderBtns( 'opts', _need_disable );
me.header.lockHeaderBtns( 'users', _need_disable );
},
onApiZoomChange: function(percent, type) {
this.header.mnuitemFitPage.setChecked(type == 2, true);
this.header.mnuitemFitWidth.setChecked(type == 1, true);
this.header.mnuZoom.options.value = percent;
if ( this.header.mnuZoom.$el )
$('.menu-zoom label.zoom', this.header.mnuZoom.$el).html(percent + '%');
},
onOptionsItemClick: function (menu, item, e) {
var me = this;
switch ( item.value ) {
case 'toolbar': me.header.fireEvent('toolbar:setcompact', [menu, item.isChecked()]); break;
case 'statusbar': me.header.fireEvent('statusbar:hide', [item, item.isChecked()]); break;
case 'rulers':
Common.localStorage.setBool('de-hidden-rulers', item.isChecked());
Common.Utils.InternalSettings.set("de-hidden-rulers", item.isChecked());
me.api.asc_SetViewRulers(!item.isChecked());
Common.NotificationCenter.trigger('layout:changed', 'rulers');
Common.NotificationCenter.trigger('edit:complete', me.header);
me.header.fireEvent('rulers:hide', [item.isChecked()]);
break;
case 'zoom:page':
item.isChecked() ? me.api.zoomFitToPage() : me.api.zoomCustomMode();
Common.NotificationCenter.trigger('edit:complete', me.header);
break;
case 'zoom:width':
item.isChecked() ? me.api.zoomFitToWidth() : me.api.zoomCustomMode();
Common.NotificationCenter.trigger('edit:complete', me.header);
break;
case 'advanced': me.header.fireEvent('file:settings', me.header); break;
case 'mode:dark': Common.UI.Themes.toggleContentTheme(); break;
}
},
onApiCoAuthoringDisconnect: function(enableDownload) {
if (this.header) {
if (this.header.btnDownload && !enableDownload)

43
apps/documenteditor/main/app/template/Toolbar.template
View file

@ -174,49 +174,6 @@
</div>
</div>
</section>
<section class="panel" data-tab="view">
<div class="group" data-layout-name="toolbar-view-navigation">
<span class="btn-slot text x-huge" id="slot-btn-navigation"></span>
</div>
<div class="separator long" data-layout-name="toolbar-view-navigation"></div>
<div class="group small">
<div class="elset" style="display: flex;">
<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>
</div>
<div class="elset" style="text-align: center;">
<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>
</div>
</div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="slot-btn-ftp" style="font-size: 11px;text-align: center;"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-btn-ftw" style="font-size: 11px;text-align: center;"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>
<span class="btn-slot text x-huge" id="slot-btn-dark-document"></span>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="slot-chk-toolbar"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-chk-statusbar"></span>
</div>
</div>
<div class="separator long separator-rulers"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="slot-chk-rulers"></span>
</div>
<div class="elset"></div>
</div>
</section>
</section>
</section>
</div>

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

@ -174,9 +174,8 @@ define([
{caption: me.textTabHome, action: 'home', extcls: 'canedit', dataHintTitle: 'H'},
{caption: me.textTabInsert, action: 'ins', extcls: 'canedit', dataHintTitle: 'I'},
{caption: me.textTabLayout, action: 'layout', extcls: 'canedit', layoutname: 'toolbar-layout', dataHintTitle: 'L'},
{caption: me.textTabLinks, action: 'links', extcls: 'canedit', layoutname: 'toolbar-references', dataHintTitle: 'R'},
undefined, undefined, undefined,
{caption: me.textTabView, action: 'view', extcls: 'canedit', layoutname: 'toolbar-view', dataHintTitle: 'W'}
{caption: me.textTabLinks, action: 'links', extcls: 'canedit', layoutname: 'toolbar-references', dataHintTitle: 'R'}
// undefined, undefined, undefined, undefined,
]
}
);

79
apps/documenteditor/main/app/view/ViewTab.js
View file

@ -46,6 +46,51 @@ define([
'use strict';
DE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){
var template =
'<section class="panel" data-tab="view">' +
'<div class="group" data-layout-name="toolbar-view-navigation">' +
'<span class="btn-slot text x-huge" id="slot-btn-navigation"></span>' +
'</div>' +
'<div class="separator long" data-layout-name="toolbar-view-navigation"></div>' +
'<div class="group small">' +
'<div class="elset" style="display: flex;">' +
'<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>' +
'</div>' +
'<div class="elset" style="text-align: center;">' +
'<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>' +
'</div>' +
'</div>' +
'<div class="group small">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-btn-ftp" style="font-size: 11px;text-align: center;"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-btn-ftw" style="font-size: 11px;text-align: center;"></span>' +
'</div>' +
'</div>' +
'<div class="separator long"></div>' +
'<div class="group">' +
'<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>' +
'<span class="btn-slot text x-huge" id="slot-btn-dark-document"></span>' +
'</div>' +
'<div class="separator long"></div>' +
'<div class="group small">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-toolbar"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-statusbar"></span>' +
'</div>' +
'</div>' +
'<div class="separator long separator-rulers"></div>' +
'<div class="group small">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-rulers"></span>' +
'</div>' +
'<div class="elset"></div>' +
'</div>' +
'</section>';
return {
options: {},
@ -83,12 +128,10 @@ define([
this.lockedControls = [];
var me = this,
$host = me.toolbar.$el;
var me = this;
var _set = Common.enumLock;
this.btnNavigation = new Common.UI.Button({
parentEl: $host.find('#slot-btn-navigation'),
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-menu-navigation',
lock: [_set.lostConnect, _set.disableOnStart],
@ -101,7 +144,6 @@ define([
this.lockedControls.push(this.btnNavigation);
this.cmbZoom = new Common.UI.ComboBox({
el: $host.find('#slot-field-zoom'),
cls: 'input-group-nr',
lock: [_set.lostConnect, _set.disableOnStart],
menuStyle: 'min-width: 55px;',
@ -125,10 +167,7 @@ define([
this.cmbZoom.setValue(100);
this.lockedControls.push(this.cmbZoom);
$host.find('#slot-lbl-zoom').text(this.textZoom);
this.btnFitToPage = new Common.UI.Button({
parentEl: $host.find('#slot-btn-ftp'),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-ic-zoomtopage',
lock: [_set.lostConnect, _set.disableOnStart],
@ -142,7 +181,6 @@ define([
this.lockedControls.push(this.btnFitToPage);
this.btnFitToWidth = new Common.UI.Button({
parentEl: $host.find('#slot-btn-ftw'),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-ic-zoomtowidth',
lock: [_set.lostConnect, _set.disableOnStart],
@ -156,7 +194,6 @@ define([
this.lockedControls.push(this.btnFitToWidth);
this.btnInterfaceTheme = new Common.UI.Button({
parentEl: $host.find('#slot-btn-interface-theme'),
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon day',
lock: [_set.lostConnect, _set.disableOnStart],
@ -169,7 +206,6 @@ define([
this.lockedControls.push(this.btnInterfaceTheme);
this.btnDarkDocument = new Common.UI.Button({
parentEl: $host.find('#slot-btn-dark-document'),
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon dark-mode',
lock: [_set.inLightTheme, _set.lostConnect, _set.disableOnStart],
@ -182,7 +218,6 @@ define([
this.lockedControls.push(this.btnDarkDocument);
this.chStatusbar = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-statusbar'),
lock: [_set.lostConnect, _set.disableOnStart],
labelText: this.textStatusBar,
value: !Common.localStorage.getBool("de-hidden-status"),
@ -193,7 +228,6 @@ define([
this.lockedControls.push(this.chStatusbar);
this.chToolbar = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-toolbar'),
lock: [_set.lostConnect, _set.disableOnStart],
labelText: this.textAlwaysShowToolbar,
value: !options.compactToolbar,
@ -204,7 +238,6 @@ define([
this.lockedControls.push(this.chToolbar);
this.chRulers = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-rulers'),
lock: [_set.lostConnect, _set.disableOnStart],
labelText: this.textRulers,
value: !Common.Utils.InternalSettings.get("de-hidden-rulers"),
@ -214,14 +247,32 @@ define([
});
this.lockedControls.push(this.chRulers);
this.cmpEl = $host;
Common.Utils.lockControls(_set.disableOnStart, true, {array: this.lockedControls});
},
render: function (el) {
if ( el ) el.html( this.getPanel() );
return this;
},
getPanel: function () {
this.$el = $(_.template(template)( {} ));
var $host = this.$el;
this.btnNavigation.render($host.find('#slot-btn-navigation'));
this.cmbZoom.render($host.find('#slot-field-zoom'));
$host.find('#slot-lbl-zoom').text(this.textZoom);
this.btnFitToPage.render($host.find('#slot-btn-ftp'));
this.btnFitToWidth.render($host.find('#slot-btn-ftw'));
this.btnInterfaceTheme.render($host.find('#slot-btn-interface-theme'));
this.btnDarkDocument.render($host.find('#slot-btn-dark-document'));
this.chStatusbar.render($host.find('#slot-chk-statusbar'));
this.chToolbar.render($host.find('#slot-chk-toolbar'));
this.chRulers.render($host.find('#slot-chk-rulers'));
return this.$el;
},
show: function () {
Common.UI.BaseView.prototype.show.call(this);
this.fireEvent('show', this);

14
apps/documenteditor/main/index.html
View file

@ -33,7 +33,7 @@
.theme-light {
--background-toolbar: #f7f7f7;
/*--border-toolbar: #cbcbcb;*/
--highlight-button-hover: #ccc;
--highlight-button-hover: #e0e0e0;
--highlight-header-button-hover: rgba(255,255,255,.15);
--canvas-background: #eee;
--loadmask-canvas-page-border: #ccc;
@ -92,6 +92,16 @@
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
}
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
@ -258,7 +268,7 @@
<script src="../../common/main/lib/util/htmlutils.js"></script>
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;">
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div>
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div>
<div class="sktoolbar" style="display: none;">
<ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul>
<ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li></ul>

12
apps/documenteditor/main/index.html.deploy
View file

@ -70,6 +70,16 @@
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
}
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
@ -226,7 +236,7 @@
<body>
<script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
<div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><div><div class="loading-logo"><img src="../../../apps/documenteditor/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar" style="display: none;"><ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul><ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li></ul></div><div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
<div id="loading-mask" class="loadmask"><div class="brendpanel" style="display: none;"><div><div class="loading-logo"><img src="../../../apps/documenteditor/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span></div></div><div class="sktoolbar" style="display: none;"><ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li><li class="fat"></li></ul><ul><li></li><li class="space"></li><li style="width: 209px;"></li><li class="space"></li><li style="width: 187px;"></li><li class="space"></li><li style="width: 60px;"></li></ul></div><div class="placeholder" style="display: none;"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
<div id="viewport"></div>
<script>

2
apps/documenteditor/main/locale/en.json
View file

@ -294,8 +294,10 @@
"Common.Views.Header.tipUndo": "Undo",
"Common.Views.Header.tipViewSettings": "View settings",
"Common.Views.Header.tipViewUsers": "View users and manage document access rights",
"Common.Views.Header.tipUsers": "View users",
"Common.Views.Header.txtAccessRights": "Change access rights",
"Common.Views.Header.txtRename": "Rename",
"Common.Views.Header.textShare": "Share",
"Common.Views.History.textCloseHistory": "Close History",
"Common.Views.History.textHide": "Collapse",
"Common.Views.History.textHideAll": "Hide detailed changes",

2
apps/documenteditor/main/resources/less/variables.less
View file

@ -3,6 +3,8 @@
// --------------------------------------------------
@header-background-color-ie: @toolbar-header-document-ie;
@header-background-color: var(--toolbar-header-document);
@toolbar-header-text-on-background-ie: @text-toolbar-header-on-background-document-ie;
@toolbar-header-text-on-background: var(--text-toolbar-header-on-background-document);
// Active color
// -------------------------

1
apps/presentationeditor/main/app/controller/LeftMenu.js
View file

@ -62,7 +62,6 @@ define([
'hide': _.bind(this.onHideChat, this)
},
'Common.Views.Header': {
'file:settings': _.bind(this.clickToolbarSettings,this),
'history:show': function () {
if ( !this.leftMenu.panelHistory.isVisible() )
this.clickMenuFileItem('header', 'history');

9
apps/presentationeditor/main/app/controller/Main.js
View file

@ -1255,12 +1255,10 @@ define([
reviewController = application.getController('Common.Controllers.ReviewChanges');
reviewController.setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api).loadDocument({doc:me.document});
if (this.appOptions.isEdit || this.appOptions.isRestrictedEdit) { // set api events for toolbar in the Restricted Editing mode)
var toolbarController = application.getController('Toolbar');
toolbarController && toolbarController.setApi(me.api);
if (!this.appOptions.isEdit) return;
var toolbarController = application.getController('Toolbar');
toolbarController && toolbarController.setApi(me.api);
if (this.appOptions.isEdit) { // set api events for toolbar in the Restricted Editing mode)
var rightmenuController = application.getController('RightMenu'),
fontsControllers = application.getController('Common.Controllers.Fonts');
@ -2338,6 +2336,7 @@ define([
this.api.asc_coAuthoringDisconnect();
appHeader.setCanRename(false);
appHeader.getButton('users') && appHeader.getButton('users').hide();
appHeader.getButton('share') && appHeader.getButton('share').setVisible(false);
this.getApplication().getController('LeftMenu').getView('LeftMenu').showHistory();
this.disableEditing(true);
this._renameDialog && this._renameDialog.close();

3
apps/presentationeditor/main/app/controller/Statusbar.js
View file

@ -61,9 +61,6 @@ define([
'Statusbar': {
'langchanged': this.onLangMenu
},
'Common.Views.Header': {
'statusbar:hide': _.bind(me.onChangeCompactView, me)
},
'ViewTab': {
'statusbar:hide': _.bind(me.onChangeCompactView, me)
}

14
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -141,7 +141,6 @@ define([
'menu:show': this.onFileMenu.bind(this, 'show')
},
'Common.Views.Header': {
'toolbar:setcompact': this.onChangeCompactView.bind(this),
'print': function (opts) {
var _main = this.getApplication().getController('Main');
_main.onPrint();
@ -2503,10 +2502,6 @@ define([
Array.prototype.push.apply(me.toolbar.lockControls,transitController.getView().getButtons());
Array.prototype.push.apply(me.toolbar.slideOnlyControls,transitController.getView().getButtons());
var viewtab = me.getApplication().getController('ViewTab');
viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
var animationController = me.getApplication().getController('Animation');
animationController.setApi(me.api).setConfig({toolbar: me,mode:config}).createToolbarPanel();
@ -2534,6 +2529,15 @@ define([
}
}
}
tab = {caption: me.toolbar.textTabView, action: 'view', extcls: config.isEdit ? 'canedit' : '', layoutname: 'toolbar-view', dataHintTitle: 'W'};
var viewtab = me.getApplication().getController('ViewTab');
viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
$panel = viewtab.createToolbarPanel();
if ($panel) {
me.toolbar.addTab(tab, $panel, 6);
me.toolbar.setVisible('view', Common.UI.LayoutManager.isElementVisible('toolbar-view'));
}
},
onAppReady: function (config) {

49
apps/presentationeditor/main/app/controller/ViewTab.js
View file

@ -63,12 +63,16 @@ define([
};
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
Common.NotificationCenter.on('uitheme:changed', this.onThemeChanged.bind(this));
Common.NotificationCenter.on('document:ready', _.bind(this.onDocumentReady, this));
},
setApi: function (api) {
if (api) {
this.api = api;
this.api.asc_registerCallback('asc_onZoomChange', _.bind(this.onZoomChange, this));
this.api.asc_registerCallback('asc_onNotesShow', _.bind(this.onNotesShow, this));
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onCoAuthoringDisconnect, this));
Common.NotificationCenter.on('api:disconnect', _.bind(this.onCoAuthoringDisconnect, this));
}
return this;
},
@ -81,15 +85,13 @@ define([
mode: mode,
compactToolbar: this.toolbar.toolbar.isCompactView
});
if (mode.canBrandingExt && mode.customization && mode.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
this.view.chStatusbar.$el.remove();
}
this.addListeners({
'ViewTab': {
'zoom:toslide': _.bind(this.onBtnZoomTo, this, 'toslide'),
'zoom:towidth': _.bind(this.onBtnZoomTo, this, 'towidth'),
'rulers:change': _.bind(this.onChangeRulers, this),
'notes:change': _.bind(this.onChangeNotes, this),
'notes:change': _.bind(this.onChangeNotes, this)
},
'Toolbar': {
'view:compact': _.bind(function (toolbar, state) {
@ -100,14 +102,6 @@ define([
'view:hide': _.bind(function (statusbar, state) {
this.view.chStatusbar.setValue(!state, true);
}, this)
},
'Common.Views.Header': {
'rulers:hide': _.bind(function (isChecked) {
this.view.chRulers.setValue(!isChecked, true);
}, this),
'notes:hide': _.bind(function (isChecked) {
this.view.chNotes.setValue(!isChecked, true);
}, this),
}
});
},
@ -116,6 +110,10 @@ define([
this.view && this.view.SetDisabled(state);
},
createToolbarPanel: function() {
return this.view.getPanel();
},
getView: function(name) {
return !name && this.view ?
this.view : Backbone.Controller.prototype.getView.call(this, name);
@ -125,6 +123,10 @@ define([
this.SetDisabled(true);
},
onDocumentReady: function() {
Common.Utils.lockControls(Common.enumLock.disableOnStart, false, {array: this.view.lockedControls});
},
onZoomChange: function (percent, type) {
if (this._state.zoom_type !== type) {
this.view.btnFitToSlide.toggle(type == 2, true);
@ -137,6 +139,11 @@ define([
}
},
onNotesShow: function(bIsShow) {
this.view.chNotes.setValue(bIsShow, true);
Common.localStorage.setBool('pe-hidden-notes', !bIsShow);
},
onAppReady: function (config) {
var me = this;
if (me.view) {
@ -144,6 +151,22 @@ define([
accept();
})).then(function () {
me.view.setEvents();
if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
me.view.chStatusbar.$el.remove();
if (!config.isEdit) {
var slotChkNotes = me.view.chNotes.$el,
groupRulers = slotChkNotes.closest('.group'),
groupToolbar = me.view.chToolbar.$el.closest('.group');
groupToolbar.find('.elset')[1].append(slotChkNotes[0]);
groupRulers.remove();
me.view.$el.find('.separator-rulers').remove();
}
} else if (!config.isEdit) {
me.view.chRulers.hide();
}
me.view.cmbZoom.on('selected', _.bind(me.onSelectedZoomValue, me))
.on('changed:before',_.bind(me.onZoomChanged, me, true))
.on('changed:after', _.bind(me.onZoomChanged, me, false))
@ -186,7 +209,6 @@ define([
this.api.asc_SetViewRulers(checked);
Common.localStorage.setBool('pe-hidden-rulers', !checked);
Common.Utils.InternalSettings.set("pe-hidden-rulers", !checked);
this.view.fireEvent('rulers:hide', [!checked]);
Common.NotificationCenter.trigger('layout:changed', 'rulers');
Common.NotificationCenter.trigger('edit:complete', this.view);
},
@ -194,7 +216,6 @@ define([
onChangeNotes: function (btn, checked) {
this.api.asc_ShowNotes(checked);
Common.localStorage.setBool('pe-hidden-notes', !checked);
this.view.fireEvent('notes:hide', [!checked]);
Common.NotificationCenter.trigger('edit:complete', this.view);
},

188
apps/presentationeditor/main/app/controller/Viewport.js
View file

@ -81,7 +81,6 @@ define([
toolbar.setExtra('left', me.header.getPanel('left', config));
},
'view:compact' : function (toolbar, state) {
me.header.mnuitemCompactToolbar.setChecked(state, true);
me.viewport.vlayout.getItem('toolbar').height = state ?
Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal');
},
@ -107,21 +106,6 @@ define([
if ( me.header.btnSave )
me.header.btnSave.setDisabled(state);
}
},
// Events generated by main view
'Viewport': {
},
'ViewTab': {
'rulers:hide': function (state) {
me.header.mnuitemHideRulers.setChecked(state, true);
},
'notes:hide': function (state) {
me.header.mnuitemHideNotes.setChecked(state, true);
},
'statusbar:hide': function (view, state) {
me.header.mnuitemHideStatusBar.setChecked(state, true);
}
}
});
Common.NotificationCenter.on('preview:start', this.onPreviewStart.bind(this));
@ -129,9 +113,7 @@ define([
setApi: function(api) {
this.api = api;
this.api.asc_registerCallback('asc_onZoomChange', this.onApiZoomChange.bind(this));
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',this.onApiCoAuthoringDisconnect.bind(this));
this.api.asc_registerCallback('asc_onNotesShow', this.onNotesShow.bind(this));
Common.NotificationCenter.on('api:disconnect', this.onApiCoAuthoringDisconnect.bind(this));
},
@ -168,9 +150,6 @@ define([
this.boxSdk = $('#editor_sdk');
this.boxSdk.css('border-left', 'none');
this.header.mnuitemFitPage = this.header.fakeMenuItem();
this.header.mnuitemFitWidth = this.header.fakeMenuItem();
Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
},
@ -222,126 +201,6 @@ define([
},
onAppReady: function (config) {
var me = this;
if ( me.header.btnOptions ) {
var compactview = !config.isEdit;
if ( config.isEdit ) {
if ( Common.localStorage.itemExists("pe-compact-toolbar") ) {
compactview = Common.localStorage.getBool("pe-compact-toolbar");
} else
if ( config.customization && config.customization.compactToolbar )
compactview = true;
}
me.header.mnuitemCompactToolbar = new Common.UI.MenuItem({
caption: me.header.textCompactView,
checked: compactview,
checkable: true,
value: 'toolbar'
});
if (!config.isEdit) {
me.header.mnuitemCompactToolbar.hide();
Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
if ((action=='plugins' || action=='review') && visible) {
me.header.mnuitemCompactToolbar.show();
}
}, this));
}
me.header.mnuitemHideStatusBar = new Common.UI.MenuItem({
caption: me.header.textHideStatusBar,
checked: Common.localStorage.getBool("pe-hidden-status"),
checkable: true,
value: 'statusbar'
});
if ( config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar'))
me.header.mnuitemHideStatusBar.hide();
me.header.mnuitemHideRulers = new Common.UI.MenuItem({
caption: me.header.textHideLines,
checked: Common.Utils.InternalSettings.get("pe-hidden-rulers"),
checkable: true,
value: 'rulers'
});
if (!config.isEdit)
me.header.mnuitemHideRulers.hide();
me.header.mnuitemHideNotes = new Common.UI.MenuItem({
caption: me.header.textHideNotes,
checked: Common.localStorage.getBool('pe-hidden-notes', config.customization && config.customization.hideNotes===true),
checkable: true,
value: 'notes'
});
me.header.mnuitemFitPage = new Common.UI.MenuItem({
caption: me.textFitPage,
checkable: true,
checked: me.header.mnuitemFitPage.isChecked(),
value: 'zoom:page'
});
me.header.mnuitemFitWidth = new Common.UI.MenuItem({
caption: me.textFitWidth,
checkable: true,
checked: me.header.mnuitemFitWidth.isChecked(),
value: 'zoom:width'
});
me.header.mnuZoom = new Common.UI.MenuItem({
template: _.template([
'<div id="hdr-menu-zoom" class="menu-zoom" style="height: 26px;" ',
'<% if(!_.isUndefined(options.stopPropagation)) { %>',
'data-stopPropagation="true"',
'<% } %>', '>',
'<label class="title">' + me.header.textZoom + '</label>',
'<button id="hdr-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>',
'<label class="zoom"><%= options.value %>%</label>',
'<button id="hdr-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>',
'</div>'
].join('')),
stopPropagation: true,
value: me.header.mnuZoom.options.value
});
me.header.btnOptions.setMenu(new Common.UI.Menu({
cls: 'pull-right',
style: 'min-width: 180px;',
items: [
me.header.mnuitemCompactToolbar,
me.header.mnuitemHideStatusBar,
me.header.mnuitemHideRulers,
me.header.mnuitemHideNotes,
{caption:'--'},
me.header.mnuitemFitPage,
me.header.mnuitemFitWidth,
me.header.mnuZoom,
{caption:'--'},
new Common.UI.MenuItem({
caption: me.header.textAdvSettings,
value: 'advanced'
})
]
})
);
var _on_btn_zoom = function (btn) {
btn == 'up' ? me.api.zoomIn() : me.api.zoomOut();
Common.NotificationCenter.trigger('edit:complete', me.header);
};
(new Common.UI.Button({
el : $('#hdr-menu-zoom-out', me.header.mnuZoom.$el),
cls : 'btn-toolbar'
})).on('click', _on_btn_zoom.bind(me, 'down'));
(new Common.UI.Button({
el : $('#hdr-menu-zoom-in', me.header.mnuZoom.$el),
cls : 'btn-toolbar'
})).on('click', _on_btn_zoom.bind(me, 'up'));
me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
}
},
onLayoutChanged: function(area) {
@ -446,51 +305,9 @@ define([
me.header.lockHeaderBtns( 'undo', _need_disable );
me.header.lockHeaderBtns( 'redo', _need_disable );
me.header.lockHeaderBtns( 'opts', _need_disable );
me.header.lockHeaderBtns( 'users', _need_disable );
},
onApiZoomChange: function(percent, type) {
this.header.mnuitemFitPage.setChecked(type == 2, true);
this.header.mnuitemFitWidth.setChecked(type == 1, true);
this.header.mnuZoom.options.value = percent;
if ( this.header.mnuZoom.$el )
$('.menu-zoom label.zoom', this.header.mnuZoom.$el).html(percent + '%');
},
onOptionsItemClick: function (menu, item, e) {
var me = this;
switch ( item.value ) {
case 'toolbar': me.header.fireEvent('toolbar:setcompact', [menu, item.isChecked()]); break;
case 'statusbar': me.header.fireEvent('statusbar:hide', [item, item.isChecked()]); break;
case 'rulers':
me.api.asc_SetViewRulers(!item.isChecked());
Common.localStorage.setBool('pe-hidden-rulers', item.isChecked());
Common.Utils.InternalSettings.set("pe-hidden-rulers", item.isChecked());
Common.NotificationCenter.trigger('layout:changed', 'rulers');
Common.NotificationCenter.trigger('edit:complete', me.header);
me.header.fireEvent('rulers:hide', [item.isChecked()]);
break;
case 'notes':
me.api.asc_ShowNotes(!item.isChecked());
Common.localStorage.setBool('pe-hidden-notes', item.isChecked());
Common.NotificationCenter.trigger('edit:complete', me.header);
me.header.fireEvent('notes:hide', [item.isChecked()]);
break;
case 'zoom:page':
item.isChecked() ? me.api.zoomFitToPage() : me.api.zoomCustomMode();
Common.NotificationCenter.trigger('edit:complete', me.header);
break;
case 'zoom:width':
item.isChecked() ? me.api.zoomFitToWidth() : me.api.zoomCustomMode();
Common.NotificationCenter.trigger('edit:complete', me.header);
break;
case 'advanced': me.header.fireEvent('file:settings', me.header); break;
}
},
onApiCoAuthoringDisconnect: function(enableDownload) {
if (this.header) {
if (this.header.btnDownload && !enableDownload)
@ -507,11 +324,6 @@ define([
this.header && this.header.lockHeaderBtns( 'rename-user', disable);
},
onNotesShow: function(bIsShow) {
this.header && this.header.mnuitemHideNotes.setChecked(!bIsShow, true);
Common.localStorage.setBool('pe-hidden-notes', !bIsShow);
},
textFitPage: 'Fit to Page',
textFitWidth: 'Fit to Width'
}, PE.Controllers.Viewport));

40
apps/presentationeditor/main/app/template/Toolbar.template
View file

@ -178,46 +178,6 @@
</div>
</div>
</section>
<section class="panel" data-tab="view">
<div class="group small">
<div class="elset" style="display: flex;">
<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>
</div>
<div class="elset" style="text-align: center;">
<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>
</div>
</div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="slot-btn-fts" style="font-size: 11px;text-align: center;"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-btn-ftw" style="font-size: 11px;text-align: center;"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="slot-chk-notes"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-chk-rulers"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="slot-chk-toolbar"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-chk-statusbar"></span>
</div>
</div>
</section>
<section id="animation-panel" class="panel" data-tab="animate">
<div class="group flex small" id="animation-field-effects" style="width: 700px; max-width: 700px; min-width: 210px;" data-group-width="700px"></div>
<div class="group small">

5
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -150,9 +150,8 @@ define([
{caption: me.textTabHome, action: 'home', extcls: 'canedit', dataHintTitle: 'H'},
{caption: me.textTabInsert, action: 'ins', extcls: 'canedit', dataHintTitle: 'I'},
{caption: me.textTabTransitions, action: 'transit', extcls: 'canedit', dataHintTitle: 'N'},
{caption: me.textTabAnimation, action: 'animate', extcls: 'canedit', dataHintTitle: 'A'},
undefined, undefined,
{caption: me.textTabView, action: 'view', extcls: 'canedit', layoutname: 'toolbar-view', dataHintTitle: 'W'}
{caption: me.textTabAnimation, action: 'animate', extcls: 'canedit', dataHintTitle: 'A'}
// undefined, undefined, undefined,
]
}
);

72
apps/presentationeditor/main/app/view/ViewTab.js
View file

@ -46,6 +46,47 @@ define([
'use strict';
PE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){
var template =
'<section class="panel" data-tab="view">' +
'<div class="group small">' +
'<div class="elset" style="display: flex;">' +
'<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>' +
'</div>' +
'<div class="elset" style="text-align: center;">' +
'<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>' +
'</div>' +
'</div>' +
'<div class="group small">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-btn-fts" style="font-size: 11px;text-align: center;"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-btn-ftw" style="font-size: 11px;text-align: center;"></span>' +
'</div>' +
'</div>' +
'<div class="separator long"></div>' +
'<div class="group">' +
'<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>' +
'</div>' +
'<div class="separator long"></div>' +
'<div class="group small">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-notes"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-rulers"></span>' +
'</div>' +
'</div>' +
'<div class="separator long separator-rulers"></div>' +
'<div class="group small">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-toolbar"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-statusbar"></span>' +
'</div>' +
'</div>' +
'</section>';
return {
options: {},
@ -81,11 +122,9 @@ define([
this.lockedControls = [];
var me = this,
$host = me.toolbar.$el;
var me = this;
this.cmbZoom = new Common.UI.ComboBox({
el: $host.find('#slot-field-zoom'),
cls: 'input-group-nr',
menuStyle: 'min-width: 55px;',
editable: true,
@ -109,10 +148,7 @@ define([
this.cmbZoom.setValue(100);
this.lockedControls.push(this.cmbZoom);
$host.find('#slot-lbl-zoom').text(this.textZoom);
this.btnFitToSlide = new Common.UI.Button({
parentEl: $host.find('#slot-btn-fts'),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-ic-zoomtoslide',
caption: this.textFitToSlide,
@ -126,7 +162,6 @@ define([
this.lockedControls.push(this.btnFitToSlide);
this.btnFitToWidth = new Common.UI.Button({
parentEl: $host.find('#slot-btn-ftw'),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-ic-zoomtowidth',
caption: this.textFitToWidth,
@ -140,7 +175,6 @@ define([
this.lockedControls.push(this.btnFitToWidth);
this.btnInterfaceTheme = new Common.UI.Button({
parentEl: $host.find('#slot-btn-interface-theme'),
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon day',
caption: this.textInterfaceTheme,
@ -153,7 +187,6 @@ define([
this.lockedControls.push(this.btnInterfaceTheme);
this.chStatusbar = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-statusbar'),
labelText: this.textStatusBar,
value: !Common.localStorage.getBool("pe-hidden-status"),
lock: [_set.disableOnStart],
@ -164,7 +197,6 @@ define([
this.lockedControls.push(this.chStatusbar);
this.chToolbar = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-toolbar'),
labelText: this.textAlwaysShowToolbar,
value: !options.compactToolbar,
lock: [_set.disableOnStart],
@ -175,7 +207,6 @@ define([
this.lockedControls.push(this.chToolbar);
this.chRulers = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-rulers'),
labelText: this.textRulers,
value: !Common.Utils.InternalSettings.get("pe-hidden-rulers"),
lock: [_set.disableOnStart],
@ -186,7 +217,6 @@ define([
this.lockedControls.push(this.chRulers);
this.chNotes = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-notes'),
labelText: this.textNotes,
value: !Common.localStorage.getBool('pe-hidden-notes', this.appConfig.customization && this.appConfig.customization.hideNotes===true),
lock: [_set.disableOnStart],
@ -198,9 +228,27 @@ define([
},
render: function (el) {
if ( el ) el.html( this.getPanel() );
return this;
},
getPanel: function () {
this.$el = $(_.template(template)( {} ));
var $host = this.$el;
this.cmbZoom.render($host.find('#slot-field-zoom'));
$host.find('#slot-lbl-zoom').text(this.textZoom);
this.btnFitToSlide.render($host.find('#slot-btn-fts'));
this.btnFitToWidth.render($host.find('#slot-btn-ftw'));
this.btnInterfaceTheme.render($host.find('#slot-btn-interface-theme'));
this.chStatusbar.render($host.find('#slot-chk-statusbar'));
this.chToolbar.render($host.find('#slot-chk-toolbar'));
this.chRulers.render($host.find('#slot-chk-rulers'));
this.chNotes.render($host.find('#slot-chk-notes'));
return this.$el;
},
show: function () {
Common.UI.BaseView.prototype.show.call(this);
this.fireEvent('show', this);

11
apps/presentationeditor/main/index.html
View file

@ -75,6 +75,15 @@
background: rgba(255, 255, 255, 0.2);
}
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
}
.loadmask > .sktoolbar {
background: #f7f7f7;
background: var(--background-toolbar, #f7f7f7);
@ -273,7 +282,7 @@
<script src="../../common/main/lib/util/htmlutils.js"></script>
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;">
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
<div><div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li/><li class="space" style="width: 76px;"/><li class="split" /><li class="space"/><li style="width: 176px;"/><li class="space"/><li style="width: 115px;"/><li class="space" style="width: 183px;"/><li style="width: 95px;"/><li class="fat"/></ul>

11
apps/presentationeditor/main/index.html.deploy
View file

@ -63,6 +63,15 @@
background: rgba(255, 255, 255, 0.2);
}
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
}
.loadmask > .sktoolbar {
background: #f7f7f7;
background: var(--background-toolbar, #f7f7f7);
@ -263,7 +272,7 @@
<script src="../../../../../apps/common/main/lib/util/htmlutils.js?__inline=true"></script>
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;">
<div><div class="loading-logo"><img src="../../../apps/presentationeditor/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
<div><div class="loading-logo"><img src="../../../apps/presentationeditor/main/resources/img/header/header-logo_s.svg"></div><div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li/><li class="space" style="width: 76px;"/><li class="split" /><li class="space"/><li style="width: 176px;"/><li class="space"/><li style="width: 115px;"/><li class="space" style="width: 183px;"/><li style="width: 95px;"/><li class="fat"/></ul>

2
apps/presentationeditor/main/locale/en.json
View file

@ -379,8 +379,10 @@
"Common.Views.Header.tipUndock": "Undock into separate window",
"Common.Views.Header.tipViewSettings": "View settings",
"Common.Views.Header.tipViewUsers": "View users and manage document access rights",
"Common.Views.Header.tipUsers": "View users",
"Common.Views.Header.txtAccessRights": "Change access rights",
"Common.Views.Header.txtRename": "Rename",
"Common.Views.Header.textShare": "Share",
"Common.Views.History.textCloseHistory": "Close History",
"Common.Views.History.textHide": "Collapse",
"Common.Views.History.textHideAll": "Hide detailed changes",

3
apps/presentationeditor/main/resources/less/variables.less
View file

@ -2,7 +2,8 @@
// -------------------------
@header-background-color-ie: @toolbar-header-presentation-ie;
@header-background-color: var(--toolbar-header-presentation);
@toolbar-header-text-on-background-ie: @text-toolbar-header-on-background-presentation-ie;
@toolbar-header-text-on-background: var(--text-toolbar-header-on-background-presentation);
// Grays
// -------------------------

10
apps/spreadsheeteditor/main/app/controller/CellEditor.js
View file

@ -68,11 +68,11 @@ define([
'Viewport': {
'layout:resizedrag': _.bind(this.onLayoutResize, this)
},
'Common.Views.Header': {
'formulabar:hide': function (state) {
this.editor.setVisible(!state);
Common.localStorage.setBool('sse-hidden-formula', state);
Common.NotificationCenter.trigger('layout:changed', 'celleditor', state?'hidden':'showed');
'ViewTab': {
'viewtab:formula': function (type, state) {
this.editor.setVisible(state);
Common.localStorage.setBool('sse-hidden-formula', !state);
Common.NotificationCenter.trigger('layout:changed', 'celleditor', !state?'hidden':'showed');
}.bind(this)
}
});

1
apps/spreadsheeteditor/main/app/controller/LeftMenu.js
View file

@ -56,7 +56,6 @@ define([
'hide': _.bind(this.onHidePlugins, this)
},
'Common.Views.Header': {
'file:settings': _.bind(this.clickToolbarSettings,this),
'history:show': function () {
if ( !this.leftMenu.panelHistory.isVisible() )
this.clickMenuFileItem('header', 'history');

9
apps/spreadsheeteditor/main/app/controller/Main.js
View file

@ -1406,14 +1406,12 @@ define([
Common.Utils.Metric.setCurrentMetric(value);
Common.Utils.InternalSettings.set("sse-settings-unit", value);
var toolbarController = application.getController('Toolbar');
toolbarController && toolbarController.setApi(me.api);
if (this.appOptions.isRestrictedEdit) {
var toolbarController = application.getController('Toolbar');
toolbarController && toolbarController.setApi(me.api);
application.getController('WBProtection').setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api);
} else if (this.appOptions.isEdit) { // set api events for toolbar in the Restricted Editing mode
var toolbarController = application.getController('Toolbar');
toolbarController && toolbarController.setApi(me.api);
var statusbarController = application.getController('Statusbar'),
rightmenuController = application.getController('RightMenu'),
fontsControllers = application.getController('Common.Controllers.Fonts');
@ -2849,6 +2847,7 @@ define([
this.api.asc_coAuthoringDisconnect();
this.headerView.setCanRename(false);
this.headerView.getButton('users') && this.headerView.getButton('users').hide();
this.headerView.getButton('share') && this.headerView.getButton('share').setVisible(false);
this.getApplication().getController('LeftMenu').getView('LeftMenu').showHistory();
this.disableEditing(true);
this._renameDialog && this._renameDialog.close();

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

@ -68,9 +68,6 @@ define([
'sheet:updateColors': _.bind(this.updateTabsColors, this),
'sheet:move': _.bind(this.moveWorksheet, this)
},
'Common.Views.Header': {
'statusbar:setcompact': _.bind(this.onChangeViewMode, this)
},
'ViewTab': {
'statusbar:setcompact': _.bind(this.onChangeViewMode, this)
}

16
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -94,7 +94,6 @@ define([
'sheet:changed': _.bind(this.onApiSheetChanged, this)
},
'Common.Views.Header': {
'toolbar:setcompact': this.onChangeViewMode.bind(this),
'print': function (opts) {
var _main = this.getApplication().getController('Main');
_main.onPrint();
@ -3811,12 +3810,19 @@ define([
me.toolbar.addTab(tab, $panel, 7);
Array.prototype.push.apply(me.toolbar.lockControls, wbtab.getView('WBProtection').getButtons());
}
var viewtab = me.getApplication().getController('ViewTab');
viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
}
}
if ( !config.isEditDiagram && !config.isEditMailMerge ) {
tab = {caption: me.toolbar.textTabView, action: 'view', extcls: config.isEdit ? 'canedit' : '', layoutname: 'toolbar-view', dataHintTitle: 'W'};
var viewtab = me.getApplication().getController('ViewTab');
viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
$panel = viewtab.createToolbarPanel();
if ($panel) {
me.toolbar.addTab(tab, $panel, 8);
me.toolbar.setVisible('view', Common.UI.LayoutManager.isElementVisible('toolbar-view'));
}
config.isEdit && Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
}
},
onAppReady: function (config) {

21
apps/spreadsheeteditor/main/app/controller/ViewTab.js
View file

@ -84,9 +84,7 @@ define([
mode: mode,
compactToolbar: this.toolbar.toolbar.isCompactView
});
if (mode.canBrandingExt && mode.customization && mode.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
this.view.chStatusbar.$el.remove();
}
this.addListeners({
'ViewTab': {
'zoom:selected': _.bind(this.onSelectedZoomValue, this),
@ -114,11 +112,6 @@ define([
'view:compact': _.bind(function (toolbar, state) {
this.view.chToolbar.setValue(!state, true);
}, this)
},
'Common.Views.Header': {
'toolbar:freezeshadow': _.bind(function (isChecked) {
this.view.btnFreezePanes.menu.items[4].setChecked(isChecked, true);
}, this)
}
});
Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this));
@ -128,6 +121,10 @@ define([
this.view && this.view.SetDisabled(state);
},
createToolbarPanel: function() {
return this.view.getPanel();
},
getView: function(name) {
return !name && this.view ?
this.view : Backbone.Controller.prototype.getView.call(this, name);
@ -154,7 +151,6 @@ define([
onFreezeShadow: function (checked) {
this.api.asc_setFrozenPaneBorderType(checked ? Asc.c_oAscFrozenPaneBorderType.shadow : Asc.c_oAscFrozenPaneBorderType.line);
Common.localStorage.setBool('sse-freeze-shadow', checked);
this.view.fireEvent('freeze:shadow', [checked]);
Common.NotificationCenter.trigger('edit:complete', this.view);
},
@ -191,10 +187,9 @@ define([
onViewSettings: function(type, value){
if (this.api) {
switch (type) {
case 0: this.getApplication().getController('Viewport').header.fireEvent('formulabar:hide', [ value!=='checked']); break;
case 1: this.api.asc_setDisplayHeadings(value=='checked'); break;
case 2: this.api.asc_setDisplayGridlines( value=='checked'); break;
case 3: this.api.asc_setShowZeros( value=='checked'); break;
case 1: this.api.asc_setDisplayHeadings(value); break;
case 2: this.api.asc_setDisplayGridlines(value); break;
case 3: this.api.asc_setShowZeros(value); break;
}
}
Common.NotificationCenter.trigger('edit:complete', this.view);

248
apps/spreadsheeteditor/main/app/controller/Viewport.js
View file

@ -72,9 +72,7 @@ define([
'menu:show': me.onFileMenu.bind(me, 'show')
},
'Statusbar': {
'sheet:changed': me.onApiSheetChanged.bind(me),
'view:compact': function (statusbar, state) {
me.header.mnuitemCompactStatusBar.setChecked(state, true);
me.viewport.vlayout.getItem('statusbar').height = state ? 25 : 50;
}
},
@ -92,7 +90,6 @@ define([
},
'view:compact' : function (toolbar, state) {
me.header.mnuitemCompactToolbar.setChecked(state, true);
me.viewport.vlayout.getItem('toolbar').height = state ?
Common.Utils.InternalSettings.get('toolbar-height-compact') : Common.Utils.InternalSettings.get('toolbar-height-normal');
},
@ -118,26 +115,15 @@ define([
if ( me.header.btnSave )
me.header.btnSave.setDisabled(state);
}
},
'ViewTab': {
'freeze:shadow': function (checked) {
me.header.mnuitemFreezePanesShadow.setChecked(checked, true);
}
}
});
Common.NotificationCenter.on('app:face', this.onAppShowed.bind(this));
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
Common.NotificationCenter.on('cells:range', this.onCellsRange.bind(this));
},
setApi: function(api) {
this.api = api;
this.api.asc_registerCallback('asc_onZoomChanged', this.onApiZoomChange.bind(this));
this.api.asc_registerCallback('asc_onSheetsChanged', this.onApiSheetChanged.bind(this));
this.api.asc_registerCallback('asc_onUpdateSheetViewSettings', this.onApiSheetChanged.bind(this));
this.api.asc_registerCallback('asc_onWorksheetLocked', this.onWorksheetLocked.bind(this));
this.api.asc_registerCallback('asc_onEditCell', this.onApiEditCell.bind(this));
this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',this.onApiCoAuthoringDisconnect.bind(this));
Common.NotificationCenter.on('api:disconnect', this.onApiCoAuthoringDisconnect.bind(this));
},
@ -193,161 +179,6 @@ define([
},
onAppReady: function (config) {
var me = this;
if ( me.header.btnOptions ) {
var compactview = !config.isEdit;
if ( config.isEdit && !config.isEditDiagram && !config.isEditMailMerge ) {
if ( Common.localStorage.itemExists("sse-compact-toolbar") ) {
compactview = Common.localStorage.getBool("sse-compact-toolbar");
} else
if ( config.customization && config.customization.compactToolbar )
compactview = true;
}
me.header.mnuitemCompactToolbar = new Common.UI.MenuItem({
caption : me.header.textCompactView,
checked : compactview,
checkable : true,
value : 'toolbar'
});
if (!config.isEdit && !config.isEditDiagram && !config.isEditMailMerge) {
me.header.mnuitemCompactToolbar.hide();
Common.NotificationCenter.on('tab:visible', _.bind(function(action, visible){
if ((action=='plugins' || action=='review') && visible) {
me.header.mnuitemCompactToolbar.show();
}
}, this));
}
me.header.mnuitemCompactStatusBar = new Common.UI.MenuItem({
caption: me.header.textHideStatusBar,
checked: Common.localStorage.getBool("sse-compact-statusbar", true),
checkable: true,
value: 'statusbar'
});
if ( config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar'))
me.header.mnuitemCompactStatusBar.hide();
me.header.mnuitemHideFormulaBar = new Common.UI.MenuItem({
caption : me.textHideFBar,
checked : Common.localStorage.getBool('sse-hidden-formula'),
checkable : true,
value : 'formula'
});
me.header.mnuitemHideHeadings = new Common.UI.MenuItem({
caption : me.textHideHeadings,
checkable : true,
checked : me.header.mnuitemHideHeadings.isChecked(),
disabled : me.header.mnuitemHideHeadings.isDisabled(),
value : 'headings'
});
me.header.mnuitemHideGridlines = new Common.UI.MenuItem({
caption : me.textHideGridlines,
checkable : true,
checked : me.header.mnuitemHideGridlines.isChecked(),
disabled : me.header.mnuitemHideGridlines.isDisabled(),
value : 'gridlines'
});
me.header.mnuitemFreezePanes = new Common.UI.MenuItem({
caption : me.textFreezePanes,
checkable : true,
checked : me.header.mnuitemFreezePanes.isChecked(),
disabled : me.header.mnuitemFreezePanes.isDisabled(),
value : 'freezepanes'
});
me.header.mnuitemFreezePanesShadow = new Common.UI.MenuItem({
caption : me.textFreezePanesShadow,
checkable : true,
checked : Common.localStorage.getBool('sse-freeze-shadow', true),
value : 'freezepanesshadow'
});
me.header.mnuZoom = new Common.UI.MenuItem({
template: _.template([
'<div id="hdr-menu-zoom" class="menu-zoom" style="height: 26px;" ',
'<% if(!_.isUndefined(options.stopPropagation)) { %>',
'data-stopPropagation="true"',
'<% } %>', '>',
'<label class="title">' + me.header.textZoom + '</label>',
'<button id="hdr-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>',
'<label class="zoom"><%= options.value %>%</label>',
'<button id="hdr-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>',
'</div>'
].join('')),
stopPropagation: true,
value: me.header.mnuZoom.options.value
});
var mnuitemAdvSettings = new Common.UI.MenuItem({
caption: me.header.textAdvSettings,
value: 'advanced'
});
me.header.btnOptions.setMenu(new Common.UI.Menu({
cls: 'pull-right',
style: 'min-width: 180px;',
items: [
me.header.mnuitemCompactToolbar,
me.header.mnuitemHideFormulaBar,
me.header.mnuitemCompactStatusBar,
{caption:'--'},
me.header.mnuitemHideHeadings,
me.header.mnuitemHideGridlines,
{caption:'--'},
me.header.mnuitemFreezePanes,
me.header.mnuitemFreezePanesShadow,
{caption:'--'},
me.header.mnuZoom,
{caption:'--'},
mnuitemAdvSettings
]
})
);
if (!config.isEdit) {
var menu = me.header.btnOptions.menu;
me.header.mnuitemHideHeadings.hide();
me.header.mnuitemHideGridlines.hide();
me.header.mnuitemFreezePanes.hide();
menu.items[6].hide();
if (!config.canViewComments) { // show advanced settings for editing and commenting mode
// mnuitemAdvSettings.hide();
// menu.items[9].hide();
}
}
var _on_btn_zoom = function (btn) {
if ( btn == 'up' ) {
var _f = Math.floor(this.api.asc_getZoom() * 10)/10;
_f += .1;
if (_f > 0 && !(_f > 5.))
this.api.asc_setZoom(_f);
} else {
_f = Math.ceil(this.api.asc_getZoom() * 10)/10;
_f -= .1;
if (!(_f < .5))
this.api.asc_setZoom(_f);
}
Common.NotificationCenter.trigger('edit:complete', me.header);
};
(new Common.UI.Button({
el : $('#hdr-menu-zoom-out', me.header.mnuZoom.$el),
cls : 'btn-toolbar'
})).on('click', _on_btn_zoom.bind(me, 'down'));
(new Common.UI.Button({
el : $('#hdr-menu-zoom-in', me.header.mnuZoom.$el),
cls : 'btn-toolbar'
})).on('click', _on_btn_zoom.bind(me, 'up'));
me.header.btnOptions.menu.on('item:click', me.onOptionsItemClick.bind(this));
}
},
// When our application is ready, lets get started
@ -386,10 +217,6 @@ define([
this.boxFormula = $('#cell-editing-box');
this.boxSdk.css('border-left', 'none');
this.boxFormula.css('border-left', 'none');
this.header.mnuitemHideHeadings = this.header.fakeMenuItem();
this.header.mnuitemHideGridlines = this.header.fakeMenuItem();
this.header.mnuitemFreezePanes = this.header.fakeMenuItem();
},
onLayoutChanged: function(area) {
@ -432,7 +259,6 @@ define([
case 'celleditor':
if (arguments[1]) {
this.boxSdk.css('border-top', arguments[1]=='hidden'?'none':'');
this.header.mnuitemHideFormulaBar && this.header.mnuitemHideFormulaBar.setChecked(arguments[1]=='hidden', true);
}
this.viewport.celayout.doLayout();
break;
@ -451,79 +277,9 @@ define([
me.header.lockHeaderBtns( 'undo', _need_disable );
me.header.lockHeaderBtns( 'redo', _need_disable );
me.header.lockHeaderBtns( 'opts', _need_disable );
me.header.lockHeaderBtns( 'users', _need_disable );
},
onApiZoomChange: function(zf, type){
switch (type) {
case 1: // FitWidth
case 2: // FitPage
case 0:
default: {
this.header.mnuZoom.options.value = Math.floor((zf + .005) * 100);
$('.menu-zoom .zoom', this.header.mnuZoom.$el).html(Math.floor((zf + .005) * 100) + '%');
}
}
},
onApiSheetChanged: function() {
var me = this;
var appConfig = me.viewport.mode;
if ( !!appConfig && !appConfig.isEditDiagram && !appConfig.isEditMailMerge ) {
var params = me.api.asc_getSheetViewSettings();
me.header.mnuitemHideHeadings.setChecked(!params.asc_getShowRowColHeaders());
me.header.mnuitemHideGridlines.setChecked(!params.asc_getShowGridLines());
me.header.mnuitemFreezePanes.setChecked(params.asc_getIsFreezePane());
var currentSheet = me.api.asc_getActiveWorksheetIndex();
this.onWorksheetLocked(currentSheet, this.api.asc_isWorksheetLockedOrDeleted(currentSheet));
}
},
onWorksheetLocked: function(index,locked) {
var me = this;
var appConfig = me.viewport.mode;
if ( !!appConfig && !appConfig.isEditDiagram && !appConfig.isEditMailMerge ) {
if (index == this.api.asc_getActiveWorksheetIndex()) {
locked = locked || me.viewmode;
me.header.mnuitemHideHeadings.setDisabled(locked);
me.header.mnuitemHideGridlines.setDisabled(locked);
me.header.mnuitemFreezePanes.setDisabled(locked);
}
}
},
onApiEditCell: function(state) {
if ( state == Asc.c_oAscCellEditorState.editStart )
this.header.lockHeaderBtns('opts', true); else
if ( state == Asc.c_oAscCellEditorState.editEnd )
this.header.lockHeaderBtns('opts', false);
},
onCellsRange: function(status) {
this.onApiEditCell(status != Asc.c_oAscSelectionDialogType.None ? Asc.c_oAscCellEditorState.editStart : Asc.c_oAscCellEditorState.editEnd);
},
onOptionsItemClick: function (menu, item, e) {
var me = this;
switch ( item.value ) {
case 'toolbar': me.header.fireEvent('toolbar:setcompact', [menu, item.isChecked()]); break;
case 'statusbar': me.header.fireEvent('statusbar:setcompact', [menu, item.isChecked()]); break;
case 'formula': me.header.fireEvent('formulabar:hide', [item.isChecked()]); break;
case 'headings': me.api.asc_setDisplayHeadings(!item.isChecked()); break;
case 'gridlines': me.api.asc_setDisplayGridlines(!item.isChecked()); break;
case 'freezepanes': me.api.asc_freezePane(); break;
case 'freezepanesshadow':
me.api.asc_setFrozenPaneBorderType(item.isChecked() ? Asc.c_oAscFrozenPaneBorderType.shadow : Asc.c_oAscFrozenPaneBorderType.line);
Common.localStorage.setBool('sse-freeze-shadow', item.isChecked());
me.header.fireEvent('toolbar:freezeshadow', [item.isChecked()]);
break;
case 'advanced': me.header.fireEvent('file:settings', me.header); break;
}
},
onApiCoAuthoringDisconnect: function(enableDownload) {
if (this.header) {
if (this.header.btnDownload && !enableDownload)
@ -536,10 +292,6 @@ define([
},
SetDisabled: function (disabled) {
this.viewmode = disabled;
this.header.mnuitemHideHeadings.setDisabled(disabled);
this.header.mnuitemHideGridlines.setDisabled(disabled);
this.header.mnuitemFreezePanes.setDisabled(disabled);
},
textHideFBar: 'Hide Formula Bar',

56
apps/spreadsheeteditor/main/app/template/Toolbar.template
View file

@ -245,62 +245,6 @@
<!--</div>-->
<!--</div>-->
</section>
<section class="panel" data-tab="view">
<div class="group sheet-views">
<span class="btn-slot text x-huge" id="slot-btn-sheet-view"></span>
</div>
<div class="group sheet-views small">
<div class="elset">
<span class="btn-slot text" id="slot-createview"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-closeview"></span>
</div>
</div>
<div class="separator long sheet-views"></div>
<div class="group small">
<div class="elset" style="display: flex;">
<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>
</div>
<div class="elset" style="text-align: center;">
<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>
</div>
<div class="separator long"></div>
<div class="group">
<span class="btn-slot text x-huge" id="slot-btn-freeze"></span>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="slot-chk-formula"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-chk-heading"></span>
</div>
</div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="slot-chk-gridlines"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-chk-zeros"></span>
</div>
</div>
<div class="separator long"></div>
<div class="group small">
<div class="elset">
<span class="btn-slot text" id="slot-chk-toolbar"></span>
</div>
<div class="elset">
<span class="btn-slot text" id="slot-chk-statusbar"></span>
</div>
</div>
</section>
</section>
</section>
</section>

5
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -390,9 +390,8 @@ define([
{ caption: me.textTabInsert, action: 'ins', extcls: 'canedit', dataHintTitle: 'I'},
{caption: me.textTabLayout, action: 'layout', extcls: 'canedit', layoutname: 'toolbar-layout', dataHintTitle: 'L'},
{caption: me.textTabFormula, action: 'formula', extcls: 'canedit', dataHintTitle: 'O'},
{caption: me.textTabData, action: 'data', extcls: 'canedit', dataHintTitle: 'D'},
undefined, undefined, undefined,
{caption: me.textTabView, action: 'view', extcls: 'canedit', layoutname: 'toolbar-view', dataHintTitle: 'W'}
{caption: me.textTabData, action: 'data', extcls: 'canedit', dataHintTitle: 'D'}
// undefined, undefined, undefined, undefined
]}
);

288
apps/spreadsheeteditor/main/app/view/ViewTab.js
View file

@ -46,9 +46,66 @@ define([
'use strict';
SSE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){
var template = '<section class="panel" data-tab="view">' +
'<div class="group sheet-views">' +
'<span class="btn-slot text x-huge" id="slot-btn-sheet-view"></span>' +
'</div>' +
'<div class="group sheet-views small">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-createview"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-closeview"></span>' +
'</div>' +
'</div>' +
'<div class="separator long sheet-views"></div>' +
'<div class="group small">' +
'<div class="elset" style="display: flex;">' +
'<span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>' +
'</div>' +
'<div class="elset" style="text-align: center;">' +
'<span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>' +
'</div>' +
'</div>' +
'<div class="separator long"></div>' +
'<div class="group">' +
'<span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>' +
'</div>' +
'<div class="separator long"></div>' +
'<div class="group sheet-freeze">' +
'<span class="btn-slot text x-huge" id="slot-btn-freeze"></span>' +
'</div>' +
'<div class="separator long sheet-freeze"></div>' +
'<div class="group small sheet-formula">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-formula"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-heading"></span>' +
'</div>' +
'</div>' +
'<div class="group small sheet-gridlines">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-gridlines"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-zeros"></span>' +
'</div>' +
'</div>' +
'<div class="separator long separator-formula"></div>' +
'<div class="group small">' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-toolbar"></span>' +
'</div>' +
'<div class="elset">' +
'<span class="btn-slot text" id="slot-chk-statusbar"></span>' +
'</div>' +
'</div>' +
'</section>';
function setEvents() {
var me = this;
if ( me.appConfig.canFeatureViews ) {
if ( me.appConfig.canFeatureViews && me.appConfig.isEdit) {
me.btnCloseView.on('click', function (btn, e) {
me.fireEvent('viewtab:openview', [{name: 'default', value: 'default'}]);
});
@ -57,7 +114,7 @@ define([
});
}
me.btnFreezePanes.menu.on('item:click', function (menu, item, e) {
me.btnFreezePanes && me.btnFreezePanes.menu.on('item:click', function (menu, item, e) {
if (item.value === 'shadow') {
me.fireEvent('viewtab:freezeshadow', [item.checked]);
} else {
@ -65,16 +122,16 @@ define([
}
});
this.chFormula.on('change', function (field, value) {
me.fireEvent('viewtab:formula', [0, value]);
me.fireEvent('viewtab:formula', [0, value=='checked']);
});
this.chHeadings.on('change', function (field, value) {
me.fireEvent('viewtab:headings', [1, value]);
this.chHeadings && this.chHeadings.on('change', function (field, value) {
me.fireEvent('viewtab:headings', [1, value=='checked']);
});
this.chGridlines.on('change', function (field, value) {
me.fireEvent('viewtab:gridlines', [2, value]);
this.chGridlines && this.chGridlines.on('change', function (field, value) {
me.fireEvent('viewtab:gridlines', [2, value=='checked']);
});
this.chZeros.on('change', function (field, value) {
me.fireEvent('viewtab:zeros', [3, value]);
this.chZeros && this.chZeros.on('change', function (field, value) {
me.fireEvent('viewtab:zeros', [3, value=='checked']);
});
this.chToolbar.on('change', function (field, value) {
me.fireEvent('viewtab:showtoolbar', [field, value !== 'checked']);
@ -105,12 +162,10 @@ define([
this.lockedControls = [];
var me = this,
$host = me.toolbar.$el,
_set = Common.enumLock;
if ( me.appConfig.canFeatureViews ) {
if ( me.appConfig.canFeatureViews && me.appConfig.isEdit ) {
this.btnSheetView = new Common.UI.Button({
parentEl: $host.find('#slot-btn-sheet-view'),
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-sheet-view',
caption: me.capBtnSheetView,
@ -133,7 +188,6 @@ define([
dataHintOffset: 'big'
});
this.lockedControls.push(this.btnCreateView);
Common.Utils.injectComponent($host.find('#slot-createview'), this.btnCreateView);
this.btnCloseView = new Common.UI.Button({
id : 'id-toolbar-btn-closeview',
@ -146,29 +200,55 @@ define([
dataHintOffset: 'big'
});
this.lockedControls.push(this.btnCloseView);
Common.Utils.injectComponent($host.find('#slot-closeview'), this.btnCloseView);
}
this.btnFreezePanes = new Common.UI.Button({
parentEl: $host.find('#slot-btn-freeze'),
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-freeze-panes',
caption: this.capBtnFreeze,
menu: true,
lock: [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.lockedControls.push(this.btnFreezePanes);
if (me.appConfig.isEdit) {
this.btnFreezePanes = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-freeze-panes',
caption: this.capBtnFreeze,
menu: true,
lock: [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.lockedControls.push(this.btnFreezePanes);
this.chHeadings = new Common.UI.CheckBox({
labelText: this.textHeadings,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chHeadings);
this.chGridlines = new Common.UI.CheckBox({
labelText: this.textGridlines,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chGridlines);
this.chZeros = new Common.UI.CheckBox({
labelText: this.textZeros,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chZeros);
}
this.cmbZoom = new Common.UI.ComboBox({
el : $host.find('#slot-field-zoom'),
cls : 'input-group-nr',
menuStyle : 'min-width: 55px;',
hint : me.tipFontSize,
editable : true,
lock : [_set.coAuth, _set.lostConnect, _set.editCell],
lock : [_set.lostConnect, _set.editCell],
data : [
{ displayValue: "50%", value: 50 },
{ displayValue: "75%", value: 75 },
@ -185,52 +265,9 @@ define([
dataHintDirection: 'top',
dataHintOffset: 'small'
});
this.cmbZoom.setValue(100);
this.lockedControls.push(this.cmbZoom);
this.chFormula = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-formula'),
labelText: this.textFormula,
value: !Common.localStorage.getBool('sse-hidden-formula'),
lock : [_set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chFormula);
this.chHeadings = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-heading'),
labelText: this.textHeadings,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chHeadings);
this.chGridlines = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-gridlines'),
labelText: this.textGridlines,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chGridlines);
this.chZeros = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-zeros'),
labelText: this.textZeros,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chZeros);
this.btnInterfaceTheme = new Common.UI.Button({
parentEl: $host.find('#slot-btn-interface-theme'),
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon day',
caption: this.textInterfaceTheme,
@ -241,11 +278,20 @@ define([
});
this.lockedControls.push(this.btnInterfaceTheme);
this.chFormula = new Common.UI.CheckBox({
labelText: this.textFormula,
value: !Common.localStorage.getBool('sse-hidden-formula'),
lock : [_set.lostConnect, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chFormula);
this.chStatusbar = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-statusbar'),
labelText: this.textCombineSheetAndStatusBars,
value : Common.localStorage.getBool('sse-compact-statusbar', true),
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
lock : [_set.lostConnect, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
@ -253,31 +299,51 @@ define([
this.lockedControls.push(this.chStatusbar);
this.chToolbar = new Common.UI.CheckBox({
el: $host.findById('#slot-chk-toolbar'),
labelText: this.textAlwaysShowToolbar,
value : !options.compactToolbar,
lock : [_set.sheetLock, _set.lostConnect, _set.coAuth, _set.editCell],
lock : [_set.lostConnect, _set.editCell],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chToolbar);
$host.find('#slot-lbl-zoom').text(this.textZoom);
Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
},
render: function (el) {
if ( el ) el.html( this.getPanel() );
return this;
},
getPanel: function () {
this.$el = $(_.template(template)( {} ));
var $host = this.$el;
this.btnSheetView && this.btnSheetView.render($host.find('#slot-btn-sheet-view'));
this.btnCreateView && this.btnCreateView.render($host.find('#slot-createview'));
this.btnCloseView && this.btnCloseView.render($host.find('#slot-closeview'));
this.btnFreezePanes && this.btnFreezePanes.render($host.find('#slot-btn-freeze'));
this.cmbZoom.render($host.find('#slot-field-zoom'));
this.cmbZoom.setValue(100);
$host.find('#slot-lbl-zoom').text(this.textZoom);
this.btnInterfaceTheme.render($host.find('#slot-btn-interface-theme'));
this.chFormula.render($host.find('#slot-chk-formula'));
this.chStatusbar.render($host.find('#slot-chk-statusbar'));
this.chToolbar.render($host.find('#slot-chk-toolbar'));
this.chHeadings && this.chHeadings.render($host.find('#slot-chk-heading'));
this.chGridlines && this.chGridlines.render($host.find('#slot-chk-gridlines'));
this.chZeros && this.chZeros.render($host.find('#slot-chk-zeros'));
return this.$el;
},
onAppReady: function (config) {
var me = this;
(new Promise(function (accept, reject) {
accept();
})).then(function(){
if (!config.canFeatureViews) {
if (!(config.canFeatureViews && me.appConfig.isEdit)) {
me.toolbar && me.toolbar.$el.find('.group.sheet-views').hide();
me.toolbar && me.toolbar.$el.find('.separator.sheet-views').hide();
} else {
@ -287,31 +353,49 @@ define([
me.btnCreateView.updateHint(me.tipCreate);
me.btnCloseView.updateHint(me.tipClose);
}
me.btnFreezePanes.setMenu(new Common.UI.Menu({
items: [
{
caption: me.toolbar && me.toolbar.api && !!me.toolbar.api.asc_getSheetViewSettings().asc_getIsFreezePane() ? me.textUnFreeze : me.capBtnFreeze,
value: undefined
},
{
caption: me.textFreezeRow,
value: Asc.c_oAscFrozenPaneAddType.firstRow
},
{
caption: me.textFreezeCol,
value: Asc.c_oAscFrozenPaneAddType.firstCol
},
{ caption: '--' },
{
caption: me.textShowFrozenPanesShadow,
value: 'shadow',
checkable: true,
checked: Common.localStorage.getBool('sse-freeze-shadow', true)
}
]
}));
me.btnFreezePanes.updateHint(me.tipFreeze);
if (config.isEdit) {
me.btnFreezePanes.setMenu(new Common.UI.Menu({
items: [
{
caption: me.toolbar && me.toolbar.api && !!me.toolbar.api.asc_getSheetViewSettings().asc_getIsFreezePane() ? me.textUnFreeze : me.capBtnFreeze,
value: undefined
},
{
caption: me.textFreezeRow,
value: Asc.c_oAscFrozenPaneAddType.firstRow
},
{
caption: me.textFreezeCol,
value: Asc.c_oAscFrozenPaneAddType.firstCol
},
{ caption: '--' },
{
caption: me.textShowFrozenPanesShadow,
value: 'shadow',
checkable: true,
checked: Common.localStorage.getBool('sse-freeze-shadow', true)
}
]
}));
me.btnFreezePanes.updateHint(me.tipFreeze);
} else {
me.toolbar && me.toolbar.$el.find('.group.sheet-freeze').hide();
me.toolbar && me.toolbar.$el.find('.separator.sheet-freeze').hide();
me.toolbar && me.toolbar.$el.find('.group.sheet-gridlines').hide();
}
if (config.canBrandingExt && config.customization && config.customization.statusBar === false || !Common.UI.LayoutManager.isElementVisible('statusBar')) {
me.chStatusbar.$el.remove();
if (!config.isEdit) {
var slotChkFormula = me.chFormula.$el,
groupFormula = slotChkFormula.closest('.group'),
groupToolbar = me.chToolbar.$el.closest('.group');
groupToolbar.find('.elset')[1].append(slotChkFormula[0]);
groupFormula.remove();
me.$el.find('.separator-formula').remove();
}
}
var menuItems = [],
currentTheme = Common.UI.Themes.currentThemeId() || Common.UI.Themes.defaultThemeId();
for (var t in Common.UI.Themes.map()) {

12
apps/spreadsheeteditor/main/index.html
View file

@ -84,6 +84,16 @@
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
}
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
@ -284,7 +294,7 @@
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;"><div>
<div class="loading-logo"><img src="../../common/main/resources/img/header/header-logo_s.svg"></div>
<div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
<div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li/><li class="space"/><li style="width: 219px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li style="width: 340px;"/><li class="fat"/></ul>

12
apps/spreadsheeteditor/main/index.html.deploy
View file

@ -63,6 +63,16 @@
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
}
.loadmask > .brendpanel .circle {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 20px;
margin: 0 10px;
background: rgba(255,255,255,.2);
background: var(--highlight-header-button-hover, rgba(255,255,255,.2));
}
.loadmask > .sktoolbar {
background: #f1f1f1;
background: var(--background-toolbar, #f1f1f1);
@ -265,7 +275,7 @@
<div id="loading-mask" class="loadmask">
<div class="brendpanel" style="display: none;"><div>
<div class="loading-logo"><img src="../../../apps/spreadsheeteditor/main/resources/img/header/header-logo_s.svg"></div>
<div class="spacer"></div><div class="rect"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
<div class="spacer"></div><div class="circle"></div></div><div><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><span class="rect"></span><div class="spacer"></div></div>
</div>
<div class="sktoolbar" style="display: none;">
<ul><li/><li class="space"/><li style="width: 219px;"/><li class="space"/><li style="width: 136px;"/><li class="space"/><li style="width: 340px;"/><li class="fat"/></ul>

2
apps/spreadsheeteditor/main/locale/en.json
View file

@ -235,8 +235,10 @@
"Common.Views.Header.tipUndock": "Undock into separate window",
"Common.Views.Header.tipViewSettings": "View settings",
"Common.Views.Header.tipViewUsers": "View users and manage document access rights",
"Common.Views.Header.tipUsers": "View users",
"Common.Views.Header.txtAccessRights": "Change access rights",
"Common.Views.Header.txtRename": "Rename",
"Common.Views.Header.textShare": "Share",
"Common.Views.History.textCloseHistory": "Close History",
"Common.Views.History.textHide": "Collapse",
"Common.Views.History.textHideAll": "Hide detailed changes",

2
apps/spreadsheeteditor/main/resources/less/variables.less
View file

@ -3,6 +3,8 @@
// --------------------------------------------------
@header-background-color-ie: @toolbar-header-spreadsheet-ie;
@header-background-color: var(--toolbar-header-spreadsheet);
@toolbar-header-text-on-background-ie: @text-toolbar-header-on-background-spreadsheet-ie;
@toolbar-header-text-on-background: var(--text-toolbar-header-on-background-spreadsheet);
// Active color
// -------------------------