',
'
',
@@ -159,18 +177,37 @@ define([
store: new Common.UI.DataViewStore(),
itemTemplate: _.template([
'
',
- '
<%= Common.Utils.String.htmlEncode(displayName) %>
',
- '
<%= Common.Utils.String.htmlEncode(email) %>
',
- '<% if (typeof isCurrent === "undefined" || !isCurrent) { %>',
- '
',
- '<% } %>',
+ '
',
+ '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%><% } %>
',
+ '
',
+ '<% if (!!email) { %>',
+ '
<%= Common.Utils.String.htmlEncode(displayName) %>
',
+ '
<%= Common.Utils.String.htmlEncode(email) %>
',
+ '<% } else { %>',
+ '
<%= Common.Utils.String.htmlEncode(displayName) %>
',
+ '<% } %>',
+ '
',
+ '
',
'
'
].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 || {}));
});
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index 258216404e..baad8d6e81 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -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;
+ // }
+ //}
}
}