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

View File

@ -328,7 +328,7 @@ class Feeds extends Handler_Protected {
}
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 {
$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>";
$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'>".
"<div style=\"float : right\">$feed_icon_img</div>".
@ -1492,22 +1492,22 @@ class Feeds extends Handler_Protected {
static function getFeedIcon($id) {
switch ($id) {
case 0:
return "images/archive.png";
return "archive";
break;
case -1:
return "images/star.png";
return "star";
break;
case -2:
return "images/feed.png";
return "rss_feed";
break;
case -3:
return "images/fresh.png";
return "new_releases";
break;
case -4:
return "images/folder.png";
return "inbox";
break;
case -6:
return "images/time.png";
return "cached";
break;
default:
if ($id < LABEL_BASE_INDEX) {

View File

@ -160,9 +160,9 @@ class Pref_Users extends Handler_Protected {
$icon_file = ICONS_URL."/".$line["id"].".ico";
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 {
$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>";

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

@ -230,6 +230,7 @@ body.ttrss_main {
padding : 2px;
transition : color 0.2s linear;
user-select: none;
font-size : 21px;
}
}
@ -765,7 +766,7 @@ body.ttrss_main {
left : -3px;
height : 22px;
position : relative;
top : -6px;
top : -3px;
}
.dijitTreeRow .dijitTreeLabel.Unread {
@ -790,11 +791,48 @@ body.ttrss_main {
background : white;
}
img.tinyFeedIcon {
.icon {
position : relative;
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;
}
img.feedIcon, img.tinyFeedIcon {
img.feed-icon, img.icon {
width : 16px;
height : 16px;
line-height : 16px;
@ -1142,18 +1180,20 @@ body.ttrss_main .dijitDialog {
body.ttrss_main {
i.icon-syndicate {
color : #ff5718;
margin-right : 2px;
color : @color-published;
margin-right : 8px;
border : 1px solid @color-published;
border-radius : 4px;
}
.cdm.marked .left i.marked-pic,
.hl.marked .left i.marked-pic {
color : #ffc069;
color : @color-marked;
}
.cdm.published .left i.pub-pic,
.hl.published .left i.pub-pic {
color : #ff5718;
color : @color-published;
}
}

View File

@ -8,14 +8,27 @@ define(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree", "dijit/Menu"],
_createTreeNode: function(args) {
const tnode = new dijit._TreeNode(args);
const icon = dojo.doc.createElement('img');
if (args.item.icon && args.item.icon[0]) {
icon.src = args.item.icon[0];
const iconName = args.item.icon ? String(args.item.icon[0]) : null;
let iconNode;
if (iconName) {
if (iconName.indexOf("/") == -1) {
iconNode = dojo.doc.createElement("i");
iconNode.className = "material-icons icon icon-" + iconName;
iconNode.innerHTML = iconName;
} else {
icon.src = 'images/blank_icon.gif';
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';
}
icon.className = 'tinyFeedIcon';
domConstruct.place(icon, tnode.iconNode, 'only');
iconNode.className = 'icon';
}
}
if (iconNode)
domConstruct.place(iconNode, tnode.iconNode, 'only');
const id = args.item.id[0];
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 "";
},
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) {
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];
const icon = dojo.doc.createElement('img');
icon.src = src;
icon.className = 'tinyFeedIcon';
icon.className = 'icon';
domConstruct.place(icon, treeNode.iconNode, 'only');
return true;
}

View File

@ -11,7 +11,7 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], functio
} else {
icon.src = 'images/blank_icon.gif';
}
icon.className = 'tinyFeedIcon';
icon.className = 'icon';
domConstruct.place(icon, tnode.iconNode, 'only');
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";
},
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() {
const searchElem = $("feed_search");

View File

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

File diff suppressed because one or more lines are too long