Fossil SCM

Reimplement timeline-circle-nodes and timeline-arrowheads skin options.

joel 2015-05-08 03:22 UTC graphcss
Commit aaa0e6d1497a42a3826dc8c0d023e8ce83e35bc3
--- skins/aht/details.txt
+++ skins/aht/details.txt
@@ -1,2 +1,4 @@
1
+timeline-arrowheads: 1
2
+timeline-circle-nodes: 0
13
timeline-color-graph-lines: 0
24
white-foreground: 0
35
--- skins/aht/details.txt
+++ skins/aht/details.txt
@@ -1,2 +1,4 @@
 
 
1 timeline-color-graph-lines: 0
2 white-foreground: 0
3
--- skins/aht/details.txt
+++ skins/aht/details.txt
@@ -1,2 +1,4 @@
1 timeline-arrowheads: 1
2 timeline-circle-nodes: 0
3 timeline-color-graph-lines: 0
4 white-foreground: 0
5
--- skins/black_and_white/details.txt
+++ skins/black_and_white/details.txt
@@ -1,2 +1,4 @@
1
+timeline-arrowheads: 1
2
+timeline-circle-nodes: 0
13
timeline-color-graph-lines: 0
24
white-foreground: 0
35
--- skins/black_and_white/details.txt
+++ skins/black_and_white/details.txt
@@ -1,2 +1,4 @@
 
 
1 timeline-color-graph-lines: 0
2 white-foreground: 0
3
--- skins/black_and_white/details.txt
+++ skins/black_and_white/details.txt
@@ -1,2 +1,4 @@
1 timeline-arrowheads: 1
2 timeline-circle-nodes: 0
3 timeline-color-graph-lines: 0
4 white-foreground: 0
5
--- skins/blitz/css.txt
+++ skins/blitz/css.txt
@@ -1102,49 +1102,10 @@
11021102
11031103
span.timelineComment {
11041104
padding: 0px 5px;
11051105
}
11061106
1107
-
1108
-/* Timeline graph
1109
-––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
1110
-/* commit node */
1111
-.tl-node {
1112
- width: 10px;
1113
- height: 10px;
1114
- border: 1px solid #000;
1115
- border-radius: 50%;
1116
- background: #fff;
1117
- cursor: pointer;
1118
-}
1119
-/* leaf commit marker */
1120
-.tl-node.leaf:after {
1121
- content: '';
1122
- position: absolute;
1123
- top: 3px;
1124
- left: 3px;
1125
- width: 4px;
1126
- height: 4px;
1127
- border-radius: 50%;
1128
- background: #000;
1129
-}
1130
-/* selected commit node marker */
1131
-.tl-node.sel:after {
1132
- content: '';
1133
- position: absolute;
1134
- top: 2px;
1135
- left: 2px;
1136
- width: 6px;
1137
- height: 6px;
1138
- border-radius: 50%;
1139
- background: red;
1140
-}
1141
-/* up arrow */
1142
-.tl-arrow.u {
1143
- display: none;
1144
-}
1145
-
11461107
11471108
/* Login/Loguot
11481109
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
11491110
table.login_out {
11501111
}
11511112
--- skins/blitz/css.txt
+++ skins/blitz/css.txt
@@ -1102,49 +1102,10 @@
1102
1103 span.timelineComment {
1104 padding: 0px 5px;
1105 }
1106
1107
1108 /* Timeline graph
1109 ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
1110 /* commit node */
1111 .tl-node {
1112 width: 10px;
1113 height: 10px;
1114 border: 1px solid #000;
1115 border-radius: 50%;
1116 background: #fff;
1117 cursor: pointer;
1118 }
1119 /* leaf commit marker */
1120 .tl-node.leaf:after {
1121 content: '';
1122 position: absolute;
1123 top: 3px;
1124 left: 3px;
1125 width: 4px;
1126 height: 4px;
1127 border-radius: 50%;
1128 background: #000;
1129 }
1130 /* selected commit node marker */
1131 .tl-node.sel:after {
1132 content: '';
1133 position: absolute;
1134 top: 2px;
1135 left: 2px;
1136 width: 6px;
1137 height: 6px;
1138 border-radius: 50%;
1139 background: red;
1140 }
1141 /* up arrow */
1142 .tl-arrow.u {
1143 display: none;
1144 }
1145
1146
1147 /* Login/Loguot
1148 ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
1149 table.login_out {
1150 }
1151
--- skins/blitz/css.txt
+++ skins/blitz/css.txt
@@ -1102,49 +1102,10 @@
1102
1103 span.timelineComment {
1104 padding: 0px 5px;
1105 }
1106
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1107
1108 /* Login/Loguot
1109 ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
1110 table.login_out {
1111 }
1112
--- skins/blitz/details.txt
+++ skins/blitz/details.txt
@@ -1,2 +1,4 @@
1
+timeline-arrowheads: 0
2
+timeline-circle-nodes: 1
13
timeline-color-graph-lines: 1
24
white-foreground: 0
35
--- skins/blitz/details.txt
+++ skins/blitz/details.txt
@@ -1,2 +1,4 @@
 
 
1 timeline-color-graph-lines: 1
2 white-foreground: 0
3
--- skins/blitz/details.txt
+++ skins/blitz/details.txt
@@ -1,2 +1,4 @@
1 timeline-arrowheads: 0
2 timeline-circle-nodes: 1
3 timeline-color-graph-lines: 1
4 white-foreground: 0
5
--- skins/blitz_no_logo/css.txt
+++ skins/blitz_no_logo/css.txt
@@ -1102,49 +1102,10 @@
11021102
11031103
span.timelineComment {
11041104
padding: 0px 5px;
11051105
}
11061106
1107
-
1108
-/* Timeline graph
1109
-––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
1110
-/* commit node */
1111
-.tl-node {
1112
- width: 10px;
1113
- height: 10px;
1114
- border: 1px solid #000;
1115
- border-radius: 50%;
1116
- background: #fff;
1117
- cursor: pointer;
1118
-}
1119
-/* leaf commit marker */
1120
-.tl-node.leaf:after {
1121
- content: '';
1122
- position: absolute;
1123
- top: 3px;
1124
- left: 3px;
1125
- width: 4px;
1126
- height: 4px;
1127
- border-radius: 50%;
1128
- background: #000;
1129
-}
1130
-/* selected commit node marker */
1131
-.tl-node.sel:after {
1132
- content: '';
1133
- position: absolute;
1134
- top: 2px;
1135
- left: 2px;
1136
- width: 6px;
1137
- height: 6px;
1138
- border-radius: 50%;
1139
- background: red;
1140
-}
1141
-/* up arrow */
1142
-.tl-arrow.u {
1143
- display: none;
1144
-}
1145
-
11461107
11471108
/* Login/Loguot
11481109
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
11491110
table.login_out {
11501111
}
11511112
--- skins/blitz_no_logo/css.txt
+++ skins/blitz_no_logo/css.txt
@@ -1102,49 +1102,10 @@
1102
1103 span.timelineComment {
1104 padding: 0px 5px;
1105 }
1106
1107
1108 /* Timeline graph
1109 ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
1110 /* commit node */
1111 .tl-node {
1112 width: 10px;
1113 height: 10px;
1114 border: 1px solid #000;
1115 border-radius: 50%;
1116 background: #fff;
1117 cursor: pointer;
1118 }
1119 /* leaf commit marker */
1120 .tl-node.leaf:after {
1121 content: '';
1122 position: absolute;
1123 top: 3px;
1124 left: 3px;
1125 width: 4px;
1126 height: 4px;
1127 border-radius: 50%;
1128 background: #000;
1129 }
1130 /* selected commit node marker */
1131 .tl-node.sel:after {
1132 content: '';
1133 position: absolute;
1134 top: 2px;
1135 left: 2px;
1136 width: 6px;
1137 height: 6px;
1138 border-radius: 50%;
1139 background: red;
1140 }
1141 /* up arrow */
1142 .tl-arrow.u {
1143 display: none;
1144 }
1145
1146
1147 /* Login/Loguot
1148 ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
1149 table.login_out {
1150 }
1151
--- skins/blitz_no_logo/css.txt
+++ skins/blitz_no_logo/css.txt
@@ -1102,49 +1102,10 @@
1102
1103 span.timelineComment {
1104 padding: 0px 5px;
1105 }
1106
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1107
1108 /* Login/Loguot
1109 ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
1110 table.login_out {
1111 }
1112
--- skins/blitz_no_logo/details.txt
+++ skins/blitz_no_logo/details.txt
@@ -1,2 +1,4 @@
1
+timeline-arrowheads: 0
2
+timeline-circle-nodes: 1
13
timeline-color-graph-lines: 1
24
white-foreground: 0
35
--- skins/blitz_no_logo/details.txt
+++ skins/blitz_no_logo/details.txt
@@ -1,2 +1,4 @@
 
 
1 timeline-color-graph-lines: 1
2 white-foreground: 0
3
--- skins/blitz_no_logo/details.txt
+++ skins/blitz_no_logo/details.txt
@@ -1,2 +1,4 @@
1 timeline-arrowheads: 0
2 timeline-circle-nodes: 1
3 timeline-color-graph-lines: 1
4 white-foreground: 0
5
--- skins/default/details.txt
+++ skins/default/details.txt
@@ -1,2 +1,4 @@
1
+timeline-arrowheads: 1
2
+timeline-circle-nodes: 0
13
timeline-color-graph-lines: 0
24
white-foreground: 0
35
--- skins/default/details.txt
+++ skins/default/details.txt
@@ -1,2 +1,4 @@
 
 
1 timeline-color-graph-lines: 0
2 white-foreground: 0
3
--- skins/default/details.txt
+++ skins/default/details.txt
@@ -1,2 +1,4 @@
1 timeline-arrowheads: 1
2 timeline-circle-nodes: 0
3 timeline-color-graph-lines: 0
4 white-foreground: 0
5
--- skins/eagle/details.txt
+++ skins/eagle/details.txt
@@ -1,2 +1,4 @@
1
+timeline-arrowheads: 1
2
+timeline-circle-nodes: 0
13
timeline-color-graph-lines: 0
24
white-foreground: 1
35
--- skins/eagle/details.txt
+++ skins/eagle/details.txt
@@ -1,2 +1,4 @@
 
 
1 timeline-color-graph-lines: 0
2 white-foreground: 1
3
--- skins/eagle/details.txt
+++ skins/eagle/details.txt
@@ -1,2 +1,4 @@
1 timeline-arrowheads: 1
2 timeline-circle-nodes: 0
3 timeline-color-graph-lines: 0
4 white-foreground: 1
5
--- skins/enhanced1/details.txt
+++ skins/enhanced1/details.txt
@@ -1,2 +1,4 @@
1
+timeline-arrowheads: 1
2
+timeline-circle-nodes: 0
13
timeline-color-graph-lines: 0
24
white-foreground: 0
35
--- skins/enhanced1/details.txt
+++ skins/enhanced1/details.txt
@@ -1,2 +1,4 @@
 
 
1 timeline-color-graph-lines: 0
2 white-foreground: 0
3
--- skins/enhanced1/details.txt
+++ skins/enhanced1/details.txt
@@ -1,2 +1,4 @@
1 timeline-arrowheads: 1
2 timeline-circle-nodes: 0
3 timeline-color-graph-lines: 0
4 white-foreground: 0
5
--- skins/khaki/details.txt
+++ skins/khaki/details.txt
@@ -1,2 +1,4 @@
1
+timeline-arrowheads: 1
2
+timeline-circle-nodes: 0
13
timeline-color-graph-lines: 0
24
white-foreground: 0
35
--- skins/khaki/details.txt
+++ skins/khaki/details.txt
@@ -1,2 +1,4 @@
 
 
1 timeline-color-graph-lines: 0
2 white-foreground: 0
3
--- skins/khaki/details.txt
+++ skins/khaki/details.txt
@@ -1,2 +1,4 @@
1 timeline-arrowheads: 1
2 timeline-circle-nodes: 0
3 timeline-color-graph-lines: 0
4 white-foreground: 0
5
--- skins/original/details.txt
+++ skins/original/details.txt
@@ -1,2 +1,4 @@
1
+timeline-arrowheads: 1
2
+timeline-circle-nodes: 0
13
timeline-color-graph-lines: 0
24
white-foreground: 0
35
--- skins/original/details.txt
+++ skins/original/details.txt
@@ -1,2 +1,4 @@
 
 
1 timeline-color-graph-lines: 0
2 white-foreground: 0
3
--- skins/original/details.txt
+++ skins/original/details.txt
@@ -1,2 +1,4 @@
1 timeline-arrowheads: 1
2 timeline-circle-nodes: 0
3 timeline-color-graph-lines: 0
4 white-foreground: 0
5
--- skins/plain_gray/details.txt
+++ skins/plain_gray/details.txt
@@ -1,2 +1,4 @@
1
+timeline-arrowheads: 1
2
+timeline-circle-nodes: 0
13
timeline-color-graph-lines: 0
24
white-foreground: 0
35
--- skins/plain_gray/details.txt
+++ skins/plain_gray/details.txt
@@ -1,2 +1,4 @@
 
 
1 timeline-color-graph-lines: 0
2 white-foreground: 0
3
--- skins/plain_gray/details.txt
+++ skins/plain_gray/details.txt
@@ -1,2 +1,4 @@
1 timeline-arrowheads: 1
2 timeline-circle-nodes: 0
3 timeline-color-graph-lines: 0
4 white-foreground: 0
5
--- skins/rounded1/details.txt
+++ skins/rounded1/details.txt
@@ -1,2 +1,4 @@
1
+timeline-arrowheads: 1
2
+timeline-circle-nodes: 0
13
timeline-color-graph-lines: 0
24
white-foreground: 0
35
--- skins/rounded1/details.txt
+++ skins/rounded1/details.txt
@@ -1,2 +1,4 @@
 
 
1 timeline-color-graph-lines: 0
2 white-foreground: 0
3
--- skins/rounded1/details.txt
+++ skins/rounded1/details.txt
@@ -1,2 +1,4 @@
1 timeline-arrowheads: 1
2 timeline-circle-nodes: 0
3 timeline-color-graph-lines: 0
4 white-foreground: 0
5
--- skins/xekri/details.txt
+++ skins/xekri/details.txt
@@ -1,2 +1,4 @@
1
+timeline-arrowheads: 1
2
+timeline-circle-nodes: 0
13
timeline-color-graph-lines: 0
24
white-foreground: 0
35
--- skins/xekri/details.txt
+++ skins/xekri/details.txt
@@ -1,2 +1,4 @@
 
 
1 timeline-color-graph-lines: 0
2 white-foreground: 0
3
--- skins/xekri/details.txt
+++ skins/xekri/details.txt
@@ -1,2 +1,4 @@
1 timeline-arrowheads: 1
2 timeline-circle-nodes: 0
3 timeline-color-graph-lines: 0
4 white-foreground: 0
5
--- src/skins.c
+++ src/skins.c
@@ -75,10 +75,12 @@
7575
*/
7676
static struct SkinDetail {
7777
const char *zName; /* Name of the detail */
7878
char *zValue; /* Value of the detail */
7979
} aSkinDetail[] = {
80
+ { "timeline-arrowheads", "1" },
81
+ { "timeline-circle-nodes", "0" },
8082
{ "timeline-color-graph-lines", "0" },
8183
{ "white-foreground", "0" },
8284
};
8385
8486
/*
8587
--- src/skins.c
+++ src/skins.c
@@ -75,10 +75,12 @@
75 */
76 static struct SkinDetail {
77 const char *zName; /* Name of the detail */
78 char *zValue; /* Value of the detail */
79 } aSkinDetail[] = {
 
 
80 { "timeline-color-graph-lines", "0" },
81 { "white-foreground", "0" },
82 };
83
84 /*
85
--- src/skins.c
+++ src/skins.c
@@ -75,10 +75,12 @@
75 */
76 static struct SkinDetail {
77 const char *zName; /* Name of the detail */
78 char *zValue; /* Value of the detail */
79 } aSkinDetail[] = {
80 { "timeline-arrowheads", "1" },
81 { "timeline-circle-nodes", "0" },
82 { "timeline-color-graph-lines", "0" },
83 { "white-foreground", "0" },
84 };
85
86 /*
87
--- src/timeline.c
+++ src/timeline.c
@@ -636,17 +636,33 @@
636636
if( pGraph && pGraph->nErr==0 && pGraph->nRow>0 ){
637637
GraphRow *pRow;
638638
int i;
639639
char cSep;
640640
int iRailPitch; /* Pixels between consecutive rails */
641
+ int showArrowheads; /* True to draw arrowheads. False to omit. */
642
+ int circleNodes; /* True for circle nodes. False for square nodes */
641643
int colorGraph; /* Use colors for graph lines */
642644
643645
iRailPitch = atoi(PD("railpitch","0"));
646
+ showArrowheads = skin_detail_boolean("timeline-arrowheads");
647
+ circleNodes = skin_detail_boolean("timeline-circle-nodes");
644648
colorGraph = skin_detail_boolean("timeline-color-graph-lines");
645649
646650
@ <script>(function(){
647651
@ "use strict";
652
+ @ var css = "";
653
+ if( circleNodes ){
654
+ @ css += ".tl-node, .tl-node:after { border-radius: 50%%; }";
655
+ }
656
+ if( !showArrowheads ){
657
+ @ css += ".tl-arrow.u { display: none; }";
658
+ }
659
+ @ if( css!=="" ){
660
+ @ var style = document.createElement("style");
661
+ @ style.textContent = css;
662
+ @ document.querySelector("head").appendChild(style);
663
+ @ }
648664
/* the rowinfo[] array contains all the information needed to generate
649665
** the graph. Each entry contains information for a single row:
650666
**
651667
** id: The id of the <div> element for the row. This is an integer.
652668
** to get an actual id, prepend "m" to the integer. The top node
653669
--- src/timeline.c
+++ src/timeline.c
@@ -636,17 +636,33 @@
636 if( pGraph && pGraph->nErr==0 && pGraph->nRow>0 ){
637 GraphRow *pRow;
638 int i;
639 char cSep;
640 int iRailPitch; /* Pixels between consecutive rails */
 
 
641 int colorGraph; /* Use colors for graph lines */
642
643 iRailPitch = atoi(PD("railpitch","0"));
 
 
644 colorGraph = skin_detail_boolean("timeline-color-graph-lines");
645
646 @ <script>(function(){
647 @ "use strict";
 
 
 
 
 
 
 
 
 
 
 
 
648 /* the rowinfo[] array contains all the information needed to generate
649 ** the graph. Each entry contains information for a single row:
650 **
651 ** id: The id of the <div> element for the row. This is an integer.
652 ** to get an actual id, prepend "m" to the integer. The top node
653
--- src/timeline.c
+++ src/timeline.c
@@ -636,17 +636,33 @@
636 if( pGraph && pGraph->nErr==0 && pGraph->nRow>0 ){
637 GraphRow *pRow;
638 int i;
639 char cSep;
640 int iRailPitch; /* Pixels between consecutive rails */
641 int showArrowheads; /* True to draw arrowheads. False to omit. */
642 int circleNodes; /* True for circle nodes. False for square nodes */
643 int colorGraph; /* Use colors for graph lines */
644
645 iRailPitch = atoi(PD("railpitch","0"));
646 showArrowheads = skin_detail_boolean("timeline-arrowheads");
647 circleNodes = skin_detail_boolean("timeline-circle-nodes");
648 colorGraph = skin_detail_boolean("timeline-color-graph-lines");
649
650 @ <script>(function(){
651 @ "use strict";
652 @ var css = "";
653 if( circleNodes ){
654 @ css += ".tl-node, .tl-node:after { border-radius: 50%%; }";
655 }
656 if( !showArrowheads ){
657 @ css += ".tl-arrow.u { display: none; }";
658 }
659 @ if( css!=="" ){
660 @ var style = document.createElement("style");
661 @ style.textContent = css;
662 @ document.querySelector("head").appendChild(style);
663 @ }
664 /* the rowinfo[] array contains all the information needed to generate
665 ** the graph. Each entry contains information for a single row:
666 **
667 ** id: The id of the <div> element for the row. This is an integer.
668 ** to get an actual id, prepend "m" to the integer. The top node
669

Keyboard Shortcuts

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