Discussion:
More timeline changes
(too old to reply)
Richard Hipp
2017-11-25 13:47:56 UTC
Permalink
In the latest code on https://www.fossil-scm.org/fossil/timeline and
at https://sqlite.org/srcx/timeline has a "Declutter" button on the
sub-menu bar to simplify the screen. In the simplified timeline,
there is a "Details" button to get all the details back again.

I'm not done with this interface improvement push. Here are my
short-term plans:

(1) Right now, pressing "Declutter" or "Details" is a server
round-trip. I think it would better to handle this using javascript.

(2) Decluttered should be the default. Currently Details is the
default. I spent a lot of time experimenting last night, and what I
found myself doing every time I encountered a timeline was immediately
pressing the "Declutter" button to get a high-level overview of the
graph, then clicking on "Details" if I wanted to see more. From that
experience, I think coming up in Decluttered mode would be a much
better approach.

(3) Details/Declutter for the entire graph is good and should be kept.
But it would be even better to be able to see the details of
individual timeline entries. I'm thinking that timelines come up in
decluttered mode (showing only the check-in comment for each entry)
but with ellipses or some other small icon at the end of each comment
that you can click on to expand the details.

You can help! Send me your ideas of what you think timelines should
look like. Even better: send me mock-ups. Static HTML pages that
you have hand-edited will be fine - just be sure to include the CSS,
or better, put all the CSS in-line on your hand-edited mockup.

You can also keep experimenting with the code I have on-line and send
me your complaints and suggestions for improvement.

Web developers - help me with this: For item (3) above, how can I
make the ellipsis or icon to "show more detail" configurable using
CSS? What's the best way to handle that so that people can customize
the look for various skins?
--
D. Richard Hipp
***@sqlite.org
s***@gmail.com
2017-11-25 15:26:07 UTC
Permalink
"​(2) Decluttered should be the default."
I agree clutter should not be default?​
I would drop that term altogether.
Post by Richard Hipp
In the latest code on https://www.fossil-scm.org/fossil/timeline and
at https://sqlite.org/srcx/timeline has a "Declutter" button on the
sub-menu bar to simplify the screen. In the simplified timeline,
there is a "Details" button to get all the details back again.
I'm not done with this interface improvement push. Here are my
(1) Right now, pressing "Declutter" or "Details" is a server
round-trip. I think it would better to handle this using javascript.
(2) Decluttered should be the default. Currently Details is the
default. I spent a lot of time experimenting last night, and what I
found myself doing every time I encountered a timeline was immediately
pressing the "Declutter" button to get a high-level overview of the
graph, then clicking on "Details" if I wanted to see more. From that
experience, I think coming up in Decluttered mode would be a much
better approach.
(3) Details/Declutter for the entire graph is good and should be kept.
But it would be even better to be able to see the details of
individual timeline entries. I'm thinking that timelines come up in
decluttered mode (showing only the check-in comment for each entry)
but with ellipses or some other small icon at the end of each comment
that you can click on to expand the details.
You can help! Send me your ideas of what you think timelines should
look like. Even better: send me mock-ups. Static HTML pages that
you have hand-edited will be fine - just be sure to include the CSS,
or better, put all the CSS in-line on your hand-edited mockup.
You can also keep experimenting with the code I have on-line and send
me your complaints and suggestions for improvement.
Web developers - help me with this: For item (3) above, how can I
make the ellipsis or icon to "show more detail" configurable using
CSS? What's the best way to handle that so that people can customize
the look for various skins?
--
D. Richard Hipp
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
bch
2017-11-25 15:46:02 UTC
Permalink
Post by s***@gmail.com
"​(2) Decluttered should be the default."
I agree clutter should not be default?​
I would drop that term altogether.
Simplified vs detailed would probably be more appropriate words. I do like
the “files” toggle in the “cluttered” mode, though.


-bch
Post by s***@gmail.com
Post by Richard Hipp
In the latest code on https://www.fossil-scm.org/fossil/timeline and
at https://sqlite.org/srcx/timeline has a "Declutter" button on the
sub-menu bar to simplify the screen. In the simplified timeline,
there is a "Details" button to get all the details back again.
I'm not done with this interface improvement push. Here are my
(1) Right now, pressing "Declutter" or "Details" is a server
round-trip. I think it would better to handle this using javascript.
(2) Decluttered should be the default. Currently Details is the
default. I spent a lot of time experimenting last night, and what I
found myself doing every time I encountered a timeline was immediately
pressing the "Declutter" button to get a high-level overview of the
graph, then clicking on "Details" if I wanted to see more. From that
experience, I think coming up in Decluttered mode would be a much
better approach.
(3) Details/Declutter for the entire graph is good and should be kept.
But it would be even better to be able to see the details of
individual timeline entries. I'm thinking that timelines come up in
decluttered mode (showing only the check-in comment for each entry)
but with ellipses or some other small icon at the end of each comment
that you can click on to expand the details.
You can help! Send me your ideas of what you think timelines should
look like. Even better: send me mock-ups. Static HTML pages that
you have hand-edited will be fine - just be sure to include the CSS,
or better, put all the CSS in-line on your hand-edited mockup.
You can also keep experimenting with the code I have on-line and send
me your complaints and suggestions for improvement.
Web developers - help me with this: For item (3) above, how can I
make the ellipsis or icon to "show more detail" configurable using
CSS? What's the best way to handle that so that people can customize
the look for various skins?
--
D. Richard Hipp
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Richard Hipp
2017-11-25 21:40:04 UTC
Permalink
The names of the of the buttons are now "Advanced" and "Basic". And
they work by setting .style.display using JS.

Timelines now come up in Basic mode, which means only the check-in
comment shows. There are ellipses at the end of each comment. If you
click on the ellipsis for one comment, it expands the (detail) section
for that one timeline entry.

Try it out:

https://www.fossil-scm.org/fossil/timeline
https://sqlite.org/srcx/timeline

Problems: (please suggest solutions)

The ellipses at the ends of comments in basic mode are barely visible.
And they are not configurable using CSS (at least not by any CSS that
I know).

That's the only serious problem that springs immediately to mind, but
perhaps you can find others for me.
--
D. Richard Hipp
***@sqlite.org
Tony Papadimitriou
2017-11-25 22:06:29 UTC
Permalink
The idea looks very good to me. But the ellipses are indeed barely visible.
How about replacing ... with [*] as a generic (foot)note mark?

-----Original Message-----
From: Richard Hipp

Timelines now come up in Basic mode, which means only the check-in
comment shows. There are ellipses at the end of each comment. If you
click on the ellipsis for one comment, it expands the (detail) section
for that one timeline entry.

The ellipses at the ends of comments in basic mode are barely visible.

D. Richard Hipp
Marc Simpson
2017-11-25 22:51:23 UTC
Permalink
One other (potential) problem: without the hash prefix, descriptions
run together.

Example: http://www.sqlite.org/src/timeline, 2017-11-24. The graph
nodes are flushed to the left, so descriptions appear as:

Add the "^" syntax from fts3/4 to fts5. ...
Enhance the configure script to detect zLib. ...

It's not immediately clear that these are separate commits given the
amount of horizontal space; adding a bit more vertical padding or
boxing descriptions (perhaps with alternating colours) might help?

Personally, I prefer seeing the short hash before each description
(perhaps this could be an option in the Advanced view?).

/M
Post by Tony Papadimitriou
The idea looks very good to me. But the ellipses are indeed barely visible.
How about replacing ... with [*] as a generic (foot)note mark?
-----Original Message----- From: Richard Hipp
Timelines now come up in Basic mode, which means only the check-in
comment shows. There are ellipses at the end of each comment. If you
click on the ellipsis for one comment, it expands the (detail) section
for that one timeline entry.
The ellipses at the ends of comments in basic mode are barely visible.
D. Richard Hipp
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
s***@gmail.com
2017-11-25 23:31:15 UTC
Permalink
Man, are those ellipses absolutely necessary?
(So close with the previous uncluttered timeline.)
Is it possible to make the 1st word/sentence of the checkin comment a
hyperlink to the extra info?
Post by Marc Simpson
One other (potential) problem: without the hash prefix, descriptions
run together.
Example: http://www.sqlite.org/src/timeline, 2017-11-24. The graph
Add the "^" syntax from fts3/4 to fts5. ...
Enhance the configure script to detect zLib. ...
It's not immediately clear that these are separate commits given the
amount of horizontal space; adding a bit more vertical padding or
boxing descriptions (perhaps with alternating colours) might help?
Personally, I prefer seeing the short hash before each description
(perhaps this could be an option in the Advanced view?).
/M
Post by Tony Papadimitriou
The idea looks very good to me. But the ellipses are indeed barely
visible.
Post by Tony Papadimitriou
How about replacing ... with [*] as a generic (foot)note mark?
-----Original Message----- From: Richard Hipp
Timelines now come up in Basic mode, which means only the check-in
comment shows. There are ellipses at the end of each comment. If you
click on the ellipsis for one comment, it expands the (detail) section
for that one timeline entry.
The ellipses at the ends of comments in basic mode are barely visible.
D. Richard Hipp
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Zakero
2017-11-26 00:46:52 UTC
Permalink
To help make the ellipses more visible, you could put them in their own
<span> and let the skin figure out what looks best. Also, instead of
using "...", what about "[+]"?

Something that I consider a functional inconsistency with the current
implementation is that after the "..." is clicked on, there is no way to
hide the now visible details. A possible solution would be have a "[-]" to
re-hide the info.

Another issue that I noticed with timeline?commentformat=2 is the the hash
does not always appear at the end of the commit message. Take this commit
line as an example: "Edit [a46b9e77]: Edit check-in comment. •••"
Post by s***@gmail.com
Man, are those ellipses absolutely necessary?
(So close with the previous uncluttered timeline.)
Is it possible to make the 1st word/sentence of the checkin comment a
hyperlink to the extra info?
Post by Marc Simpson
One other (potential) problem: without the hash prefix, descriptions
run together.
Example: http://www.sqlite.org/src/timeline, 2017-11-24. The graph
Add the "^" syntax from fts3/4 to fts5. ...
Enhance the configure script to detect zLib. ...
It's not immediately clear that these are separate commits given the
amount of horizontal space; adding a bit more vertical padding or
boxing descriptions (perhaps with alternating colours) might help?
Personally, I prefer seeing the short hash before each description
(perhaps this could be an option in the Advanced view?).
/M
Post by Tony Papadimitriou
The idea looks very good to me. But the ellipses are indeed barely
visible.
Post by Tony Papadimitriou
How about replacing ... with [*] as a generic (foot)note mark?
-----Original Message----- From: Richard Hipp
Timelines now come up in Basic mode, which means only the check-in
comment shows. There are ellipses at the end of each comment. If you
click on the ellipsis for one comment, it expands the (detail) section
for that one timeline entry.
The ellipses at the ends of comments in basic mode are barely visible.
D. Richard Hipp
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Jungle Boogie
2017-11-26 03:35:45 UTC
Permalink
Post by Zakero
To help make the ellipses more visible, you could put them in their own
<span> and let the skin figure out what looks best. Also, instead of
using "...", what about "[+]"?
Yes, I support this suggestion. Most sites I've seen that can expand/shrink
info usually wrap it with something like [+] [-] buttons.
Post by Zakero
Post by Marc Simpson
One other (potential) problem: without the hash prefix, descriptions
run together.
Example: http://www.sqlite.org/src/timeline, 2017-11-24. The graph
Add the "^" syntax from fts3/4 to fts5. ...
Enhance the configure script to detect zLib. ...
Yes, this is a good point. Your eyes need to read all the way to the end
of the line with "fts5" and then to the beginning of the next line with
the timestamp to see these are two different check-ins.
Post by Zakero
Post by Marc Simpson
/M
b***@safe-mail.net
2017-11-26 05:31:55 UTC
Permalink
On Sat, 25 Nov 2017 18:46:52 -0600
Post by Zakero
To help make the ellipses more visible, you could put them in their
own <span> and let the skin figure out what looks best. Also,
instead of using "...", what about "[+]"?
If it's going at the end of the text, how about ">>>"?
j. van den hoff
2017-11-26 09:27:02 UTC
Permalink
Post by Marc Simpson
One other (potential) problem: without the hash prefix, descriptions
run together.
Example: http://www.sqlite.org/src/timeline, 2017-11-24. The graph
Add the "^" syntax from fts3/4 to fts5. ...
Enhance the configure script to detect zLib. ...
It's not immediately clear that these are separate commits given the
amount of horizontal space; adding a bit more vertical padding or
boxing descriptions (perhaps with alternating colours) might help?
+1
--
Using Opera's revolutionary email client: http://www.opera.com/mail/
Marc Simpson
2017-11-27 21:10:56 UTC
Permalink
Another issue, taking https://www.fossil-scm.org/fossil/timeline as an
example this time.

- Click `Advanced` to see commits, etc.
- Check `Files` in the toolbar to see files as well
- Page reloads with files... but back in the Basic view

So, advanced should probably be a query parameter here (when a reload
is required).

/M
Post by j. van den hoff
Post by Marc Simpson
One other (potential) problem: without the hash prefix, descriptions
run together.
Example: http://www.sqlite.org/src/timeline, 2017-11-24. The graph
Add the "^" syntax from fts3/4 to fts5. ...
Enhance the configure script to detect zLib. ...
It's not immediately clear that these are separate commits given the
amount of horizontal space; adding a bit more vertical padding or
boxing descriptions (perhaps with alternating colours) might help?
+1
--
Using Opera's revolutionary email client: http://www.opera.com/mail/
Richard Hipp
2017-11-26 00:43:54 UTC
Permalink
Post by Tony Papadimitriou
But the ellipses are indeed barely visible.
I replaced the "..." text with "&bull;&bull;&bull;". I think it is
better now. I'm still not 100% happy with it, though.
--
D. Richard Hipp
***@sqlite.org
Stephan Beal
2017-11-26 08:22:08 UTC
Permalink
Post by Tony Papadimitriou
The idea looks very good to me. But the ellipses are indeed barely visible.
How about replacing ... with [*] as a generic (foot)note mark?
LOL! i didn't even notice that the ellipsis were there. i recommend doing
away with them entirely, an simply making "click a timeline entry to expand
its details" a new documented feature.
--
----- stephan beal
http://wanderinghorse.net/home/stephan/
"Freedom is sloppy. But since tyranny's the only guaranteed byproduct of
those who insist on a perfect world, freedom will have to do." -- Bigby Wolf
David Mason
2017-11-26 00:28:04 UTC
Permalink
Looks good.

When I did that, I made clicking on anywhere in that div expand it.

You should also add a title that says "Click to expand" so that they don't
have to know/infer that the ellipsis is an active link.

I also like being able to shrink it back... right now there isn't that much
extra detail, but you may add more.

I don't want to sound critical or look a gift-horse in the mouth, but I
looked at your page source and it's way more complicated than it needs to
be. If you look at my message in the other thread, all the code is there
to make it work with a lot less generated HTML and be a lot cleaner.

../Dave
Post by Richard Hipp
The names of the of the buttons are now "Advanced" and "Basic". And
they work by setting .style.display using JS.
Timelines now come up in Basic mode, which means only the check-in
comment shows. There are ellipses at the end of each comment. If you
click on the ellipsis for one comment, it expands the (detail) section
for that one timeline entry.
https://www.fossil-scm.org/fossil/timeline
https://sqlite.org/srcx/timeline
Problems: (please suggest solutions)
The ellipses at the ends of comments in basic mode are barely visible.
And they are not configurable using CSS (at least not by any CSS that
I know).
That's the only serious problem that springs immediately to mind, but
perhaps you can find others for me.
--
D. Richard Hipp
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Richard Hipp
2017-11-26 01:47:28 UTC
Permalink
Post by David Mason
When I did that, I made clicking on anywhere in that div expand it.
I've done that in the latest. Actually, I made it click-to-toggle.
That seems to work a lot better than trying to click on the ellipsis.

But there is a subtle problem. For timeline comments that contain a
hyperlink (ex: https://www.sqlite.org/srcx/timeline?c=b016c28f) if I
click on the hyperlink, it first toggles the detail on/off before it
takes the hyperlink. Do you have suggestions on how I can disable the
"onclick" on the outer <span> when one clicks inside an inner <a>?
--
D. Richard Hipp
***@sqlite.org
s***@gmail.com
2017-11-26 02:31:47 UTC
Permalink
Ok, the current behavior is cool, but renders the ellipses superfluous.
Clicking anywhere in a line expands/contracts the info.
Any chance to drop the many many ⋯'s after all my comments?
Post by Richard Hipp
Post by David Mason
When I did that, I made clicking on anywhere in that div expand it.
I've done that in the latest. Actually, I made it click-to-toggle.
That seems to work a lot better than trying to click on the ellipsis.
But there is a subtle problem. For timeline comments that contain a
hyperlink (ex: https://www.sqlite.org/srcx/timeline?c=b016c28f) if I
click on the hyperlink, it first toggles the detail on/off before it
takes the hyperlink. Do you have suggestions on how I can disable the
"onclick" on the outer <span> when one clicks inside an inner <a>?
--
D. Richard Hipp
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Richard Hipp
2017-11-26 02:41:45 UTC
Permalink
Post by s***@gmail.com
Ok, the current behavior is cool, but renders the ellipses superfluous.
Clicking anywhere in a line expands/contracts the info.
Any chance to drop the many many ⋯'s after all my comments?
I think the following CSS will do that for you:

.timelineEllipsis { display: 'none'; }
--
D. Richard Hipp
***@sqlite.org
Richard Hipp
2017-11-26 02:45:49 UTC
Permalink
Post by Richard Hipp
Post by s***@gmail.com
Ok, the current behavior is cool, but renders the ellipses superfluous.
Clicking anywhere in a line expands/contracts the info.
Any chance to drop the many many ⋯'s after all my comments?
.timelineEllipsis { display: 'none'; }
No, that won't work, because the toggleEllipsis() JS function will get confused.

How about making your ellipsis very small:

.timelineEllipsis { font-size: 50%; }
--
D. Richard Hipp
***@sqlite.org
David Mason
2017-11-26 03:06:41 UTC
Permalink
What you have seems to handle the ellipsis properly (by my definition of
properly).

But you really should use title/tooltip.
Post by Richard Hipp
Post by Richard Hipp
Post by s***@gmail.com
Ok, the current behavior is cool, but renders the ellipses superfluous.
Clicking anywhere in a line expands/contracts the info.
Any chance to drop the many many ⋯'s after all my comments?
.timelineEllipsis { display: 'none'; }
No, that won't work, because the toggleEllipsis() JS function will get confused.
.timelineEllipsis { font-size: 50%; }
--
D. Richard Hipp
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
David Mason
2017-11-26 02:52:48 UTC
Permalink
<script>
function cancelProp(event){
if (event.stopPropagation) {event.stopPropagation()} //w3c
else {event.cancelBubble = true } // ie
}
</script>
<div onclick="alert(42)" title="Click to expand">
<a href="http://google.ca" onclick="cancelProp(event)" title=" ">
google
</a>
blah blah
</div>

Suppressing the title on the link is tricky the above works on
Chrome/Firefox but shows a space on IE/Safari - see:
https://stackoverflow.com/questions/5881954/html-stop-child-elements-from-inheriting-parents-title-attribute
but you might have a useful title to give it.

../Dave
Post by Richard Hipp
Post by David Mason
When I did that, I made clicking on anywhere in that div expand it.
I've done that in the latest. Actually, I made it click-to-toggle.
That seems to work a lot better than trying to click on the ellipsis.
But there is a subtle problem. For timeline comments that contain a
hyperlink (ex: https://www.sqlite.org/srcx/timeline?c=b016c28f) if I
click on the hyperlink, it first toggles the detail on/off before it
takes the hyperlink. Do you have suggestions on how I can disable the
"onclick" on the outer <span> when one clicks inside an inner <a>?
--
D. Richard Hipp
s***@gmail.com
2017-11-26 03:01:21 UTC
Permalink
I will try smallest scaling of the ellipsis, if it really must remain...
And I can live with .timelineEllipsis { display: 'none'; }, since the
Advanced button will override if I want extra info.
Thanks for the options.
Post by David Mason
<script>
function cancelProp(event){
if (event.stopPropagation) {event.stopPropagation()} //w3c
else {event.cancelBubble = true } // ie
}
</script>
<div onclick="alert(42)" title="Click to expand">
<a href="http://google.ca" onclick="cancelProp(event)" title=" ">
google
</a>
blah blah
</div>
Suppressing the title on the link is tricky the above works on
https://stackoverflow.com/questions/5881954/html-stop-child-elements-from-
inheriting-parents-title-attribute but you might have a useful title to
give it.
../Dave
Post by Richard Hipp
Post by David Mason
When I did that, I made clicking on anywhere in that div expand it.
I've done that in the latest. Actually, I made it click-to-toggle.
That seems to work a lot better than trying to click on the ellipsis.
But there is a subtle problem. For timeline comments that contain a
hyperlink (ex: https://www.sqlite.org/srcx/timeline?c=b016c28f) if I
click on the hyperlink, it first toggles the detail on/off before it
takes the hyperlink. Do you have suggestions on how I can disable the
"onclick" on the outer <span> when one clicks inside an inner <a>?
--
D. Richard Hipp
_______________________________________________
fossil-users mailing list
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
Stephan Beal
2017-11-26 08:20:19 UTC
Permalink
Post by Richard Hipp
In the latest code on https://www.fossil-scm.org/fossil/timeline and
at https://sqlite.org/srcx/timeline has a "Declutter" button on the
sub-menu bar to simplify the screen. In the simplified timeline,
there is a "Details" button to get all the details back again.
i was about to suggest that clicking on a single entry declutter only that
entry, but it seems you already did that :).

(2) Decluttered should be the default. Currently Details is the
Post by Richard Hipp
default. I spent a lot of time experimenting last night, and what I
found myself doing every time I encountered a timeline was immediately
pressing the "Declutter" button to get a high-level overview of the
graph, then clicking on "Details" if I wanted to see more. From that
experience, I think coming up in Decluttered mode would be a much
better approach.
"This should be the default" was my first impression.
Post by Richard Hipp
...decluttered mode (showing only the check-in comment for each entry)
but with ellipses or some other small icon at the end of each comment
that you can click on to expand the details.
i like the way it works now, that you simply click anywhere on the row.
Granted, it's possibly not intuitive without some visual indicator to click
on ("..."), but it's visually elegant.
--
----- stephan beal
http://wanderinghorse.net/home/stephan/
"Freedom is sloppy. But since tyranny's the only guaranteed byproduct of
those who insist on a perfect world, freedom will have to do." -- Bigby Wolf
Loading...