mirror of
https://github.com/keeweb/keeweb.git
synced 2024-06-27 07:45:08 +02:00
custom icons in list
This commit is contained in:
parent
d6b314eed9
commit
1f7e950cee
|
@ -41,6 +41,7 @@ var EntryModel = Backbone.Model.extend({
|
|||
this.expires = entry.times.expires ? entry.times.expiryTime : undefined;
|
||||
this.expired = entry.times.expires && entry.times.expiryTime <= new Date();
|
||||
this.historyLength = entry.history.length;
|
||||
this._buildCustomIcon();
|
||||
this._buildSearchText();
|
||||
this._buildSearchTags();
|
||||
this._buildSearchColor();
|
||||
|
@ -62,6 +63,16 @@ var EntryModel = Backbone.Model.extend({
|
|||
this.searchText = text;
|
||||
},
|
||||
|
||||
_buildCustomIcon: function() {
|
||||
this.customIcon = null;
|
||||
if (this.entry.customIcon) {
|
||||
var iconData = this.file.db.meta.customIcons[this.entry.customIcon];
|
||||
if (iconData) {
|
||||
this.customIcon = kdbxweb.ByteUtils.bytesToBase64(iconData);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_buildSearchTags: function() {
|
||||
this.searchTags = this.entry.tags.map(function(tag) { return tag.toLowerCase(); });
|
||||
},
|
||||
|
|
|
@ -18,6 +18,7 @@ EntryPresenter.prototype = {
|
|||
},
|
||||
get id() { return this.entry ? this.entry.id : this.group.get('id'); },
|
||||
get icon() { return this.entry ? this.entry.icon : (this.group.get('icon') || 'folder'); },
|
||||
get customIcon() { return this.entry ? this.entry.customIcon : undefined; },
|
||||
get color() { return this.entry ? this.entry.color : undefined; },
|
||||
get title() { return this.entry ? this.entry.title : this.group.get('title'); },
|
||||
get notes() { return this.entry ? this.entry.notes : undefined; },
|
||||
|
|
|
@ -91,11 +91,27 @@
|
|||
.list__item-title, .list__item-descr { text-decoration: line-through; }
|
||||
}
|
||||
|
||||
i {
|
||||
&-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
&--custom {
|
||||
@include filter(grayscale(1));
|
||||
vertical-align: text-bottom;
|
||||
// TODO: find more suitable colors
|
||||
&.yellow { @include filter(grayscale(1) sepia(1) hue-rotate(20deg) brightness(0.4) saturate(3) brightness(2)); }
|
||||
&.green { @include filter(grayscale(1) sepia(1) hue-rotate(70deg) brightness(.5) saturate(2) brightness(1.3)); }
|
||||
&.red { @include filter(grayscale(1) sepia(1) hue-rotate(320deg) brightness(0.6) saturate(4) brightness(1)); }
|
||||
&.orange { @include filter(grayscale(1) sepia(1) hue-rotate(340deg) brightness(.4) saturate(3) brightness(1.8)); }
|
||||
&.blue { @include filter(grayscale(1) sepia(1) hue-rotate(170deg) brightness(0.3) saturate(3) brightness(2)); }
|
||||
&.violet { @include filter(grayscale(1) sepia(1) hue-rotate(240deg) brightness(0.8) saturate(2.7) brightness(.9)); }
|
||||
}
|
||||
}
|
||||
|
||||
.list__item-descr {
|
||||
&-title {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
&-descr {
|
||||
font-size: .8em;
|
||||
@include th { color: muted-color(); }
|
||||
display: block;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
<div class="list__item <%= active ? 'list__item--active' : '' %> <%= expired ? 'list__item--expired' : '' %>" id="<%= id %>" draggable="true">
|
||||
<i class="fa fa-<%= icon %> <%= color ? color+'-color' : '' %>"></i> <span
|
||||
class="list__item-title"><%- title || '(no title)' %></span><span class="list__item-descr thin"><%- description %></span>
|
||||
<% if (customIcon) { %><img src="data:image/png;base64,<%= customIcon %>" class="list__item-icon list__item-icon--custom <%= color || '' %>" /><% }
|
||||
else { %><i class="fa fa-<%= icon %> <%= color ? color+'-color' : '' %> list__item-icon"></i><% } %>
|
||||
<span class="list__item-title"><%- title || '(no title)' %></span><span class="list__item-descr thin"><%- description %></span>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue
Block a user