keeweb
/
keeweb
mirror of https://github.com/keeweb/keeweb.git
1
0
Fork 0
Code Issues Releases Wiki Activity

custom icon display and selection

This commit is contained in:
Antelle 2015-11-22 01:15:51 +03:00
parent 77df32f42f
commit ca4f661fed
9 changed files with 76 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/scripts/models/entry-model.js
View File

@ -66,8 +66,10 @@ var EntryModel = Backbone.Model.extend({
_buildCustomIcon: function() {
this.customIcon = null;
this.customIconId = null;
if (this.entry.customIcon) {
this.customIcon = IconUrl.toDataUrl(this.file.db.meta.customIcons[this.entry.customIcon]);
this.customIconId = this.entry.customIcon.toString();
}
},
@ -126,6 +128,13 @@ var EntryModel = Backbone.Model.extend({
setIcon: function(iconId) {
this._entryModified();
this.entry.icon = iconId;
this.entry.customIcon = undefined;
this._fillByEntry();
},
setCustomIcon: function(customIconId) {
this._entryModified();
this.entry.customIcon = new kdbxweb.KdbxUuid(customIconId);
this._fillByEntry();
},

7
app/scripts/models/file-model.js
View File

@ -7,6 +7,7 @@ var Backbone = require('backbone'),
DropboxLink = require('../comp/dropbox-link'),
Storage = require('../comp/storage'),
LastOpenFiles = require('../comp/last-open-files'),
IconUrl = require('../util/icon-url'),
kdbxweb = require('kdbxweb'),
demoFileData = require('base64!../../resources/Demo.kdbx');
@ -273,6 +274,12 @@ var FileModel = Backbone.Model.extend({
this.addToLastOpenFiles();
},
getCustomIcons: function() {
return _.mapObject(this.db.meta.customIcons, function(customIcon) {
return IconUrl.toDataUrl(customIcon);
});
},
setPassword: function(password) {
this.db.credentials.setPassword(password);
this.db.meta.keyChanged = new Date();

10
app/scripts/models/group-model.js
View File

@ -52,7 +52,8 @@ var GroupModel = MenuItemModel.extend({
title: this.group.name,
iconId: this.group.icon,
icon: this._iconFromId(this.group.icon),
customIcon: this._buildCustomIcon()
customIcon: this._buildCustomIcon(),
customIconId: this.group.customIcon ? this.group.customIcon.toString() : null
}, { silent: silent });
},
@ -128,6 +129,13 @@ var GroupModel = MenuItemModel.extend({
setIcon: function(iconId) {
this._groupModified();
this.group.icon = iconId;
this.group.customIcon = undefined;
this._fillByGroup();
},
setCustomIcon: function(customIconId) {
this._groupModified();
this.group.customIcon = new kdbxweb.KdbxUuid(customIconId);
this._fillByGroup();
},

21
app/scripts/views/details/details-view.js
View File

@ -189,7 +189,13 @@ var DetailsView = Backbone.View.extend({
return;
}
this.removeSubView();
var subView = new IconSelectView({ el: this.scroller, model: this.model, url: this.model.get('url') });
var subView = new IconSelectView({
el: this.scroller,
model: {
iconId: this.model.customIconId || this.model.iconId,
url: this.model.url, file: this.model.file
}
});
this.listenTo(subView, 'select', this.iconSelected);
subView.render();
this.pageResized();
@ -234,9 +240,16 @@ var DetailsView = Backbone.View.extend({
FileSaver.saveAs(blob, attachment.title);
},
iconSelected: function(iconId) {
if (iconId !== this.model.iconId) {
this.model.setIcon(iconId);
iconSelected: function(sel) {
if (sel.custom) {
if (sel.id !== this.model.customIconId) {
this.model.setCustomIcon(sel.id);
this.entryUpdated();
} else {
this.render();
}
} else if (sel.id !== this.model.iconId) {
this.model.setIcon(sel.id);
this.entryUpdated();
} else {
this.render();

18
app/scripts/views/grp-view.js
View File

@ -77,7 +77,13 @@ var GrpView = Backbone.View.extend({
if (this.views.sub) {
this.removeSubView();
} else {
var subView = new IconSelectView({el: this.$el.find('.grp__icons'), model: {iconId: this.model.get('iconId')}});
var subView = new IconSelectView({
el: this.$el.find('.grp__icons'),
model: {
iconId: this.model.get('customIconId') || this.model.get('iconId'),
file: this.model.file
}
});
this.listenTo(subView, 'select', this.iconSelected);
subView.render();
this.views.sub = subView;
@ -85,9 +91,13 @@ var GrpView = Backbone.View.extend({
this.pageResized();
},
iconSelected: function(iconId) {
if (iconId !== this.model.get('iconId')) {
this.model.setIcon(iconId);
iconSelected: function(sel) {
if (sel.custom) {
if (sel.id !== this.model.get('customIconId')) {
this.model.setCustomIcon(sel.id);
}
} else if (sel.id !== this.model.get('iconId')) {
this.model.setIcon(sel.id);
}
this.render();
},

15
app/scripts/views/icon-select-view.js
View File

@ -17,15 +17,18 @@ var IconSelectView = Backbone.View.extend({
this.renderTemplate({
sel: this.model.iconId,
icons: IconMap,
canDownloadFavicon: !!this.model.url
canDownloadFavicon: !!this.model.url,
customIcons: this.model.file.getCustomIcons()
}, true);
return this;
},
iconClick: function(e) {
var iconId = +$(e.target).data('val');
if (typeof iconId === 'number' && !isNaN(iconId)) {
this.trigger('select', iconId);
var target = $(e.target).closest('.icon-select__icon');
var iconId = target[0].getAttribute('data-val');
if (iconId) {
var isCustomIcon = target.hasClass('icon-select__icon-custom');
this.trigger('select', { id: iconId, custom: isCustomIcon });
}
},
@ -39,8 +42,6 @@ var IconSelectView = Backbone.View.extend({
var url = this.getIconUrl();
var img = document.createElement('img');
img.src = url;
img.width = 16;
img.height = 16;
img.onload = function() {
that.$el.find('.icon-select__icon-download img').remove();
that.$el.find('.icon-select__icon-download>i').removeClass('fa-spinner fa-spin');
@ -78,8 +79,6 @@ var IconSelectView = Backbone.View.extend({
reader.onload = function(e) {
var img = document.createElement('img');
img.src = e.target.result;
img.width = 16;
img.height = 16;
that.$el.find('.icon-select__icon-select img').remove();
that.$el.find('.icon-select__icon-select').addClass('icon-select__icon--custom-selected').append(img);
};

4
app/scripts/views/menu/menu-item-view.js
View File

@ -30,6 +30,7 @@ var MenuItemView = Backbone.View.extend({
this.itemViews = [];
this.listenTo(this.model, 'change:title', this.changeTitle);
this.listenTo(this.model, 'change:icon', this.changeIcon);
this.listenTo(this.model, 'change:customIconId', this.render);
this.listenTo(this.model, 'change:active', this.changeActive);
this.listenTo(this.model, 'change:expanded', this.changeExpanded);
this.listenTo(this.model, 'change:cls', this.changeCls);
@ -49,13 +50,14 @@ var MenuItemView = Backbone.View.extend({
this.renderTemplate(this.model.attributes);
this.iconEl = this.$el.find('i');
var items = this.model.get('items');
if (items && this.model.get('expanded')) {
if (items) {
items.forEach(function (item) {
if (item.get('visible')) {
this.insertItem(item);
}
}, this);
}
this.$el.toggleClass('menu__item--collapsed', !this.model.get('expanded'));
return this;
},

4
app/styles/common/_icon-select.scss
View File

@ -28,6 +28,10 @@
}
&-btn {
padding: 5px 10px;
>img {
width: 16px;
height: 16px;
}
}
&--custom-selected {
//@include filter(grayscale(1));

6
app/templates/icon-select.html
View File

@ -14,5 +14,11 @@
<span class="icon-select__icon icon-select__icon-btn icon-select__icon-select" title="Select custom icon">
<i class="fa fa-ellipsis-h"></i>
</span>
<% Object.keys(customIcons).forEach(function(ci) { %>
<span class="icon-select__icon icon-select__icon-btn icon-select__icon-custom <%= ci === sel ? 'icon-select__icon--active' : '' %>"
data-val="<%- ci %>">
<img src="<%= customIcons[ci] %>" />
</span>
<% }); %>
</div>
</div>