[DE] 'Review' controls moved to the toolbar
This commit is contained in:
Maxim Kadushkin
parent
d20092c5b2
commit
ba2800c14e
|
|
@ -69,7 +69,8 @@ define([
|
|||
// comments handlers
|
||||
'reviewchange:accept': _.bind(this.onAcceptClick, 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)
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -78,21 +79,6 @@ define([
|
|||
this.popoverChanges = new Common.Collections.ReviewChanges();
|
||||
this.userCollection = this.getApplication().getCollection('Common.Collections.Users');
|
||||
|
||||
this.view = this.createView('Common.Views.ReviewChanges', {
|
||||
store : this.collection,
|
||||
popoverChanges : this.popoverChanges
|
||||
});
|
||||
this.view.render();
|
||||
this.bindViewEvents(this.view, this.events);
|
||||
|
||||
var me = this;
|
||||
this.view.btnPrev.on('click', _.bind(this.onBtnPreviewClick, this));
|
||||
this.view.btnNext.on('click', _.bind(this.onBtnPreviewClick, this));
|
||||
this.view.btnAccept.on('click', _.bind(this.onAcceptClick, this));
|
||||
this.view.btnAccept.menu.on('item:click', _.bind(this.onAcceptClick, this));
|
||||
this.view.btnReject.on('click', _.bind(this.onRejectClick, this));
|
||||
this.view.btnReject.menu.on('item:click', _.bind(this.onRejectClick, this));
|
||||
|
||||
this._state = {posx: -1000, posy: -1000, popoverVisible: false};
|
||||
},
|
||||
setConfig: function (data, api) {
|
||||
|
|
@ -112,9 +98,23 @@ define([
|
|||
},
|
||||
|
||||
setMode: function(mode) {
|
||||
this.view.isReviewOnly = mode.isReviewOnly;
|
||||
this.view.btnAccept.setDisabled(mode.isReviewOnly);
|
||||
this.view.btnReject.setDisabled(mode.isReviewOnly);
|
||||
if ( mode.canReview || mode.isReviewOnly ) {
|
||||
this.view = this.createView('Common.Views.ReviewChanges', {
|
||||
store : this.collection,
|
||||
popoverChanges : this.popoverChanges
|
||||
});
|
||||
|
||||
var tab = {action: 'review', caption: 'Review'};
|
||||
var $panel = this.view.getPanel();
|
||||
|
||||
var toolbar = this.getApplication().getController('Toolbar').getView('Toolbar');
|
||||
toolbar.addTab(tab, $panel, 'layout');
|
||||
|
||||
this.view.isReviewOnly = mode.isReviewOnly;
|
||||
this.view.btnAccept.setDisabled(mode.isReviewOnly);
|
||||
this.view.btnReject.setDisabled(mode.isReviewOnly);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
|
@ -413,13 +413,10 @@ define([
|
|||
|
||||
onBtnPreviewClick: function(btn, eOpts){
|
||||
switch (btn.options.value) {
|
||||
case 1:
|
||||
this.api.asc_GetPrevRevisionsChange();
|
||||
break;
|
||||
case 2:
|
||||
this.api.asc_GetNextRevisionsChange();
|
||||
break;
|
||||
case 1: this.api.asc_GetPrevRevisionsChange(); break;
|
||||
case 2: this.api.asc_GetNextRevisionsChange(); break;
|
||||
}
|
||||
|
||||
Common.NotificationCenter.trigger('edit:complete', this.view);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -410,6 +410,50 @@ define([
|
|||
});
|
||||
|
||||
Common.Views.ReviewChanges = Common.UI.BaseView.extend(_.extend((function(){
|
||||
var template =
|
||||
'<section id="review-changes-panel" class="panel" data-tab="review">' +
|
||||
'<div class="group">' +
|
||||
'<span id="btn-review-on"></span>' +
|
||||
'</div>' +
|
||||
'<div class="separator long"/>' +
|
||||
'<div class="group">' +
|
||||
'<span id="btn-change-prev"></span>' +
|
||||
'<span id="btn-change-next"></span>' +
|
||||
'</div>' +
|
||||
'<div class="separator long"/>' +
|
||||
'<div class="group">' +
|
||||
'<span id="btn-change-accept"></span>' +
|
||||
'<span id="btn-change-reject"></span>' +
|
||||
'</div>' +
|
||||
'</section>';
|
||||
|
||||
function setEvents() {
|
||||
var me = this;
|
||||
this.btnPrev.on('click', function (e) {
|
||||
me.fireEvent('reviewchange:preview', [me.btnPrev]);
|
||||
});
|
||||
|
||||
this.btnNext.on('click', function (e) {
|
||||
me.fireEvent('reviewchange:preview', [me.btnNext]);
|
||||
});
|
||||
|
||||
this.btnAccept.on('click', function (e) {
|
||||
me.fireEvent('reviewchange:accept', [me.btnAccept, 'current']);
|
||||
});
|
||||
|
||||
this.btnAccept.menu.on('item:click', function (menu, item, e) {
|
||||
me.fireEvent('reviewchange:accept', [menu, item]);
|
||||
});
|
||||
|
||||
this.btnReject.on('click', function (e) {
|
||||
me.fireEvent('reviewchange:reject', [me.btnReject, 'current']);
|
||||
});
|
||||
|
||||
this.btnReject.menu.on('item:click', function (menu, item, e) {
|
||||
me.fireEvent('reviewchange:reject', [menu, item]);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
el: '#review-changes-panel',
|
||||
|
||||
|
|
@ -418,59 +462,26 @@ define([
|
|||
initialize: function (options) {
|
||||
Common.UI.BaseView.prototype.initialize.call(this, options);
|
||||
|
||||
this.template = [
|
||||
'<div class="review-group" style="">',
|
||||
'<div id="id-review-button-prev" style=""></div>',
|
||||
'<div id="id-review-button-next" style=""></div>',
|
||||
'<div class="separator"/>',
|
||||
'</div>',
|
||||
'<div class="review-group" style="">',
|
||||
'<div id="id-review-button-accept" style=""></div>',
|
||||
'<div id="id-review-button-reject" style=""></div>',
|
||||
'<div class="separator"/>',
|
||||
'</div>',
|
||||
'<div class="review-group">',
|
||||
'<div id="id-review-button-close" style=""></div>',
|
||||
'</div>'
|
||||
].join('');
|
||||
|
||||
this.store = this.options.store;
|
||||
this.popoverChanges = this.options.popoverChanges;
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var el = $(this.el),
|
||||
me = this;
|
||||
el.addClass('review-changes');
|
||||
el.html(_.template(this.template, {
|
||||
scope: this
|
||||
}));
|
||||
|
||||
this.btnPrev = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'img-commonctrl review-prev',
|
||||
value: 1,
|
||||
hint: this.txtPrev,
|
||||
hintAnchor: 'top'
|
||||
value: 1
|
||||
});
|
||||
this.btnPrev.render($('#id-review-button-prev'));
|
||||
|
||||
this.btnNext = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'img-commonctrl review-next',
|
||||
value: 2,
|
||||
hint: this.txtNext,
|
||||
hintAnchor: 'top'
|
||||
value: 2
|
||||
});
|
||||
this.btnNext.render($('#id-review-button-next'));
|
||||
|
||||
this.btnAccept = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
caption: this.txtAccept,
|
||||
split: true,
|
||||
menu: new Common.UI.Menu({
|
||||
menuAlign: 'bl-tl',
|
||||
style: 'margin-top:-5px;',
|
||||
items: [
|
||||
this.mnuAcceptCurrent = new Common.UI.MenuItem({
|
||||
caption: this.txtAcceptCurrent,
|
||||
|
|
@ -483,15 +494,12 @@ define([
|
|||
]
|
||||
})
|
||||
});
|
||||
this.btnAccept.render($('#id-review-button-accept'));
|
||||
|
||||
this.btnReject = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
caption: this.txtReject,
|
||||
split: true,
|
||||
menu: new Common.UI.Menu({
|
||||
menuAlign: 'bl-tl',
|
||||
style: 'margin-top:-5px;',
|
||||
items: [
|
||||
this.mnuRejectCurrent = new Common.UI.MenuItem({
|
||||
caption: this.txtRejectCurrent,
|
||||
|
|
@ -504,25 +512,42 @@ define([
|
|||
]
|
||||
})
|
||||
});
|
||||
this.btnReject.render($('#id-review-button-reject'));
|
||||
|
||||
this.btnClose = new Common.UI.Button({
|
||||
this.btnTurnOn = new Common.UI.Button({
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'img-commonctrl review-close',
|
||||
hint: this.txtClose,
|
||||
hintAnchor: 'top'
|
||||
iconCls: 'img-commonctrl review-close'
|
||||
// hint: this.txtClose,
|
||||
});
|
||||
this.btnClose.render($('#id-review-button-close'));
|
||||
this.btnClose.on('click', _.bind(this.onClose, this));
|
||||
|
||||
this.boxSdk = $('#editor_sdk');
|
||||
|
||||
Common.NotificationCenter.on('layout:changed', _.bind(this.onLayoutChanged, this));
|
||||
var me = this;
|
||||
(new Promise(function (resolve) {
|
||||
Common.NotificationCenter.on('app:ready', function () { resolve(); });
|
||||
})).then(function(){
|
||||
me.btnPrev.updateHint(me.txtPrev);
|
||||
me.btnNext.updateHint(me.txtNext);
|
||||
me.btnTurnOn.updateHint(me.textChangesOn);
|
||||
setEvents.call(me);
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
onClose: function (event) {
|
||||
this.hide();
|
||||
this.fireEvent('hide', this);
|
||||
render: function (el) {
|
||||
this.boxSdk = $('#editor_sdk');
|
||||
if ( el ) el.html( this.getPanel() );
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
getPanel: function () {
|
||||
var _html = $(_.template( template, {} ));
|
||||
|
||||
this.btnPrev.render(_html.find('#btn-change-prev'));
|
||||
this.btnNext.render(_html.find('#btn-change-next'));
|
||||
this.btnAccept.render(_html.find('#btn-change-accept'));
|
||||
this.btnReject.render(_html.find('#btn-change-reject'));
|
||||
this.btnTurnOn.render(_html.find('#btn-review-on'));
|
||||
|
||||
return _html;
|
||||
},
|
||||
|
||||
show: function () {
|
||||
|
|
@ -530,12 +555,6 @@ define([
|
|||
this.fireEvent('show', this);
|
||||
},
|
||||
|
||||
onLayoutChanged: function (area) {
|
||||
if (area == 'rightmenu' && this.boxSdk) {
|
||||
this.$el.css('right', ($('body').width() - this.boxSdk.offset().left - this.boxSdk.width() + 15) + 'px');
|
||||
}
|
||||
},
|
||||
|
||||
getPopover: function (sdkViewName) {
|
||||
if (_.isUndefined(this.popover)) {
|
||||
this.popover = new Common.Views.ReviewChangesPopover({
|
||||
|
|
@ -554,13 +573,13 @@ define([
|
|||
|
||||
txtPrev: 'To previous change',
|
||||
txtNext: 'To next change',
|
||||
textChangesOn: 'Preview changes',
|
||||
txtAccept: 'Accept',
|
||||
txtAcceptCurrent: 'Accept current Changes',
|
||||
txtAcceptAll: 'Accept all Changes',
|
||||
txtReject: 'Reject',
|
||||
txtRejectCurrent: 'Reject current Changes',
|
||||
txtRejectAll: 'Reject all Changes',
|
||||
txtClose: 'Close'
|
||||
txtRejectAll: 'Reject all Changes'
|
||||
}
|
||||
}()), Common.Views.ReviewChanges || {}))
|
||||
});
|
||||
|
|
@ -1,55 +1,55 @@
|
|||
.review-changes {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
right: 55px;
|
||||
background: @gray-light;
|
||||
border: 1px solid @gray-dark;
|
||||
height: 35px;
|
||||
z-index: @zindex-dropdown - 1;
|
||||
//position: absolute;
|
||||
//bottom: -1px;
|
||||
//right: 55px;
|
||||
//background: @gray-light;
|
||||
//border: 1px solid @gray-dark;
|
||||
//height: 35px;
|
||||
//z-index: @zindex-dropdown - 1;
|
||||
//
|
||||
//.review-group {
|
||||
// display: inline-block;
|
||||
// vertical-align: middle;
|
||||
// padding: 6px 0px 6px 10px;
|
||||
//
|
||||
// & > div, & > label {
|
||||
// margin-right: 10px;
|
||||
// display: inline-block;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//#id-review-label-total {
|
||||
// font: bold 10px Helvetica, Arial, Verdana, sans-serif;
|
||||
// color: @gray-darker;
|
||||
// text-shadow: none;
|
||||
// white-space: nowrap;
|
||||
// cursor: pointer;
|
||||
// vertical-align: middle;
|
||||
//}
|
||||
//
|
||||
//#id-review-button-accept,
|
||||
//#id-review-button-reject {
|
||||
// span.caption {
|
||||
// vertical-align: middle;
|
||||
// font-size: 12px;
|
||||
// margin: 0 6px;
|
||||
// }
|
||||
//}
|
||||
|
||||
.review-group {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 6px 0px 6px 10px;
|
||||
//.separator {
|
||||
// margin: 0 !important;
|
||||
// height: 19px;
|
||||
//}
|
||||
}
|
||||
|
||||
& > div, & > label {
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.review-prev {background-position: -40px -250px;}
|
||||
button.active > .review-prev,
|
||||
button:active > .review-prev {background-position: -60px -250px !important;}
|
||||
|
||||
#id-review-label-total {
|
||||
font: bold 10px Helvetica, Arial, Verdana, sans-serif;
|
||||
color: @gray-darker;
|
||||
text-shadow: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.review-next {background-position: -40px -270px;}
|
||||
button.active > .review-next,
|
||||
button:active > .review-next {background-position: -60px -270px !important;}
|
||||
|
||||
#id-review-button-accept,
|
||||
#id-review-button-reject {
|
||||
span.caption {
|
||||
vertical-align: middle;
|
||||
font-size: 12px;
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 0 !important;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.review-prev {background-position: -40px -250px;}
|
||||
button.active > .review-prev,
|
||||
button:active > .review-prev {background-position: -60px -250px !important;}
|
||||
|
||||
.review-next {background-position: -40px -270px;}
|
||||
button.active > .review-next,
|
||||
button:active > .review-next {background-position: -60px -270px !important;}
|
||||
|
||||
.review-close {background-position: -40px -290px;}
|
||||
button.active > .review-close,
|
||||
button:active > .review-close {background-position: -60px -290px !important;}
|
||||
}
|
||||
.review-close {background-position: -40px -290px;}
|
||||
button.active > .review-close,
|
||||
button:active > .review-close {background-position: -60px -290px !important;}
|
||||
|
|
|
|||
|
|
@ -763,6 +763,8 @@ define([
|
|||
if (this._isDocReady)
|
||||
return;
|
||||
|
||||
Common.NotificationCenter.trigger('app:ready');
|
||||
|
||||
var me = this,
|
||||
value;
|
||||
|
||||
|
|
|
|||
|
|
@ -148,7 +148,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel" data-tab="review">review panel</section>
|
||||
<section class="panel" data-tab="plugins">plugins panel</section>
|
||||
</section>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<div id="editor_sdk" class="layout-item"></div>
|
||||
<div id="right-menu" class="layout-item"></div>
|
||||
<div id="left-panel-history" class="layout-item" />
|
||||
<div id="review-changes-panel" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="statusbar" class="layout-item"></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue