Merge pull request #2 from ONLYOFFICE/feature/view-mode-in-review

Feature/view mode in review
This commit is contained in:
Julia Radzhabova 2017-08-24 12:29:29 +03:00 committed by GitHub
commit e265a59dfc
9 changed files with 138 additions and 18 deletions

View file

@ -75,6 +75,7 @@ define([
'reviewchange:reject': _.bind(this.onRejectClick, this), 'reviewchange:reject': _.bind(this.onRejectClick, this),
'reviewchange:delete': _.bind(this.onDeleteClick, this), 'reviewchange:delete': _.bind(this.onDeleteClick, this),
'reviewchange:preview': _.bind(this.onBtnPreviewClick, this), 'reviewchange:preview': _.bind(this.onBtnPreviewClick, this),
'reviewchanges:view': _.bind(this.onReviewViewClick, this),
'lang:document': _.bind(this.onDocLanguage, this) 'lang:document': _.bind(this.onDocLanguage, this)
}, },
'Common.Views.ReviewChangesDialog': { 'Common.Views.ReviewChangesDialog': {
@ -127,10 +128,10 @@ define([
return this; return this;
}, },
SetDisabled: function() { SetDisabled: function(state) {
if (this.dlgChanges) if (this.dlgChanges)
this.dlgChanges.close(); this.dlgChanges.close();
this.view && this.view.SetDisabled(true); this.view && this.view.SetDisabled(state);
}, },
onApiShowChange: function (sdkchange) { onApiShowChange: function (sdkchange) {
@ -500,6 +501,41 @@ define([
this.api.asc_setSpellCheck(state); this.api.asc_setSpellCheck(state);
}, },
onReviewViewClick: function(menu, item, e) {
if (this.api) {
if (item.value === 'final')
this.api.asc_BeginViewModeInReview(true);
else if (item.value === 'original')
this.api.asc_BeginViewModeInReview(false);
else
this.api.asc_EndViewModeInReview();
}
this.disableEditing(item.value !== 'markup');
Common.NotificationCenter.trigger('edit:complete', this.view);
},
disableEditing: function(disable) {
var app = this.getApplication();
app.getController('RightMenu').getView('RightMenu').clearSelection();
app.getController('Toolbar').DisableToolbar(disable, false, true);
app.getController('RightMenu').SetDisabled(disable, false);
app.getController('Statusbar').getView('Statusbar').SetDisabled(disable);
app.getController('DocumentHolder').getView().SetDisabled(disable);
var leftMenu = app.getController('LeftMenu').leftMenu;
leftMenu.btnComments.setDisabled(disable);
if (disable) leftMenu.close();
if (this.view) {
var group = this.view.$el.find('.move-changes');
group.css('position', disable ? 'relative' : 'initial');
disable && group.find('.toolbar-group-mask').css({
left: 0, right: 0, top: 0, bottom: 0
});
this.view.$el.find('.no-group-mask').css('opacity', 1);
}
},
createToolbarPanel: function() { createToolbarPanel: function() {
return this.view.getPanel(); return this.view.getPanel();
}, },

View file

@ -423,6 +423,12 @@ define([
'<div class="separator long review"/>' + '<div class="separator long review"/>' +
'<div class="group">' + '<div class="group">' +
'<span id="btn-review-on" class="btn-slot text x-huge"></span>' + '<span id="btn-review-on" class="btn-slot text x-huge"></span>' +
'</div>' +
'<div class="group no-group-mask" style="padding-left: 0;">' +
'<span id="btn-review-view" class="btn-slot text x-huge"></span>' +
'</div>' +
'<div class="separator long review"/>' +
'<div class="group move-changes">' +
'<span id="btn-change-prev" class="btn-slot text x-huge"></span>' + '<span id="btn-change-prev" class="btn-slot text x-huge"></span>' +
'<span id="btn-change-next" class="btn-slot text x-huge"></span>' + '<span id="btn-change-next" class="btn-slot text x-huge"></span>' +
'<span id="btn-change-accept" class="btn-slot text x-huge"></span>' + '<span id="btn-change-accept" class="btn-slot text x-huge"></span>' +
@ -468,6 +474,10 @@ define([
button.on('click', _click_turnpreview.bind(me)); button.on('click', _click_turnpreview.bind(me));
Common.NotificationCenter.trigger('edit:complete', me); Common.NotificationCenter.trigger('edit:complete', me);
}); });
this.btnReviewView.menu.on('item:click', function (menu, item, e) {
me.fireEvent('reviewchanges:view', [menu, item]);
});
} }
this.btnsSpelling.forEach(function(button) { this.btnsSpelling.forEach(function(button) {
@ -528,6 +538,13 @@ define([
enableToggle: true enableToggle: true
}); });
this.btnsTurnReview = [this.btnTurnOn]; this.btnsTurnReview = [this.btnTurnOn];
this.btnReviewView = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
iconCls: 'btn-ic-reviewview',
caption: this.txtView,
menu: true
});
} }
this.btnSetSpelling = new Common.UI.Button({ this.btnSetSpelling = new Common.UI.Button({
@ -597,6 +614,35 @@ define([
); );
me.btnReject.updateHint([me.txtRejectCurrent, me.txtRejectChanges]); me.btnReject.updateHint([me.txtRejectCurrent, me.txtRejectChanges]);
me.btnReviewView.setMenu(
new Common.UI.Menu({
cls: 'ppm-toolbar',
items: [
{
caption: me.txtMarkup,
checkable: true,
toggleGroup: 'menuReviewView',
checked: true,
value: 'markup'
},
{
caption: me.txtFinal,
checkable: true,
toggleGroup: 'menuReviewView',
checked: false,
value: 'final'
},
{
caption: me.txtOriginal,
checkable: true,
toggleGroup: 'menuReviewView',
checked: false,
value: 'original'
}
]
}));
me.btnReviewView.updateHint(me.tipReviewView);
me.btnAccept.setDisabled(config.isReviewOnly); me.btnAccept.setDisabled(config.isReviewOnly);
me.btnReject.setDisabled(config.isReviewOnly); me.btnReject.setDisabled(config.isReviewOnly);
} else { } else {
@ -627,6 +673,7 @@ define([
this.btnAccept.render(this.$el.find('#btn-change-accept')); this.btnAccept.render(this.$el.find('#btn-change-accept'));
this.btnReject.render(this.$el.find('#btn-change-reject')); this.btnReject.render(this.$el.find('#btn-change-reject'));
this.btnTurnOn.render(this.$el.find('#btn-review-on')); this.btnTurnOn.render(this.$el.find('#btn-review-on'));
this.btnReviewView.render(this.$el.find('#btn-review-view'));
} }
this.btnSetSpelling.render(this.$el.find('#slot-btn-spelling')); this.btnSetSpelling.render(this.$el.find('#slot-btn-spelling'));
@ -739,7 +786,12 @@ define([
tipSetSpelling: 'Spell checking', tipSetSpelling: 'Spell checking',
tipReview: 'Review', tipReview: 'Review',
txtAcceptChanges: 'Accept Changes', txtAcceptChanges: 'Accept Changes',
txtRejectChanges: 'Reject Changes' txtRejectChanges: 'Reject Changes',
txtView: 'Display Mode',
txtMarkup: 'All changes (Editing)',
txtFinal: 'All changes accepted (Preview)',
txtOriginal: 'All changes rejected (Preview)',
tipReviewView: 'Select the way you want the changes to be displayed'
} }
}()), Common.Views.ReviewChanges || {})); }()), Common.Views.ReviewChanges || {}));

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View file

@ -273,6 +273,7 @@
.button-normal-icon(btn-addslide, 11, @toolbar-big-icon-size); .button-normal-icon(btn-addslide, 11, @toolbar-big-icon-size);
.button-normal-icon(~'x-huge .btn-ic-docspell', 12, @toolbar-big-icon-size); .button-normal-icon(~'x-huge .btn-ic-docspell', 12, @toolbar-big-icon-size);
.button-normal-icon(~'x-huge .btn-ic-review', 13, @toolbar-big-icon-size); .button-normal-icon(~'x-huge .btn-ic-review', 13, @toolbar-big-icon-size);
.button-normal-icon(~'x-huge .btn-ic-reviewview', 30, @toolbar-big-icon-size);
.button-normal-icon(review-save, 14, @toolbar-big-icon-size); .button-normal-icon(review-save, 14, @toolbar-big-icon-size);
.button-normal-icon(review-deny, 15, @toolbar-big-icon-size); .button-normal-icon(review-deny, 15, @toolbar-big-icon-size);
.button-normal-icon(review-next, 16, @toolbar-big-icon-size); .button-normal-icon(review-next, 16, @toolbar-big-icon-size);

View file

@ -2752,23 +2752,30 @@ define([
this.editMode = false; this.editMode = false;
}, },
DisableToolbar: function(disable, viewMode) { DisableToolbar: function(disable, viewMode, reviewmode) {
if (viewMode!==undefined) this.editMode = !viewMode; if (viewMode!==undefined) this.editMode = !viewMode;
disable = disable || !this.editMode; disable = disable || !this.editMode;
var mask = $('.toolbar-mask'); var toolbar_mask = $('.toolbar-mask'),
group_mask = $('.toolbar-group-mask'),
mask = reviewmode ? group_mask : toolbar_mask;
if (disable && mask.length>0 || !disable && mask.length==0) return; if (disable && mask.length>0 || !disable && mask.length==0) return;
var toolbar = this.toolbar; var toolbar = this.toolbar;
toolbar.$el.find('.toolbar').toggleClass('masked', disable);
toolbar.btnHide.setDisabled(disable);
if(disable) { if(disable) {
if (reviewmode) {
mask = $("<div class='toolbar-group-mask'>").appendTo(toolbar.$el.find('.toolbar section.panel .group:not(.no-mask):not(.no-group-mask)'));
} else
mask = $("<div class='toolbar-mask'>").appendTo(toolbar.$el.find('.toolbar')); mask = $("<div class='toolbar-mask'>").appendTo(toolbar.$el.find('.toolbar'));
Common.util.Shortcuts.suspendEvents('alt+h');
} else { } else {
mask.remove(); mask.remove();
Common.util.Shortcuts.resumeEvents('alt+h');
} }
$('.no-group-mask').css('opacity', (reviewmode || !disable) ? 1 : 0.4);
disable = disable || (reviewmode ? toolbar_mask.length>0 : group_mask.length>0);
toolbar.$el.find('.toolbar').toggleClass('masked', disable);
toolbar.btnHide.setDisabled(disable);
disable ? Common.util.Shortcuts.suspendEvents('alt+h') : Common.util.Shortcuts.resumeEvents('alt+h');
if ( toolbar.synchTooltip ) if ( toolbar.synchTooltip )
toolbar.synchTooltip.hide(); toolbar.synchTooltip.hide();

View file

@ -79,6 +79,7 @@ define([
me.fastcoauthtips = []; me.fastcoauthtips = [];
me._currentMathObj = undefined; me._currentMathObj = undefined;
me._currentParaObjDisabled = false; me._currentParaObjDisabled = false;
me._isDisabled = false;
var showPopupMenu = function(menu, value, event, docElement, eOpts){ var showPopupMenu = function(menu, value, event, docElement, eOpts){
if (!_.isUndefined(menu) && menu !== null){ if (!_.isUndefined(menu) && menu !== null){
@ -188,6 +189,9 @@ define([
var fillViewMenuProps = function(selectedElements) { var fillViewMenuProps = function(selectedElements) {
if (!selectedElements || !_.isArray(selectedElements)) return; if (!selectedElements || !_.isArray(selectedElements)) return;
if (!me.viewModeMenu)
me.createDelayedElementsViewer();
var menu_props = {}, var menu_props = {},
menu_to_show = me.viewModeMenu, menu_to_show = me.viewModeMenu,
noobject = true; noobject = true;
@ -212,7 +216,7 @@ define([
var showObjectMenu = function(event, docElement, eOpts){ var showObjectMenu = function(event, docElement, eOpts){
if (me.api){ if (me.api){
var obj = (me.mode.isEdit) ? fillMenuProps(me.api.getSelectedElements()) : fillViewMenuProps(me.api.getSelectedElements()); var obj = (me.mode.isEdit && !me._isDisabled) ? fillMenuProps(me.api.getSelectedElements()) : fillViewMenuProps(me.api.getSelectedElements());
if (obj) showPopupMenu(obj.menu_to_show, obj.menu_props, event, docElement, eOpts); if (obj) showPopupMenu(obj.menu_to_show, obj.menu_props, event, docElement, eOpts);
} }
}; };
@ -229,7 +233,7 @@ define([
var onFocusObject = function(selectedElements) { var onFocusObject = function(selectedElements) {
if (me.currentMenu && me.currentMenu.isVisible() && me.currentMenu !== me.hdrMenu){ if (me.currentMenu && me.currentMenu.isVisible() && me.currentMenu !== me.hdrMenu){
var obj = (me.mode.isEdit) ? fillMenuProps(selectedElements) : fillViewMenuProps(selectedElements); var obj = (me.mode.isEdit && !me._isDisabled) ? fillMenuProps(selectedElements) : fillViewMenuProps(selectedElements);
if (obj) { if (obj) {
if (obj.menu_to_show===me.currentMenu) { if (obj.menu_to_show===me.currentMenu) {
me.currentMenu.options.initMenu(obj.menu_props); me.currentMenu.options.initMenu(obj.menu_props);
@ -659,7 +663,7 @@ define([
var onDialogAddHyperlink = function() { var onDialogAddHyperlink = function() {
var win, props, text; var win, props, text;
if (me.api && me.mode.isEdit){ if (me.api && me.mode.isEdit && !me._isDisabled){
var handlerDlg = function(dlg, result) { var handlerDlg = function(dlg, result) {
if (result == 'ok') { if (result == 'ok') {
props = dlg.getSettings(); props = dlg.getSettings();
@ -706,7 +710,7 @@ define([
}; };
var onDoubleClickOnChart = function(chart) { var onDoubleClickOnChart = function(chart) {
if (me.mode.isEdit) { if (me.mode.isEdit && !me._isDisabled) {
var diagramEditor = DE.getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor'); var diagramEditor = DE.getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor');
if (diagramEditor && chart) { if (diagramEditor && chart) {
diagramEditor.setEditMode(true); diagramEditor.setEditMode(true);
@ -1814,10 +1818,10 @@ define([
initMenu: function (value) { initMenu: function (value) {
var isInChart = (value.imgProps && value.imgProps.value && !_.isNull(value.imgProps.value.get_ChartProperties())); var isInChart = (value.imgProps && value.imgProps.value && !_.isNull(value.imgProps.value.get_ChartProperties()));
menuViewUndo.setVisible(me.mode.canCoAuthoring && me.mode.canComments); menuViewUndo.setVisible(me.mode.canCoAuthoring && me.mode.canComments && !me._isDisabled);
menuViewUndo.setDisabled(!me.api.asc_getCanUndo()); menuViewUndo.setDisabled(!me.api.asc_getCanUndo() && !me._isDisabled);
menuViewCopySeparator.setVisible(!isInChart && me.api.can_AddQuotedComment() !== false && me.mode.canCoAuthoring && me.mode.canComments); menuViewCopySeparator.setVisible(!isInChart && me.api.can_AddQuotedComment() !== false && me.mode.canCoAuthoring && me.mode.canComments && !me._isDisabled);
menuViewAddComment.setVisible(!isInChart && me.api.can_AddQuotedComment() !== false && me.mode.canCoAuthoring && me.mode.canComments); menuViewAddComment.setVisible(!isInChart && me.api.can_AddQuotedComment() !== false && me.mode.canCoAuthoring && me.mode.canComments && !me._isDisabled);
menuViewAddComment.setDisabled(value.paraProps && value.paraProps.locked === true); menuViewAddComment.setDisabled(value.paraProps && value.paraProps.locked === true);
var cancopy = me.api && me.api.can_CopyCut(); var cancopy = me.api && me.api.can_CopyCut();
@ -3299,6 +3303,10 @@ define([
_.defer(function(){ me.cmpEl.focus(); }, 50); _.defer(function(){ me.cmpEl.focus(); }, 50);
}, },
SetDisabled: function(state) {
this._isDisabled = state;
},
alignmentText : 'Alignment', alignmentText : 'Alignment',
leftText : 'Left', leftText : 'Left',
rightText : 'Right', rightText : 'Right',

View file

@ -211,6 +211,11 @@
"Common.Views.ReviewChanges.txtRejectCurrent": "Reject Current Change", "Common.Views.ReviewChanges.txtRejectCurrent": "Reject Current Change",
"Common.Views.ReviewChanges.txtSpelling": "Spell checking", "Common.Views.ReviewChanges.txtSpelling": "Spell checking",
"Common.Views.ReviewChanges.txtTurnon": "Track Changes", "Common.Views.ReviewChanges.txtTurnon": "Track Changes",
"Common.Views.ReviewChanges.txtView": "Display Mode",
"Common.Views.ReviewChanges.txtMarkup": "All changes (Editing)",
"Common.Views.ReviewChanges.txtFinal": "All changes accepted (Preview)",
"Common.Views.ReviewChanges.txtOriginal": "All changes rejected (Preview)",
"Common.Views.ReviewChanges.tipReviewView": "Select the way you want the changes to be displayed",
"Common.Views.ReviewChangesDialog.textTitle": "Review Changes", "Common.Views.ReviewChangesDialog.textTitle": "Review Changes",
"Common.Views.ReviewChangesDialog.txtAccept": "Accept", "Common.Views.ReviewChangesDialog.txtAccept": "Accept",
"Common.Views.ReviewChangesDialog.txtAcceptAll": "Accept All Changes", "Common.Views.ReviewChangesDialog.txtAcceptAll": "Accept All Changes",

View file

@ -41,6 +41,17 @@
z-index: @zindex-tooltip + 1; z-index: @zindex-tooltip + 1;
} }
.toolbar-group-mask {
position: absolute;
top: 32px;
left: 48px;
right: 45px;
bottom: 0;
opacity: 0;
background-color: @gray-light;
z-index: @zindex-tooltip + 1;
}
.item-markerlist { .item-markerlist {
.background-ximage('@{app-image-path}/toolbar/bullets-and-numbering.png', '@{app-image-path}/toolbar/bullets-and-numbering@2x.png', 38px); .background-ximage('@{app-image-path}/toolbar/bullets-and-numbering.png', '@{app-image-path}/toolbar/bullets-and-numbering@2x.png', 38px);
width: 38px; width: 38px;