mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-24 10:46:04 +08:00
[SSE] Change protected ranges window
This commit is contained in:
Julia Radzhabova
@ -39,10 +39,28 @@
|
||||
*/
|
||||
|
||||
define([
|
||||
'common/main/lib/component/Window'
|
||||
'common/main/lib/component/Window',
|
||||
'common/main/lib/component/ListView'
|
||||
], function () {
|
||||
'use strict';
|
||||
|
||||
var _CustomItem = Common.UI.DataViewItem.extend({
|
||||
initialize : function(options) {
|
||||
Common.UI.BaseView.prototype.initialize.call(this, options);
|
||||
|
||||
var me = this;
|
||||
|
||||
me.template = me.options.template || me.template;
|
||||
|
||||
me.listenTo(me.model, 'change:selected', function() {
|
||||
var el = me.$el || $(me.el);
|
||||
el.toggleClass('selected', me.model.get('selected') && me.model.get('allowSelected'));
|
||||
me.onSelectChange(me.model, me.model.get('selected') && me.model.get('allowSelected'));
|
||||
});
|
||||
me.listenTo(me.model, 'remove', me.remove);
|
||||
}
|
||||
});
|
||||
|
||||
SSE.Views.ProtectedRangesEditDlg = Common.UI.Window.extend(_.extend({
|
||||
|
||||
initialize : function (options) {
|
||||
@ -79,7 +97,7 @@ define([
|
||||
'<label>' + t.txtWhoCanEdit + '</label>',
|
||||
'</div>',
|
||||
'<div id="id-protected-range-cmb-user" class="input-row input-group-nr" style="margin-bottom: 8px;"></div>',
|
||||
'<div id="id-protected-range-list-user" class="input-group-nr" style="height: 95px;"></div>',
|
||||
'<div id="id-protected-range-list-user" class="input-group-nr no-borders" style="height: 155px;"></div>',
|
||||
'<% } else { %>',
|
||||
'<div class="input-row" style="margin-bottom: 8px;">',
|
||||
'<label>' + t.txtYouCanEdit + '</label>',
|
||||
@ -159,18 +177,37 @@ define([
|
||||
store: new Common.UI.DataViewStore(),
|
||||
itemTemplate: _.template([
|
||||
'<div id="<%= id %>" class="list-item" style="width: 100%;display:inline-block;">',
|
||||
'<div class="margin-right-4" style="width:115px;display: inline-block;vertical-align: middle; overflow: hidden; text-overflow: ellipsis;white-space: pre;"><%= Common.Utils.String.htmlEncode(displayName) %></div>',
|
||||
'<div style="width:135px;display: inline-block;vertical-align: middle; overflow: hidden; text-overflow: ellipsis;white-space: pre;"><%= Common.Utils.String.htmlEncode(email) %></div>',
|
||||
'<% if (typeof isCurrent === "undefined" || !isCurrent) { %>',
|
||||
'<div class="listitem-icon toolbar__icon btn-cc-remove"></div>',
|
||||
'<% } %>',
|
||||
'<div class="color"',
|
||||
'<% if (!!avatar) { %>',
|
||||
'style="background-image: url(<%=avatar%>); <% if (usercolor!==null) { %> border-color:<%=usercolor%>; border-style:solid;<% }%>"',
|
||||
'<% } else { %>',
|
||||
'style="background-color: <% if (usercolor!==null) { %> <%=usercolor%> <% } else { %> #cfcfcf <% }%>;"',
|
||||
'<% } %>',
|
||||
'><% if (!avatar) { %><%-initials%><% } %></div>',
|
||||
'<div class="" style="width:190px;display: inline-block;vertical-align: middle;">',
|
||||
'<% if (!!email) { %>',
|
||||
'<div class="font-weight-bold" style="overflow: hidden; text-overflow: ellipsis;white-space: pre;"><%= Common.Utils.String.htmlEncode(displayName) %></div>',
|
||||
'<div style="overflow: hidden; text-overflow: ellipsis;white-space: pre;"><%= Common.Utils.String.htmlEncode(email) %></div>',
|
||||
'<% } else { %>',
|
||||
'<div class="font-weight-bold" style="overflow: hidden; text-overflow: ellipsis;white-space: pre;max-height:30px;"><%= Common.Utils.String.htmlEncode(displayName) %></div>',
|
||||
'<% } %>',
|
||||
'</div>',
|
||||
'<div class="listitem-icon"></div>',
|
||||
'</div>'
|
||||
].join('')),
|
||||
emptyText: '',
|
||||
tabindex: 1
|
||||
});
|
||||
this.listUser.createNewItem = function(record) {
|
||||
return new _CustomItem({
|
||||
template: this.itemTemplate,
|
||||
model: record
|
||||
});
|
||||
};
|
||||
this.listUser.on('item:keydown', _.bind(this.onKeyDown, this))
|
||||
this.listUser.on('item:click', _.bind(this.onListUserClick, this))
|
||||
this.listUser.on('item:add', _.bind(this.addControls, this));
|
||||
this.listUser.on('item:change', _.bind(this.addControls, this));
|
||||
|
||||
this.afterRender();
|
||||
},
|
||||
@ -230,14 +267,33 @@ define([
|
||||
if (props) {
|
||||
this.inputRangeName.setValue(props.asc_getName());
|
||||
this.txtDataRange.setValue(props.asc_getRef());
|
||||
this.listUser.store.add({value: this.currentUser.id, name: this.currentUser.name, displayName: this.currentUser.name + ' (' + this.textYou + ')', email: '', isCurrent: true});
|
||||
this.listUser.store.add({
|
||||
value: this.currentUser.id,
|
||||
name: this.currentUser.name,
|
||||
displayName: this.currentUser.name + ' (' + this.textYou + ')',
|
||||
initials: Common.Utils.getUserInitials(this.currentUser.name),
|
||||
avatar: '',
|
||||
usercolor: null,
|
||||
email: '',
|
||||
type: Asc.c_oSerUserProtectedRangeType.edit,
|
||||
isCurrent: true});
|
||||
var me = this,
|
||||
rangeUsers = this.props.asc_getUsers();
|
||||
if (rangeUsers && rangeUsers.length>0) {
|
||||
var store = me.listUser.store,
|
||||
count = 1;
|
||||
rangeUsers.forEach(function(item) {
|
||||
(item.asc_getId()!==me.currentUser.id) && store.add({value: item.asc_getId(), name: item.asc_getName() || me.textAnonymous, displayName: item.asc_getName() || me.textAnonymous + ' ' + count++, email: ''});
|
||||
var name = item.asc_getName() || me.textAnonymous;
|
||||
(item.asc_getId()!==me.currentUser.id) && store.add({
|
||||
value: item.asc_getId(),
|
||||
name: name,
|
||||
displayName: name + ' ' + count++,
|
||||
initials: Common.Utils.getUserInitials(name),
|
||||
avatar: '',
|
||||
usercolor: null,
|
||||
email: '',
|
||||
type: item.asc_getType()
|
||||
});
|
||||
});
|
||||
}
|
||||
this.onUserMenu(true);
|
||||
@ -253,6 +309,7 @@ define([
|
||||
var user = new Asc.CUserProtectedRangeUserInfo();
|
||||
user.asc_setId(item.get('value'));
|
||||
user.asc_setName(item.get('name'));
|
||||
user.asc_setType(item.get('type'));
|
||||
arr.push(user);
|
||||
});
|
||||
|
||||
@ -298,7 +355,16 @@ define([
|
||||
if (value!==undefined && value!=='') {
|
||||
var rec = store.findWhere({value: value});
|
||||
if (!rec) {
|
||||
store.add({value: value, name: record.displayValue, displayName: record.displayValue, email: record.value});
|
||||
store.add({
|
||||
value: value,
|
||||
name: record.displayValue,
|
||||
displayName: record.displayValue,
|
||||
initials: Common.Utils.getUserInitials(record.displayValue),
|
||||
avatar: '',
|
||||
usercolor: null,
|
||||
email: record.value || 'a@asdlfkja;sldfkj',
|
||||
type: Asc.c_oSerUserProtectedRangeType.edit
|
||||
});
|
||||
}
|
||||
}
|
||||
this.cmbUser.setRawValue(this._userStr);
|
||||
@ -407,6 +473,62 @@ define([
|
||||
}
|
||||
},
|
||||
|
||||
addControls: function(listView, itemView, item) {
|
||||
if (!item) return;
|
||||
|
||||
var me = this,
|
||||
type = item.get('type');
|
||||
var btn = new Common.UI.Button({
|
||||
parentEl: $('.listitem-icon', $(itemView.el)),
|
||||
cls: 'btn-toolbar',
|
||||
iconCls: 'toolbar__icon ' + (type===Asc.c_oSerUserProtectedRangeType.edit ? 'btn-edit' : type===Asc.c_oSerUserProtectedRangeType.view ? 'btn-sheet-view' : 'btn-hide-password'),
|
||||
disabled: !!item.get('isCurrent'),
|
||||
menu: item.get('isCurrent') ? false : new Common.UI.Menu({
|
||||
style: 'min-width: auto;',
|
||||
cls: 'menu-absolute',
|
||||
items: [
|
||||
{
|
||||
caption: this.textCanEdit,
|
||||
value: 'edit',
|
||||
iconCls: 'menu__icon btn-edit',
|
||||
},
|
||||
{
|
||||
caption: this.textCanView,
|
||||
value: 'view',
|
||||
iconCls: 'menu__icon btn-sheet-view',
|
||||
},
|
||||
{
|
||||
caption: this.textRemove,
|
||||
value: 'remove',
|
||||
iconCls: 'menu__icon btn-cc-remove'
|
||||
},
|
||||
]
|
||||
})
|
||||
});
|
||||
if (btn.menu) {
|
||||
btn.menu.on('item:click', function(menu, mni) {
|
||||
if (mni.value==='remove') {
|
||||
me.onHideMenu();
|
||||
me.onDeleteUser(item);
|
||||
} else {
|
||||
item.set('type', mni.value==='edit' ? Asc.c_oSerUserProtectedRangeType.edit : mni.value==='view' ? Asc.c_oSerUserProtectedRangeType.view : Asc.c_oSerUserProtectedRangeType.notView);
|
||||
item.get('btnEdit').setIconCls('toolbar__icon ' + (mni.value==='edit' ? 'btn-edit' : mni.value==='view' ? 'btn-sheet-view' : 'btn-hide-password'));
|
||||
}
|
||||
});
|
||||
btn.menu.on('show:after', _.bind(this.onShowMenu, this));
|
||||
btn.menu.on('hide:after', _.bind(this.onHideMenu, this));
|
||||
}
|
||||
item.set('btnEdit', btn, {silent: true});
|
||||
},
|
||||
|
||||
onShowMenu: function() {
|
||||
this.listUser.enableKeyEvents = false;
|
||||
},
|
||||
|
||||
onHideMenu: function() {
|
||||
this.listUser.enableKeyEvents = true;
|
||||
},
|
||||
|
||||
txtProtect: 'Protect',
|
||||
txtRangeName: 'Title',
|
||||
txtRange: 'Range',
|
||||
@ -420,7 +542,10 @@ define([
|
||||
textYou: 'you',
|
||||
userPlaceholder: 'Start type name or email',
|
||||
txtYouCanEdit: 'Only you can edit this range',
|
||||
textAnonymous: 'Anonymous'
|
||||
textAnonymous: 'Anonymous',
|
||||
textCanEdit: 'Can edit',
|
||||
textCanView: 'Can view',
|
||||
textRemove: 'Remove'
|
||||
|
||||
}, SSE.Views.ProtectedRangesEditDlg || {}));
|
||||
});
|
||||
|
||||
@ -526,27 +526,42 @@
|
||||
}
|
||||
.listitem-icon {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: -5px;
|
||||
top: -3px;
|
||||
right: 12px;
|
||||
top: 4px;
|
||||
.rtl & {
|
||||
right: auto;
|
||||
left: -5px;
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.listitem-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
.listitem-icon {
|
||||
background-position-x: -20px;
|
||||
background-position-x: @button-small-active-icon-offset-x;
|
||||
}
|
||||
//&:hover {
|
||||
// .listitem-icon {
|
||||
// display: block;
|
||||
// }
|
||||
//}
|
||||
.color {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 20px;
|
||||
border-width: var(--scaled-two-pixel, 2px);
|
||||
.margin-right-8();
|
||||
vertical-align: middle;
|
||||
background-color: #ffffff;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
//&.selected {
|
||||
// .listitem-icon {
|
||||
// background-position-x: -20px;
|
||||
// background-position-x: @button-small-active-icon-offset-x;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user