Theming changes for base theme

This commit is contained in:
Knut Sveidqvist
2022-03-03 19:58:43 +01:00
parent 7e041dd921
commit b1fab6ffcd
5 changed files with 104 additions and 43 deletions

View File

@@ -7,9 +7,6 @@ let curBranch = 'master';
let direction = 'LR';
let seq = 0;
/**
*
*/
function getId() {
return random({ length: 7 });
}

View File

@@ -10,6 +10,8 @@ import { getConfig } from '../../config';
let allCommitsDict = {};
let branchNum;
const commitType = db.commitType;
let branchPos = {};
let commitPos = {};
let maxPos = 0;
@@ -111,13 +113,40 @@ const drawCommits = (svg, commits, modifyGraph) => {
// log.debug('drawCommits (commit branchPos)', commit, branchPos);
const y = branchPos[commit.branch].pos;
console.log(commit);
// Don't draw the commits now but calculate the positioning which is used by the branmch lines etc.
if (modifyGraph) {
const line = gBullets.append('circle');
line.attr('cx', pos + 10);
line.attr('cy', y);
line.attr('r', 10);
line.attr('class', 'commit commit-'+commit.type + ' ' + commit.id + ' commit' + branchPos[commit.branch].index);
let typeClass;
switch(commit.type) {
case commitType.NORMAL:
typeClass = 'commit-normal';
break;
case commitType.REVERSE:
typeClass = 'commit-reverse';
break;
case commitType.HIGHLIGHT:
typeClass = 'commit-highlight';
break;
case commitType.MERGE:
typeClass = 'commit-merge';
break;
default:
typeClass = 'commit-normal';
}
const circle = gBullets.append('circle');
circle.attr('cx', pos + 10);
circle.attr('cy', y);
circle.attr('r', commit.type === commitType.MERGE ? 9:10);
circle.attr('class', 'commit ' + commit.id + ' commit' + branchPos[commit.branch].index);
if(commit.type === commitType.MERGE) {
const circle2 = gBullets.append('circle');
circle2.attr('cx', pos + 10);
circle2.attr('cy', y);
circle2.attr('r', 6);
circle2.attr('class', 'commit '+typeClass + ' ' + commit.id + ' commit' + branchPos[commit.branch].index);
}
}
commitPos[commit.id] = {x: pos + 10, y: y};

View File

@@ -14,41 +14,47 @@ const getStyles = (options) =>
stroke-dasharray: 2;
}
.commit-labels { font-size: 10px; }
.commit0 { stroke: ${options.fillType0}; fill: ${options.fillType0}; }
.commit1 { stroke: ${options.fillType1}; fill: ${options.fillType1}; }
.commit2 { stroke: ${options.fillType2}; fill: ${options.fillType2}; }
.commit3 { stroke: ${options.fillType3}; fill: ${options.fillType3}; }
.commit4 { stroke: ${options.fillType4}; fill: ${options.fillType4}; }
.commit5 { stroke: ${options.fillType5}; fill: ${options.fillType5}; }
.commit6 { stroke: ${options.fillType6}; fill: ${options.fillType6}; }
.commit7 { stroke: ${options.fillType7}; fill: ${options.fillType7}; }
// .branch0 { stroke: ${options.fillType0}; }
// .branch1 { stroke: ${options.fillType1}; }
// .branch2 { stroke: ${options.fillType2}; }
// .branch3 { stroke: ${options.fillType3}; }
// .branch4 { stroke: ${options.fillType4}; }
// .branch5 { stroke: ${options.fillType5}; }
// .branch6 { stroke: ${options.fillType6}; }
// .branch7 { stroke: ${options.fillType7}; }
.label0 { fill: ${options.fillType0}; }
.label1 { fill: ${options.fillType1}; }
.label2 { fill: ${options.fillType2}; }
.label3 { fill: ${options.fillType3}; }
.label4 { fill: ${options.fillType4}; }
.label5 { fill: ${options.fillType5}; }
.label6 { fill: ${options.fillType6}; }
.label7 { fill: ${options.fillType7}; }
.commit0 { stroke: ${options.git0}; fill: ${options.git0}; }
.commit1 { stroke: ${options.git1}; fill: ${options.git1}; }
.commit2 { stroke: ${options.git2}; fill: ${options.git2}; }
.commit3 { stroke: ${options.git3}; fill: ${options.git3}; }
.commit4 { stroke: ${options.git4}; fill: ${options.git4}; }
.commit5 { stroke: ${options.git5}; fill: ${options.git5}; }
.commit6 { stroke: ${options.git6}; fill: ${options.git6}; }
.commit7 { stroke: ${options.git7}; fill: ${options.git7}; }
.commit-merge {
stroke: ${options.primaryColor};
fill: ${options.primaryColor};
}
// .branch0 { stroke: ${options.git0}; }
// .branch1 { stroke: ${options.git1}; }
// .branch2 { stroke: ${options.git2}; }
// .branch3 { stroke: ${options.git3}; }
// .branch4 { stroke: ${options.git4}; }
// .branch5 { stroke: ${options.git5}; }
// .branch6 { stroke: ${options.git6}; }
// .branch7 { stroke: ${options.git7}; }
.label0 { fill: ${options.git0}; }
.label1 { fill: ${options.git1}; }
.label2 { fill: ${options.git2}; }
.label3 { fill: ${options.git3}; }
.label4 { fill: ${options.git4}; }
.label5 { fill: ${options.git5}; }
.label6 { fill: ${options.git6}; }
.label7 { fill: ${options.git7}; }
// .arrow { stroke : ${options.tertiaryColor}; stroke-width: 8; stroke-linecap: round; }
.arrow { stroke-width: 8; stroke-linecap: round; fill: none}
.arrow0 { stroke: ${options.fillType0}; }
.arrow1 { stroke: ${options.fillType1}; }
.arrow2 { stroke: ${options.fillType2}; }
.arrow3 { stroke: ${options.fillType3}; }
.arrow4 { stroke: ${options.fillType4}; }
.arrow5 { stroke: ${options.fillType5}; }
.arrow6 { stroke: ${options.fillType6}; }
.arrow7 { stroke: ${options.fillType7}; }
.arrow0 { stroke: ${options.git0}; }
.arrow1 { stroke: ${options.git1}; }
.arrow2 { stroke: ${options.git2}; }
.arrow3 { stroke: ${options.git3}; }
.arrow4 { stroke: ${options.git4}; }
.arrow5 { stroke: ${options.git5}; }
.arrow6 { stroke: ${options.git6}; }
.arrow7 { stroke: ${options.git7}; }
#arrowhead { fill: #990099;}
.branchLabel { }
}