keeweb/keeweb
1
0
Fork 0
mirror of https://github.com/keeweb/keeweb.git synced 2024-06-21 07:06:39 +02:00
Code Issues Releases Wiki Activity

custom icons in list

Browse Source
This commit is contained in:
Antelle 2015-11-13 00:52:28 +03:00
parent d6b314eed9
commit 1f7e950cee
4 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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(); });
},

1
app/scripts/presenters/entry-presenter.js
View File

@ -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; },

20
app/styles/areas/_list.scss
View File

@ -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;

5
app/templates/list-item-short.html
View File

@ -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>