Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#3095 Added support for commit & tag label font size #3140

Merged
merged 1 commit into from Jun 28, 2022
Merged

#3095 Added support for commit & tag label font size #3140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
56 changes: 56 additions & 0 deletions docs/gitgraph.md
View file
Open in desktop
Expand Up @@ -819,6 +819,62 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel

```
See how the commit label color and background color are changed to the values specified in the theme variables.

### Customizing Commit Label Font Size
You can customize commit using the `commitLabelFontSize` theme variables for changing in the font soze of the commit label .

Example:
Now let's override the default values for the `commitLabelFontSize` variable:

```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'commitLabelColor': '#ff0000',
'commitLabelBackground': '#00ff00',
'commitLabelFontSize': '16px'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit

```
See how the commit label font size changed.

### Customizing Tag Label Font Size
You can customize commit using the `tagLabelFontSize` theme variables for changing in the font soze of the tag label .

Example:
Now let's override the default values for the `tagLabelFontSize` variable:

```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'commitLabelColor': '#ff0000',
'commitLabelBackground': '#00ff00',
'tagLabelFontSize': '16px'
} } }%%
gitGraph
commit
branch develop
commit tag:"v1.0.0"
commit
checkout main
commit type: HIGHLIGHT
commit
merge develop
commit
branch featureA
commit

```
See how the tag label font size changed.
### Customizing Tag colors
You can customize tag using the `tagLabelColor`,`tagLabelBackground` and `tagLabelBorder` theme variables for changes in the tag label color,tag label background color and tag label border respectively.
Example:
Expand Down
8 changes: 5 additions & 3 deletions src/diagrams/git/styles.js
View file
Open in desktop
Expand Up @@ -26,9 +26,11 @@ const getStyles = (options) =>
stroke: ${options.lineColor};
stroke-dasharray: 2;
}
.commit-label { font-size: 10px; fill: ${options.commitLabelColor};}
.commit-label-bkg { font-size: 10px; fill: ${options.commitLabelBackground}; opacity: 0.5; }
.tag-label { font-size: 10px; fill: ${options.tagLabelColor};}
.commit-label { font-size: ${options.commitLabelFontSize}; fill: ${options.commitLabelColor};}
.commit-label-bkg { font-size: ${options.commitLabelFontSize}; fill: ${
options.commitLabelBackground
}; opacity: 0.5; }
.tag-label { font-size: ${options.tagLabelFontSize}; fill: ${options.tagLabelColor};}
.tag-label-bkg { fill: ${options.tagLabelBackground}; stroke: ${options.tagLabelBorder}; }
.tag-hole { fill: ${options.textColor}; }

Expand Down
2 changes: 2 additions & 0 deletions src/themes/theme-base.js
View file
Open in desktop
Expand Up @@ -215,8 +215,10 @@ class Theme {
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
this.tagLabelFontSize = this.tagLabelFontSize || '10px';
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
}
calculate(overrides) {
if (typeof overrides !== 'object') {
Expand Down
2 changes: 2 additions & 0 deletions src/themes/theme-dark.js
View file
Open in desktop
Expand Up @@ -214,8 +214,10 @@ class Theme {
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
this.tagLabelFontSize = this.tagLabelFontSize || '10px';
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
}
calculate(overrides) {
if (typeof overrides !== 'object') {
Expand Down
2 changes: 2 additions & 0 deletions src/themes/theme-default.js
View file
Open in desktop
Expand Up @@ -253,8 +253,10 @@ class Theme {
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
this.tagLabelFontSize = this.tagLabelFontSize || '10px';
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
}
calculate(overrides) {
if (typeof overrides !== 'object') {
Expand Down
2 changes: 2 additions & 0 deletions src/themes/theme-forest.js
View file
Open in desktop
Expand Up @@ -215,8 +215,10 @@ class Theme {
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
this.tagLabelFontSize = this.tagLabelFontSize || '10px';
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
}
calculate(overrides) {
if (typeof overrides !== 'object') {
Expand Down
2 changes: 2 additions & 0 deletions src/themes/theme-neutral.js
View file
Open in desktop
Expand Up @@ -257,8 +257,10 @@ class Theme {
this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
this.tagLabelFontSize = this.tagLabelFontSize || '10px';
this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
this.commitLabelFontSize = this.commitLabelFontSize || '10px';
}
calculate(overrides) {
if (typeof overrides !== 'object') {
Expand Down