[SSE] Move button "Allow edit ranges" to protect sheet dialog

This commit is contained in:
Julia Radzhabova
2023-02-14 13:51:34 +03:00
parent dbbefc579e
commit 178da2c2cd
6 changed files with 63 additions and 24 deletions

View File

@ -183,6 +183,7 @@ define([
win = new SSE.Views.ProtectDialog({
type: 'sheet',
props: props,
api: me.api,
handler: function(result, value, props) {
btn = result;
if (result == 'ok') {

View File

@ -67,6 +67,7 @@ define([
this.names = options.names;
this.isEdit = options.isEdit;
this.api = options.api;
this.winId = Common.UI.getId();
this.template = options.template || [
'<div class="box">',
@ -74,31 +75,38 @@ define([
'<div class="input-row">',
'<label>' + t.txtRangeName + '</label>',
'</div>',
'<div id="id-range-name-txt" class="input-row" style="margin-bottom: 5px;"></div>',
'<div id="' + t.winId + '-id-range-name-txt" class="input-row" style="margin-bottom: 5px;"></div>',
'<div class="input-row">',
'<label>' + t.txtRange + '</label>',
'</div>',
'<div id="id-range-txt" class="input-row" style="margin-bottom: 10px;"></div>',
'<div id="' + t.winId + '-id-range-txt" class="input-row" style="margin-bottom: 10px;"></div>',
'<% } else if (type=="sheet") { %>',
'<div class="" style="margin-bottom: 10px;">',
'<label>' + (t.txtSheetDescription + ' ' + t.txtAllowDescription) + '</label>',
'</div>',
'<button type="button" class="btn btn-text-default auto" id="' + t.winId + '-id-range-btn-allow" style="min-width: 100px;margin-bottom: 10px;">' + t.txtAllowRanges + '</button>',
'<label>' + t.txtWarning + '</label>',
'<% } else { %>',
'<div class="" style="margin-bottom: 10px;">',
'<label>' + (t.type=='sheet' ? t.txtSheetDescription : t.txtWBDescription) + '</label>',
'<label>' + t.txtWBDescription + '</label>',
'</div>',
'<% } %>',
'<div class="input-row">',
'<label>' + t.txtPassword + ' (' + t.txtOptional + ')' + '</label>',
'</div>',
'<div id="id-password-txt" class="input-row" style="margin-bottom: 5px;"></div>',
'<div id="' + t.winId + '-id-password-txt" class="input-row" style="margin-bottom: 5px;"></div>',
'<div class="input-row">',
'<label>' + t.txtRepeat + '</label>',
'</div>',
'<div id="id-repeat-txt" class="input-row" style="margin-bottom: 10px;"></div>',
'<div id="' + t.winId + '-id-repeat-txt" class="input-row" style="margin-bottom: 10px;"></div>',
'<% if (type=="sheet") { %>',
'<div class="input-row">',
'<label>' + t.txtAllow + '</label>',
'</div>',
'<div id="protect-dlg-options" class="" style="width: 100%; height: 139px; overflow: hidden;margin-bottom: 10px;"></div>',
'<% } %>',
'<div id="' + t.winId + '-protect-dlg-options" class="" style="width: 100%; height: 116px; overflow: hidden;margin-bottom: 10px;"></div>',
'<% } else { %>',
'<label>' + t.txtWarning + '</label>',
'<% } %>',
'</div>'
].join('');
@ -113,7 +121,7 @@ define([
this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
this.repeatPwd = new Common.UI.InputField({
el: $('#id-repeat-txt'),
el: $('#' + this.winId + '-id-repeat-txt'),
type: 'password',
allowBlank : true,
style : 'width: 100%;',
@ -125,7 +133,7 @@ define([
});
this.inputPwd = new Common.UI.InputFieldBtnPassword({
el: $('#id-password-txt'),
el: $('#' + this.winId + '-id-password-txt'),
type: 'password',
allowBlank : true,
style : 'width: 100%;',
@ -137,11 +145,11 @@ define([
if (this.type == 'sheet') {
this.optionsList = new Common.UI.ListView({
el: $('#protect-dlg-options', this.$window),
el: $('#' + this.winId + '-protect-dlg-options', this.$window),
store: new Common.UI.DataViewStore(),
simpleAddMode: true,
scrollAlwaysVisible: true,
template: _.template(['<div class="listview inner" style=""></div>'].join('')),
template: _.template(['<div class="listview inner protect-sheet-options" style=""></div>'].join('')),
itemTemplate: _.template([
'<div>',
'<label class="checkbox-indeterminate">',
@ -161,11 +169,16 @@ define([
});
this.optionsList.onKeyDown = _.bind(this.onListKeyDown, this);
this.optionsList.on('entervalue', _.bind(this.onPrimary, this));
this.btnAllowRanges = new Common.UI.Button({
el: $('#' + this.winId + '-id-range-btn-allow', this.$window)
});
this.btnAllowRanges.on('click', _.bind(this.onAllowRangesClick, this, false));
}
if (this.type == 'range') {
this.inputRangeName = new Common.UI.InputField({
el: $('#id-range-name-txt'),
el: $('#' + this.winId + '-id-range-name-txt'),
allowBlank : false,
blankError : this.txtEmpty,
style : 'width: 100%;',
@ -191,7 +204,7 @@ define([
}
});
this.txtDataRange = new Common.UI.InputFieldBtn({
el : $('#id-range-txt'),
el : $('#' + this.winId + '-id-range-txt'),
name : 'range',
style : 'width: 100%;',
allowBlank : false,
@ -213,7 +226,7 @@ define([
var arr = [];
(this.type == 'range') && (arr = arr.concat([this.inputRangeName, this.txtDataRange]));
arr = arr.concat([this.inputPwd, this.repeatPwd]);
(this.type == 'sheet') && (arr = arr.concat([this.optionsList]));
(this.type == 'sheet') && (arr = [this.btnAllowRanges].concat(arr).concat([this.optionsList]));
return arr;
},
@ -423,6 +436,27 @@ define([
}
},
onAllowRangesClick: function() {
var me = this,
xy = me.$window.offset(),
props = me.api.asc_getProtectedRanges(),
win = new SSE.Views.ProtectRangesDlg({
api: me.api,
props: props,
handler: function(result, settings) {
if (result == 'ok') {
me.api.asc_setProtectedRanges(settings.arr, settings.deletedArr);
}
}
}).on('close', function() {
me.show();
setTimeout(function(){ me.getDefaultFocusableComponent().focus(); }, 100);
});
me.hide();
win.show(xy.left - 65, xy.top + 45);
},
txtPassword : "Password",
txtRepeat: 'Repeat password',
txtIncorrectPwd: 'Confirmation password is not identical',
@ -455,7 +489,9 @@ define([
textSelectData: 'Select Data',
textInvalidRange: 'ERROR! Invalid cells range',
textInvalidName: 'The range title must begin with a letter and may only contain letters, numbers, and spaces.',
textExistName: 'ERROR! Range with such a title already exists'
textExistName: 'ERROR! Range with such a title already exists',
txtAllowRanges: 'Allow edit ranges',
txtAllowDescription: 'You can unlock specific ranges for editing.'
}, SSE.Views.ProtectDialog || {}));
});

View File

@ -64,11 +64,13 @@ define([ 'text!spreadsheeteditor/main/app/template/ProtectRangesDlg.template',
'</div>',
'<div class="separator horizontal"></div>'
].join(''),
buttons: [{
value: 'protect-sheet',
caption: this.textProtect
}, 'ok','cancel'],
primary: 'protect-sheet'
buttons: [
// {
// value: 'protect-sheet',
// caption: this.textProtect
// },
'ok','cancel']
// primary: 'protect-sheet'
}, options);
this.api = options.api;

View File

@ -426,7 +426,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ProtectedRangesManagerDlg.te
},
txtTitle: 'Protected Ranges',
textRangesDesc: 'Ranges unlocked by a password when sheet is protected',
textRangesDesc: 'You can restrict editing ranges to selected people.',
textTitle: 'Title',
textRange: 'Range',
textNew: 'New',

View File

@ -50,8 +50,8 @@ define([
var template =
'<div class="group">' +
'<span id="slot-btn-protect-wb" class="btn-slot text x-huge" style="margin-right: 2px;"></span>' +
'<span id="slot-btn-protect-sheet" class="btn-slot text x-huge" style="margin-right: 2px;"></span>' +
'<span id="slot-btn-allow-ranges" class="btn-slot text x-huge"></span>' +
'<span id="slot-btn-protect-sheet" class="btn-slot text x-huge"></span>' +
// '<span id="slot-btn-allow-ranges" class="btn-slot text x-huge"></span>' +
'</div>' +
'<div class="separator long invisible"></div>' +
'<div class="group small">' +

View File

@ -560,7 +560,7 @@
}
}
#protect-dlg-options {
.protect-sheet-options {
.list-item {
pointer-events:none;
margin-left: 20px;