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

Make the floating title transition smoother 

Previously the floating title would not appear until the real title
scrolled entirely out of view, which was visually distracting.  Now it
appears at the point when its bottom lines up with the real title’s
bottom.  This isn’t perfect yet due to small differences between the
two titles’ layouts, but it’s much closer.

We now need to use visibility: visible|hidden instead of display:
block|none to show and hide the floating title, in order to be able to
retrieve its height while it’s hidden.  It’s important to use that
height because occasionally line wrapping differences make the
floating title shorter than the real title, and we don’t want the real
title to poke out from underneath.

Also fix scrollToRowId to offset by the 4 pixel top margin (like
cdmScrollToArticleId already does), so that it goes back to a point
when the floating title was hidden; and set the right margin on the
floating title so that it’s the same width as the real title and
doesn’t overlap the scroll bar.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
This commit is contained in:
Anders Kaseorg 2015-01-30 21:58:44 -05:00
parent d8895ec679
commit 5c145bde7a
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.php
View File

@ -265,7 +265,7 @@
<div id="headlines-wrap-inner" dojoType="dijit.layout.BorderContainer" region="center">
<div id="floatingTitle" style="display : none"></div>
<div id="floatingTitle" style="visibility : hidden"></div>
<div id="headlines-frame" dojoType="dijit.layout.ContentPane"
onscroll="headlines_scroll_handler(this)" region="center">

15
js/viewfeed.js
View File

@ -56,7 +56,7 @@ function headlines_callback2(transport, offset, background, infscroll_req) {
if (infscroll_req == false) {
$("headlines-frame").scrollTop = 0;
Element.hide("floatingTitle");
$("floatingTitle").style.visibility = "hidden";
$("floatingTitle").setAttribute("rowid", 0);
$("floatingTitle").innerHTML = "";
}
@ -1532,7 +1532,7 @@ function cdmCollapseArticle(event, id, unmark) {
if (row.offsetTop < $("headlines-frame").scrollTop)
scrollToRowId(row.id);
Element.hide("floatingTitle");
$("floatingTitle").style.visibility = "hidden";
$("floatingTitle").setAttribute("rowid", false);
}
@ -2357,7 +2357,7 @@ function scrollToRowId(id) {
var row = $(id);
if (row)
$("headlines-frame").scrollTop = row.offsetTop;
$("headlines-frame").scrollTop = row.offsetTop - 4;
} catch (e) {
exception_error("scrollToRowId", e);
@ -2402,11 +2402,12 @@ function updateFloatingTitle(unread_only) {
PluginHost.run(PluginHost.HOOK_FLOATING_TITLE, child);
}
if (child.offsetTop < hf.scrollTop - header.offsetHeight &&
child.offsetTop + child.offsetHeight - hf.scrollTop > header.offsetHeight)
Element.show("floatingTitle");
$("floatingTitle").style.marginRight = hf.offsetWidth - child.offsetWidth + "px";
if (header.offsetTop + header.offsetHeight < hf.scrollTop + $("floatingTitle").offsetHeight - 5 &&
child.offsetTop + child.offsetHeight >= hf.scrollTop + $("floatingTitle").offsetHeight - 5)
$("floatingTitle").style.visibility = "visible";
else
Element.hide("floatingTitle");
$("floatingTitle").style.visibility = "hidden";
return;