From 8cc5e965125d083ea7b3b66699597888ce41d2ad Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Sat, 13 Nov 2010 14:04:37 +0300 Subject: [PATCH] use css-based layout in normal mode --- cdm.css | 13 ++- feedlist.js | 5 -- functions.js | 16 ---- functions.php | 74 +++++++---------- tt-rss.css | 152 ++++++++++------------------------ viewfeed.js | 221 +++++++++++++++++--------------------------------- 6 files changed, 156 insertions(+), 325 deletions(-) diff --git a/cdm.css b/cdm.css index ed35d7626..6f11b0b6b 100644 --- a/cdm.css +++ b/cdm.css @@ -15,13 +15,13 @@ div.cdmHeader input { margin-right : 5px; } -div.updPic { +div.cdmHeader div.updPic { width : 25px; display : inline-block; text-align : center; } -div.updPic img { +div.cdmHeader div.updPic img { vertical-align : middle; } @@ -67,3 +67,12 @@ div.cdmContent div.postEnclosures { color : gray; } +div.cdmFeedTitle { + border-color : #a0a0a0; + border-width : 0px 0px 1px 0px; + border-style : solid; + padding : 5px 3px 5px 5px; + background : url("images/toolbar.png") bottom left; + background-repeat : repeat-x; +} + diff --git a/feedlist.js b/feedlist.js index 1136972d7..1f9bd8ff5 100644 --- a/feedlist.js +++ b/feedlist.js @@ -222,11 +222,6 @@ function viewfeed(feed, subop, is_cat, offset) { var container = $("headlinesInnerContainer"); -/* if (container && page_offset == 0 && !isCdmMode()) { - new Effect.Fade(container, {duration: 1, to: 0.01, - queue: { position:'end', scope: 'FEEDL-' + feed, limit: 1 } } ); - } */ - var unread_ctr = -1; if (!is_cat) unread_ctr = get_feed_unread(feed); diff --git a/functions.js b/functions.js index a1bd9f5f4..d798f6bfa 100644 --- a/functions.js +++ b/functions.js @@ -205,22 +205,6 @@ function cleanSelected(element) { } } -function getVisibleUnreadHeadlines() { - var content = $("headlinesList"); - - var rows = new Array(); - - if (!content) return rows; - - for (i = 0; i < content.rows.length; i++) { - var row_id = content.rows[i].id.replace("RROW-", ""); - if (row_id.length > 0 && content.rows[i].className.match("Unread")) { - rows.push(row_id); - } - } - return rows; -} - function setCookie(name, value, lifetime, path, domain, secure) { var d = false; diff --git a/functions.php b/functions.php index 2865f68e2..66b868560 100644 --- a/functions.php +++ b/functions.php @@ -3131,10 +3131,6 @@ return ((!defined('TTRSS_SESSION_NAME')) ? "ttrss_sid" : TTRSS_SESSION_NAME); } - function make_init_param($param, $value) { - return array("param" => $param, "value" => $value); - } - function make_init_params($link) { $params = array(); @@ -3150,7 +3146,7 @@ foreach (array("ON_CATCHUP_SHOW_NEXT_FEED", "HIDE_READ_FEEDS", "ENABLE_FEED_CATS", "FEEDS_SORT_BY_UNREAD", "CONFIRM_FEED_CATCHUP", "CDM_AUTO_CATCHUP", "FRESH_ARTICLE_MAX_AGE", - "HIDE_READ_SHOWS_SPECIAL", "HIDE_FEEDLIST") as $param) { + "HIDE_READ_SHOWS_SPECIAL", "HIDE_FEEDLIST", "COMBINED_DISPLAY_MODE") as $param) { $params[strtolower($param)] = (int) get_pref($link, $param); } @@ -5077,13 +5073,6 @@ if (db_num_rows($result) > 0) { -# print "\{$offset}"; - - if (!get_pref($link, 'COMBINED_DISPLAY_MODE') && !$offset) { - print ""; - } - $lnum = $limit*$offset; $num_unread = 0; @@ -5222,34 +5211,36 @@ $vf_catchup_link = "(".__('mark as read').")"; - print ""; + $line["feed_title"]." $vf_catchup_link"; + } } $mouseover_attrs = "onmouseover='postMouseIn($id)' onmouseout='postMouseOut($id)'"; - print ""; - - print ""; - - print ""; - - print ""; - print ""; + print "
"; - print "
"; + print ""; - - print ""; + print "
"; + print "$updated_fmt"; + print $score_pic; - print "
"; + if ($line["feed_title"] && !get_pref($link, 'VFEED_GROUP_BY_FEED')) { - if (@$line["feed_title"] && !get_pref($link, 'VFEED_GROUP_BY_FEED')) { - print ""; + print " + $feed_icon_img"; } - print ""; + print ""; + print ""; } else { @@ -5497,10 +5487,6 @@ ++$lnum; } - if (!get_pref($link, 'COMBINED_DISPLAY_MODE') && !$offset) { - print "
". + print "
". "
$feed_icon_img
". "". - $line["feed_title"]." $vf_catchup_link
$update_pic - - $marked_pic$published_pic"; + print "
$update_pic
"; + print "
"; + + print ""; + + print "$marked_pic"; + print "$published_pic"; + + print "
"; + + print "
"; print "" . + onclick=\"return false;\">" . $line["title"]; if (get_pref($link, 'SHOW_CONTENT_PREVIEW')) { @@ -5258,7 +5249,7 @@ } } - print ""; + print ""; print $labels_str; @@ -5271,22 +5262,21 @@ } } */ - print "
$updated_fmt  - $score_pic$feed_icon_img
"; - } - } else { $message = ""; diff --git a/tt-rss.css b/tt-rss.css index 166b79fc0..d4eb4d10a 100644 --- a/tt-rss.css +++ b/tt-rss.css @@ -719,11 +719,7 @@ span.contentPreview:hover { color : #4684ff; } -table.headlinesList { - width : 100%; -} - -table.headlinesList span.hlLabelRef, div.cdmHeader span.hlLabelRef { +span.hlLabelRef { background-color : #fff7d5; font-height : 8px; color : #063064; @@ -733,43 +729,11 @@ table.headlinesList span.hlLabelRef, div.cdmHeader span.hlLabelRef { white-space: nowrap; } -table.headlinesList img.hlLoading { - margin-left : 5px; - vertical-align : middle; -} - -table.headlinesList td.hlFeedIcon { - width : 25px; - text-align : center; - cursor : pointer; -} - - -table.headlinesList td.hlMarkedPic { - width : 25px; - text-align : center; -} - -table.headlinesList td.hlfeed { - text-align : right; -} - td.hlSelectRow, td.hlUpdPic { width : 25px; text-align : center; } -table.headlinesList td.hlUpdated { - color : gray; - text-align : right; - width : 100px; - cursor : pointer; -} - -table.headlinesList tr td { - padding : 2px 0px 2px 0px; -} - div.postHeader div.postDate { text-align : right; color : gray; @@ -1393,48 +1357,11 @@ a.visibleLinkB:hover { background-color : #ecf4ff; } -table.headlinesList tr.feedTitle td a, div.cdmFeedTitle a { - color : #4684ff; -} - -div.cdmFeedTitle { - border-color : #a0a0a0; - border-width : 0px 0px 1px 0px; - border-style : solid; - padding : 5px 3px 5px 5px; - background : url("images/toolbar.png") bottom left; - background-repeat : repeat-x; -} - -table.headlinesList tr, table.headlinesList td { - border-collapse : collapse; - margin : 0px; -} - -table.headlinesList tr.feedTitle td { -/* text-align : right; - margin-top : 10px; */ - /*padding-left : 5px;*/ - - background : url("images/toolbar.png") bottom left; - background-repeat : repeat-x; - - border-color : #c0c0c0; - border-width : 0px 0px 1px 0px; - border-style : solid; - padding : 5px 3px 5px 5px; - -} - -td.hlContent, td.hlContentL, td.hlContentH { - cursor : pointer; -} - -td.hlContentH a, td.hlContentH span { +.hlContentH a, .hlContentH span { color : #00cc00; } -td.hlContentL a, td.hlContentL span { +.hlContentL a, .hlContentL span { color : #909090; text-decoration : line-through; } @@ -1773,48 +1700,53 @@ div#auxDlg a { color : #4684ff; } -/* -button:active { - background-image : url("images/button_pressed.png"); -} - -button, select { - background-color : transparent; - background-repeat : repeat-x; - background-position : top left; - background-image : url("images/button.png"); - border : 1px solid #bebebe; - font-family : "Lucida Grande", Tahoma, Arial, Verdana, sans-serif; - font-size : 100%; - text-decoration : none; - color : #303030; +div.hlTitle { + display : table-cell; cursor : pointer; - padding : 1px 5px 1px 5px; - margin : 0px; + width : 100%; + vertical-align : middle; + padding-top : 4px; + padding-bottom : 4px; } -select { - background : #ffffff; - padding : 1px 0px 1px 3px; +div.hlLeft { + display : table-cell; + vertical-align : middle; + white-space: nowrap; } -input { - background : white; - border : 1px solid #bebebe; - font-size : 100%; - padding : 1px 3px 1px 3px; +div.hlRight { + display : table-cell; + white-space: nowrap; + text-align : right; + vertical-align : middle; } -button:hover { - background-color : #f9faff; - border : 1px solid #88b0f0; - color : #336699; +span.hlUpdated { + color : gray; + font-weight : medium; + width : 100px; + display : inline-block; } -button[disabled] { - background : #f0f0f0; - color : #dedede; - border : 1px solid #dedede; -} */ +div.hlLeft input { + margin-left : 4px; + margin-right : 4px; +} +div.hlLeft img, div.hlRight img { + margin : 0px 4px 0px 4px; +} + +div.hlUpdPic { + display : table-cell; + padding-right : 4px; + padding-left : 4px; + text-align : center; + vertical-align : middle; +} + +div.hlUpdPic img { + max-width : 16px; +} diff --git a/viewfeed.js b/viewfeed.js index b710896e0..4b65167d6 100644 --- a/viewfeed.js +++ b/viewfeed.js @@ -147,11 +147,7 @@ function headlines_callback2(transport, feed_cur_page) { if (headlines_count > 0) { console.log("adding some more headlines..."); - var c = $("headlinesList"); - - if (!c) { - c = $("headlinesInnerContainer"); - } + c = $("headlinesInnerContainer"); var ids = getSelectedArticleIds2(); @@ -199,7 +195,7 @@ function headlines_callback2(transport, feed_cur_page) { if (_cdm_wd_timeout) window.clearTimeout(_cdm_wd_timeout); - + if (isCdmMode() && getActiveFeedId() != -3 && getInitParam("cdm_auto_catchup") == 1) { @@ -248,8 +244,8 @@ function showArticleInHeadlines(id) { try { - cleanSelected("headlinesList"); - + selectArticles("none"); + var crow = $("RROW-" + id); if (!crow) return; @@ -547,12 +543,8 @@ function toggleMark(id, client_only, no_effects) { mark_img.alt = __("Please wait..."); query = query + "&mark=0"; - if (!isCdmMode() && !no_effects) { - Effect.Puff(mark_img, {duration : 0.25, afterFinish: tMark_afh_off}); - } else { - mark_img.src = mark_img.src.replace("mark_set", "mark_unset"); - mark_img.alt = __("Star article"); - } + mark_img.src = mark_img.src.replace("mark_set", "mark_unset"); + mark_img.alt = __("Star article"); if (db) { db.execute("UPDATE articles SET marked = 0 WHERE id = ?", [id]); @@ -614,12 +606,9 @@ function togglePub(id, client_only, no_effects, note) { mark_img.alt = __("Please wait..."); query = query + "&pub=0"; - if (!isCdmMode() && !no_effects) { - Effect.Puff(mark_img, {duration : 0.25, afterFinish: tPub_afh_off}); - } else { - mark_img.src = mark_img.src.replace("pub_set", "pub_unset"); - mark_img.alt = __("Publish article"); - } + mark_img.src = mark_img.src.replace("pub_set", "pub_unset"); + mark_img.alt = __("Publish article"); + } if (!client_only) { @@ -657,38 +646,6 @@ function togglePub(id, client_only, no_effects, note) { } } -function correctHeadlinesOffset(id) { - - try { - - var hlist = $("headlinesList"); - var container = $("headlinesInnerContainer"); - var row = $("RROW-" + id); - - var viewport = container.offsetHeight; - - var rel_offset_top = row.offsetTop - container.scrollTop; - var rel_offset_bottom = row.offsetTop + row.offsetHeight - container.scrollTop; - - console.log("Rtop: " + rel_offset_top + " Rbtm: " + rel_offset_bottom); - console.log("Vport: " + viewport); - - if (rel_offset_top <= 0 || rel_offset_top > viewport) { - container.scrollTop = row.offsetTop; - } else if (rel_offset_bottom > viewport) { - - /* doesn't properly work with Opera in some cases because - Opera fucks up element scrolling */ - - container.scrollTop = row.offsetTop + row.offsetHeight - viewport; - } - - } catch (e) { - exception_error("correctHeadlinesOffset", e); - } - -} - function moveToPost(mode) { try { @@ -1109,10 +1066,7 @@ function getSelectedArticleIds2() { var children; - if (isCdmMode()) - var children = $("headlinesInnerContainer").childNodes; - else - var children = $("headlinesList").rows; + var children = $("headlinesInnerContainer").childNodes; for (i = 0; i < children.length; i++) { var child = children[i]; @@ -1129,10 +1083,7 @@ function getSelectedArticleIds2() { function getLoadedArticleIds() { var sel_articles = new Array(); - if (isCdmMode()) - var children = $("headlinesInnerContainer").childNodes; - else - var children = $("headlinesList").rows; + var children = $("headlinesInnerContainer").childNodes; if (!children) return sel_articles; @@ -1154,10 +1105,7 @@ function selectArticles(mode) { var children; - if (isCdmMode()) - var children = $("headlinesInnerContainer").childNodes; - else - var children = $("headlinesList").rows; + var children = $("headlinesInnerContainer").childNodes; for (i = 0; i < children.length; i++) { var child = children[i]; @@ -1329,11 +1277,7 @@ function catchupSelection() { return; } - if ($("headlinesList")) { - selectionToggleUnread(false, 'viewCurrentFeed()', true); - } else { - selectionToggleUnread(false, 'viewCurrentFeed()', true) - } + selectionToggleUnread(false, 'viewCurrentFeed()', true) } catch (e) { exception_error("catchupSelection", e); @@ -2071,45 +2015,6 @@ function fixHeadlinesOrder(ids) { } } -function invertHeadlineSelection() { - try { - var rows = new Array(); - var r = false; - - if (!isCdmMode()) { - r = document.getElementsByTagName("TR"); - } else { - r = document.getElementsByTagName("DIV"); - } - - for (var i = 0; i < r.length; i++) { - if (r[i].id && r[i].id.match("RROW-")) { - rows.push(r[i]); - } - } - - for (var i = 0; i < rows.length; i++) { - var nc = rows[i].className; - var id = rows[i].id.replace("RROW-", ""); - var cb = $("RCHK-" + id); - - if (!rows[i].className.match("Selected")) { - nc = nc + "Selected"; - cb.checked = true; - } else { - nc = nc.replace("Selected", ""); - cb.checked = false; - } - - rows[i].className = nc; - - } - - } catch (e) { - exception_error("invertHeadlineSelection", e); - } -} - function getArticleUnderPointer() { return post_under_pointer; } @@ -2409,7 +2314,6 @@ function cdmClicked(event, id) { function hlClicked(event, id) { try { - var shift_key = event.shiftKey; if (!event.ctrlKey) { view(id); @@ -2437,41 +2341,6 @@ function getLastVisibleHeadlineId() { return rows[rows.length-1]; } -// this only searches loaded headlines list, not in CDM -function getRelativePostIds(id, limit) { - - if (!limit) limit = 3; - - //console.log("getRelativePostIds: " + id + " limit=" + limit); - - var ids = new Array(); - var container = $("headlinesList"); - - if (container) { - var rows = container.rows; - - for (var i = 0; i < rows.length; i++) { - var r_id = rows[i].id.replace("RROW-", ""); - - if (r_id == id) { - for (var k = 1; k <= limit; k++) { - var nid = false; - - if (i > k-1) var nid = rows[i-k].id.replace("RROW-", ""); - if (nid) ids.push(nid); - - if (i < rows.length-k) nid = rows[i+k].id.replace("RROW-", ""); - if (nid) ids.push(nid); - } - - return ids; - } - } - } - - return false; -} - function openArticleInNewWindow(id) { try { console.log("openArticleInNewWindow: " + id); @@ -2506,9 +2375,7 @@ function openArticleInNewWindow(id) { if (id) { id = id.firstChild.nodeValue; - if (!$("headlinesList")) { - window.setTimeout("toggleUnread(" + id + ", 0)", 100); - } + window.setTimeout("toggleUnread(" + id + ", 0)", 100); } } else { notify_error("Can't open article: received invalid article link"); @@ -2521,7 +2388,7 @@ function openArticleInNewWindow(id) { } function isCdmMode() { - return !$("headlinesList"); + return getInitParam("combined_display_mode"); } function markHeadline(id) { @@ -2551,4 +2418,62 @@ function markHeadline(id) { } } +function getRelativePostIds(id, limit) { + + var tmp = []; + + try { + + if (!limit) limit = 3; + + var ids = getVisibleArticleIds(); + + for (var i = 0; i < ids.length; i++) { + if (ids[i] == id) { + for (var k = 1; k <= limit; k++) { + if (i > k-1) tmp.push(ids[i-k]); + if (i < ids.length-k) tmp.push(ids[i+k]); + } + break; + } + } + + } catch (e) { + exception_error("getRelativePostIds", e); + } + + return tmp; +} + +function correctHeadlinesOffset(id) { + + try { + + var container = $("headlinesInnerContainer"); + var row = $("RROW-" + id); + + var viewport = container.offsetHeight; + + var rel_offset_top = row.offsetTop - container.scrollTop; + var rel_offset_bottom = row.offsetTop + row.offsetHeight - container.scrollTop; + + //console.log("Rtop: " + rel_offset_top + " Rbtm: " + rel_offset_bottom); + //console.log("Vport: " + viewport); + + if (rel_offset_top <= 0 || rel_offset_top > viewport) { + container.scrollTop = row.offsetTop; + } else if (rel_offset_bottom > viewport) { + + /* doesn't properly work with Opera in some cases because + Opera fucks up element scrolling */ + + container.scrollTop = row.offsetTop + row.offsetHeight - viewport; + } + + } catch (e) { + exception_error("correctHeadlinesOffset", e); + } + +} +