valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

various icon updates; use new icons in feed tree

This commit is contained in:
Andrew Dolgov 2018-12-05 20:26:27 +03:00
parent aff76584c8
commit cad6d1d7fd
11 changed files with 176 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
classes/feeds.php
View File

@ -328,7 +328,7 @@ class Feeds extends Handler_Protected {
} }
if (feeds::feedHasIcon($feed_id)) { if (feeds::feedHasIcon($feed_id)) {
$feed_icon_img = "<img class=\"tinyFeedIcon\" src=\"".ICONS_URL."/$feed_id.ico\" alt=\"\">"; $feed_icon_img = "<img class=\"icon\" src=\"".ICONS_URL."/$feed_id.ico\" alt=\"\">";
} else { } else {
$feed_icon_img = "<i class='icon-syndicate material-icons'>rss_feed</i>"; $feed_icon_img = "<i class='icon-syndicate material-icons'>rss_feed</i>";
} }
@ -449,7 +449,7 @@ class Feeds extends Handler_Protected {
$vf_catchup_link = "<a class='catchup' onclick='Feeds.catchupFeedInGroup($feed_id);' href='#'>".__('mark feed as read')."</a>"; $vf_catchup_link = "<a class='catchup' onclick='Feeds.catchupFeedInGroup($feed_id);' href='#'>".__('mark feed as read')."</a>";
$feed_icon_src = Feeds::getFeedIcon($feed_id); $feed_icon_src = Feeds::getFeedIcon($feed_id);
$feed_icon_img = "<img class=\"tinyFeedIcon\" src=\"$feed_icon_src\">"; $feed_icon_img = "<img class=\"icon\" src=\"$feed_icon_src\">";
$reply['content'] .= "<div data-feed-id='$feed_id' class='feed-title'>". $reply['content'] .= "<div data-feed-id='$feed_id' class='feed-title'>".
"<div style=\"float : right\">$feed_icon_img</div>". "<div style=\"float : right\">$feed_icon_img</div>".
@ -1492,22 +1492,22 @@ class Feeds extends Handler_Protected {
static function getFeedIcon($id) { static function getFeedIcon($id) {
switch ($id) { switch ($id) {
case 0: case 0:
return "images/archive.png"; return "archive";
break; break;
case -1: case -1:
return "images/star.png"; return "star";
break; break;
case -2: case -2:
return "images/feed.png"; return "rss_feed";
break; break;
case -3: case -3:
return "images/fresh.png"; return "new_releases";
break; break;
case -4: case -4:
return "images/folder.png"; return "inbox";
break; break;
case -6: case -6:
return "images/time.png"; return "cached";
break; break;
default: default:
if ($id < LABEL_BASE_INDEX) { if ($id < LABEL_BASE_INDEX) {

4
classes/pref/users.php
View File

@ -160,9 +160,9 @@ class Pref_Users extends Handler_Protected {
$icon_file = ICONS_URL."/".$line["id"].".ico"; $icon_file = ICONS_URL."/".$line["id"].".ico";
if (file_exists($icon_file) && filesize($icon_file) > 0) { if (file_exists($icon_file) && filesize($icon_file) > 0) {
$feed_icon = "<img class=\"tinyFeedIcon\" src=\"$icon_file\">"; $feed_icon = "<img class=\"icon\" src=\"$icon_file\">";
} else { } else {
$feed_icon = "<img class=\"tinyFeedIcon\" src=\"images/blank_icon.gif\">"; $feed_icon = "<img class=\"icon\" src=\"images/blank_icon.gif\">";
} }
print "<li>$feed_icon&nbsp;<a href=\"".$line["site_url"]."\">".$line["title"]."</a></li>"; print "<li>$feed_icon&nbsp;<a href=\"".$line["site_url"]."\">".$line["title"]."</a></li>";

2
css/cdm.less
View File

@ -27,7 +27,9 @@
i.material-icons { i.material-icons {
margin-left : 2px; margin-left : 2px;
padding : 2px; padding : 2px;
transition : color 0.2s linear;
user-select: none; user-select: none;
font-size : 21px;
} }
} }

51
css/default.css
View File

@ -203,6 +203,7 @@ body.ttrss_main .hl .right i.material-icons {
padding: 2px; padding: 2px;
transition: color 0.2s linear; transition: color 0.2s linear;
user-select: none; user-select: none;
font-size: 21px;
} }
body.ttrss_main .hl div.title { body.ttrss_main .hl div.title {
cursor: pointer; cursor: pointer;
@ -658,7 +659,7 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando {
left: -3px; left: -3px;
height: 22px; height: 22px;
position: relative; position: relative;
top: -6px; top: -3px;
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeRow .dijitTreeLabel.Unread { body.ttrss_main #feeds-holder #feedTree .dijitTreeRow .dijitTreeLabel.Unread {
font-weight: bold; font-weight: bold;
@ -677,10 +678,40 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRowSelected {
border-color: #ddd transparent; border-color: #ddd transparent;
background: white; background: white;
} }
body.ttrss_main #feeds-holder #feedTree img.tinyFeedIcon { body.ttrss_main #feeds-holder #feedTree .icon {
position: relative; position: relative;
top: -2px; top: -2px;
} }
body.ttrss_main #feeds-holder #feedTree i.icon {
left: -2px;
}
body.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox {
color: #555;
}
body.ttrss_main #feeds-holder #feedTree i.icon.icon-archive {
color: #c77b2e;
}
body.ttrss_main #feeds-holder #feedTree i.icon.icon-star {
color: #ffc069;
font-size: 21px;
top: -4px;
left: -4px;
}
body.ttrss_main #feeds-holder #feedTree i.icon.icon-rss_feed {
color: #ff7c4b;
border: 1px solid #ff7c4b;
border-radius: 4px;
left: -4px;
top: -4px;
}
body.ttrss_main #feeds-holder #feedTree i.icon.icon-new_releases {
color: #69c671;
}
body.ttrss_main #feeds-holder #feedTree i.icon.icon-cached {
font-weight: bold;
left: -3px;
color: #257aa7;
}
body.ttrss_main #headlines-wrap-inner { body.ttrss_main #headlines-wrap-inner {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
@ -789,8 +820,8 @@ body.ttrss_main #content-insert {
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
body.ttrss_main img.feedIcon, body.ttrss_main img.feed-icon,
body.ttrss_main img.tinyFeedIcon { body.ttrss_main img.icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
@ -969,8 +1000,10 @@ body.ttrss_main .dijitDialog h4:first-of-type {
margin-top: 0px; margin-top: 0px;
} }
body.ttrss_main i.icon-syndicate { body.ttrss_main i.icon-syndicate {
color: #ff5718; color: #ff7c4b;
margin-right: 2px; margin-right: 8px;
border: 1px solid #ff7c4b;
border-radius: 4px;
} }
body.ttrss_main .cdm.marked .left i.marked-pic, body.ttrss_main .cdm.marked .left i.marked-pic,
body.ttrss_main .hl.marked .left i.marked-pic { body.ttrss_main .hl.marked .left i.marked-pic {
@ -978,7 +1011,7 @@ body.ttrss_main .hl.marked .left i.marked-pic {
} }
body.ttrss_main .cdm.published .left i.pub-pic, body.ttrss_main .cdm.published .left i.pub-pic,
body.ttrss_main .hl.published .left i.pub-pic { body.ttrss_main .hl.published .left i.pub-pic {
color: #ff5718; color: #ff7c4b;
} }
::selection { ::selection {
background: #257aa7; background: #257aa7;
@ -1021,7 +1054,9 @@ body.ttrss_main .hl.published .left i.pub-pic {
.cdm .header .right i.material-icons { .cdm .header .right i.material-icons {
margin-left: 2px; margin-left: 2px;
padding: 2px; padding: 2px;
transition: color 0.2s linear;
user-select: none; user-select: none;
font-size: 21px;
} }
.cdm .header .titleWrap { .cdm .header .titleWrap {
flex-grow: 2; flex-grow: 2;
@ -1942,7 +1977,7 @@ body.ttrss_zoom div.post div.content pre {
/* Preferred icon size */ /* Preferred icon size */
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
color: #999; color: #777;
text-transform: none; text-transform: none;
letter-spacing: normal; letter-spacing: normal;
word-wrap: normal; word-wrap: normal;

2
css/default.css.map
View File

File diff suppressed because one or more lines are too long

6
css/defines.less
View File

@ -4,6 +4,10 @@
@color-accent: #257aa7; @color-accent: #257aa7;
@color-accent-light: lighten(@color-accent, 50%); @color-accent-light: lighten(@color-accent, 50%);
@color-link: @color-accent; @color-link: @color-accent;
@color-published: lighten(#ff5718, 10%);
@color-marked: #ffc069;
@color-panel-bg: #f5f5f5;
@color-enabled: #69C671;
@default-text: #555; @default-text: #555;
body.ttrss_main, body.ttrss_main,
@ -45,7 +49,7 @@ body.ttrss_prefs,
font-size: 18px; /* Preferred icon size */ font-size: 18px; /* Preferred icon size */
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
color : #999; color : #777;
text-transform: none; text-transform: none;
letter-spacing: normal; letter-spacing: normal;
word-wrap: normal; word-wrap: normal;

54
css/tt-rss.less
View File

@ -230,6 +230,7 @@ body.ttrss_main {
padding : 2px; padding : 2px;
transition : color 0.2s linear; transition : color 0.2s linear;
user-select: none; user-select: none;
font-size : 21px;
} }
} }
@ -765,7 +766,7 @@ body.ttrss_main {
left : -3px; left : -3px;
height : 22px; height : 22px;
position : relative; position : relative;
top : -6px; top : -3px;
} }
.dijitTreeRow .dijitTreeLabel.Unread { .dijitTreeRow .dijitTreeLabel.Unread {
@ -790,11 +791,48 @@ body.ttrss_main {
background : white; background : white;
} }
img.tinyFeedIcon { .icon {
position : relative; position : relative;
top : -2px; top : -2px;
} }
i.icon {
left : -2px;
}
i.icon.icon-inbox {
color : #555;
}
i.icon.icon-archive {
color : #c77b2e;
}
i.icon.icon-star {
color : @color-marked;
font-size : 21px;
top : -4px;
left : -4px;
}
i.icon.icon-rss_feed {
color : @color-published;
border : 1px solid @color-published;
border-radius : 4px;
left : -4px;
top: -4px;
}
i.icon.icon-new_releases {
color : @color-enabled;
}
i.icon.icon-cached {
font-weight : bold;
left : -3px;
color : @color-accent;
}
} }
} }
@ -927,7 +965,7 @@ body.ttrss_main {
-webkit-overflow-scrolling : touch; -webkit-overflow-scrolling : touch;
} }
img.feedIcon, img.tinyFeedIcon { img.feed-icon, img.icon {
width : 16px; width : 16px;
height : 16px; height : 16px;
line-height : 16px; line-height : 16px;
@ -1142,18 +1180,20 @@ body.ttrss_main .dijitDialog {
body.ttrss_main { body.ttrss_main {
i.icon-syndicate { i.icon-syndicate {
color : #ff5718; color : @color-published;
margin-right : 2px; margin-right : 8px;
border : 1px solid @color-published;
border-radius : 4px;
} }
.cdm.marked .left i.marked-pic, .cdm.marked .left i.marked-pic,
.hl.marked .left i.marked-pic { .hl.marked .left i.marked-pic {
color : #ffc069; color : @color-marked;
} }
.cdm.published .left i.pub-pic, .cdm.published .left i.pub-pic,
.hl.published .left i.pub-pic { .hl.published .left i.pub-pic {
color : #ff5718; color : @color-published;
} }
} }

31
js/FeedTree.js
View File

@ -8,14 +8,27 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
_createTreeNode: function(args) { _createTreeNode: function(args) {
const tnode = new dijit._TreeNode(args); const tnode = new dijit._TreeNode(args);
const icon = dojo.doc.createElement('img'); const iconName = args.item.icon ? String(args.item.icon[0]) : null;
if (args.item.icon && args.item.icon[0]) { let iconNode;
icon.src = args.item.icon[0];
} else { if (iconName) {
icon.src = 'images/blank_icon.gif'; if (iconName.indexOf("/") == -1) {
iconNode = dojo.doc.createElement("i");
iconNode.className = "material-icons icon icon-" + iconName;
iconNode.innerHTML = iconName;
} else {
iconNode = dojo.doc.createElement('img');
if (args.item.icon && args.item.icon[0]) {
iconNode.src = args.item.icon[0];
} else {
iconNode.src = 'images/blank_icon.gif';
}
iconNode.className = 'icon';
}
} }
icon.className = 'tinyFeedIcon';
domConstruct.place(icon, tnode.iconNode, 'only'); if (iconNode)
domConstruct.place(iconNode, tnode.iconNode, 'only');
const id = args.item.id[0]; const id = args.item.id[0];
const bare_id = parseInt(id.substr(id.indexOf(':')+1)); const bare_id = parseInt(id.substr(id.indexOf(':')+1));
@ -161,7 +174,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
return ""; return "";
}, },
getIconClass: function (item, opened) { getIconClass: function (item, opened) {
return (!item || this.model.mayHaveChildren(item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "feedIcon"; return (!item || this.model.mayHaveChildren(item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "feed-icon";
}, },
getLabelClass: function (item, opened) { getLabelClass: function (item, opened) {
return (item.unread == 0) ? "dijitTreeLabel" : "dijitTreeLabel Unread"; return (item.unread == 0) ? "dijitTreeLabel" : "dijitTreeLabel Unread";
@ -275,7 +288,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
treeNode = treeNode[0]; treeNode = treeNode[0];
const icon = dojo.doc.createElement('img'); const icon = dojo.doc.createElement('img');
icon.src = src; icon.src = src;
icon.className = 'tinyFeedIcon'; icon.className = 'icon';
domConstruct.place(icon, treeNode.iconNode, 'only'); domConstruct.place(icon, treeNode.iconNode, 'only');
return true; return true;
} }

4
js/PrefFeedTree.js
View File

@ -11,7 +11,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], functio
} else { } else {
icon.src = 'images/blank_icon.gif'; icon.src = 'images/blank_icon.gif';
} }
icon.className = 'tinyFeedIcon'; icon.className = 'icon';
domConstruct.place(icon, tnode.iconNode, 'only'); domConstruct.place(icon, tnode.iconNode, 'only');
let param = this.model.store.getValue(args.item, 'param'); let param = this.model.store.getValue(args.item, 'param');
@ -80,7 +80,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], functio
"dijitTreeRow Error"; "dijitTreeRow Error";
}, },
getIconClass: function (item, opened) { getIconClass: function (item, opened) {
return (!item || this.model.store.getValue(item, 'type') == 'category') ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "feedIcon"; return (!item || this.model.store.getValue(item, 'type') == 'category') ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "feed-icon";
}, },
reload: function() { reload: function() {
const searchElem = $("feed_search"); const searchElem = $("feed_search");

51
themes/night.css
View File

@ -203,6 +203,7 @@ body.ttrss_main .hl .right i.material-icons {
padding: 2px; padding: 2px;
transition: color 0.2s linear; transition: color 0.2s linear;
user-select: none; user-select: none;
font-size: 21px;
} }
body.ttrss_main .hl div.title { body.ttrss_main .hl div.title {
cursor: pointer; cursor: pointer;
@ -658,7 +659,7 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .loadingExpando {
left: -3px; left: -3px;
height: 22px; height: 22px;
position: relative; position: relative;
top: -6px; top: -3px;
} }
body.ttrss_main #feeds-holder #feedTree .dijitTreeRow .dijitTreeLabel.Unread { body.ttrss_main #feeds-holder #feedTree .dijitTreeRow .dijitTreeLabel.Unread {
font-weight: bold; font-weight: bold;
@ -677,10 +678,40 @@ body.ttrss_main #feeds-holder #feedTree .dijitTreeNode .dijitTreeRowSelected {
border-color: #ddd transparent; border-color: #ddd transparent;
background: white; background: white;
} }
body.ttrss_main #feeds-holder #feedTree img.tinyFeedIcon { body.ttrss_main #feeds-holder #feedTree .icon {
position: relative; position: relative;
top: -2px; top: -2px;
} }
body.ttrss_main #feeds-holder #feedTree i.icon {
left: -2px;
}
body.ttrss_main #feeds-holder #feedTree i.icon.icon-inbox {
color: #555;
}
body.ttrss_main #feeds-holder #feedTree i.icon.icon-archive {
color: #c77b2e;
}
body.ttrss_main #feeds-holder #feedTree i.icon.icon-star {
color: #ffc069;
font-size: 21px;
top: -4px;
left: -4px;
}
body.ttrss_main #feeds-holder #feedTree i.icon.icon-rss_feed {
color: #ff7c4b;
border: 1px solid #ff7c4b;
border-radius: 4px;
left: -4px;
top: -4px;
}
body.ttrss_main #feeds-holder #feedTree i.icon.icon-new_releases {
color: #69c671;
}
body.ttrss_main #feeds-holder #feedTree i.icon.icon-cached {
font-weight: bold;
left: -3px;
color: #257aa7;
}
body.ttrss_main #headlines-wrap-inner { body.ttrss_main #headlines-wrap-inner {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
@ -789,8 +820,8 @@ body.ttrss_main #content-insert {
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
body.ttrss_main img.feedIcon, body.ttrss_main img.feed-icon,
body.ttrss_main img.tinyFeedIcon { body.ttrss_main img.icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
@ -969,8 +1000,10 @@ body.ttrss_main .dijitDialog h4:first-of-type {
margin-top: 0px; margin-top: 0px;
} }
body.ttrss_main i.icon-syndicate { body.ttrss_main i.icon-syndicate {
color: #ff5718; color: #ff7c4b;
margin-right: 2px; margin-right: 8px;
border: 1px solid #ff7c4b;
border-radius: 4px;
} }
body.ttrss_main .cdm.marked .left i.marked-pic, body.ttrss_main .cdm.marked .left i.marked-pic,
body.ttrss_main .hl.marked .left i.marked-pic { body.ttrss_main .hl.marked .left i.marked-pic {
@ -978,7 +1011,7 @@ body.ttrss_main .hl.marked .left i.marked-pic {
} }
body.ttrss_main .cdm.published .left i.pub-pic, body.ttrss_main .cdm.published .left i.pub-pic,
body.ttrss_main .hl.published .left i.pub-pic { body.ttrss_main .hl.published .left i.pub-pic {
color: #ff5718; color: #ff7c4b;
} }
::selection { ::selection {
background: #257aa7; background: #257aa7;
@ -1021,7 +1054,9 @@ body.ttrss_main .hl.published .left i.pub-pic {
.cdm .header .right i.material-icons { .cdm .header .right i.material-icons {
margin-left: 2px; margin-left: 2px;
padding: 2px; padding: 2px;
transition: color 0.2s linear;
user-select: none; user-select: none;
font-size: 21px;
} }
.cdm .header .titleWrap { .cdm .header .titleWrap {
flex-grow: 2; flex-grow: 2;
@ -1942,7 +1977,7 @@ body.ttrss_zoom div.post div.content pre {
/* Preferred icon size */ /* Preferred icon size */
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
color: #999; color: #777;
text-transform: none; text-transform: none;
letter-spacing: normal; letter-spacing: normal;
word-wrap: normal; word-wrap: normal;

2
themes/night.css.map
View File

File diff suppressed because one or more lines are too long