pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 14:06:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

[DE PE SSE] Add customize quick access button and dialog

Browse Source
This commit is contained in:
Julia.Svinareva
2024-04-09 22:36:58 +03:00
parent a3f687796a
commit c712c9d241
8 changed files with 271 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
apps/common/main/lib/view/CustomizeQuickAccessDialog.js Normal file
View File

@ -0,0 +1,147 @@
/*
* (c) Copyright Ascensio System SIA 2010-2023
*
* This program is a free software product. You can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License (AGPL)
* version 3 as published by the Free Software Foundation. In accordance with
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
* that Ascensio System SIA expressly excludes the warranty of non-infringement
* of any third-party rights.
*
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
*
* You can contact Ascensio System SIA at 20A-6 Ernesta Birznieka-Upish
* street, Riga, Latvia, EU, LV-1050.
*
* The interactive user interfaces in modified source and object code versions
* of the Program must display Appropriate Legal Notices, as required under
* Section 5 of the GNU AGPL version 3.
*
* Pursuant to Section 7(b) of the License you must retain the original Product
* logo when distributing the program. Pursuant to Section 7(e) we decline to
* grant you any rights under trademark law for use of our trademarks.
*
* All the Product's GUI elements, including illustrations and icon sets, as
* well as technical writing content are licensed under the terms of the
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
*
*/
/**
* CustomizeQuickAccessDialog.js
*
* Created by Julia Svinareva on 9/04/24
* Copyright (c) 2018 Ascensio System SIA. All rights reserved.
*
*/
if (Common === undefined)
var Common = {};
define([
'common/main/lib/component/Window'
], function () { 'use strict';
Common.Views.CustomizeQuickAccessDialog = Common.UI.Window.extend(_.extend({
options: {
width: 296,
style: 'min-width: 296px;',
cls: 'modal-dlg quick-access-dlg',
buttons: ['ok', 'cancel']
},
initialize : function(options) {
_.extend(this.options, {
title: this.textTitle
}, options || {});
this.template = [
'<div class="box">',
'<label class="padding-medium">' + this.textMsg + '</label>',
'<div class="padding-small" id="quick-access-chb-save"></div>',
'<div class="padding-small" id="quick-access-chb-print"></div>',
'<div class="padding-small" id="quick-access-chb-quick-print" style="display:none;"></div>',
'<div class="padding-small" id="quick-access-chb-undo"></div>',
'<div class="padding-small" id="quick-access-chb-redo"></div>',
'</div>'
].join('');
this.options.tpl = _.template(this.template)(this.options);
Common.UI.Window.prototype.initialize.call(this, this.options);
},
render: function() {
Common.UI.Window.prototype.render.call(this);
this.focusedComponents = [];
var $window = this.getChild();
$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
this.chSave = new Common.UI.CheckBox({
el: $('#quick-access-chb-save'),
labelText: this.textSave
});
this.focusedComponents.push(this.chSave);
this.chPrint = new Common.UI.CheckBox({
el: $('#quick-access-chb-print'),
labelText: this.textPrint
});
this.focusedComponents.push(this.chPrint);
if (this.options.canQuickPrint) {
this.chQuickPrint = new Common.UI.CheckBox({
el: $('#quick-access-chb-quick-print'),
labelText: this.textQuickPrint
});
this.focusedComponents.push(this.chQuickPrint);
this.chQuickPrint.show();
}
this.chUndo = new Common.UI.CheckBox({
el: $('#quick-access-chb-undo'),
labelText: this.textUndo
});
this.focusedComponents.push(this.chUndo);
this.chRedo = new Common.UI.CheckBox({
el: $('#quick-access-chb-redo'),
labelText: this.textRedo
});
this.focusedComponents.push(this.chRedo);
},
getFocusedComponents: function() {
return this.focusedComponents.concat(this.getFooterButtons());
},
getDefaultFocusableComponent: function () {
return this.focusedComponents[0];
},
onBtnClick: function(event) {
if (event.currentTarget.attributes['result'].value == 'ok') {
Common.NotificationCenter.trigger('quickaccess:changed', {
save: this.chSave.getValue() == 'checked',
print: this.chPrint.getValue() == 'checked',
quickPrint: this.chQuickPrint.getValue() == 'checked',
undo: this.chUndo.getValue() == 'checked',
redo: this.chRedo.getValue() == 'checked'
});
}
this.close();
},
textTitle: 'Customize quick access',
textMsg: 'Check the commands that will be displayed on the Quick Access Toolbar',
textSave: 'Save',
textPrint: 'Print',
textQuickPrint: 'Quick Print',
textUndo: 'Undo',
textRedo: 'Redo'
}, Common.Views.CustomizeQuickAccessDialog || {}))
});

85
apps/common/main/lib/view/Header.js
View File

@ -149,6 +149,7 @@ define([
'<div class="btn-slot" id="slot-btn-dt-print-quick"></div>' +
'<div class="btn-slot" id="slot-btn-dt-undo"></div>' +
'<div class="btn-slot" id="slot-btn-dt-redo"></div>' +
'<div class="btn-slot" id="slot-btn-dt-quick-access"></div>' +
'</div>' +
'<div class="lr-separator" id="id-box-doc-name">' +
// '<label id="title-doc-name" /></label>' +
@ -427,6 +428,77 @@ define([
});
}
if (me.btnQuickAccess) {
me.btnQuickAccess.updateHint(me.tipCustomizeQuickAccessToolbar);
var arr = [];
if (me.btnSave) {
arr.push({
caption: me.tipSave,
value: 'save',
checkable: true,
checked: true
});
}
if (me.btnPrint) {
arr.push({
caption: me.tipPrint,
value: 'print',
checkable: true,
checked: true
});
}
if (me.btnPrintQuick) {
arr.push({
caption: me.tipPrintQuick,
value: 'print-quick',
checkable: true,
checked: true
});
}
if (me.btnUndo) {
arr.push({
caption: me.tipUndo,
value: 'undo',
checkable: true,
checked: true
});
}
if (me.btnRedo) {
arr.push({
caption: me.tipRedo,
value: 'redo',
checkable: true,
checked: true
});
}
me.btnQuickAccess.setMenu(new Common.UI.Menu({
cls: 'ppm-toolbar',
style: 'min-width: 110px;',
menuAlign: 'tl-bl',
items: arr
}));
me.btnQuickAccess.menu.on('item:click', function (menu, item) {
switch (item.value) {
case 'save':
me.btnSave[item.checked ? 'show' : 'hide']();
break;
case 'print':
me.btnPrint[item.checked ? 'show' : 'hide']();
break;
case 'print-quick':
me.btnPrintQuick[item.checked ? 'show' : 'hide']();
break;
case 'undo':
me.btnUndo[item.checked ? 'show' : 'hide']();
break;
case 'redo':
me.btnRedo[item.checked ? 'show' : 'hide']();
break;
}
Common.NotificationCenter.trigger('edit:complete');
});
}
if ( !appConfig.twoLevelHeader ) {
if ( me.btnDownload ) {
me.btnDownload.updateHint(me.tipDownload);
@ -862,6 +934,16 @@ define([
[Common.enumLock.undoLock, Common.enumLock.fileMenuOpened]);
me.btnRedo = createTitleButton('toolbar__icon icon--inverse btn-redo', $html.findById('#slot-btn-dt-redo'), true, undefined, undefined, 'Y',
[Common.enumLock.redoLock, Common.enumLock.fileMenuOpened]);
me.btnQuickAccess = new Common.UI.Button({
cls: 'btn-header no-caret',
iconCls: 'toolbar__icon icon--inverse btn-more',
menu: true,
enableToggle: true,
dataHint:'0',
dataHintDirection: config.isDesktopApp ? 'right' : 'left',
dataHintOffset: config.isDesktopApp ? '10, -18' : '10, 10'
});
me.btnQuickAccess.render($html.find('#slot-btn-dt-quick-access'));
return $html;
}
@ -1157,7 +1239,8 @@ define([
textReviewDesc: 'Suggest changes',
tipReview: 'Reviewing',
textClose: 'Close file',
textStartFill: 'Start filling'
textStartFill: 'Start filling',
tipCustomizeQuickAccessToolbar: 'Customize Quick Access Toolbar'
}
}(), Common.Views.Header || {}))
});

9
apps/common/main/resources/less/common.less
View File

@ -290,6 +290,15 @@ label {
}
}
.quick-access-dlg {
.padding-small {
padding-bottom: 8px;
}
.padding-medium {
padding-bottom: 12px;
}
}
.plugin-panel {
display: none;
&.active {

9
apps/common/main/resources/less/header.less
View File

@ -527,12 +527,19 @@
color: @text-toolbar-header-ie;
color: @text-toolbar-header;
position: relative;
z-index: 1;
z-index: @zindex-navbar + 2;
.btn-slot {
display: inline-block;
}
.btn {
&.active {
background-color: @highlight-header-button-hover-ie;
background-color: @highlight-header-button-hover;
}
}
svg.icon {
fill: @icon-toolbar-header-ie;
fill: @icon-toolbar-header;

22
apps/documenteditor/main/app/view/FileMenuPanels.js
View File

@ -41,7 +41,8 @@
define([
'common/main/lib/view/DocumentAccessDialog',
'common/main/lib/view/AutoCorrectDialog'
'common/main/lib/view/AutoCorrectDialog',
'common/main/lib/view/CustomizeQuickAccessDialog'
], function () {
'use strict';
@ -413,6 +414,9 @@ define([
'<label class="comment-text"><%= scope.txtQuickPrintTip %></label></span></div>',
'</td>',
'</tr>',
'<tr class="edit">',
'<td colspan="2"><button type="button" class="btn btn-text-default" id="fms-btn-customize-quick-access" style="width:auto;display:inline-block;padding-right:10px;padding-left:10px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.txtCustomizeQuickAccess %></button></div></td>',
'</tr>',
'<tr class="themes">',
'<td><label><%= scope.strTheme %></label></td>',
'<td>',
@ -765,6 +769,11 @@ define([
});
this.btnAutoCorrect.on('click', _.bind(this.autoCorrect, this));
this.btnCustomizeQuickAccess = new Common.UI.Button({
el: $markup.findById('#fms-btn-customize-quick-access')
});
this.btnCustomizeQuickAccess.on('click', _.bind(this.customizeQuickAccess, this));
this.cmbTheme = new Common.UI.ComboBox({
el : $markup.findById('#fms-cmb-theme'),
style : 'width: 160px;',
@ -1079,6 +1088,14 @@ define([
this.dlgAutoCorrect.show();
},
customizeQuickAccess: function () {
if (this.dlgQuickAccess && this.dlgQuickAccess.isVisible()) return;
this.dlgQuickAccess = new Common.Views.CustomizeQuickAccessDialog({
canQuickPrint: this.mode.canQuickPrint
});
this.dlgQuickAccess.show();
},
strZoom: 'Default Zoom Value',
/** coauthoring begin **/
strShowChanges: 'Real-time Collaboration Changes',
@ -1143,7 +1160,8 @@ define([
txtRestartEditor: 'Please restart document editor so that your workspace settings can take effect',
txtLastUsed: 'Last used',
textSmartSelection: 'Use smart paragraph selection',
txtScreenReader: 'Turn on screen reader support'
txtScreenReader: 'Turn on screen reader support',
txtCustomizeQuickAccess: 'Customize quick access'
}, DE.Views.FileMenuPanels.Settings || {}));
DE.Views.FileMenuPanels.CreateNew = Common.UI.BaseView.extend(_.extend({

1
apps/documenteditor/main/locale/en.json
View File

@ -554,6 +554,7 @@
"Common.Views.Header.txtAccessRights": "Change access rights",
"Common.Views.Header.txtRename": "Rename",
"Common.Views.Header.textStartFill": "Start filling",
"Common.Views.Header.tipCustomizeQuickAccessToolbar": "Customize Quick Access Toolbar",
"Common.Views.History.textCloseHistory": "Close History",
"Common.Views.History.textHide": "Collapse",
"Common.Views.History.textHideAll": "Hide detailed changes",

1
apps/presentationeditor/main/locale/en.json
View File

@ -637,6 +637,7 @@
"Common.Views.Header.tipViewUsers": "View users and manage document access rights",
"Common.Views.Header.txtAccessRights": "Change access rights",
"Common.Views.Header.txtRename": "Rename",
"Common.Views.Header.tipCustomizeQuickAccessToolbar": "Customize Quick Access Toolbar",
"Common.Views.History.textCloseHistory": "Close History",
"Common.Views.History.textHide": "Collapse",
"Common.Views.History.textHideAll": "Hide detailed changes",

1
apps/spreadsheeteditor/main/locale/en.json
View File

@ -474,6 +474,7 @@
"Common.Views.Header.tipViewUsers": "View users and manage document access rights",
"Common.Views.Header.txtAccessRights": "Change access rights",
"Common.Views.Header.txtRename": "Rename",
"Common.Views.Header.tipCustomizeQuickAccessToolbar": "Customize Quick Access Toolbar",
"Common.Views.History.textCloseHistory": "Close History",
"Common.Views.History.textHide": "Collapse",
"Common.Views.History.textHideAll": "Hide detailed changes",