Fossil

Check-in [aaa0e6d1]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Reimplement timeline-circle-nodes and timeline-arrowheads skin options.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | graphcss
Files: files | file ages | folders
SHA1: aaa0e6d1497a42a3826dc8c0d023e8ce83e35bc3
User & Date: joel 2015-05-08 03:22:26
Context
2015-05-09
12:42
Improvements to graph rendering to make it much more configurable using CSS. check-in: ca869aab user: drh tags: trunk
2015-05-08
03:22
Reimplement timeline-circle-nodes and timeline-arrowheads skin options. Closed-Leaf check-in: aaa0e6d1 user: joel tags: graphcss
2015-05-06
21:28
Use round() instead of ceil() on element dimension calculations. check-in: 05045a47 user: joel tags: graphcss
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to skins/aht/details.txt.



1
2


timeline-color-graph-lines: 0
white-foreground:           0
>
>


1
2
3
4
timeline-arrowheads:        1
timeline-circle-nodes:      0
timeline-color-graph-lines: 0
white-foreground:           0

Changes to skins/black_and_white/details.txt.



1
2


timeline-color-graph-lines: 0
white-foreground:           0
>
>


1
2
3
4
timeline-arrowheads:        1
timeline-circle-nodes:      0
timeline-color-graph-lines: 0
white-foreground:           0

Changes to skins/blitz/css.txt.

1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
  text-transform: lowercase;
}

span.timelineComment {
  padding: 0px 5px;
}


/* Timeline graph
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* commit node */
.tl-node {
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
/* leaf commit marker */
.tl-node.leaf:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #000;
}
/* selected commit node marker */
.tl-node.sel:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: red;
}
/* up arrow */
.tl-arrow.u {
  display: none;
}


/* Login/Loguot
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
table.login_out {
}

table.login_out .login_out_label {







<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<







1100
1101
1102
1103
1104
1105
1106







































1107
1108
1109
1110
1111
1112
1113
  text-transform: lowercase;
}

span.timelineComment {
  padding: 0px 5px;
}









































/* Login/Loguot
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
table.login_out {
}

table.login_out .login_out_label {

Changes to skins/blitz/details.txt.



1
2


timeline-color-graph-lines: 1
white-foreground:           0
>
>


1
2
3
4
timeline-arrowheads:        0
timeline-circle-nodes:      1
timeline-color-graph-lines: 1
white-foreground:           0

Changes to skins/blitz_no_logo/css.txt.

1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
  text-transform: lowercase;
}

span.timelineComment {
  padding: 0px 5px;
}


/* Timeline graph
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* commit node */
.tl-node {
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
/* leaf commit marker */
.tl-node.leaf:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #000;
}
/* selected commit node marker */
.tl-node.sel:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: red;
}
/* up arrow */
.tl-arrow.u {
  display: none;
}


/* Login/Loguot
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
table.login_out {
}

table.login_out .login_out_label {







<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<







1100
1101
1102
1103
1104
1105
1106







































1107
1108
1109
1110
1111
1112
1113
  text-transform: lowercase;
}

span.timelineComment {
  padding: 0px 5px;
}









































/* Login/Loguot
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
table.login_out {
}

table.login_out .login_out_label {

Changes to skins/blitz_no_logo/details.txt.



1
2


timeline-color-graph-lines: 1
white-foreground:           0
>
>


1
2
3
4
timeline-arrowheads:        0
timeline-circle-nodes:      1
timeline-color-graph-lines: 1
white-foreground:           0

Changes to skins/default/details.txt.



1
2


timeline-color-graph-lines: 0
white-foreground:           0
>
>


1
2
3
4
timeline-arrowheads:        1
timeline-circle-nodes:      0
timeline-color-graph-lines: 0
white-foreground:           0

Changes to skins/eagle/details.txt.



1
2


timeline-color-graph-lines: 0
white-foreground:           1
>
>


1
2
3
4
timeline-arrowheads:        1
timeline-circle-nodes:      0
timeline-color-graph-lines: 0
white-foreground:           1

Changes to skins/enhanced1/details.txt.



1
2


timeline-color-graph-lines: 0
white-foreground:           0
>
>


1
2
3
4
timeline-arrowheads:        1
timeline-circle-nodes:      0
timeline-color-graph-lines: 0
white-foreground:           0

Changes to skins/khaki/details.txt.



1
2


timeline-color-graph-lines: 0
white-foreground:           0
>
>


1
2
3
4
timeline-arrowheads:        1
timeline-circle-nodes:      0
timeline-color-graph-lines: 0
white-foreground:           0

Changes to skins/original/details.txt.



1
2


timeline-color-graph-lines: 0
white-foreground:           0
>
>


1
2
3
4
timeline-arrowheads:        1
timeline-circle-nodes:      0
timeline-color-graph-lines: 0
white-foreground:           0

Changes to skins/plain_gray/details.txt.



1
2


timeline-color-graph-lines: 0
white-foreground:           0
>
>


1
2
3
4
timeline-arrowheads:        1
timeline-circle-nodes:      0
timeline-color-graph-lines: 0
white-foreground:           0

Changes to skins/rounded1/details.txt.



1
2


timeline-color-graph-lines: 0
white-foreground:           0
>
>


1
2
3
4
timeline-arrowheads:        1
timeline-circle-nodes:      0
timeline-color-graph-lines: 0
white-foreground:           0

Changes to skins/xekri/details.txt.



1
2


timeline-color-graph-lines: 0
white-foreground:           0
>
>


1
2
3
4
timeline-arrowheads:        1
timeline-circle-nodes:      0
timeline-color-graph-lines: 0
white-foreground:           0

Changes to src/skins.c.

73
74
75
76
77
78
79


80
81
82
83
84
85
86
**
** The following array holds the value for all known skin details.
*/
static struct SkinDetail {
  const char *zName;      /* Name of the detail */
  char *zValue;           /* Value of the detail */
} aSkinDetail[] = {


  { "timeline-color-graph-lines", "0"  },
  { "white-foreground",           "0"  },
};

/*
** Invoke this routine to set the alternative skin.  Return NULL if the
** alternative was successfully installed.  Return a string listing all







>
>







73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
**
** The following array holds the value for all known skin details.
*/
static struct SkinDetail {
  const char *zName;      /* Name of the detail */
  char *zValue;           /* Value of the detail */
} aSkinDetail[] = {
  { "timeline-arrowheads",        "1"  },
  { "timeline-circle-nodes",      "0"  },
  { "timeline-color-graph-lines", "0"  },
  { "white-foreground",           "0"  },
};

/*
** Invoke this routine to set the alternative skin.  Return NULL if the
** alternative was successfully installed.  Return a string listing all

Changes to src/timeline.c.

634
635
636
637
638
639
640


641
642
643


644
645
646
647












648
649
650
651
652
653
654
  int fileDiff              /* True for file diff.  False for check-in diff */
){
  if( pGraph && pGraph->nErr==0 && pGraph->nRow>0 ){
    GraphRow *pRow;
    int i;
    char cSep;
    int iRailPitch;      /* Pixels between consecutive rails */


    int colorGraph;      /* Use colors for graph lines */

    iRailPitch = atoi(PD("railpitch","0"));


    colorGraph = skin_detail_boolean("timeline-color-graph-lines");

    @ <script>(function(){
    @ "use strict";












    /* the rowinfo[] array contains all the information needed to generate
    ** the graph.  Each entry contains information for a single row:
    **
    **   id:  The id of the <div> element for the row. This is an integer.
    **        to get an actual id, prepend "m" to the integer.  The top node
    **        is 1 and numbers increase moving down the timeline.
    **   bg:  The background color for this row







>
>



>
>




>
>
>
>
>
>
>
>
>
>
>
>







634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
  int fileDiff              /* True for file diff.  False for check-in diff */
){
  if( pGraph && pGraph->nErr==0 && pGraph->nRow>0 ){
    GraphRow *pRow;
    int i;
    char cSep;
    int iRailPitch;      /* Pixels between consecutive rails */
    int showArrowheads;  /* True to draw arrowheads.  False to omit. */
    int circleNodes;     /* True for circle nodes.  False for square nodes */
    int colorGraph;      /* Use colors for graph lines */

    iRailPitch = atoi(PD("railpitch","0"));
    showArrowheads = skin_detail_boolean("timeline-arrowheads");
    circleNodes = skin_detail_boolean("timeline-circle-nodes");
    colorGraph = skin_detail_boolean("timeline-color-graph-lines");

    @ <script>(function(){
    @ "use strict";
    @ var css = "";
    if( circleNodes ){
      @ css += ".tl-node, .tl-node:after { border-radius: 50%%; }";
    }
    if( !showArrowheads ){
      @ css += ".tl-arrow.u { display: none; }";
    }
    @ if( css!=="" ){
    @   var style = document.createElement("style");
    @   style.textContent = css;
    @   document.querySelector("head").appendChild(style);
    @ }
    /* the rowinfo[] array contains all the information needed to generate
    ** the graph.  Each entry contains information for a single row:
    **
    **   id:  The id of the <div> element for the row. This is an integer.
    **        to get an actual id, prepend "m" to the integer.  The top node
    **        is 1 and numbers increase moving down the timeline.
    **   bg:  The background color for this row