Fossil SCM

Also add a configuration option to set the closeTimeout for tooltips.

florian 2019-05-21 09:12 UTC tooltip-experiments
Commit e45429d7f47d86ace5aca9f92f7dfc6dd60c17d576f874eb40170a52c5b5f060
Parent fde231b274e3b0e…
4 files changed +1 +5 -2 +13 -5 +4 -1
~ src/configure.c ~ src/graph.js ~ src/setup.c ~ src/timeline.c
M src/configure.c
+1
--- src/configure.c
+++ src/configure.c
@@ -96,10 +96,11 @@
9696
 { "background-mimetype", CONFIGSET_SKIN },
9797
 { "background-image", CONFIGSET_SKIN },
9898
 { "timeline-block-markup", CONFIGSET_SKIN },
9999
 { "timeline-date-format", CONFIGSET_SKIN },
100100
 { "timeline-dwelltime", CONFIGSET_SKIN },
101
+ { "timeline-closetime", CONFIGSET_SKIN },
101102
 { "timeline-max-comment", CONFIGSET_SKIN },
102103
 { "timeline-plaintext", CONFIGSET_SKIN },
103104
 { "timeline-truncate-at-blank", CONFIGSET_SKIN },
104105
 { "timeline-utc", CONFIGSET_SKIN },
105106
 { "adunit", CONFIGSET_SKIN },
106107
--- src/configure.c
+++ src/configure.c
@@ -96,10 +96,11 @@
96 { "background-mimetype", CONFIGSET_SKIN },
97 { "background-image", CONFIGSET_SKIN },
98 { "timeline-block-markup", CONFIGSET_SKIN },
99 { "timeline-date-format", CONFIGSET_SKIN },
100 { "timeline-dwelltime", CONFIGSET_SKIN },
 
101 { "timeline-max-comment", CONFIGSET_SKIN },
102 { "timeline-plaintext", CONFIGSET_SKIN },
103 { "timeline-truncate-at-blank", CONFIGSET_SKIN },
104 { "timeline-utc", CONFIGSET_SKIN },
105 { "adunit", CONFIGSET_SKIN },
106
--- src/configure.c
+++ src/configure.c
@@ -96,10 +96,11 @@
96 { "background-mimetype", CONFIGSET_SKIN },
97 { "background-image", CONFIGSET_SKIN },
98 { "timeline-block-markup", CONFIGSET_SKIN },
99 { "timeline-date-format", CONFIGSET_SKIN },
100 { "timeline-dwelltime", CONFIGSET_SKIN },
101 { "timeline-closetime", CONFIGSET_SKIN },
102 { "timeline-max-comment", CONFIGSET_SKIN },
103 { "timeline-plaintext", CONFIGSET_SKIN },
104 { "timeline-truncate-at-blank", CONFIGSET_SKIN },
105 { "timeline-utc", CONFIGSET_SKIN },
106 { "adunit", CONFIGSET_SKIN },
107
M src/graph.js
+5 -2
--- src/graph.js
+++ src/graph.js
@@ -14,11 +14,12 @@
1414
 ** "omitDescenders": BOOLEAN, // Omit ancestor lines off bottom of screen
1515
 ** "fileDiff": BOOLEAN, // True for file diff. False for check-in
1616
 ** "scrollToSelect": BOOLEAN, // Scroll to selection on first render
1717
 ** "nrail": INTEGER, // Number of vertical "rails"
1818
 ** "baseUrl": TEXT, // Top-level URL
19
-** "dwellTimeout": INTEGER, // Tooltip delay in milliseconds
19
+** "dwellTimeout": INTEGER, // Tooltip show delay in milliseconds
20
+** "closeTimeout": INTEGER, // Tooltip close delay in milliseconds
2021
 ** "rowinfo": ROWINFO-ARRAY }
2122
 **
2223
 ** The rowinfo field is an array of structures, one per entry in the timeline,
2324
 ** where each structure has the following fields:
2425
 **
@@ -112,11 +113,12 @@
112113
 this.tooltipInfo.idTimer = 0;
113114
 }
114115
 }.bind(window);
115116
 var resumeCloseTimer = function() {
116117
 /* This timer must be stopped explicitly to reset the elapsed timeout. */
117
- if (this.tooltipInfo.idTimerClose == 0) {
118
+ if (this.tooltipInfo.idTimerClose == 0 &&
119
+ this.tooltipInfo.closeTimeout>0) {
118120
 this.tooltipInfo.idTimerClose = setTimeout(function() {
119121
 this.tooltipInfo.idTimerClose = 0;
120122
 hideGraphTooltip();
121123
 }.bind(window),this.tooltipInfo.closeTimeout);
122124
 }
@@ -131,10 +133,11 @@
131133
 /* Construct that graph corresponding to the timeline-data-N object */
132134
 function TimelineGraph(tx){
133135
 var topObj = document.getElementById("timelineTable"+tx.iTableId);
134136
 amendCss(tx.circleNodes, tx.showArrowheads);
135137
 tooltipInfo.dwellTimeout = tx.dwellTimeout
138
+ tooltipInfo.closeTimeout = tx.closeTimeout
136139
 topObj.onclick = clickOnGraph
137140
 topObj.ondblclick = dblclickOnGraph
138141
 topObj.onmousemove = function(e) {
139142
 var ix = findTxIndex(e);
140143
 var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
141144
--- src/graph.js
+++ src/graph.js
@@ -14,11 +14,12 @@
14 ** "omitDescenders": BOOLEAN, // Omit ancestor lines off bottom of screen
15 ** "fileDiff": BOOLEAN, // True for file diff. False for check-in
16 ** "scrollToSelect": BOOLEAN, // Scroll to selection on first render
17 ** "nrail": INTEGER, // Number of vertical "rails"
18 ** "baseUrl": TEXT, // Top-level URL
19 ** "dwellTimeout": INTEGER, // Tooltip delay in milliseconds
 
20 ** "rowinfo": ROWINFO-ARRAY }
21 **
22 ** The rowinfo field is an array of structures, one per entry in the timeline,
23 ** where each structure has the following fields:
24 **
@@ -112,11 +113,12 @@
112 this.tooltipInfo.idTimer = 0;
113 }
114 }.bind(window);
115 var resumeCloseTimer = function() {
116 /* This timer must be stopped explicitly to reset the elapsed timeout. */
117 if (this.tooltipInfo.idTimerClose == 0) {
 
118 this.tooltipInfo.idTimerClose = setTimeout(function() {
119 this.tooltipInfo.idTimerClose = 0;
120 hideGraphTooltip();
121 }.bind(window),this.tooltipInfo.closeTimeout);
122 }
@@ -131,10 +133,11 @@
131 /* Construct that graph corresponding to the timeline-data-N object */
132 function TimelineGraph(tx){
133 var topObj = document.getElementById("timelineTable"+tx.iTableId);
134 amendCss(tx.circleNodes, tx.showArrowheads);
135 tooltipInfo.dwellTimeout = tx.dwellTimeout
 
136 topObj.onclick = clickOnGraph
137 topObj.ondblclick = dblclickOnGraph
138 topObj.onmousemove = function(e) {
139 var ix = findTxIndex(e);
140 var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
141
--- src/graph.js
+++ src/graph.js
@@ -14,11 +14,12 @@
14 ** "omitDescenders": BOOLEAN, // Omit ancestor lines off bottom of screen
15 ** "fileDiff": BOOLEAN, // True for file diff. False for check-in
16 ** "scrollToSelect": BOOLEAN, // Scroll to selection on first render
17 ** "nrail": INTEGER, // Number of vertical "rails"
18 ** "baseUrl": TEXT, // Top-level URL
19 ** "dwellTimeout": INTEGER, // Tooltip show delay in milliseconds
20 ** "closeTimeout": INTEGER, // Tooltip close delay in milliseconds
21 ** "rowinfo": ROWINFO-ARRAY }
22 **
23 ** The rowinfo field is an array of structures, one per entry in the timeline,
24 ** where each structure has the following fields:
25 **
@@ -112,11 +113,12 @@
113 this.tooltipInfo.idTimer = 0;
114 }
115 }.bind(window);
116 var resumeCloseTimer = function() {
117 /* This timer must be stopped explicitly to reset the elapsed timeout. */
118 if (this.tooltipInfo.idTimerClose == 0 &&
119 this.tooltipInfo.closeTimeout>0) {
120 this.tooltipInfo.idTimerClose = setTimeout(function() {
121 this.tooltipInfo.idTimerClose = 0;
122 hideGraphTooltip();
123 }.bind(window),this.tooltipInfo.closeTimeout);
124 }
@@ -131,10 +133,11 @@
133 /* Construct that graph corresponding to the timeline-data-N object */
134 function TimelineGraph(tx){
135 var topObj = document.getElementById("timelineTable"+tx.iTableId);
136 amendCss(tx.circleNodes, tx.showArrowheads);
137 tooltipInfo.dwellTimeout = tx.dwellTimeout
138 tooltipInfo.closeTimeout = tx.closeTimeout
139 topObj.onclick = clickOnGraph
140 topObj.ondblclick = dblclickOnGraph
141 topObj.onmousemove = function(e) {
142 var ix = findTxIndex(e);
143 var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
144
M src/setup.c
+13 -5
--- src/setup.c
+++ src/setup.c
@@ -750,16 +750,24 @@
750750
 @ <p>The maximum length of a comment to be displayed in a timeline.
751751
 @ "0" there is no length limit.
752752
 @ (Property: "timeline-max-comment")</p>
753753
754754
 @ <hr />
755
- entry_attribute("Tooltip dwell time", 6,
755
+ entry_attribute("Tooltip dwell time (milliseconds)", 6,
756756
 "timeline-dwelltime", "tdt", "250", 0);
757
- @ <p>The time (in milliseconds) that the mouse pointer should be
758
- @ stationary above a object of the graph before a tooltip appears.
759
- @ Set this to "0" to disable tooltips.
760
- @ (Property: "timeline-dwelltime")</p>
757
+ @ <br>
758
+ entry_attribute("Tooltip close time (milliseconds)", 6,
759
+ "timeline-closetime", "tct", "3000", 0);
760
+ @ <p>The <strong>dwell time</strong> defines how long the mouse pointer
761
+ @ should be stationary above an object of the graph before a tooltip
762
+ @ appears.<br>
763
+ @ The <strong>close time</strong> defines how long the mouse pointer
764
+ @ can be away from an object before a tooltip is closed.</p>
765
+ @ <p>Set <strong>dwell time</strong> to "0" to disable tooltips.<br>
766
+ @ Set <strong>close time</strong> to "0" to keep tooltips visible until
767
+ @ the mouse is clicked elsewhere.<p>
768
+ @ <p>(Properties: "timeline-dwelltime", "timeline-closetime")</p>
761769
762770
 @ <hr />
763771
 @ <p><input type="submit" name="submit" value="Apply Changes" /></p>
764772
 @ </div></form>
765773
 db_end_transaction(0);
766774
--- src/setup.c
+++ src/setup.c
@@ -750,16 +750,24 @@
750 @ <p>The maximum length of a comment to be displayed in a timeline.
751 @ "0" there is no length limit.
752 @ (Property: "timeline-max-comment")</p>
753
754 @ <hr />
755 entry_attribute("Tooltip dwell time", 6,
756 "timeline-dwelltime", "tdt", "250", 0);
757 @ <p>The time (in milliseconds) that the mouse pointer should be
758 @ stationary above a object of the graph before a tooltip appears.
759 @ Set this to "0" to disable tooltips.
760 @ (Property: "timeline-dwelltime")</p>
 
 
 
 
 
 
 
 
761
762 @ <hr />
763 @ <p><input type="submit" name="submit" value="Apply Changes" /></p>
764 @ </div></form>
765 db_end_transaction(0);
766
--- src/setup.c
+++ src/setup.c
@@ -750,16 +750,24 @@
750 @ <p>The maximum length of a comment to be displayed in a timeline.
751 @ "0" there is no length limit.
752 @ (Property: "timeline-max-comment")</p>
753
754 @ <hr />
755 entry_attribute("Tooltip dwell time (milliseconds)", 6,
756 "timeline-dwelltime", "tdt", "250", 0);
757 @ <br>
758 entry_attribute("Tooltip close time (milliseconds)", 6,
759 "timeline-closetime", "tct", "3000", 0);
760 @ <p>The <strong>dwell time</strong> defines how long the mouse pointer
761 @ should be stationary above an object of the graph before a tooltip
762 @ appears.<br>
763 @ The <strong>close time</strong> defines how long the mouse pointer
764 @ can be away from an object before a tooltip is closed.</p>
765 @ <p>Set <strong>dwell time</strong> to "0" to disable tooltips.<br>
766 @ Set <strong>close time</strong> to "0" to keep tooltips visible until
767 @ the mouse is clicked elsewhere.<p>
768 @ <p>(Properties: "timeline-dwelltime", "timeline-closetime")</p>
769
770 @ <hr />
771 @ <p><input type="submit" name="submit" value="Apply Changes" /></p>
772 @ </div></form>
773 db_end_transaction(0);
774
M src/timeline.c
+4 -1
--- src/timeline.c
+++ src/timeline.c
@@ -830,11 +830,12 @@
830830
 int colorGraph; /* Use colors for graph lines */
831831
 int iTopRow; /* Index of the top row of the graph */
832832
 int fileDiff; /* True for file diff. False for check-in diff */
833833
 int omitDescenders; /* True to omit descenders */
834834
 int scrollToSelect; /* True to scroll to the selection */
835
- int dwellTimeout; /* Milliseconds to wait for tooltips */
835
+ int dwellTimeout; /* Milliseconds to wait for tooltips to show */
836
+ int closeTimeout; /* Milliseconds to wait for tooltips to close */
836837
 u8 *aiMap; /* The rail map */
837838
838839
 iRailPitch = atoi(PD("railpitch","0"));
839840
 showArrowheads = skin_detail_boolean("timeline-arrowheads");
840841
 circleNodes = skin_detail_boolean("timeline-circle-nodes");
@@ -842,10 +843,11 @@
842843
 iTopRow = pGraph->pFirst ? pGraph->pFirst->idx : 0;
843844
 omitDescenders = (tmFlags & TIMELINE_DISJOINT)!=0;
844845
 fileDiff = (tmFlags & TIMELINE_FILEDIFF)!=0;
845846
 scrollToSelect = (tmFlags & TIMELINE_NOSCROLL)==0;
846847
 dwellTimeout = atoi(db_get("timeline-dwelltime","250"));
848
+ closeTimeout = atoi(db_get("timeline-closetime","3000"));
847849
 @ <script id='timeline-data-%d(iTableId)' type='application/json'>{
848850
 @ "iTableId": %d(iTableId),
849851
 @ "circleNodes": %d(circleNodes),
850852
 @ "showArrowheads": %d(showArrowheads),
851853
 @ "iRailPitch": %d(iRailPitch),
@@ -856,10 +858,11 @@
856858
 @ "fileDiff": %d(fileDiff),
857859
 @ "scrollToSelect": %d(scrollToSelect),
858860
 @ "nrail": %d(pGraph->mxRail+1),
859861
 @ "baseUrl": "%R",
860862
 @ "dwellTimeout": %d(dwellTimeout),
863
+ @ "closeTimeout": %d(closeTimeout),
861864
 @ "bottomRowId": "btm-%d(iTableId)",
862865
 if( pGraph->nRow==0 ){
863866
 @ "rowinfo": null
864867
 }else{
865868
 @ "rowinfo": [
866869
--- src/timeline.c
+++ src/timeline.c
@@ -830,11 +830,12 @@
830 int colorGraph; /* Use colors for graph lines */
831 int iTopRow; /* Index of the top row of the graph */
832 int fileDiff; /* True for file diff. False for check-in diff */
833 int omitDescenders; /* True to omit descenders */
834 int scrollToSelect; /* True to scroll to the selection */
835 int dwellTimeout; /* Milliseconds to wait for tooltips */
 
836 u8 *aiMap; /* The rail map */
837
838 iRailPitch = atoi(PD("railpitch","0"));
839 showArrowheads = skin_detail_boolean("timeline-arrowheads");
840 circleNodes = skin_detail_boolean("timeline-circle-nodes");
@@ -842,10 +843,11 @@
842 iTopRow = pGraph->pFirst ? pGraph->pFirst->idx : 0;
843 omitDescenders = (tmFlags & TIMELINE_DISJOINT)!=0;
844 fileDiff = (tmFlags & TIMELINE_FILEDIFF)!=0;
845 scrollToSelect = (tmFlags & TIMELINE_NOSCROLL)==0;
846 dwellTimeout = atoi(db_get("timeline-dwelltime","250"));
 
847 @ <script id='timeline-data-%d(iTableId)' type='application/json'>{
848 @ "iTableId": %d(iTableId),
849 @ "circleNodes": %d(circleNodes),
850 @ "showArrowheads": %d(showArrowheads),
851 @ "iRailPitch": %d(iRailPitch),
@@ -856,10 +858,11 @@
856 @ "fileDiff": %d(fileDiff),
857 @ "scrollToSelect": %d(scrollToSelect),
858 @ "nrail": %d(pGraph->mxRail+1),
859 @ "baseUrl": "%R",
860 @ "dwellTimeout": %d(dwellTimeout),
 
861 @ "bottomRowId": "btm-%d(iTableId)",
862 if( pGraph->nRow==0 ){
863 @ "rowinfo": null
864 }else{
865 @ "rowinfo": [
866
--- src/timeline.c
+++ src/timeline.c
@@ -830,11 +830,12 @@
830 int colorGraph; /* Use colors for graph lines */
831 int iTopRow; /* Index of the top row of the graph */
832 int fileDiff; /* True for file diff. False for check-in diff */
833 int omitDescenders; /* True to omit descenders */
834 int scrollToSelect; /* True to scroll to the selection */
835 int dwellTimeout; /* Milliseconds to wait for tooltips to show */
836 int closeTimeout; /* Milliseconds to wait for tooltips to close */
837 u8 *aiMap; /* The rail map */
838
839 iRailPitch = atoi(PD("railpitch","0"));
840 showArrowheads = skin_detail_boolean("timeline-arrowheads");
841 circleNodes = skin_detail_boolean("timeline-circle-nodes");
@@ -842,10 +843,11 @@
843 iTopRow = pGraph->pFirst ? pGraph->pFirst->idx : 0;
844 omitDescenders = (tmFlags & TIMELINE_DISJOINT)!=0;
845 fileDiff = (tmFlags & TIMELINE_FILEDIFF)!=0;
846 scrollToSelect = (tmFlags & TIMELINE_NOSCROLL)==0;
847 dwellTimeout = atoi(db_get("timeline-dwelltime","250"));
848 closeTimeout = atoi(db_get("timeline-closetime","3000"));
849 @ <script id='timeline-data-%d(iTableId)' type='application/json'>{
850 @ "iTableId": %d(iTableId),
851 @ "circleNodes": %d(circleNodes),
852 @ "showArrowheads": %d(showArrowheads),
853 @ "iRailPitch": %d(iRailPitch),
@@ -856,10 +858,11 @@
858 @ "fileDiff": %d(fileDiff),
859 @ "scrollToSelect": %d(scrollToSelect),
860 @ "nrail": %d(pGraph->mxRail+1),
861 @ "baseUrl": "%R",
862 @ "dwellTimeout": %d(dwellTimeout),
863 @ "closeTimeout": %d(closeTimeout),
864 @ "bottomRowId": "btm-%d(iTableId)",
865 if( pGraph->nRow==0 ){
866 @ "rowinfo": null
867 }else{
868 @ "rowinfo": [
869

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button